# FE AI 표준화 프로젝트 - 발표용 로드맵

> 프론트엔드 팀의 AI 활용을 기획-디자인-구현-검증 4단계에 걸쳐 체계적으로 표준화하는 13주 프로젝트

---

## 1. 현황 분석

### 현재 프론트엔드 팀이 직면한 과제

| 영역 | 현재 상태 | 핵심 문제 |
|------|-----------|-----------|
| AI 도구 활용 | 개인별 산발적 사용 | 표준 없이 각자 다른 방식으로 활용 |
| 코드 리뷰 | 수동 리뷰, 병목 발생 | PR 리뷰 대기 시간 과다 |
| 테스트 | 테스트 커버리지 낮음 | 자동화된 품질 게이트 부재 |
| 문서화 | 수동 작성, 갱신 누락 | 기술 문서와 코드 간 불일치 |
| 보안 | 배포 전 수동 검수 | 보안 취약점 탐지 자동화 미비 |
| 컨벤션 | 암묵적 합의 수준 | 코드 스타일 / 커밋 규칙 불통일 |

### 진행 상황 (2026-03-24 기준)

```
전체 진행률: ██░░░░░░░░░░░░░░░░░░ 11% (2/18 태스크 완료)

Sprint 0 ████████████████████ 진행중
Sprint 1 ░░░░░░░░░░░░░░░░░░░░ 대기
Sprint 2 ░░░░░░░░░░░░░░░░░░░░ 대기
Sprint 3 ░░░░░░░░░░░░░░░░░░░░ 대기
Sprint 4 ░░░░░░░░░░░░░░░░░░░░ 대기
Sprint 5 ░░░░░░░░░░░░░░░░░░░░ 대기
Sprint 6 ░░░░░░░░░░░░░░░░░░░░ 대기
```

| 상태 | 태스크 |
|------|--------|
| 완료 | Task 1: 프로젝트 기본 구조 및 환경 설정 |
| 완료 | Task 2: 스펙 검토 표준화 프로세스 구축 |
| 대기 | Task 3~18: 16개 태스크 진행 예정 |

---

## 2. 프로젝트 목표

### 비전

> **"AI를 팀의 표준 도구로 만들어, 개발 생산성과 코드 품질을 동시에 끌어올린다"**

### 핵심 목표 4가지

| 목표 | 설명 | 측정 지표 |
|------|------|-----------|
| **생산성 향상** | AI 도구를 활용한 개발 속도 개선 | PR 생성~머지 시간 30% 단축 |
| **품질 강화** | 자동화된 품질 게이트 구축 | 테스트 커버리지 70% 이상 |
| **프로세스 표준화** | 기획~검증 전 단계 표준 수립 | AI 도구 활용률 80% 이상 |
| **보안 내재화** | 보안 검수 파이프라인 자동화 | 보안 취약점 자동 탐지 100% |

### 기술 스택

```
Nuxt 4  /  TypeScript strict  /  Tailwind CSS v4  /  shadcn-vue  /  Pinia  /  Vitest
```

### 팀 구성 (5~7명)

| 역할 | 인원 | 핵심 담당 |
|------|------|-----------|
| 테크 리드 | 1명 | 아키텍처, 컨벤션 수립, 교육 |
| 시니어 개발자 | 2명 | CI/CD, 보안, 테스트, 핵심 모듈 |
| 미드레벨 개발자 | 2~3명 | 컴포넌트, i18n, 문서 자동화 |
| 주니어 개발자 | 1명 | 프로모션 마크업, EDM |

---

## 3. 전체 로드맵

### 스프린트 타임라인

