# FE AI 표준화 방안 PRD

## 프로젝트 개요
프론트엔드(FE) 개발 전 주기에 AI를 활용한 표준화 방안을 수립하고 각 단계별 가이드라인과 실행 방안을 문서화한다.
대상 스택: Nuxt 4, TypeScript (strict), Tailwind CSS v4, shadcn-vue, Pinia

---

## STEP 01 · 기획 (Planning)

### 1-1. 스펙 검토 표준화
- 플로우차트 기준으로 스펙 문서를 AI가 검토하는 프로세스 정의
- 기능 요건 정의 템플릿 작성
- AI 프롬프트 템플릿: 스펙 → 플로우차트 자동 생성

### 1-2. SEO 정보 표준화 및 검증
- Nuxt 4 useSeoMeta / useHead 기반 SEO 메타 표준 정의
- AI 기반 SEO 검증 도구 선정 (Lighthouse, 커스텀 스크립트 등)
- SEO 검증 프로세스 표준화 문서 작성

### 1-3. 번역코드 생성 표준화 (i18n)
- i18n 키 네이밍 컨벤션 정의 (예: `page.section.element`)
- AI를 활용한 i18n 키 자동 생성 프롬프트/스크립트 작성
- 번역 파일 구조 표준화 (locale JSON 구조)

---

## STEP 02 · 디자인 (Design)

### 2-1. Figma 네이밍 규칙
- Figma 컴포넌트 명명 규칙 가이드 작성 (PascalCase, BEM 등)
- AI 기반 Figma 네이밍 검수 프로세스 정의
- Vue 컴포넌트명과 Figma 컴포넌트명 매핑 규칙 수립

### 2-2. EDM 마크업 표준화
- 이메일 템플릿 규격 정의 (width, font, 지원 클라이언트 목록)
- 이메일 HTML 마크업 표준화 가이드 작성 (table 레이아웃, inline style)
- 이메일 검증 도구 선정 (Litmus, Email on Acid 등)
- AI 기반 이메일 검증 프로세스 표준화

### 2-3. 프로모션 마크업 표준화
- 프로모션 페이지 필요 정보 입력 방식 정의
  - 이미지 URL, 프로모션 기간, 유의사항, 아이템 코드
- AI 기반 프로모션 마크업 자동 생성 프롬프트 작성
- 프로모션 컴포넌트 템플릿 표준화

---

## STEP 03 · 구현 (Implementation)

### 3-1. AI 코딩 도구 표준화
- Claude / Cursor 사용 가이드 작성
- 팀 내 AI 코딩 도구 선정 및 라이선스 정책 수립 (Claude, Cursor 기준)
- 코드 자동 완성 활용 패턴 및 주의사항 문서화

### 3-2. 개발 컨벤션 표준화
- i18n 사용 컨벤션 (useI18n, $t 사용 기준)
- 미들웨어 작성 컨벤션 (인증, 권한, 리다이렉트)
- 언어 정책 컨벤션 (다국어 라우팅, locale 전환)
- 점검 페이지 컨벤션
- 인트로/스플래시 페이지 컨벤션
- 에러 페이지 컨벤션 (404, 500, error.vue)

### 3-3. 코드 리팩토링 표준화
- AI 기반 리팩토링 제안 프로세스 정의
- 리팩토링 체크리스트 작성 (컴포넌트 분리, 재사용성, 타입 안전성)
- 코드 품질 지표 정의 및 AI 분석 방법

### 3-4. 코드 리뷰 자동화
- AI 코드 리뷰 도구 선정 및 설정 (GitHub Copilot PR Review 등)
- MR/PR 자동 요약 프롬프트/봇 설정
- Git Conflict 처리 AI 보조 프로세스 정의

### 3-5. 파일 수정 표준화 (커밋 · 테스트)
- 커밋 메시지 표준 정의 (feat/fix/refactor/style/docs/test/chore)
- 단위 테스트 작성 표준 (Vitest + @nuxt/test-utils)
- AI 기반 테스트 코드 자동 생성 프롬프트/스크립트

### 3-6. CI 파이프라인 표준화
- CI 파이프라인 스크립트 생성 가이드 (GitLab CI 기준)
- AI 기반 빌드 오류 분석 프로세스
- CI 최적화 제안 체크리스트

### 3-7. 기술 문서 자동화
- 기능별 플로우 다이어그램/ERD AI 작성 가이드
- README 자동 생성 프롬프트 템플릿
- 코드 주석 자동 생성 표준 (JSDoc / TSDoc)

### 3-8. 보안 검수 표준화
- AI 기반 취약점 자동 탐지 도구 선정 (Snyk, ESLint security plugin 등)
- 보안 패턴 검사 체크리스트 작성
- 보안 검수 CI 단계 통합 방안

---

## STEP 04 · 검증 (Verification)

### 4-1. 테스트 케이스 설계
- AI 기반 테스트 케이스 자동 생성 프로세스 정의
- 엣지 케이스 도출 방법론 및 프롬프트 작성
- 테스트 케이스 템플릿 표준화

### 4-2. 기능·통합 테스트 자동화
- E2E 테스트 자동화 스크립트 작성 (Playwright 등)
- AI 기반 이슈 자동 탐지 프로세스
- 테스트 결과 리포트 표준화

### 4-3. 성능·보안 검토
- 성능 취약점 자동 탐지 (Lighthouse CI, Web Vitals 기준)
- 병목 지점 AI 분석 방법론
- 성능·보안 검토 체크리스트 작성

### 4-4. 버그 리포트·수정 자동화
- AI 기반 버그 원인 분석 프로세스
- 버그 수정 제안 프롬프트 템플릿
- 자동 버그 리포팅 시스템 설계

---

## 공통 산출물
- 각 단계별 AI 프롬프트 템플릿 모음
- 표준화 가이드 문서 (Markdown)
- CI/CD 통합 스크립트
- 팀 온보딩 자료
