같은 앱을 AI에게 12가지 프레임워크로 만들게 했더니…개발비 최대 1.9배 차이

시험 대상 앱은 공개 포켓몬 데이터 API를 읽어 목록, 타입, 기술, 게임 정보, 검색과 필터를 보여 주는 정보 열람형 웹사이트다. 화면 전환과 상호작용이 많은 서비스보다는 콘텐츠를 많이 보여 주는 쪽에 가깝다. 로슨은 각 프레임워크의 최신 버전을 쓰라고 지시했고, 테일윈드(Tailwind)나 부트스트랩(Bootstrap) 같은 디자인 부품 라이브러리는 금지하는 대신 공통 디자인 값을 주었다. 서버에서 그릴지, 브라우저에서 그릴지 같은 구조 선택은 에이전트에게 맡겼다.

결과물이 제대로 만들어졌는지는 화면 구조를 읽는 접근성 트리 기반의 적합성 시험으로 확인했다. 미리 만든 정적 HTML로 시험을 통과하는 꼼수도 따로 막았다. 프레임워크마다 다섯 번씩 실행해 중간값을 냈고, 앵귤러는 두 번의 결과물이 외부 접속을 거부하는 구조로 만들어져 일부 지표를 세 번 값으로 계산했다.

비용 순위에서는 호노와 htmx 조합(2.67달러), 아스트로(Astro, 2.76달러), 넉스트(Nuxt, 2.82달러)가 앞섰고, 별도 화면 프레임워크 없이 만든 경우가 2.98달러, 넥스트제이에스(Next.js)가 3.14달러였다. 반대로 스벨트킷(SvelteKit) 4.28달러, 그레이실(Gracile)과 릿(Lit) 조합 4.65달러, 앵귤러 4.97달러가 가장 비쌌다. 걸린 시간과 쓴 토큰도 거의 같은 순서였다. 아스트로는 중간값 8.2분, 앵귤러는 17.2분이 걸렸고 토큰은 넉스트가 385만, 앵귤러가 976만 개였다.

비싼 쪽에는 이유가 보이는 경우도 있었다. 로슨은 스벨트킷이 비싸게 나온 이유로, 3판이 나온 지 얼마 안 돼 모델의 학습 자료에 없다 보니 에이전트가 매번 3판 전환(마이그레이션) 안내서를 읽은 점을 들었다. 각 프레임워크가 제공하는 공식 MCP 서버나 에이전트용 스킬 파일도 일관되게 쓰이지 않았다. 넉스트의 MCP는 한 번도 호출되지 않았고 넥스트제이에스의 스킬 파일은 다섯 번 중 한 번만 읽혔다. 로슨은 지금의 MCP와 스킬이 오히려 도움보다 부담이 될 수 있다고 추정했다.

홈 화면 기준으로 잰 완성 사이트의 성능 점수는 대부분 만점에 가까워 차이가 작았다. 구글 라이트하우스(Lighthouse) 접근성은 모든 프레임워크가 100점이었고 성능도 97~100점이었다. 차이는 브라우저로 보내는 자바스크립트 양에서 컸다. 아스트로는 0KB였지만 넥스트제이에스는 142KB였고, 첫 화면의 가장 큰 요소가 그려지는 시간도 아스트로 0.81초, 넥스트제이에스 2.09초로 벌어졌다.

코드 줄 수도 비교했다. 호노와 htmx 조합은 약 1,370줄, 앵귤러는 약 2,009줄로 같은 일을 약 70% 분량의 코드로 끝냈다. 로슨은 AI 시대에는 코드 양이 이후 수정 때마다 다시 읽혀 토큰 비용으로 돌아오므로 예전보다 더 중요해진다고 주장했다. 이 부분은 측정값이 아니라 저자의 해석이다.

활용을 검토한다면 이 결과를 특정 프레임워크의 우열 판정으로 읽기보다, 팀이 만드는 서비스와 비슷한 앱으로 직접 비용을 재 보는 방법으로 참고하는 편이 맞다. 상호작용이 많은 대형 서비스, 다른 AI 모델, 다른 노력 수준에서는 순위가 달라질 수 있다. 로슨도 실행마다 결과가 흔들렸다고 밝히며 시험 코드를 공개하고 다른 사람의 재실행을 요청했다.