```mermaid
gantt
    title FE AI 표준화 프로젝트 - 13주 로드맵
    dateFormat YYYY-MM-DD
    axisFormat %m/%d

    section Sprint 0
    기반 구축 및 공통 표준 수립           :active, s0, 2026-03-23, 5d

    section Sprint 1
    개발 컨벤션 및 AI 코딩 환경 구축       :s1, 2026-03-30, 10d

    section Sprint 2
    코드 리뷰 자동화 및 CI 파이프라인       :s2, 2026-04-14, 10d

    section Sprint 3
    기획/디자인 표준화 및 기술 문서 자동화    :s3, 2026-04-28, 10d

    section Sprint 4
    테스트 자동화 및 보안 표준화            :s4, 2026-05-11, 10d

    section Sprint 5
    성능 최적화, 버그 자동화, 고도화         :s5, 2026-05-25, 10d

    section Sprint 6
    안정화, 교육, 전사 롤아웃              :s6, 2026-06-08, 10d

    section 마일스톤
    M1: 개발 환경 구축 완료               :milestone, m1, 2026-04-10, 0d
    M2: CI/CD 파이프라인 가동             :milestone, m2, 2026-04-25, 0d
    M3: 4단계 표준화 체계 수립             :milestone, m3, 2026-05-08, 0d
    M4: 품질 자동화 파이프라인 완성         :milestone, m4, 2026-05-22, 0d
    M5: 전사 롤아웃 완료                  :milestone, m5, 2026-06-19, 0d
```

### 스프린트별 일정 요약

| 스프린트 | 기간 | 핵심 목표 | 태스크 수 |
|---------|------|-----------|----------|
| **Sprint 0** | 03/23 ~ 03/27 (1주) | 기반 구축 및 공통 표준 수립 | 2개 |
| **Sprint 1** | 03/30 ~ 04/10 (2주) | 개발 컨벤션 및 AI 코딩 환경 구축 | 4개 |
| **Sprint 2** | 04/14 ~ 04/25 (2주) | 코드 리뷰 자동화 및 CI 파이프라인 | 3개 |
| **Sprint 3** | 04/28 ~ 05/08 (2주) | 기획/디자인 표준화 및 기술 문서 자동화 | 4개 |
| **Sprint 4** | 05/11 ~ 05/22 (2주) | 테스트 자동화 및 보안 표준화 | 3개 |
| **Sprint 5** | 05/25 ~ 06/05 (2주) | 성능 최적화, 버그 자동화, 고도화 | 2개 |
| **Sprint 6** | 06/08 ~ 06/19 (2주) | 안정화, 교육, 전사 롤아웃 | - |

---

## 4. 단계별 상세 계획 및 성과물

### Sprint 0: 기반 구축 (03/23 ~ 03/27)

**핵심 질문: "팀 전원이 같은 출발선에 서 있는가?"**

| 태스크 | 우선순위 | 상태 |
|--------|---------|------|
| Task 1: 프로젝트 기본 구조 및 환경 설정 | Must | 완료 |
| Task 2: 스펙 검토 표준화 프로세스 구축 | Should | 완료 |

**핵심 산출물**
- Nuxt 4 보일러플레이트 프로젝트
- AI 도구(Copilot/Cursor) 설정 가이드
- 일정관리 및 업무일지 표준 템플릿
- 스펙 검토 프롬프트 템플릿

---

### Sprint 1: 개발 컨벤션 및 AI 코딩 환경 (03/30 ~ 04/10)

**핵심 질문: "코드를 어떻게 작성하고, AI를 어떻게 쓸 것인가?"**

| 태스크 | 우선순위 | 상태 |
|--------|---------|------|
| Task 3: SEO 메타데이터 표준화 및 검증 시스템 | High | 대기 |
| Task 4: i18n 다국어 표준화 시스템 | Medium | 대기 |
| Task 8: AI 코딩 도구 표준화 가이드 | Medium | 대기 |
| Task 9: 개발 컨벤션 표준화 문서 | High | 대기 |

**핵심 산출물**
- i18n 미들웨어 및 언어 정책 표준
- 글로벌 에러 처리 표준 (`error.vue`)
- commitlint + husky 커밋 메시지 자동 검증
- Vitest 단위 테스트 표준 가이드
- ESLint + Prettier 통합 규칙
- TypeScript strict 모드 (`any` 타입 0건)

---

### Sprint 2: 코드 리뷰 자동화 및 CI (04/14 ~ 04/25)

