ai-infra / 2026.07
WebForge — 웹 제작 에이전시 파이프라인
한 줄짜리 웹·앱 요청을 SSOT 스펙, 디자인 토큰, QA, 컨포먼스 검증으로 확장하는 CLI/MCP 기반 웹 제작 장치입니다.
제품 설계·CLI/MCP 구현·검증 설계
Metrics
- spec/design/qa/conformance 단계화
- REQ ID 기반 스펙-구현-렌더 추적
- Playwright 기반 렌더·QA 게이트 설계
Stack
Problem
AI가 만든 웹페이지는 빠릅니다. 하지만 스펙·디자인 근거·모션·접근성·검증이 분리되지 않으면 템플릿 같은 산출물에서 멈춥니다.
Idea
게임·이미지 제작에서 쓰던 scope-locked self-evaluating loop를 웹 제작에도 적용하고, 실제 렌더·QA·컨포먼스를 자동 게이트로 삼는 방향에서 출발했습니다.
Decision
spec/research/wireframe/design/build/qa/conform 단계를 CLI와 MCP로 분리하고, 스펙에는 안정적인 REQ ID를 부여했습니다. 렌더링·접근성·성능·로그인 흐름·스펙-코드-DOM 정합성을 각각 게이트로 삼았습니다.
Outcome
웹 요청이 바로 코드로 뛰지 않고, 검증 가능한 제작 계약으로 바뀝니다. 디자인 토큰과 모션 요구사항도 구현·테스트와 같은 추적선 위에 놓입니다.
문제
웹페이지를 빠르게 만드는 것과 좋은 제품 화면을 만드는 것은 다릅니다. 특히 포트폴리오, 랜딩, 대시보드처럼 첫 화면 품질이 중요한 작업은 리서치·IA·디자인·모션·콘텐츠·QA가 분리되어야 합니다.
결정
WebForge는 한 줄 요청을 먼저 SSOT 스펙으로 바꾸고, 각 요구사항에 REQ-* 식별자를 부여합니다. 이후 디자인 토큰, 모션 스펙, 렌더 캡처, 접근성/성능, E2E, 컨포먼스 리포트가 같은 요구사항을 기준으로 연결됩니다.
성과
이 구조 덕분에 “화면은 보이는데 스펙과 다름” 같은 문제를 후반부에 발견하지 않고, 제작 중간마다 단일 게이트로 잡을 수 있습니다. AI가 만든 페이지도 결과물이 아니라 제작 공정 전체를 검증 대상으로 삼게 됩니다.