웹 프로젝트의 QA는 반복적이고 시간을 가장 많이 잡아먹습니다. 아키텍처 분석, 접근성 검사, 성능 측정, SEO 체크, 비주얼 리그레션 · 매번 수동으로 하면 한 페이지에 30분 이상 소요됩니다.
"웹사이트 분석·테스트·QA를 3개 AI 모듈이 분업하면, 기획자가 URL 하나만 입력해도 아키텍처 분석부터 비주얼 검증까지 자동으로 끝낼 수 있다."
| 결정 | 선택 | 기획적 근거 |
|---|---|---|
| 모듈 구조 | 3-모듈 분리 (Architect/QA/Visual) |
각 모듈이 독립 관심사. 설계 분석, 품질 보증, 시각 검증은 각기 다른 전문 영역 |
| 실행 보장 | Temporal Durable Execution |
웹 분석은 수 분~수십 분 걸릴 수 있음. 중간에 서버 재시작해도 이어서 실행하는 내구성 필요 |
| 상태 관리 | xstate 상태 머신 |
분석 파이프라인의 각 단계를 명확한 상태로 관리. "지금 어디까지 진행됐나?"를 정확히 추적 |
| AI 통합 | MCP 서버 연동 | Model Context Protocol로 다양한 AI 모델을 동일 인터페이스로 호출. 모델 교체 시 코드 변경 최소화 |
| 데이터 | Prisma ORM | 분석 결과를 구조화된 DB에 저장. 히스토리 추적 + 리포트 자동 생성의 기반 |
graph LR URL["URL 입력"] --> MC["MissionControl
파이프라인 관리"] subgraph MODULES["3-모듈"] A01["Architect-01
아키텍처 분석"] QAP["QA-Pilot
접근성·성능·SEO"] VIS["Visual-Core
비주얼 리그레션"] end MC --> A01 MC --> QAP MC --> VIS subgraph INFRA["인프라"] TMP["Temporal
Durable Execution"] DB[("Prisma DB")] MCP["MCP Server"] end A01 --> MCP QAP --> TMP VIS --> DB TMP --> DB
| 모듈 | 역할 | 핵심 기능 |
|---|---|---|
| Architect-01 | 웹 아키텍처 분석 | 사이트 구조 파악, 기술 스택 탐지, 아키텍처 패턴 분류, 개선 제안 |
| QA-Pilot | QA 자동화 | 접근성(WCAG) 검사, Lighthouse 성능 측정, SEO 감사, 보안 헤더 점검 |
| Visual-Core | 비주얼 리그레션 | 페이지 스크린샷 캡처, 변경 전후 비교, 시각적 차이 감지+리포트 |
| 영역 | 모듈 | 역할 |
|---|---|---|
| AI Core | agent/, ai/, brain/ | AI 에이전트 코어, 모델 통합 레이어, 지능 시스템 (RAG, 추론) |
| 실행 | cells/, machines/, workers/ | 분석 셀 (분석·생성·QA 단위), xstate 상태 머신, 백그라운드 워커 |
| 연동 | mcp/, services/, data/ | MCP 서버 연동, 서비스 레이어, 데이터 레이어 |
| 프론트 | app/, components/, context/ | Next.js App Router, React 컴포넌트, Context 상태 |
| 공통 | hooks/, lib/, store/, types/, utils/, config/, content/ | 커스텀 훅, 유틸리티, 상태 관리, TypeScript 타입, 설정 |
URL 입력 → 3-모듈 병렬 분석 → 통합 리포트 생성까지의 전체 흐름.
sequenceDiagram
actor User as 사용자
participant MC as MissionControl
participant A01 as Architect-01
participant QAP as QA-Pilot
participant VIS as Visual-Core
participant DB as Prisma DB
User->>MC: URL 입력
MC->>MC: 파이프라인 초기화
par 병렬 분석
MC->>A01: 아키텍처 분석 요청
A01->>A01: 구조 파악 + 기술 스택 탐지
A01-->>DB: 분석 결과 저장
and
MC->>QAP: QA 분석 요청
QAP->>QAP: 접근성+성능+SEO 검사
QAP-->>DB: QA 결과 저장
and
MC->>VIS: 비주얼 캡처 요청
VIS->>VIS: 스크린샷 + 비교 분석
VIS-->>DB: 비주얼 결과 저장
end
MC->>DB: 통합 리포트 생성
MC-->>User: 결과 대시보드 표시