**핵심 질문: "코드 리뷰와 배포를 얼마나 자동화할 수 있는가?"**

| 태스크 | 우선순위 | 상태 |
|--------|---------|------|
| Task 10: AI 기반 코드 리팩토링 시스템 | Medium | 대기 |
| Task 11: 자동화된 코드 리뷰 시스템 | Medium | 대기 |
| Task 12: 커밋 및 테스트 표준화 시스템 | High | 대기 |
| Task 13: CI/CD 파이프라인 표준화 | High | 대기 |

**핵심 산출물**
- AI 코드 리뷰 봇 (PR 자동 요약)
- CI 파이프라인 (lint -> type-check -> test -> build)
- 빌드 오류 AI 자동 분석
- PR 템플릿 및 체크리스트
- Conflict 자동 감지 알림 워크플로우

---

### Sprint 3: 기획/디자인 표준화 및 문서 자동화 (04/28 ~ 05/08)

**핵심 질문: "기획과 디자인 단계에서 AI가 무엇을 도울 수 있는가?"**

| 태스크 | 우선순위 | 상태 |
|--------|---------|------|
| Task 5: Figma 네이밍 규칙 및 컴포넌트 매핑 시스템 | Medium | 대기 |
| Task 6: EDM 이메일 템플릿 표준화 시스템 | Medium | 대기 |
| Task 7: 프로모션 페이지 자동 생성 시스템 | Medium | 대기 |
| Task 14: 기술 문서 자동화 시스템 | Medium | 대기 |

**핵심 산출물**
- SEO 메타 정보 자동 추출 유틸리티
- i18n 키 자동 생성 스크립트 (`pnpm i18n:extract`)
- Figma 네이밍 규칙 가이드
- EDM 표준 템플릿 및 프로모션 마크업 생성 도구
- README / ERD / JSDoc 자동 생성

---

### Sprint 4: 테스트 자동화 및 보안 표준화 (05/11 ~ 05/22)

**핵심 질문: "품질과 보안을 자동으로 보장할 수 있는가?"**

| 태스크 | 우선순위 | 상태 |
|--------|---------|------|
| Task 15: 보안 검수 자동화 시스템 | High | 대기 |
| Task 16: AI 기반 테스트 케이스 자동 생성 | Medium | 대기 |
| Task 17: 성능 및 통합 테스트 자동화 | Medium | 대기 |

**핵심 산출물**
- AI 테스트 케이스 자동 생성 프롬프트
- E2E 테스트 프레임워크 (Playwright)
- 보안 취약점 자동 탐지 파이프라인 (npm audit / Snyk)
- 테스트 커버리지 PR 자동 리포트
- 보안 패턴 검사 ESLint 규칙

---

### Sprint 5: 성능 최적화 및 고도화 (05/25 ~ 06/05)

**핵심 질문: "성능 병목과 버그를 AI가 선제적으로 발견할 수 있는가?"**

| 태스크 | 우선순위 | 상태 |
|--------|---------|------|
| Task 18: 버그 리포트 및 수정 자동화 시스템 | Medium | 대기 |

**핵심 산출물**
- Lighthouse CI 연동 성능 리포트
- 번들 사이즈 모니터링 대시보드
- 에러 자동 리포팅 워크플로우
- 주간 코드 품질 리포트 (AI 리팩토링 제안)
- shadcn-vue 컴포넌트 인벤토리

---

### Sprint 6: 안정화 및 전사 롤아웃 (06/08 ~ 06/19)

**핵심 질문: "표준화를 팀 전체에, 나아가 전사에 확산할 준비가 되었는가?"**

**핵심 산출물**
- 전체 표준화 항목 최종 검증 리포트
- AI 표준화 활용 가이드북 (최종본)
- 팀 워크숍 실시 (AI 도구 실습 + Q&A)
- 전사 공유 발표 자료
- KPI 측정 효과 리포트
- 차기 분기 개선 로드맵 초안

---

## 5. 마일스톤 정의

