JavaScript 프레임워크, AI 코딩 비용 벤치마크로 검증하다

핵심 요약

• 웹 개발 커뮤니티가 프레임워크 선택을 근거 없는 느낌('vibes')에 기반한다는 점을 지적하고, AI 에이전트 시대에도 이 경향이 계속되고 있음을 언급했다.
• 포켓몬 API 기반의 검색·필터링 앱을 Next.js, Nuxt, SvelteKit, Angular 등 13개 프레임워크로 AI 에이전트(Claude Opus 5.5)에게 5회씩 개발하도록 지시하여 벤치마크를 수행했다.
• 비용 측면에서 Hono+htmx($2.67)가 가장 저렴했고, Angular($4.97)가 가장 비쌌으며, 실행 시간과 토큰 소비량도 유사한 패턴을 따랐다.
• SvelteKit과 Gracile+Lit는 프레임워크의 최신성이나 학습 부족으로 인해 높은 비용이 발생했고, Angular는 큰 코드 규모가 영향을 미쳤다.
• Lighthouse 성능 점수(Performance, Accessibility, CLS)는 거의 모든 프레임워크에서 포화 상태였으며, JavaScript 바이트 기준으로는 Astro(0KB)가 최소, Next.js(142KB)가 최대였다.
• Total Blocking Time(TBT)에서는 MPA 프레임워크(Astro, Hono+htmx 등)가 0ms, Next.js(71ms), Angular(103ms) 순으로 나타났다.
• Largest Contentful Paint(LCP)는 메트릭 자체의 변동성이 크지만, 대체로 번들 크기가 작은 MPA 프레임워크가 더 빨랐으며, Qwik은 SPA임에도 MPA처럼 성능을 보였다.
• 코드 라인 수 측면에서 Hono+htmx(1370줄)가 가장 적었고 Angular(2009줄)가 가장 많았으며, 저자는 AI 시대에 코드 크기가 미래 토큰 비용에 영향을 미친다고 강조했다.
• 일부 프레임워크의 AI 도구(MCP, 스킬)는 에이전트가 사용하지 않거나 일부 실행에서만 활용되어, MCPs와 스킬이 도움이 아닌 해가 될 수 있다고 지적했다.
• 벤치마크가 작은 콘텐츠 기반 앱으로 제한적이며, Lighthouse는 SPA에 불리한 지표임을 명확히 밝혔다.
• 저자는 프레임워크 자체를 비판하지 않으며, 결과를 개선하려는 시도를 환영하고, 이 벤치마크가 AI 시대의 근거 기반 기술 스택 선택을 촉구하기 위한 것임을 강조했다.
• 벤치마크는 GitHub에 공개되어 있으며, 다양한 개선안(더 많은 반복, 다른 프레임워크, 다양한 앱 유형 등)을 제시했다.