JavaScript 프레임워크별 AI 에이전트 빌드 비용 벤치마크
The AI cost of JavaScript frameworks
TL;DR Highlight
같은 앱을 12개 프레임워크로 에이전트에 5번씩 짜게 했더니 비용이 최대 약 2배 차이
Who Should Read
에이전트로 프런트엔드를 새로 짜면서 어떤 JS 프레임워크를 고를지 고민하는 풀스택 개발자
Core Mechanics
- Hono+htmx가 가장 쌌다
- 5회 중앙값 기준 실행당 $2.67, Astro $2.76, Nuxt $2.82 순이었다.
- Angular는 $4.97로 가장 비쌌다.
- SvelteKit·Gracile·Angular가 비쌌다
- SvelteKit은 v3 마이그레이션 가이드를 매 실행마다 읽었다.
- Gracile은 에이전트가 저장소를 clone하거나 node_modules 소스를 읽었다.
- Angular는 코드량이 많은 게 원인으로 보인다고 저자가 썼다.
- Vanilla가 일부 프레임워크보다 비쌌다
- Vite만 쓴 Vanilla는 $2.98로 Next.js($3.14) 이하지만 SvelteKit·Angular·React Router보다는 저렴했다.
- 저자는 프레임워크가 아예 없는 것보다 낫다는 신호라고 봤다.
- JS 전송량은 Astro 0KiB, Next.js 142KiB
- Lighthouse 기준 Astro는 0 KiB, Next.js는 142 KiB, TanStack Start는 118 KiB였다.
- 모바일 LCP도 MPA 쪽이 대체로 유리했고 Astro 810ms, Next.js 2090ms였다.
- 코드 줄 수는 Hono+htmx 1370줄 vs Angular 2009줄
- 저자는 Hono+htmx가 Angular의 약 70% 코드로 비슷한 앱을 만들었다고 썼다.
- 코드가 짧으면 이후 수정 때 토큰도 덜 든다고 봤다.
- Performance·접근성 점수는 거의 만점
- Performance는 Vanilla 97부터 100까지였고 Accessibility는 전부 100이었다.
- 점수 차는 작아서 JS 바이트, TBT, LCP를 따로 봤다.
Community Reactions
- 프레임워크 추상화는 앱 종류에 따라 결과가 달라진다는 의견
- 포켓몬 앱은 거의 정적이라 복잡한 앱에는 적용되기 어렵다는 지적이 여럿 있었다.
- 인증·권한 같은 기능을 추가해 다시 돌려 보자는 제안도 있었다.
- 복잡한 폼·상태 관리에서 HTMX가 고전했다는 경험
- 한 댓글러는 폼이 동작해도 페이지 로딩이 30초 걸리고 상태가 사라졌다고 썼다.
- 테스트를 충분히 붙인 뒤에야 React보다 빠른 버전이 나왔다고 한다.
- 최신 프레임워크가 비싼 건 학습 데이터에 없어서라는 의견
- 에이전트가 새 API를 그때그때 찾아 배워야 해서 비용이 든다는 것이다.
- 향후 모델에 학습되면 효율이 오를 것이라는 전망이었다.
- Astro로 실제 정적 사이트를 만들어 만족했다는 경험
- 한 댓글러는 Astro로 Cloudflare Pages용 정적 사이트를 Opus 5.5로 만들었는데 빠르고 만족스러웠다고 했다.
How to Apply
- 지금 쓰는 프레임워크로 작은 앱 벤치마크 돌리기
- 오늘 30분 안에 프로젝트와 비슷한 작은 화면 하나를 정해 같은 스펙으로 에이전트에게 2~3번 시키자.
- Claude Code가 보고하는 비용·토큰·시간을 기록하자.
- 프레임워크 선택 기준에 토큰 비용과 줄 수 넣기
- 신규 프런트엔드를 고를 때 후보별로 빌드 비용과 코드 줄 수를 표로 비교하자.
- 한 번이 아니라 최소 5회 중앙값을 쓰자.
- 콘텐츠 중심 페이지는 MPA 후보부터 돌려 보기
- 정적에 가까운 화면이면 Astro와 Hono+htmx를 먼저 측정하자.
- Lighthouse 모바일 설정으로 JS 바이트와 LCP를 비교하자.
Try It
# Claude Code에 그대로 붙여넣기 (원문 벤치마크의 간이 버전)
아래 스펙의 앱을 {{프레임워크}} 최신 버전으로 만들어줘. Tailwind·Bootstrap 같은 UI 프레임워크는 쓰지 마.
스펙: {{앱 스펙}}
완료되면 아래를 알려줘.
- 소스 파일의 비어있지 않은 줄 수
- 구조(SSR/CSR) 선택 이유
이어서 해 볼 것: 프레임워크만 바꿔 같은 프롬프트로 5번씩 돌리고 비용·시간·줄 수의 중앙값을 비교하자.Terminology
관련 논문
Claude Code가 백그라운드 에이전트 상태줄에 토큰을 쓰는 문제와 Bun preload 우회법
30초마다 에이전트 전체 대화를 보내던 상태줄 요약을 끄니 요청 19.7%가 사라졌다
GLM-5.3 Workers AI의 KV cache 교차 노출 사고와 SGLang 수정
컨텍스트 창보다 작은 KV 풀 때문에 긴 프롬프트 155건에 타인 데이터가 섞였다
Microsoft Decision-1: Qwen3.5-9B 기반 결정 점수 전용 모델
글 대신 선택지별 확률만 내놓는 9B 모델, 라우팅·분류용으로 공개
Cerebras가 조 단위 파라미터 모델을 웨이퍼 여러 장에 올리는 방법
Kimi K3(3T)를 웨이퍼 59장 파이프라인에 올려 초당 1000~2000+ 토큰을 낸다
AI 이미지 생성 실전 가이드: diffusion부터 에이전트 연동까지
이미지 API를 직접 써 보니 캔버스 단위 과금과 카메라 묘사 프롬프트가 핵심이었다
DeepInfer: DeepSeek 모델용 고성능 대규모 추론 프레임워크 공개
DeepSeek가 프로덕션 추론 엔진 DeepInfer를 Apache-2.0으로 공개했다
Mercury 3: 규모를 키운 diffusion LLM, 초당 1,000토큰 이상
Diffusion LLM을 40배 키웠더니 속도 4~8배, 품질은 속도 특화 모델 수준
DeepSeek, 미 연방 민간 기관에서 금지된다: DHS 명령과 개발자 반응
DHS 명령으로 DeepSeek이 미 연방 민간 기관 IT 시스템에서 금지됐다