AI 코딩 시험에서 Astro는 가장 빨랐고 Hono+htmx는 API 단가 기준 비용이 가장 낮았습니다

본문

놀런 로슨은 코딩 에이전트가 JavaScript 앱을 만들 때 프레임워크에 따라 시간과 토큰, 결과물이 어떻게 달라지는지 비교했습니다. Opus 5.5에 포켓몬 정보를 검색·필터링하는 앱을 만들게 하고 12개 프레임워크와 구성에서 시험했습니다. 에이전트는 가능한 경우 각 도구의 공식 MCP나 스킬을 쓸 수 있었고, 서버 렌더링이나 성능 최적화 방식은 지정받지 않았습니다. 대상 앱은 상호작용이 적은 콘텐츠 중심 사이트입니다.

각 구성을 다섯 번 실행해 중앙값을 냈습니다. Angular는 작동하는 앱을 두 차례 만들지 못해 세 번의 결과를 사용했습니다. 실행 시간은 Astro가 8.2분으로 가장 짧았고 Hono+htmx가 8.6분, Nuxt가 9분이었습니다. Claude Code API 단가로 계산한 실행당 비용은 Hono+htmx가 2.67달러, Astro가 2.76달러, Nuxt가 2.82달러였습니다. 토큰 사용량은 Nuxt가 385만 개로 가장 적었고 Astro는 413만 개, Hono+htmx는 426만 개였습니다. 로슨은 월 100달러 Max 요금제를 사용했으며, 비용 표는 실제 청구액이 아니라 API 단가로 산출한 값입니다.

홈페이지의 Lighthouse 성능 점수는 97~100점, 접근성 점수는 모든 구성에서 100점으로 차이가 작았습니다. 전송한 JavaScript는 Astro가 0바이트, Hono+htmx가 18바이트, Next.js가 142바이트였습니다. 로슨은 Lighthouse의 JavaScript 전송량과 총 차단 시간 같은 지표가 클라이언트 JavaScript를 적게 보내는 다중 페이지 앱에 유리하다고 설명합니다. 앱 안의 상호작용 성능은 별도로 측정하지 않았습니다.

유지보수 항목은 총 코드 줄 수로 비교했습니다. Hono+htmx는 1,370줄, Angular는 2,009줄이었습니다. 로슨은 코드 규모가 이후 에이전트 편집에 필요한 토큰과 비용에도 영향을 줄 수 있다고 봤지만, 이 실험에서 유지보수를 직접 측정한 지표는 코드 줄 수였습니다. 한 가지 콘텐츠 중심 앱을 다섯 차례 만든 결과이므로, 복잡한 대시보드나 실시간 기능이 많은 앱에서는 순위가 달라질 수 있습니다.