```mermaid
timeline
    title FE AI 표준화 프로젝트 마일스톤
    03/27 : M1 - 개발 환경 구축 완료
           : Nuxt 4 보일러플레이트
           : AI 도구 전원 설치
    04/10 : M2 - 개발 컨벤션 확립
           : i18n/에러처리 표준
           : 커밋/테스트 규칙 적용
    04/25 : M3 - CI/CD 파이프라인 가동
           : AI 코드 리뷰 자동화
           : 빌드/배포 파이프라인
    05/22 : M4 - 품질 자동화 완성
           : 테스트 커버리지 70%
           : 보안 탐지 파이프라인
    06/19 : M5 - 전사 롤아웃 완료
           : 가이드북 배포
           : KPI 달성 보고
```

| 마일스톤 | 날짜 | 달성 기준 | 핵심 산출물 |
|---------|------|-----------|------------|
| **M1: 개발 환경 구축 완료** | 2026-03-27 | 전 팀원 AI 도구 설치, 보일러플레이트 Git 푸시 완료 | Nuxt 4 프로젝트 템플릿, AI 도구 설정 가이드 |
| **M2: 개발 컨벤션 확립** | 2026-04-10 | i18n 미들웨어 동작, commitlint 적용, `any` 타입 0건 | 컨벤션 문서, ESLint/Prettier 규칙, Vitest 표준 |
| **M3: CI/CD 파이프라인 가동** | 2026-04-25 | AI 리뷰 봇 동작, CI 4단계 파이프라인 실행 확인 | CI 파이프라인, PR 자동 요약, 빌드 오류 분석 |
| **M4: 품질 자동화 파이프라인 완성** | 2026-05-22 | 테스트 커버리지 70%+, 보안 스캔 CI 통합 완료 | E2E 테스트, 보안 탐지, 커버리지 리포트 |
| **M5: 전사 롤아웃 완료** | 2026-06-19 | 가이드북 배포, 워크숍 완료, KPI 리포트 제출 | 표준화 가이드북, KPI 효과 보고서, 차기 로드맵 |

---

## 6. 우선순위 분류 (MoSCoW)

```mermaid
pie title 태스크 우선순위 분포
    "Must Have" : 8
    "Should Have" : 7
    "Could Have" : 5
```

### Must Have (반드시 구현)

프로젝트 성공의 핵심 기반. 이 항목이 빠지면 표준화 자체가 불가능하다.

- 개발 컨벤션 표준화 (i18n, 에러 처리, 미들웨어)
- AI 코딩 도구 설정 (Copilot / Cursor)
- 파일 수정 표준화 (커밋 메시지, 단위 테스트)
- 코드 리뷰 자동화 (PR 요약, Conflict 처리)
- CI 파이프라인 표준화
- 테스트 케이스 설계 및 자동 생성
- 일정관리 / 업무일지 표준화

### Should Have (강력 권장)

품질과 생산성을 한 단계 끌어올리는 항목.

- 스펙 검토 표준화, SEO, i18n
- 코드 리팩토링, 기술 문서 자동화
- 기능/통합 테스트, 보안 검수

### Could Have (팀 여력에 따라)

있으면 좋지만, 일정 압박 시 후순위로 조정 가능.

- Figma 네이밍, EDM, 프로모션 마크업
- 성능 검토, 버그 자동화

---

## 7. 도입 효과 예상 (Before / After)

### 생산성 지표

| 지표 | Before (현재) | After (목표) | 개선 효과 |
|------|--------------|-------------|-----------|
| PR 생성 ~ 머지 평균 시간 | 약 8시간 | 약 5.6시간 | **30% 단축** |
| 코드 리뷰 1차 응답 시간 | 6~12시간 | 4시간 이내 | **50% 이상 단축** |
| i18n 키 생성 소요 시간 | 수동 30분/페이지 | 자동 9분/페이지 | **70% 단축** |
| AI 도구 일일 사용률 | 30~40% (추정) | 80% 이상 | **2배 이상 향상** |

### 품질 지표

