Frontend · AI · Research

AI 에이전트에게 맡기면 React · Vue · Svelte · Angular는 어떻게 다른가

같은 앱을 네 프레임워크로 짓게 하고, 기획서를 바꿔 가며 여덟 라운드 동안 고쳐 나가게 한 뒤 매번 채점했다. 질문은 "어느 프레임워크가 낫냐"가 아니라 "AI와 함께 개발할 때 무엇이 달라지냐"였다.

2026-10-14 실험 2026-09 종료 React · Vue · Svelte · Angular

라운드별 채점 · 코드베이스 감사 · 검증 방법 전체. 저장소의 report.html 원본 그대로.

github.com/taeksoolee/study-api-analyzer

기획서 8부 · 프롬프트 32종 · 네 구현 · 라운드별 스냅샷 · 최종 보고서(report.html). 동결된 연구 기록.

결론부터

이렇게 쓸 거면	고를 것	대신 감수할 것
AI가 설계까지 하게 할 거면	Svelte — 자유 라운드 3전 3승, 공식 MCP로 자기 코드 자가 검사	도메인 로직에 룬을 쓰지 말라고 한 번은 말해야 한다
구조를 정해 주고 AI가 실행하게 할 거면	Angular — 구조 라운드 4전 4승, 계층 위반이 컴파일 에러	토큰 20% 더, 코어 112 kB는 영구 세금
싸게 많이 돌릴 거면	React — 누적 최저 비용, 안 시켜도 분리함	"이렇게 만들어줘"엔 어긋나고, 긴 대화에서 스택 선택이 흔들린다
AI가 읽을 총량이 적어야 하면	Vue — 변경 파급 최소, 연동 테스트 1개, 레이어 균형 최고	UI 킷이 가장 비싸고, 내장 프로파일러가 프로덕션에서 돌지 않는다

그 밖에 여덟 라운드에서 남은 관찰 셋.

구조를 옮기는 일은 기능을 만드는 일만큼 비싸다. 기능을 하나도 늘리지 않은 도메인 리팩터링 라운드(4차)가 생태계 라운드(3차)와 비슷한 토큰을 썼다.
살아남는 규칙은 "어겼을 때 보이는" 규칙이다. 강제를 전부 거둔 7차에 네 구현이 만장일치로 남긴 것은 grep이나 tsc 한 번에 걸리는 규칙 (도메인이 프레임워크를 import하지 않는다 등)이었다. 실패가 번들 안에만 나타나는 규칙은 다섯 라운드 동안 아무도 보지 못했다.
비용과 품질은 같은 방향으로 가지 않았다. 가장 오래 걸린 구현이 가장 깊은 문제를 찾은 라운드가 여럿이다.

실험 설계

네 에이전트를 한 메시지에서 병렬로 실행했다. 각자 프레임워크별 프롬프트와 같은 기획서만 받았다.
라운드마다 직전 결과물 위에서 이어서 작업했다. 1차에 지은 앱이 8차까지 이어진다.
자체 보고는 근거로 쓰지 않았다. 빌드·단위·E2E를 직접 돌리고, 소스를 grep하고, 스냅샷끼리 diff해 채점했다.
4차부터는 E2E 스펙의 해시를 떠 동결하고 라운드 종료 후 대조했다. 2~8차 회귀 실격 0건.

라운드	물은 것
1 명세	문자열까지 못박은 명세를 얼마나 정확히 지키는가
2 설계	제약을 풀면 스스로 무엇을 설계하는가
3 생태계	표준 스택(라우터·상태·폼·쿼리·UI 킷)을 강제하면 무엇이 바뀌는가
4 도메인	행동을 얼리고 도메인을 떼어내면 다시 수렴하는가
5 슬라이스	Feature-Sliced Design으로 다시 자르면 변경이 싸지는가
6 인도	그 구조가 실제 기능 개발에서 값을 하는가
7 자유	처방을 전부 거둬도 남길 것인가
8 성능	스스로 재보고, 근거 있게 고치거나 고치지 않는가

8부 · 2,026줄기획서

8.4M에이전트 토큰 · 약 15시간

29,153줄최종 소스 (+ 테스트 13,368줄)

1,639 · 59단위 테스트 · E2E, 전부 통과

대상 앱 — API Analyzer

브라우저에서 HTTP 요청을 만들어 보내고 응답을 뜯어보는 도구. 백엔드가 없고 저장은 IndexedDB가 맡는다. 화면은 Console · Collections · Environments · History · Settings · 커맨드 팔레트.

작지만 아키텍처를 찌르도록 골랐다. 요청 경합 조건은 상태 모델을, Params ↔ URL 양방향 동기화는 순환 방지를, secret 변수는 도메인·폼·목록·cURL·히스토리를 한꺼번에 가로지르는 변경을 요구한다.

라운드별 순위

같은 네 에이전트, 같은 앱, 여덟 개의 다른 질문. 네 프레임워크 모두 한 번 이상 1위를 했고, 한 번 이상 꼴찌를 했다. 순위가 라운드마다 재배열됐다는 사실 자체가 "어느 프레임워크가 낫다"는 질문이 잘못 놓였음을 보여준다.

	1 명세	2 설계	3 생태계	4 도메인	5 슬라이스	6 인도	7 자유	8 성능
