배경
17개 도메인, 50여 개 템플릿으로 구성된 레거시 CMS를 AntD v3→v6, Next.js 9→15로 올려야 했습니다. 일괄 갱신 기능이 없어 하나씩 수동으로 옮기는 수밖에 없었고, 도메인마다 컴포넌트 조합이 제각각이라 같은 작업을 계속 반복해야 하는 구조였습니다.
해결 방법
자연어 한 줄이면 도메인 분석부터 코드 구현, 테스트까지 돌아가는 자동화 시스템을 만들었습니다. 작은 수정이든 대규모 이관이든 사람이 끼어들 일을 최소화했습니다.
3개의 핵심 플러그인
3개의 플러그인이 파이프라인으로 이어집니다. cms-domain-analyzer가 도메인을 분석하고, cms-pm이 화면을 설계하고, cms-developer가 최종 코드를 만듭니다.
cms-domain-analyzer
Playwright로 17개 도메인 사이드바를 자동으로 돌면서 컴포넌트 타입, 필수 여부, 제약사항, 기본값을 뽑아냅니다. Git 저장소까지 연결해 API, TypeScript, GraphQL 원본도 함께 읽고, 바뀐 도메인만 골라서 업데이트합니다.
수집한 도메인 정보는 계층적 스킬 파일(L0~L3) 구조로 저장해 AI가 바로 이해할 수 있게 했습니다.
cms-pm
AntD v6 스타일의 화면 설계를 자동으로 해줍니다. 기획서 기반, 컴포넌트 짝, 도메인 수정, 도메인 신규, 자유 설계까지 5가지 모드를 지원하고, 20종의 컴포넌트 킷을 자동 생성합니다.
cms-developer
이관, 신규 구현, 프로젝트 관리 도구 연동, 레거시 수정까지 4가지 워크플로우를 지원하는 자동 복구 엔진입니다. 빌드나 Lint가 실패하면 최대 5회까지 알아서 고쳐서 다시 돌리고, E2E 테스트도 자동으로 작성해 실행합니다.
14개의 서브 에이전트가 스펙 분석에서 E2E 테스트까지 6단계를 사람 없이 이어서 돌립니다.
실전 이관 사례
‘기획전’ 도메인을 실제로 이관한 과정을 3단계로 살펴봅니다.
STEP 1 — 도메인 자동 분석: 레거시 CMS에 접속해 사이드바를 돌면서 기획전/이벤트 필드를 전부 수집하고, Git 저장소 API로 보강합니다.
STEP 2 — 화면 분석 및 설계 명세화: Playwright로 현재 화면을 캡처한 뒤, 설계 명세(spec.md)와 Pencil Dev 파일(.pen)을 자동 생성합니다.
STEP 3 — 최종 코드 구현: 프로젝트 관리 도구와 연동해 대상을 자동으로 찾고, 6단계 파이프라인을 거쳐 최종 코드와 테스트 결과를 만들어냅니다.
기술 스택
Next.js 9 + AntD v3 + styled-components + Redux에서, Next.js 15 App Router + AntD v6 + Panda CSS + Zustand로 전환합니다. 플러그인은 Claude Code Max와 Playwright MCP 위에서 돌아갑니다.
효과
자연어 한 줄이면 분석부터 테스트까지 자동으로 끝납니다. 소규모 수정에 시간을 잡아먹히던 병목이 사라졌습니다.
- 분석 자동화: 17개 도메인을 자동으로 돌며 수천 문서를 패치
- 설계 표준화: AntD v6 기반으로 일관된 UI와 20종 컴포넌트 킷을 자동 생성
- 코드 자동 생성: v3에서 v6으로의 변환을 자동 실행
- 오류 자동 수정: 빌드 실패 시 최대 5회 재시도, E2E 테스트까지 자동 수행
눈여겨볼 점
- 전체 SDLC를 3개 플러그인과 14개 서브 에이전트로 자동화한 구조가 핵심입니다. 자연어 한 줄로 6단계 무인 파이프라인이 돌아가는 구조는 ‘에이전트가 에이전트를 지휘하는’ 본격적인 멀티 에이전트 시스템입니다.
- Playwright로 17개 도메인을 무인 순회하면서 수집한 정보를 계층적 스킬 파일(L0~L3)로 정형화한 접근이 차별적입니다. 50여 개 템플릿의 제각각인 구조를 AI가 바로 이해할 수 있는 포맷으로 바꿔, 코드 생성 정확도를 끌어올렸습니다.
- AntD v3→v6, Next.js 9→15라는 기술적 난관을 자가 복구 엔진으로 돌파했습니다. 빌드 실패 시 최대 5회 자동 재시도와 E2E 테스트, 20종 컴포넌트 킷 자동 생성, 5가지 설계 모드까지 갖춘 완결형 이관 시스템입니다.