Ch12. 바이브코딩 실전 패턴

✅ 좋은 예:
"사용자가 로그인할 때 이메일과 비밀번호를 검증하고, 
성공하면 JWT 토큰을 발급하는 API를 만들어주세요."

❌ 나쁜 예:
"로그인 API 만들어주세요."

✅ 좋은 예:
"현재 Express.js와 TypeScript를 사용하고 있고, 
기존 사용자 모델은 Prisma로 관리하고 있습니다. 
이 구조에 맞춰서 비밀번호 재설정 기능을 추가해주세요."

❌ 나쁜 예:
"비밀번호 재설정 기능 추가해주세요."

✅ 좋은 예:
"React 컴포넌트를 작성할 때 다음 규칙을 지켜주세요:
- 함수형 컴포넌트 사용
- TypeScript 엄격 모드 준수
- 기존 디자인 시스템 컴포넌트 활용
- 접근성 고려 (ARIA 속성 포함)"

❌ 나쁜 예:
"React 컴포넌트 만들어주세요."

✅ 좋은 예:
"기존 UserCard 컴포넌트와 비슷한 스타일로 
ProductCard 컴포넌트를 만들어주세요. 
이미지, 제목, 가격, 설명을 표시하고 
장바구니 추가 버튼을 포함해주세요."

❌ 나쁜 예:
"ProductCard 컴포넌트 만들어주세요."

세션 A: 백엔드 API 개발
- 데이터베이스 스키마
- API 엔드포인트
- 비즈니스 로직

세션 B: 프론트엔드 UI 개발  
- React 컴포넌트
- 상태 관리
- 사용자 인터페이스

세션 C: 테스트 및 문서화
- 단위 테스트
- 통합 테스트  
- API 문서

세션 1: 인프라 레이어
- 데이터베이스 설정
- 환경 구성
- 배포 스크립트

세션 2: 도메인 레이어
- 비즈니스 로직
- 도메인 모델
- 서비스 클래스

세션 3: 프레젠테이션 레이어
- API 컨트롤러
- UI 컴포넌트
- 라우팅

동시 진행:
- 세션 A: 사용자 인증 기능
- 세션 B: 상품 관리 기능  
- 세션 C: 주문 처리 기능

각 세션이 독립적으로 진행되다가
통합 지점에서 합류

# 프로젝트별 컨텍스트
.kiro/steering/
├── project-context.md      # 전체 프로젝트 개요
├── coding-standards.md     # 코딩 표준
├── architecture.md         # 아키텍처 가이드
└── current-sprint.md       # 현재 스프린트 목표

"현재 작업 중인 기능과 관련된 파일들을 참고해주세요:
#[[file:src/models/User.ts]]
#[[file:src/services/AuthService.ts]]
#[[file:docs/api-spec.yaml]]"

1단계: 기본 컨텍스트 설정
"이 프로젝트는 Next.js 기반의 전자상거래 사이트입니다."

2단계: 구체적 컨텍스트 추가
"현재 사용자 인증 시스템을 개선하고 있습니다."

3단계: 세부 컨텍스트 제공
"JWT 토큰 갱신 로직에 버그가 있어서 수정이 필요합니다."

"일단 동작하는 버전을 빠르게 만들어주세요. 
최적화나 에러 처리는 나중에 추가하겠습니다."

→ 빠른 피드백 루프 형성
→ 요구사항 검증
→ 점진적 개선

1차: "기본 기능 구현"
2차: "에러 처리 추가"  
3차: "성능 최적화"
4차: "사용자 경험 개선"
5차: "테스트 코드 보강"

"기존 UserController와 같은 패턴으로 
ProductController를 만들어주세요."

→ 일관된 코드 스타일
→ 검증된 패턴 재사용
→ 개발 속도 향상

❌ 안티패턴:
"React 컴포넌트를 만드는데, useState를 사용하고, 
useEffect는 dependency array에 [data]를 넣고,
className은 'container flex flex-col'로 하고..."