Angular	3위	4 · 87	2 · 93	1 · 94	1 · 91	1 · 91	2위	1위
Svelte	4위	1 · 93	1 · 95	4 · 91	2 · 89	2 · 90	1위	2위
React	1위	3 · 89	4 · 89	3 · 92	4 · 85	2 · 90	3위	4위
Vue	2위	2 · 90	3 · 90	1 · 94	3 · 88	4 · 81	4위	3위

순위 · 점수. 1·7·8차는 순위만 매겼다. 4차는 Angular와 Vue가 공동 1위.

AI 사용은 반대 방향 두 모드로 갈린다

1위 칸이 Svelte와 Angular로 깨끗하게 둘로 나뉜다. 그리고 그 둘은 서로의 거울상이다 — 한쪽이 이긴 라운드에서 다른 쪽이 꼴찌였다. 어느 프레임워크도 두 모드를 동시에 잘하지 못했다.

	위임 모드 — "알아서 만들어줘"	지시 모드 — "이 구조로 해줘"
라운드	2 설계 · 3 생태계 · 7 자유	4 DDD · 5 FSD · 6 인도 · 8 성능
이긴 쪽	Svelte 3전 3승	Angular 4전 4승
진 쪽	Angular 2차 87점 — 전체 유일 꼴찌	Svelte 4차 깨진 테스트 48개
이유	룬·단일 파일로 보일러플레이트가 가장 적다. AI가 쓸 양이 적으면 틀릴 지점도 적다	DI가 관례가 아니라 실제 아키텍처다. 레이어 협상이 프레임워크에서 이미 끝나 있다
AI 실수가	MCP `svelte-autofixer`가 잡는다	컴파일 에러가 된다 (`tsconfig.domain.json` + 경계 스크립트)

나머지 둘은 이 축의 양끝이 아니라 중간에 있다. React는 싼 일반형(누적 최저 비용, 안 시켜도 분리함), Vue는 무난한데 생태계에 함정이 있다.

공식 AI 도구에 투자한 둘이 8라운드 중 7승

Angular(공식 스킬)와 Svelte(공식 MCP 서버)는 최근 API가 가장 크게 바뀐 둘이다. 학습 데이터에는 옛 문법이 압도적으로 많고, 공식 도구가 정확히 그 격차를 메운다. 다만 상관이지 인과가 아니다 — 1차에서 공식 스킬을 받은 둘은 토큰을 30~53% 더 쓰고도 둘 다 색상 버그를 출하했다. 도구는 최신 API를 맞추는 데 값을 했지 명세를 지키는 데는 하지 않았다.

AI가 무엇을 부쉈는지 알 수 있는가

혼자 AI로 개발할 때 가장 중요한 축은 속도도 비용도 아니다. AI가 낸 변경이 무엇을 깨뜨렸는지 30초 안에 아는가이다. 네 구현 모두 순수 계층을 분리해 pnpm test 한 번이 2~4초로 끝났고, 프레임워크 없이 도는 테스트 비율은 Svelte 93% · Vue 82% · Angular 79% · React 73%였다.

그런데 이 축에서 프레임워크 차이보다 큰 것이 하나 있었다 — E2E를 계약으로 얼리는 것. 4차부터 E2E 스펙을 동결하자 회귀 실격이 0건이 됐고, 이건 네 프레임워크에서 똑같이 성립했다.

프레임워크는 바꿀 수 있다. AI가 무엇을 부쉈는지 모르는 상태는 되돌릴 수 없다.

완성된 코드베이스를 물려받는다면

여덟 라운드 뒤 42,521줄에서 any · @ts-ignore · TODO · lint 억제가 넷 다 0이었다. 순위는 그 위에서 갈렸고, 라운드 성적과는 아래 둘이 뒤바뀐다.

순위	프레임워크	강점	대가
1	Svelte	편집 단위가 가장 작다 — 최대 파일 238줄, 프레임워크 없이 도는 테스트 93%	필드 하나 추가에 소스 10 + 테스트 9 파일이 움직인다
2	Angular	개념이 4파일 21줄에 응축되고, 위반은 타입 검사기가 막는다	기능의 55%가 한 파일(422줄), 경계 검사기가 0개 파일을 봐도 초록
3	Vue	AI가 읽을 총량이 가장 적다 — 변경 파급 795줄, 연동 테스트 1개	순수 파일 하나(284줄)가 여섯 역할을 한다
4	React	이 연구 최고의 핵심 파일(63줄), 도메인이 어떤 패키지도 import하지 않는다	의존성 17개, 커스텀 심볼 282개, 검증의 27%가 jsdom을 탄다

"싸게 만든다"(React, 누적 1.91M 토큰 최저)와 "물려받기 좋다"(Vue)는 같은 것이 아니다. 둘 중 무엇이 중요한지는 프로젝트가 정한다.

이 연구가 답하지 못한 것

프레임워크당 N=1이다. 순위의 1~3점 차이는 노이즈와 구분되지 않는다.
에이전트 품질과 프레임워크 품질이 분리되지 않았다. 모델도 하나, 앱도 하나(백엔드 없는 5화면)다. SSR · 대용량 데이터 · 실시간 · 팀 협업은 재지 않았다.
긴 세션에서의 붕괴를 재지 않았다. 라운드마다 독립 실행이었고, "AI가 100턴째에 자기 구조를 잊는가"는 측정하지 않았다. 실제 개인 개발에서 가장 자주 일어나는 일인데 빠져 있다.