JavaScript 프레임워크의 AI 비용: 데이터 기반 분석

에이전트 코딩 시대가 도래했음에도 웹 개발 커뮤니티는 여전히 실증적 증거보다는 '느낌(vibes)'에 기반하여 기술을 선택하고 있습니다. 이에 도전하기 위해 최근 진행된 벤치마크 실험에서는 12개의 JavaScript 프레임워크를 대상으로 AI 에이전트(Claude 3.5 Opus)에게 복잡한 Pokémon 애플리케이션을 구축하도록 지시했습니다. 그 결과, 개발자가 직접 코드를 작성하지 않더라도 프레임워크 선택이 개발 비용, 토큰 소비량 및 최종 성능에 상당한 영향을 미친다는 사실이 밝혀졌습니다.

벤치마크 방법론

이 실험은 PokéAPI를 사용하여 검색 및 필터링 기능을 갖춘 기능적인 Pokémon 앱을 구축하는 데 중점을 두었습니다. 공정한 비교를 위해 다음과 같은 지표를 측정했습니다:

• 비용: 빌드당 총 API 사용 비용.
• 효율성: 소요 시간 및 총 토큰 소비량.
• 품질: Lighthouse 성능, 접근성 및 JavaScript 번들 크기.
• 유지보수성: 총 코드 라인 수(LOC).

에이전트는 각 프레임워크의 최신 버전을 사용하도록 지시받았으며, 가능한 경우 공식 MCP (Model Context Protocol) 서버나 에이전트 스킬에 접근할 수 있도록 했습니다. 실험은 LLM의 확률적 특성을 고려하여 프레임워크당 3~5회 반복 수행되었습니다.

주요 결과: 비용 및 효율성

서버 사이드 렌더링이나 더 단순한 추상화를 선호하는 프레임워크가 AI 에이전트에게 더 효율적인 것으로 나타났습니다. Hono+htmx와 Astro가 가장 비용 효율적이고 빠른 옵션으로 부상한 반면, Angular나 SvelteKit과 같이 무거운 프레임워크는 더 높은 비용과 긴 빌드 시간이 소요되었습니다.

프레임워크	중앙값 비용 ($)	중앙값 시간 (분)	토큰 (M)
Hono+htmx	2.67	8.6	4.26
Astro	2.76	8.2	4.13
Next.js	3.14	10.9	4.99
SvelteKit	4.28	10.8	8.53
Angular	4.97	17.2	9.76

성능 및 유지보수성

접근성과 성능에 대한 Lighthouse 점수는 모든 프레임워크에서 대체로 포화 상태였지만, JavaScript 번들 크기와 총 차단 시간(TBT)에서는 명확한 차이가 나타났습니다. MPA 기반 프레임워크(Astro 및 Hono+htmx 등)는 SPA 중심 프레임워크에 비해 지속적으로 더 작은 번들과 더 낮은 TBT를 제공했습니다.

유지보수성 측면에서 공백을 제외한 코드 라인 수를 측정했을 때, Hono+htmx는 약 1,370라인이 필요했던 반면 Angular는 2,000라인 이상이 필요했습니다. 이는 에이전트 워크플로우에서 프레임워크의 장황함이 향후 유지보수 및 업데이트의 토큰 비용과 직접적으로 연관됨을 시사합니다.

커뮤니티 통찰 및 비판

이 결과에 대한 논의는 개발자가 '개발자 경험(DX)'과 '에이전트 경험(AX)'을 바라보는 방식의 변화를 강조합니다.

• 단순성의 논리: 많은 댓글 작성자들은 Hono나 HTMX와 같은 프레임워크가 표준 웹 기본 요소에 더 가까운 추상화를 사용하기 때문에 에이전트가 탐색하기 본질적으로 더 쉽다는 점을 지적했습니다.
• 학습 데이터의 역할: 일부 관찰자들은 최신 프레임워크(예: SvelteKit 3)가 학습 데이터 부족으로 인해 성능이 저조했을 수 있다고 지적했습니다. 에이전트가 마이그레이션 가이드를 반복적으로 읽어야 했고, 이로 인해 비용이 상승했다는 것입니다.
• 연구의 한계: 비평가들은 Pokémon 앱이 복잡한 엔터프라이즈 애플리케이션을 대표하기에는 너무 단순하다고 주장했습니다. 한 댓글 작성자는 "프레임워크를 사용하는 이유는 커스터마이징을 희생하면서 정신적 부하를 줄이기 위함입니다... 프레임워크에서 무언가를 변경해야 하는 순간, 이 정신 모델은 무너집니다"라고 언급했습니다.

"에이전트 시대에 개발자가 더 이상 코드를 직접 타이핑하지 않아 DX의 제약을 덜 받게 되었음에도, 여전히 '느낌'이 지배하는 것을 봅니다... 만약 완전히 자동화된 환경으로 전환했다면, 과거에 한 줄씩 코드를 타이핑하던 시절에 내렸던 선택에 무슨 미련이 남아 있는 걸까요?" — @Nolan Lawson

결론적으로, 이 벤치마크는 AI 에이전트가 사용하는 도구의 아키텍처 복잡성에 민감하다는 것을 보여줍니다. 에이전트 기반 개발이 표준이 됨에 따라, 업계는 전통적인 DX 중심의 추상화보다 낮은 토큰 오버헤드와 명확하고 예측 가능한 패턴을 우선시하는 프레임워크로 전환될 수 있습니다.