| 지표 | Before (현재) | After (목표) | 개선 효과 |
|------|--------------|-------------|-----------|
| 단위 테스트 커버리지 | 약 20% (추정) | 70% 이상 | **3.5배 향상** |
| TypeScript `any` 사용 | 다수 존재 | 0건 | **타입 안전성 확보** |
| ESLint 경고/에러 | PR별 편차 큼 | 0건 (자동 검증) | **일관된 코드 품질** |
| Lighthouse 성능 점수 | 변동 (70~85) | 90점 이상 | **안정적 성능 유지** |
| 보안 취약점 탐지 | 배포 후 수동 | CI에서 자동 | **선제적 보안 대응** |

### 프로세스 지표

| 지표 | Before (현재) | After (목표) |
|------|--------------|-------------|
| 표준화 항목 완료율 | 0% | Must/Should 100% |
| 코드 리뷰 자동 요약 | 미적용 | 100% 적용 |
| 업무일지 작성률 | 불규칙 | 100% (주간) |
| 팀 만족도 (AI 도구) | 미측정 | 4.0/5.0 이상 |

### 단계별 Before / After 비교

```
[기획 단계]
  Before: 기획서를 받으면 개발자가 수동으로 기능 요건을 분석
  After:  AI가 기획서를 분석하여 플로우차트, SEO 메타, i18n 키를 자동 생성

[디자인 단계]
  Before: Figma 네이밍 불일치, EDM/프로모션 매번 수동 마크업
  After:  네이밍 규칙 자동 검증, 템플릿 기반 마크업 자동 생성

[구현 단계]
  Before: 개인별 코딩 스타일 상이, 리뷰 병목, 수동 CI
  After:  AI 코딩 보조 + 자동 리뷰 + CI 파이프라인으로 일관된 품질

[검증 단계]
  Before: 수동 테스트, 배포 후 버그 발견, 보안 사후 점검
  After:  AI 테스트 케이스 자동 생성, 보안 스캔 CI 통합, 성능 자동 모니터링
```

---

## 8. 리스크 관리

### 주요 리스크 및 대응 방안

| 위험도 | 리스크 | 대응 방안 |
|--------|--------|-----------|
| **높음** | AI 리뷰 봇 오탐(False Positive) 누적 | 2주 튜닝 기간 운영, 팀 피드백 기반 규칙 조정 |
| **높음** | TypeScript strict 전환 시 대량 수정 | 점진적 적용 (파일 -> 모듈 -> 전체) |
| **높음** | 스프린트 간 태스크 이월 누적 | 주간 회고 조기 식별, Sprint 6에 3일 버퍼 |
| **중간** | Copilot 라이선스 승인 지연 | Cursor 무료 티어 우선 도입 |
| **중간** | Nuxt 4 + i18n 모듈 호환성 이슈 | `@nuxtjs/i18n` 사전 검증, 커스텀 폴백 |
| **중간** | 팀원 AI 도구 숙련도 편차 | 페어 프로그래밍, 주간 팁 공유, 워크숍 |
| **중간** | E2E 테스트 CI 환경 불안정 | Docker 기반 헤드리스 브라우저, 재시도 3회 |

### 완화 전략 요약

```
1. 점진적 도입   - 한꺼번에 전환하지 않고 단계적으로 적용
2. 버퍼 확보     - Sprint 6에 3일 보완 작업 버퍼
3. 대안 준비     - 주요 도구별 대체 방안 사전 확보
4. 빠른 피드백   - 주간 회고로 이슈 조기 발견 및 조정
```

---

## 9. KPI 대시보드

### 핵심 KPI 6개