✅ 개선:
"사용자 프로필을 표시하는 React 컴포넌트를 만들어주세요. 
편집 가능하고 실시간 저장되는 형태로 부탁합니다."

❌ 안티패턴:
"API 만들어주세요."

✅ 개선:
"사용자가 자신의 주문 내역을 조회할 수 있는 API를 만들어주세요. 
페이지네이션과 필터링 기능이 필요합니다."

❌ 안티패턴:
매번 새로운 컨텍스트로 시작

✅ 개선:
이전 대화 내용을 참조하여 연속성 유지
"앞서 만든 인증 시스템에 소셜 로그인을 추가해주세요."

❌ 안티패턴:
"모든 엣지 케이스를 고려한 완벽한 코드를 만들어주세요."

✅ 개선:
"일단 핵심 기능이 동작하는 버전을 만들고, 
필요에 따라 점진적으로 개선해나가겠습니다."

# .kiro/steering/team-conventions.md
---
inclusion: always
---

# 팀 개발 컨벤션

## 코드 스타일
- ESLint + Prettier 사용
- 함수명은 동사로 시작
- 컴포넌트는 PascalCase

## Git 컨벤션  
- feat: 새로운 기능
- fix: 버그 수정
- docs: 문서 수정

"팀의 다른 개발자가 이 코드를 쉽게 이해할 수 있도록 
주석과 문서를 충분히 추가해주세요."

"코드 리뷰를 받기 전에 다음 사항들을 확인해주세요:
- 테스트 코드 작성 완료
- 린트 에러 없음
- 타입 안전성 확보
- 성능 이슈 없음"

"반응형 디자인을 고려한 모바일 친화적인 
사용자 인터페이스를 만들어주세요."

"RESTful 원칙을 따르고 OpenAPI 스펙을 
자동 생성할 수 있는 API를 설계해주세요."

"대용량 데이터를 효율적으로 처리할 수 있도록 
스트리밍과 배치 처리를 고려해주세요."

"실제 사용 시나리오를 반영한 통합 테스트와 
엣지 케이스를 다루는 단위 테스트를 작성해주세요."

- 기능 구현 시간 단축: 50-70%
- 코드 리뷰 사이클 단축: 30-50%  
- 버그 발생률 감소: 20-40%
- 문서화 완성도 향상: 60-80%

- 테스트 커버리지 향상
- 코드 복잡도 감소
- 일관성 있는 코딩 스타일
- 향상된 가독성

성공적인 프롬프팅 패턴을 문서화하고 팀과 공유

- 주간 회고에서 Kiro 활용 경험 공유
- 효과적인 패턴과 개선점 논의
- 팀 가이드라인 업데이트

- 새로운 접근 방식 시도
- A/B 테스트로 효과 검증
- 베스트 프랙티스 정립

Week 1: 기반 구조
- Day 1-2: "Next.js + TypeScript + Prisma 기반의 SaaS 대시보드를 설계해주세요"
- Day 3-4: "사용자 인증, 구독 관리, 대시보드 레이아웃 구현"
- Day 5-7: "Stripe 결제 연동, 이메일 알림 시스템 구축"

Week 2: 고도화
- Day 8-10: "실시간 데이터 시각화, 사용자 권한 관리"
- Day 11-12: "성능 최적화, 보안 강화, 에러 처리"
- Day 13-14: "배포 자동화, 모니터링, 문서화"

결과: 30개 API 엔드포인트, 15개 React 컴포넌트, 완전한 CI/CD 파이프라인

Phase 1: 분석 및 설계 (1개월)
"기존 PHP 코드베이스를 분석하고 Node.js 아키텍처로 마이그레이션 계획을 수립해주세요"
→ 200개 파일 분석, 의존성 맵핑, 단계별 마이그레이션 로드맵

