diff --git a/docs/presentation-roadmap.md b/docs/presentation-roadmap.md new file mode 100644 index 0000000..8d91da8 --- /dev/null +++ b/docs/presentation-roadmap.md @@ -0,0 +1,481 @@ +# 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