AI 코딩 비용, 프레임워크 따라 차이…놀런 로슨, 12종 비교 실험 공개

AI에게 같은 앱을 만들게 해도 선택한 웹 프레임워크에 따라 개발 비용과 결과물의 무게가 달라질 수 있다는 비교 실험이 나왔다. 개발자 놀런 로슨은 10월 28일 자신의 블로그에 실험 방법과 결과를 공개했다. 작성자 원문과 GitHub에 공개한 실행 기록에 따르면 비교 대상은 Next.js, Nuxt, Astro, SvelteKit, Angular, Hono+htmx 등 12개 기술 조합이다.

실험에는 포켓몬 정보를 검색하고 필터링하는 웹 앱이 쓰였다. 로슨은 Claude Code에서 Opus 5.5를 높은 추론 노력 설정으로 실행하고, 같은 요구사항과 적합성 테스트를 제공했다. 각 에이전트는 별도 컨테이너에서 작업했으며, 프레임워크가 공식적으로 권장하는 AI 도구가 있으면 미리 설치했다. 다만 도구를 실제로 호출할지는 에이전트가 결정했다.

프레임워크마다 다섯 차례 구현을 시도한 결과, Claude Code가 보고한 API 가격 기준 비용의 중앙값은 Hono+htmx가 2.67달러, Astro가 2.76달러, Next.js가 3.14달러, SvelteKit이 4.28달러였다. 이는 로슨이 실제로 지불한 건별 요금은 아니다. 그는 월정액 Max 요금제를 이용했으며, 비교에는 도구가 표시한 API 환산 비용을 사용했다고 설명했다. 구현 시간 중앙값은 Astro가 8.2분, Next.js가 10.9분이었다.

개발 비용이 곧 사용자 경험을 뜻하지는 않았다. 모바일 설정의 Lighthouse로 측정한 홈페이지 성능 점수는 대체로 높았지만, 브라우저에 전송된 자바스크립트 용량은 차이가 뚜렷했다. 중앙값 기준 Astro는 반올림해 0KiB, Hono+htmx는 18KiB, Next.js는 142KiB였다. 이 수치는 각 프레임워크의 고정된 크기가 아니라, 이번에 에이전트가 구현한 앱을 측정한 결과다.

반복 실행의 편차도 컸다. Hono+htmx의 비용은 2.23~3.19달러, Next.js는 2.58~4.13달러 범위로 나타나 서로 겹쳤다. 로슨은 모델의 확률적 동작과 문서·도구 사용 방식이 결과에 영향을 준다고 봤다. 예컨대 SvelteKit 에이전트는 매 실행에서 새 버전의 마이그레이션 문서를 읽었지만, Nuxt 에이전트는 준비된 MCP 서버를 사용하지 않았다.

평가 범위에도 한계가 있다. 대상은 상호작용이 적은 콘텐츠 중심 앱이며, 페이지 로딩 지표는 HTML을 빠르게 표시하는 다중 페이지 방식에 유리할 수 있다. Angular는 다섯 번 중 두 번이 요구한 배포 환경에서 동작하지 않아 완성 앱 평가에는 세 결과만 쓰였다. 이 실험만으로 대규모 서비스의 생산성이나 특정 프레임워크의 전반적인 우위를 판단할 수 없는 이유다.

로슨은 프레임워크 선택을 직감이 아니라 측정으로 검토할 수 있음을 보이는 것이 목적이라고 밝혔다. 실행 도구와 결과 저장소를 함께 공개해 다른 앱, 모델, 도구 설정으로 비교를 확장할 수 있도록 했다. AI 코딩을 도입하는 개발팀에도 구현 비용과 완성 앱의 품질을 나눠 확인해야 한다는 참고 사례다.

출처: Nolan Lawson, The AI cost of JavaScript frameworks (https://nolanlawson.com/2026/10/28/the-ai-cost-of-javascript-frameworks/); agent-framework-benchmark (https://github.com/nolanlawson/agent-framework-benchmark); agent-framework-benchmark-results (https://github.com/nolanlawson/agent-framework-benchmark-results), 공개 결과 보고서 (https://raw.githubusercontent.com/nolanlawson/agent-framework-benchmark-results/master/20261026/report.md).