125 lines
4.7 KiB
Plaintext
125 lines
4.7 KiB
Plaintext
# 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 통합 스크립트
|
|
- 팀 온보딩 자료
|