| KPI | 목표치 | 측정 시점 | 측정 방법 |
|-----|--------|-----------|-----------|
| AI 도구 활용률 | **80% 이상** | Sprint 1 이후 주간 | Copilot/Cursor 사용 로그 |
| 코드 리뷰 자동 요약 적용률 | **100%** | Sprint 2 이후 | PR 자동 코멘트 비율 |
| 단위 테스트 커버리지 | **70% 이상** | Sprint 4 이후 주간 | `vitest --coverage` |
| 보안 취약점 자동 탐지 | **파이프라인 완성** | Sprint 4 종료 | CI 보안 스캔 실행 확인 |
| PR 생성 ~ 머지 시간 | **30% 단축** | Sprint 2 이후 격주 | GitHub 메트릭 |
| Lighthouse 성능 점수 | **90점 이상** | Sprint 5 이후 | Lighthouse CI |

### 측정 카테고리

```
 생산성          품질            프로세스
 --------       --------        --------
 AI 활용률       테스트 커버리지    표준화 완료율
 PR 머지 시간    any 타입 0건     업무일지 작성률
 리뷰 응답 시간   ESLint 0건      팀 만족도
 i18n 생성 시간   보안 취약점 0건   템플릿 활용률
```

---

## 10. 18개 태스크 전체 현황

| ID | 태스크명 | 우선순위 | 스프린트 | 상태 |
|----|---------|---------|---------|------|
| 1 | 프로젝트 기본 구조 및 환경 설정 | Must | Sprint 0 | 완료 |
| 2 | 스펙 검토 표준화 프로세스 구축 | Should | Sprint 0 | 완료 |
| 3 | SEO 메타데이터 표준화 및 검증 시스템 | High | Sprint 1 | 대기 |
| 4 | i18n 다국어 표준화 시스템 | Medium | Sprint 1 | 대기 |
| 5 | Figma 네이밍 규칙 및 컴포넌트 매핑 시스템 | Medium | Sprint 3 | 대기 |
| 6 | EDM 이메일 템플릿 표준화 시스템 | Medium | Sprint 3 | 대기 |
| 7 | 프로모션 페이지 자동 생성 시스템 | Medium | Sprint 3 | 대기 |
| 8 | AI 코딩 도구 표준화 가이드 | Medium | Sprint 1 | 대기 |
| 9 | 개발 컨벤션 표준화 문서 | High | Sprint 1 | 대기 |
| 10 | AI 기반 코드 리팩토링 시스템 | Medium | Sprint 2 | 대기 |
| 11 | 자동화된 코드 리뷰 시스템 | Medium | Sprint 2 | 대기 |
| 12 | 커밋 및 테스트 표준화 시스템 | High | Sprint 2 | 대기 |
| 13 | CI/CD 파이프라인 표준화 | High | Sprint 2 | 대기 |
| 14 | 기술 문서 자동화 시스템 | Medium | Sprint 3 | 대기 |
| 15 | 보안 검수 자동화 시스템 | High | Sprint 4 | 대기 |
| 16 | AI 기반 테스트 케이스 자동 생성 | Medium | Sprint 4 | 대기 |
| 17 | 성능 및 통합 테스트 자동화 | Medium | Sprint 4 | 대기 |
| 18 | 버그 리포트 및 수정 자동화 시스템 | Medium | Sprint 5 | 대기 |

---

## 11. 발표 요약

### 한 장 요약

```
프로젝트: FE AI 표준화
기간:     13주 (2026-03-23 ~ 2026-06-19)
팀:       5~7명
범위:     기획 - 디자인 - 구현 - 검증 4단계 전체

현재:     2/18 태스크 완료 (11%)
목표:     AI 활용률 80%+  /  테스트 70%+  /  PR 시간 30% 단축

접근법:   Sprint 0~6, 7단계 점진적 도입
핵심:     "도구가 아닌 표준을 만든다"
```

### 다음 단계 (Action Items)

1. Sprint 1 착수 (2026-03-30): 개발 컨벤션 + AI 코딩 환경 구축
2. Task 9 (개발 컨벤션 표준화) 및 Task 3 (SEO 표준화) 우선 진행
3. 주간 진행 상황 공유 및 리스크 모니터링 시작

---

> 문서 작성일: 2026-03-24
> 기술 스택: Nuxt 4 / TypeScript strict / Tailwind CSS v4 / shadcn-vue / Pinia / Vitest