Phase 2: 점진적 마이그레이션 (3개월)
"API 우선 마이그레이션으로 기존 시스템과 병행 운영하면서 단계적으로 전환"
→ 무중단 마이그레이션, 데이터 일관성 보장

Phase 3: 최적화 및 현대화 (1개월)
"마이크로서비스 아키텍처 적용, 성능 최적화, 모니터링 시스템 구축"
→ 응답 시간 70% 개선, 유지보수성 대폭 향상

데이터 파이프라인 구축:
"사용자 행동 데이터를 실시간으로 수집하고 전처리하는 파이프라인을 구축해주세요"
→ Kafka + Redis + PostgreSQL 기반 실시간 데이터 처리

ML 모델 통합:
"협업 필터링과 콘텐츠 기반 필터링을 결합한 하이브리드 추천 시스템 구현"
→ Python FastAPI + TensorFlow Serving 연동

A/B 테스트 프레임워크:
"추천 알고리즘의 성능을 측정하고 개선하는 A/B 테스트 시스템 구축"
→ 클릭률 25% 향상, 사용자 체류 시간 40% 증가

문제: "React 앱이 느려요. 최적화해주세요"

Kiro 분석 과정:
1. "React DevTools Profiler 결과를 분석해주세요" [스크린샷 첨부]
2. "번들 크기를 분석하고 코드 스플리팅을 적용해주세요"
3. "메모이제이션이 필요한 컴포넌트를 식별하고 최적화해주세요"
4. "이미지 최적화와 레이지 로딩을 구현해주세요"

결과: 초기 로딩 시간 60% 단축, 메모리 사용량 40% 감소

문제: "간헐적으로 발생하는 데이터 불일치 문제"

Kiro 디버깅 접근:
1. "로그 패턴을 분석하여 문제 발생 조건을 찾아주세요"
2. "동시성 문제가 의심되는 코드 부분을 검토해주세요"
3. "데이터베이스 트랜잭션 격리 수준을 검토하고 개선해주세요"
4. "재현 가능한 테스트 케이스를 작성해주세요"

해결: Race condition 발견 및 수정, 트랜잭션 격리 수준 조정

문제: "보안 감사에서 여러 취약점이 발견됨"

Kiro 보안 강화:
1. "OWASP Top 10 기준으로 코드베이스를 검토해주세요"
2. "SQL 인젝션, XSS 방어 코드를 구현해주세요"
3. "인증/인가 로직을 강화하고 JWT 보안을 개선해주세요"
4. "의존성 취약점을 스캔하고 업데이트해주세요"

결과: 모든 Critical/High 취약점 해결, 보안 점수 A+ 달성

1차 대화: "사용자 인증 시스템의 전체 구조를 분석해주세요"
→ 시스템 이해 및 개선점 파악

2차 대화: "앞서 분석한 내용을 바탕으로 JWT 토큰 갱신 로직을 개선해주세요"
→ 구체적인 구현 개선

3차 대화: "개선된 로직에 대한 단위 테스트를 작성해주세요"
→ 품질 보장

"첨부한 UI 목업을 보고 React 컴포넌트를 구현해주세요"
[UI 목업 이미지 첨부]

"이 에러 스크린샷을 분석하고 해결 방법을 제안해주세요"
[에러 스크린샷 첨부]

"데이터베이스 ERD를 참고해서 API 엔드포인트를 설계해주세요"
[ERD 다이어그램 첨부]

Level 1: "간단한 TODO 앱을 만들어주세요"
Level 2: "사용자 인증 기능을 추가해주세요"
Level 3: "실시간 협업 기능을 구현해주세요"
Level 4: "오프라인 동기화를 지원해주세요"

"당신은 보안 전문가입니다. 이 인증 시스템의 보안 취약점을 찾아주세요"

"당신은 성능 최적화 전문가입니다. 이 React 앱의 렌더링 성능을 개선해주세요"

"당신은 UX 디자이너입니다. 이 사용자 플로우를 개선해주세요"