같은 앱 12가지로 만들어 보니, AI 제작비 중간값 2.67~4.97달러

개발자 놀런 로슨이 10월 28일 실험 결과를 공개했다. AI에 같은 앱을 만들게 할 때 개발 도구에 따라 비용이 얼마나 달라지는지 비교한 내용이다. 여기서 개발 도구는 웹 앱을 만들 때 쓰는 자바스크립트 프레임워크와 프레임워크 없이 만드는 방식을 말한다. 추정 비용 중간값은 Hono+htmx가 2.67달러로 가장 낮았고, Angular가 4.97달러로 가장 높았다. 로슨은 실험을 재현할 코드와 결과도 함께 공개했다.

실험에는 Claude Opus 5.5와 12가지 개발 도구를 썼다. 로슨은 AI에 같은 포켓몬 도감 앱 사양과 기능 검사를 주고, 실행마다 환경을 따로 분리했다. 완성된 앱은 기능 검사와 Lighthouse(웹페이지 품질 측정 도구)로 평가했다. 같은 요구사항이어도 도구에 따라 제작 과정과 결과물이 어떻게 달라지는지 본 실험이다.

같은 앱, 비용은 얼마나 달랐나

비용은 Claude Code 화면에 표시된 추정 요금을 기준으로 삼았다. 로슨은 도구마다 다섯 차례씩 돌린 뒤 중간값을 비교했다. Angular는 두 차례 측정할 수 있는 앱을 만들지 못했다. 비용과 시간은 다섯 차례를 모두 반영했다. 완성된 앱의 성능을 잴 때는 측정이 된 세 차례 결과만 썼다.

앱을 만드는 데 걸린 시간도 달랐다. 제작 시간 중간값은 Astro가 8.2분, Angular가 17.2분이었다. 도구를 바꾸면 기다리는 시간과 요금이 함께 움직였다. 비교 대상은 글과 그림을 보여주는 작은 앱 한 종류였다.

완성된 앱, 첫 화면은 가벼웠나

첫 화면을 열 때 내려받는 자바스크립트 양에서 차이가 가장 컸다. 중간값은 Astro가 0KiB, Next.js가 142KiB였다. 휴대전화 환경을 흉내 낸 측정에서 페이지가 사용자 입력에 반응하지 못하는 시간은 Astro가 0밀리초, Next.js가 71밀리초, Angular가 103밀리초였다.

반면 종합 점수는 비슷했다. Lighthouse 성능 점수는 12가지 모두 97점 이상이었고, 장애인과 고령자도 쓰기 쉬운지 보는 접근성 점수는 모두 100점이었다.

검색이나 정렬, 화면 이동처럼 첫 화면이 뜬 뒤의 동작은 최종 비교에서 빠졌다. 로슨은 이전 방식에 이 항목을 넣었지만, 값이 지연 설정과 측정 과정에 크게 흔들려 제외했다고 밝혔다. 서버에 데이터를 요청할 때 일부러 지연을 넣지 않은 점도 한계로 꼽았다. 서버에서 화면을 만들어 보내는 방식에 유리하게 작용할 수 있다는 것이다.

공개 저장소는 누구나 열어 보고 복제할 수 있다. 직접 돌려 보려면 리눅스 환경과 Podman 4.3 이상, Node 20 이상, 약 15GB의 디스크 공간, Claude 인증 정보가 필요하다. 이번 실험은 AI에 앱 제작을 맡길 때 도구 선택만으로 비용과 시간이 달라질 수 있다는 점을 보여준다.