AI Front-end Harness
Personal Project · 2026
“AI로 코드를 빨리 만든다”가 아니라 “AI가 우리 팀의 규칙대로 일관되게 만들게 한다”는 데 초점을 둔 프론트엔드 개발 하네스입니다. 개발 표준을 단일 진실 소스로 두고, 에이전트가 그 문서를 읽어 컴포넌트·테스트를 생성한 뒤 품질 게이트로 검증합니다.
개발 파이프라인
요구사항이 표준을 거쳐 검증된 PR이 되기까지의 흐름. 품질 게이트에서 실패하면 에이전트가 리포트를 받아 다시 수정합니다.
왜 만들었나
AI 코드 생성은 빠르지만, 매번 스타일·구조·테스트 방식이 달라지면 오히려 리뷰·유지보수 비용이 늘어난다. 핵심은 “표준을 사람이 아니라 파이프라인이 강제하게” 만드는 것이다. 규칙을 문서 하나로 모으고, 생성·검증 단계에서 그 규칙을 반복 적용하면 결과물의 편차가 줄어든다.
구성 요소
개발 표준 (Single Source of Truth)
standards컴포넌트 구조·네이밍·테스트 규칙을 Markdown(standards/*.md · AGENTS.md)으로 명문화. 사람과 AI가 같은 문서를 읽고 같은 규칙으로 코드를 만든다.
컴포넌트 스캐폴더
scaffold표준을 강제하는 템플릿으로 컴포넌트·스토리·테스트 뼈대를 한 번에 생성. --dry-run으로 실제 생성 없이 결과를 미리 확인할 수 있다.
재사용 프롬프트 라이브러리
prompts테스트 생성·보강, 데모 데이터 시드, 리팩터링 등 반복 작업을 프롬프트로 표준화. 에이전트가 표준 문서를 주입받아 일관된 산출물을 낸다.
품질 루프 (Quality Loop)
quality-loopVitest·ESLint·SonarQube 리포트를 다시 AI에게 넘겨 개선 → 재검증을 반복. 게이트를 통과할 때까지 자동으로 좁혀간다.
예시 폴더 구조
표준·템플릿·스크립트·CI가 저장소에서 어떻게 놓이는지 보여주는 예시입니다.
ai-fe-harness/ ├─ AGENTS.md # 에이전트가 가장 먼저 읽는 최상위 규칙├─ standards/ # 개발 표준 — 단일 진실 소스│ ├─ component.md # 컴포넌트 구조·네이밍│ └─ testing.md # 테스트 작성 규칙├─ templates/component/ # 스캐폴더 템플릿│ ├─ __NAME__.tsx │ ├─ __NAME__.test.tsx │ └─ __NAME__.stories.tsx ├─ prompts/ # 재사용 프롬프트 라이브러리├─ scripts/ │ ├─ scaffold.mjs # 컴포넌트 스캐폴더 (--dry-run)│ ├─ agent-generate.mjs # 실행 에이전트 루프│ └─ quality-fix.mjs # 품질 루프 (Sonar → AI 개선)├─ eslint.config.js └─ .github/workflows/ci.yml # lint · test · build 게이트이 포트폴리오도 같은 방식으로 (dogfooding)
지금 보고 있는 이 포트폴리오 사이트 자체가 동일한 접근으로 구축됐습니다. 개발 표준을 문서로 두고, 컴포넌트·테스트를 표준에 맞춰 생성하며, CI에서 lint·test·build를 게이트로 검증합니다.