[Hacker News 요약] AI 시대, JavaScript 프레임워크 선택의 '감' 대신 '데이터' 기반 접근법 제시
0
설명
2026년 10월 28일, Nolan Lawson은 JavaScript 프레임워크 선택에 있어 '감'에 의존하는 웹 개발 커뮤니티의 경향을 지적하며, AI 시대에 더욱 중요해진 데이터 기반 의사결정의 필요성을 역설했습니다.
그는 직접 설계한 벤치마크를 통해 다양한 프레임워크의 개발 비용, 품질, 유지보수성을 객관적으로 측정하고 비교했습니다.
이 연구는 개발자들이 '바이브 코딩'에서 벗어나 증거에 기반한 기술 스택 선택을 하도록 독려합니다.
### 배경 설명
웹 개발 커뮤니티에서는 종종 '감'에 기반한 프레임워크 선택이 이루어져 왔습니다. Alex Russell은 이를 '프론트엔드의 잃어버린 10년'으로, Baldur Bjarnason은 프로그래밍을 '대중문화'로 칭하며 이러한 경향을 비판했습니다. Nolan Lawson은 이전부터 사실과 벤치마크를 통해 이러한 추세에 맞서왔습니다. 과거에는 개발자 경험(DX)의 향상이 이러한 '감' 기반 선택의 주된 이유였으나, AI 코딩 에이전트의 등장으로 개발자가 직접 코드를 작성하는 부담이 줄어든 현재에도 '에이전트에게 더 좋다'는 식의 근거 없는 주장이 프론트엔드 재작성의 이유가 되고 있습니다. 이러한 상황에서 객관적인 데이터의 중요성이 더욱 부각되고 있습니다.
### 벤치마크 설계 및 방법론
Nolan Lawson은 PokéAPI를 활용하여 작지만 비중 있는 포켓몬 앱을 설계하고, 여러 JavaScript 프레임워크/메타프레임워크(Next.js, Nuxt, SvelteKit 등)를 사용하여 AI 에이전트가 이 앱을 구축하도록 지시했습니다. 구축된 결과물은 명세 준수 테스트를 거쳤으며, 개발 시간, 토큰 사용량, 코드 라인 수, Lighthouse 성능 및 접근성 점수 등 다양한 지표로 평가되었습니다. 실험에서는 각 프레임워크의 공식 MCP(Model-Centric Programming) 또는 스킬을 사용하도록 하여 공정성을 확보했으며, SSR vs CSR, SPA vs MPA 등의 차이점을 중점적으로 비교했습니다. CSS 방법론은 특정 프레임워크를 피하는 선에서 자유롭게 두었으며, 시각적 일관성을 위해 명세 토큰을 기반으로 디자인하도록 했습니다. 실험 환경은 2025년 13인치 노트북, Ubuntu 24.04, 4배 CPU 스로틀링, '느린 4G' 네트워크 환경에서 진행되었습니다. Lighthouse의 모바일 테스트만 사용되었으며, LCP(Largest Contentful Paint)의 변동성을 고려하여 여러 번의 반복 실행을 통해 평균값을 도출했습니다. 특히, Qwik은 테스트 중 패치 릴리스가 있었으며, Angular는 일부 실행에서 SSR 앱을 생성하여 사양을 준수하지 못하는 경우가 발생했습니다.
### 개발 비용 및 시간 분석
벤치마크 결과, 개발 비용 측면에서는 Hono+htmx가 $2.67로 가장 저렴했으며, Angular가 $4.97로 가장 비쌌습니다. SvelteKit, Gracile+Lit, Angular가 다른 프레임워크에 비해 구축 비용이 높은 경향을 보였습니다. 이는 SvelteKit의 경우 최신 버전의 마이그레이션 가이드 의존성, Gracile의 경우 프레임워크에 대한 낮은 이해도, Angular의 경우 총 코드 크기 증가 등이 원인으로 분석되었습니다. 개발 시간은 Astro가 8.2분으로 가장 빨랐고, Angular가 17.2분으로 가장 오래 걸렸습니다. 토큰 사용량 측면에서는 Nuxt가 3.85M으로 가장 적었으며, Angular가 9.76M으로 가장 많았습니다. 전반적으로 개발 비용, 시간, 토큰 사용량은 서로 유사한 패턴을 보였습니다. 흥미롭게도, '바닐라' JavaScript(Vite 사용)는 여러 프레임워크보다 낮은 성능을 보여, 특정 프레임워크의 존재가 아무것도 없는 것보다 낫다는 점을 시사했습니다.
### 품질 및 유지보수성 평가
Lighthouse 테스트 결과, 대부분의 프레임워크는 성능, 접근성, CLS(Cumulative Layout Shift)에서 거의 만점에 가까운 점수를 기록했습니다. 하지만 JavaScript 바이트 전송량에서는 Astro가 0 KiB로 가장 효율적이었고, Next.js가 142 KiB로 가장 많았습니다. TBT(Total Blocking Time)는 Astro, Gracile+Lit, Hono+htmx 등이 0ms로 우수했으며, Next.js와 Angular는 상대적으로 높은 값을 보였습니다. LCP는 MPA(Multi-Page Application) 프레임워크가 SPA(Single-Page Application)보다 유리한 경향을 보였으며, Astro가 810ms로 가장 빨랐고 Next.js가 2090ms로 가장 느렸습니다. Qwik은 SPA임에도 불구하고 MPA와 유사한 LCP 점수를 기록하며 예외적인 성능을 보였습니다. 유지보수성 측면에서는 코드 라인 수를 기준으로 평가했으며, Hono+htmx가 1370줄로 가장 적었고 Angular가 2009줄로 가장 많았습니다. 이는 프레임워크의 목적이 코드량 감소에 있음을 보여주며, Hono+htmx가 Angular 대비 약 70%의 코드로 유사한 기능을 수행할 수 있음을 시사합니다.
### 가치와 인사이트
이 벤치마크는 AI 코딩 시대에 개발자들이 '감'이 아닌 '데이터'에 기반하여 JavaScript 프레임워크를 선택해야 함을 명확히 보여줍니다. 특히, 개발 비용, 시간, 토큰 사용량, 그리고 최종 결과물의 성능 및 접근성까지 종합적으로 고려해야 함을 강조합니다. Hono+htmx와 같은 경량 솔루션이 Angular와 같은 풀스택 프레임워크와 유사한 기능을 더 적은 코드와 비용으로 제공할 수 있다는 점은 실무에서 기술 스택 선택 시 중요한 고려 사항이 될 것입니다. 또한, SPA와 MPA의 성능 차이, 그리고 Qwik과 같은 예외적인 SPA 프레임워크의 존재는 각 애플리케이션의 특성에 맞는 최적의 선택을 위한 통찰을 제공합니다. AI 에이전트의 활용이 보편화됨에 따라, 코드 라인 수와 같은 유지보수성 지표의 중요성은 더욱 커질 것입니다.
### 기술·메타
- Frameworks/Meta-frameworks: Next.js, Nuxt, SvelteKit, Astro, Qwik, SolidStart, React Router, TanStack Start, Gracile+Lit, Hono+htmx, Angular, Vanilla JS/TS with Vite
- API: PokéAPI
- Tools: Lighthouse, Claude Code
- Metrics: Development Cost (USD), Time (minutes), Tokens (M), Lines of Code, Lighthouse Scores (CLS, Performance, Accessibility), JavaScript Bytes (KiB), Total Blocking Time (TBT, ms), Largest Contentful Paint (LCP, ms)
- Test Environment: 2025 Laptop, Ubuntu 24.04, 4x CPU throttling, Slow 4G network
- Publication Date: October 28, 2026
### 향후 전망
향후 이 벤치마크는 더 다양한 유형의 애플리케이션, 다른 AI 코딩 에이전트, 그리고 새로운 프레임워크 버전을 포함하여 확장될 수 있습니다. 또한, Service Workers, 이미지 최적화, Speculation Rules API 등과 같은 고급 성능 최적화 기법을 적용했을 때의 결과를 비교하는 것도 흥미로울 것입니다. 프레임워크 개발자들은 이러한 벤치마크 결과를 바탕으로 자사 프레임워크의 성능을 개선하고, AI 에이전트와의 통합을 더욱 강화할 것으로 예상됩니다. 경쟁 프레임워크 간의 성능 향상 경쟁은 더욱 치열해질 것이며, 이는 궁극적으로 웹 개발 생태계 전반의 발전을 이끌 것입니다. 개발자들은 지속적으로 새로운 기술 동향과 벤치마크 결과를 주시하며, 자신의 프로젝트에 가장 적합한 기술을 선택하는 안목을 길러야 할 것입니다.
📝 원문 및 참고
- Source: Hacker News
- 토론(HN): [news.ycombinator.com](https://news.ycombinator.com/item?id=50323088)
- 원문: [링크 열기](https://nolanlawson.com/2026/10/28/the-ai-cost-of-javascript-frameworks/)
---
출처: Hacker News · [원문 링크](https://nolanlawson.com/2026/10/28/the-ai-cost-of-javascript-frameworks/)
이 글에 대한 한 줄 의견
신고 · 불법·유해·아동 안전(CSAE) 관련 콘텐츠
댓글 0
아직 댓글이 없습니다. 로그인하면 바로 의견을 남길 수 있습니다.