프레임워크 선택에 새 변수가 생겼다
프론트엔드 프레임워크를 고를 때 보통 뭘 따지나요? 성능, 번들 크기, 생태계, 팀원 숙련도, 채용 시장 정도겠죠. 그런데 요즘 여기에 하나가 더 붙었어요. 바로 "AI가 이걸 얼마나 잘 다루느냐"예요.
웹 성능과 웹 표준에 관한 글을 꾸준히 써온 개발자 Nolan Lawson이 'JavaScript 프레임워크의 AI 비용'이라는 주제를 꺼냈어요. 그는 오래전부터 프레임워크가 가져오는 숨은 비용(번들 크기, 런타임 성능, 복잡도)을 짚어왔는데, 이번엔 AI라는 새로운 축을 들고 나온 거죠. 이 주제를 계기로, AI 시대에 프레임워크가 어떤 비용을 만드는지 하나씩 풀어볼게요.
비용 1: 학습 데이터의 쏠림
LLM(대규모 언어 모델)은 인터넷에 있는 코드를 보고 배워요. 그러니 인터넷에 코드가 많은 기술일수록 AI가 더 잘 다루죠. 지금 프론트엔드에서 압도적으로 코드가 많은 건 React예요.
이게 무슨 뜻이냐면, AI 코딩 도구에 "할 일 목록 앱 만들어줘"라고 하면 따로 말하지 않는 한 React 코드가 나올 가능성이 높아요. 반대로 Svelte, Solid, Qwik 같은 상대적으로 작은 프레임워크는 AI가 덜 정확하게 다루고요. 그러면 개발자들은 "AI가 잘 짜주니까" React를 고르고, React 코드가 더 늘어나고, 다음 세대 AI는 React를 더 잘하게 되는 부익부 빈익빈의 순환이 생길 수 있어요. 새 프레임워크가 아무리 좋은 아이디어를 들고 와도 진입 장벽이 점점 높아지는 거예요.
비용 2: 빠른 버전 변화와 '오래된 지식'
AI 모델에는 학습 시점(knowledge cutoff)이 있어요. 그 이후에 바뀐 API는 모르거나, 옛날 방식과 새 방식을 섞어서 내놓기도 하죠.
프론트엔드 생태계는 변화가 정말 빨라요. Next.js의 Pages Router에서 App Router로의 전환, React 서버 컴포넌트, Svelte 5의 룬(runes) 문법처럼 같은 프레임워크 안에서도 코드 작성 방식이 크게 바뀌는 일이 잦거든요. AI가 Svelte 4 문법으로 코드를 짜거나, 클라이언트에서만 쓸 수 있는 훅을 서버 컴포넌트에 넣는 실수를 겪어본 분 꽤 많을 거예요. 프레임워크가 감춰주는 '마법'이 많을수록 이런 혼란도 커져요.
비용 3: 토큰과 컨텍스트
AI 에이전트가 코드를 이해하려면 파일을 읽어야 하고, 읽는 만큼 토큰을 써요. 토큰은 AI가 텍스트를 처리하는 단위인데, 곧 돈이고 AI가 한 번에 기억할 수 있는 양의 한계이기도 해요. 프레임워크가 요구하는 보일러플레이트(매번 반복되는 기본 코드), 복잡한 설정 파일, 여러 겹의 빌드 도구는 AI가 읽어야 할 양을 늘려요. 에러가 났을 때 스택 트레이스가 프레임워크 내부 코드로 가득하면 원인을 찾기도 더 어려워지고요.
반대로 바닐라 JavaScript나 웹 표준(Web Components, 표준 DOM API)은 수십 년치 문서와 예제가 쌓여 있고 잘 바뀌지 않아요. AI 입장에서는 오히려 가장 안정적인 기반일 수 있다는 거죠.
업계 맥락: 'AI 친화성'이 경쟁력이 되다
이미 여러 프로젝트가 이 문제에 대응하고 있어요. 문서를 AI가 읽기 좋게 정리한 llms.txt 파일을 제공하는 프레임워크와 라이브러리가 늘었고, 공식 문서를 AI 도구에 바로 연결할 수 있게 MCP 서버를 내놓는 곳도 생겼어요. AI용 코딩 규칙이나 가이드를 공식 배포하는 프레임워크도 있고요.
이건 프레임워크 경쟁의 축이 바뀌고 있다는 신호예요. 예전엔 개발자 경험(DX)이 핵심이었다면, 이제는 'AI가 다루기 좋은가'도 중요한 경쟁 요소가 됐어요. 다만 이 흐름이 기존 강자에게 유리하게 기울어 있다는 점에서, 웹 생태계의 다양성이 줄어들 수 있다는 걱정도 함께 나와요.
한국 개발자에게 주는 시사점
실무에서 생각해볼 만한 포인트를 정리해볼게요.
- 기술 선택: AI 코딩 도구를 적극적으로 쓰는 팀이라면 AI가 잘 아는 스택이 생산성에 유리한 건 현실이에요. 그래도 그것만으로 결정하진 마세요. 성능 요구사항, 팀 역량, 유지보수 기간이 여전히 더 중요해요.
- 버전을 명시하기: "React 19, Next.js App Router 기준으로"처럼 버전과 방식을 구체적으로 알려주면 오래된 코드가 섞이는 걸 꽤 줄일 수 있어요.
- 프로젝트 규칙 파일: CLAUDE.md나 .cursorrules 같은 파일에 팀 컨벤션과 쓰는 버전을 적어두면 AI가 훨씬 덜 헤매요.
- 기본기의 가치: 프레임워크가 감춰주는 웹 표준을 이해해야 AI가 짠 코드의 오류도 알아챌 수 있어요. AI 시대일수록 HTML, CSS, DOM 기본기가 더 빛나요.
마무리
한 줄 정리: AI 시대의 프레임워크 비용은 번들 크기만이 아니라, AI가 그 프레임워크를 얼마나 정확하게 다룰 수 있느냐까지 포함한다.
여러분은 AI 코딩 도구 때문에 기술 스택 선택이 달라진 적 있나요? 이 흐름이 결국 React 독주를 더 굳힐 거라고 보시나요, 아니면 새로운 프레임워크가 돌파구를 찾을 거라고 보시나요?
🔗 출처: Hacker News