개발 체크리스트 (역할별)

### 문제 정의 · 기회 발굴 - [ ] 해결하려는 문제 명확화 (Problem Statement 1~2문장) - [ ] 정량·정성 데이터로 문제 입증 - [ ] 기회 가설 · 검증 방법 정의 - [ ] 경쟁 서비스 · 대체재 분석 - [ ] 비즈니

reference docs/reference/0-dev-checklist-by-role.md

기획 · 디자인 · 아키텍트 · UI/UX 개발 · FE · BE · 보안 · QA 각 역할의 주책임(Primary) 기준으로 배치, 경계 지점은 ↔ 로 표기 조직 규모에 따라 역할 병합 가능 — 체크리스트는 유지하되 책임자만 조정

📋 기획 (Product Planning)

문제 정의 · 기회 발굴

해결하려는 문제 명확화 (Problem Statement 1~2문장)
정량·정성 데이터로 문제 입증
기회 가설 · 검증 방법 정의
경쟁 서비스 · 대체재 분석
비즈니스 목표 ↔ 유저 가치 정렬

유저 리서치

페르소나 2~5개 (데이터 기반, 상상 아님)
유저 인터뷰 · 설문 · 행동 로그 분석
유저 저니맵 (현재 상태 → 이상 상태)
Jobs-to-be-Done 프레임워크
타겟 세그먼트 우선순위

PRD · 스펙 문서

PRD 작성 (문제·해결·측정 구조)
User Story 형식 ("As a ..., I want ..., So that ...")
Acceptance Criteria (Given / When / Then)
Edge case · 예외 시나리오 명시
Out of scope 명시 (안 하는 것을 적는 것이 더 중요)

와이어프레임 · 정보구조 (lo-fi)

로파이 와이어프레임 (핵심 플로우만)
사이트맵 · 유저 플로우 다이어그램
상태 다이어그램 (상태 전이)
빈 / 로딩 / 에러 / 성공 상태 전수 체크
권한별 화면 차이 명세

지표 · 성공 기준

North Star Metric 정의
Activation / Retention / Revenue 지표
성공 임계치 (몇 %면 성공인가)
실패 신호 · 롤백 조건 명시
계측(Instrumentation) 포인트 · 이벤트 스펙

실험 · MVP

MVP 범위 정의 (최소 실행 가능)
A/B 테스트 설계 (가설 · 샘플 크기 · 기간)
사용성 테스트 계획 (5명+ 방식)
프로토타입 단계별 검증 게이트
학습 로그(Learning Log) 유지

로드맵 · 우선순위

우선순위 프레임워크 적용 (RICE / ICE / MoSCoW)
의존성 그래프 (어느 기능이 다른 걸 막는가)
마일스톤 · 릴리스 플랜
리스크 · 가정 명시 (가정이 깨지면?)
범위 vs 시간 vs 품질 트레이드오프 결정

이해관계자 관리

킥오프 미팅 · 정렬 문서
진행 상황 정기 공유 (주간/격주)
의사결정 로그 (DACI · ADR 교차 참조)
스코프 확장 대응 체계 (Change Request)
릴리스 커뮤니케이션 (내부 팀 + 외부 고객)

릴리스 · 운영

고객 커뮤니케이션 (릴리스 노트 · 공지)
내부 교육 자료 (CS · 세일즈 · 파트너)
런칭 후 모니터링 계획 (첫 24h / 1주 / 1개월)
회고(Retrospective) · 팀 학습 공유
Post-launch 개선 백로그 정리

AI 오케스트레이션 (기획 고유)

AI 활용 가능 영역 식별 (어떤 기능을 AI로?)
AI 응답 품질 기준 · 수용 임계치 정의
AI 실패 시 Fallback UX 시나리오
AI 투명성 · 설명가능성 스펙 ("왜 이 결과?")
AI 윤리 · 편향 리스크 사전 검토

🎨 디자인 (Designer)

UI/UX 개발과 분리: 여기는 디자인 자체, UI/UX 개발은 코드 구현

디자인 시스템

디자인 토큰 정의 (color · typo · spacing · radius · shadow · motion)
토큰 명명 규칙 (primary-500 · success-subtle · neutral-900)
컴포넌트 라이브러리 구조 (Atomic Design 등)
상태 변형 (default · hover · active · disabled · focus · error · loading)
다크모드 · 테마 체계

비주얼 디자인

타이포그래피 스케일 (modular scale — 1.125 / 1.25 등)
컬러 팔레트 + 의미 매핑 (success / warning / danger / info)
그리드 시스템 (8pt grid 권장)
아이콘 스타일 일관성 (outline vs filled, stroke width)
일러스트 · 이미지 스타일 가이드

인터랙션 · 모션

마이크로 인터랙션 스펙 (버튼 · 토글 · 스위치)
페이지 전환 · 모달 전환 패턴
로딩 · 성공 · 에러 상태 모션
Easing 함수 · 지속시간 토큰화 (duration-fast · duration-normal)
모션 감소 대안 (prefers-reduced-motion)

반응형 · 적응형

브레이크포인트별 레이아웃 디자인 (mobile-first 권장)
터치 타겟 44x44px 이상
폴더블 · 대형 디스플레이 고려
세로 · 가로 모드 대응
다국어 텍스트 길이 대응

접근성 디자인

색 대비 WCAG AA 이상 (본문 4.5:1, 큰 텍스트 3:1)
색에만 의존하지 않는 정보 전달 (형태·아이콘·텍스트 병용)
포커스 인디케이터 디자인 (2px 이상, 고대비)
폰트 크기 하한 · 줄간격 (본문 16px+, line-height 1.5+)
모션 민감성 · 깜빡임 (3Hz 이하)

프로토타입 · 검증

하이파이 프로토타입 (Figma · ProtoPie)
인터랙티브 프로토타입 (클릭 플로우)
사용성 테스트 (5명+)
휴리스틱 평가 (Nielsen 10원칙)
디자인 리뷰 세션 기록

개발 핸드오프 ↔ FE

Figma 최신 상태 유지 (dev ready 플래그)
컴포넌트 1:1 매핑 (Figma component = Code component)
디자인 토큰 자동 연동 (Tokens Studio · Style Dictionary)
스펙 주석 (간격 · 폰트 · 색상 값)
에셋 내보내기 규칙 (SVG 우선, 래스터는 @1x/@2x/@3x)

브랜드 · 마케팅

브랜드 가이드 준수 (로고 · 컬러 · 톤앤매너)
마케팅 자산 일관성 (랜딩 · 소셜 · 이메일)
OG 이미지 · 파비콘 · 앱 런칭 이미지

AI 오케스트레이션 (디자인 고유)

AI 응답 UI 패턴 (스트리밍 · 로딩 · 에러)
AI vs 사람 시각적 구분 (투명성)
AI 실수 · 한계 안내 UX 문구
AI 결과 검토 · 수정 가능한 UI 패턴

🏛️ 아키텍트 (Architect)

도메인 · 시스템 설계

비즈니스 도메인 모델링 (bounded context, ubiquitous language)
시스템 컨텍스트 다이어그램 (C4 Level 1~2)
외부 시스템 의존성 목록 + SLA
데이터 흐름도 (Read path / Write path 분리)
동기 vs 비동기 경계 결정

기술 선택 · 인프라

언어/프레임워크 선정 근거 문서화
배포 환경 결정 (온프레미스 / 클라우드 / 폐쇄망 / 하이브리드)
벤더 락인 리스크 평가
모놀리스 vs MSA 기준선 (분리 타이밍 조건)
이벤트 스트리밍 필요성 판단 (Kafka 등)

비기능 요구사항 (NFR)

성능 예산 — p95 응답시간, TPS, 동시접속
가용성 목표 (SLA 99.9% vs 99.99% — 비용 차이 인지)
확장성 전략 (수평 확장 가능 지점 식별)
재해 복구 (RTO, RPO 정의)
데이터 주권 / 리전 요구사항

Cross-cutting Concerns

로깅 · 트레이싱 표준 (OpenTelemetry 권장)
인증/인가 공통 레이어
i18n · 타임존 · 통화 처리 정책
API 버저닝 전략 (URI / Header / Content Negotiation)
Feature Flag 전략

거버넌스 문서

SEED.md — 프로젝트의 본질 · 불변 원칙
CONSTRAINTS.md — 금지/필수사항
DECISIONS.md / ADR — 결정 로그
C4 다이어그램 (System → Container → Component)
Runbook · On-call 가이드

AI 오케스트레이션 관점 (아키텍트 고유 영역)

작업 단위별 R0/R1/R2 (가역성) 분류 기준 확정
AI 자동화 허용 범위 vs Human Gate 지점
모델 선택 정책 (로컬 LLM vs 클라우드 API, 비용·보안·지연)
프롬프트/룰 파일 버전 관리 방식

🖥️ UI/UX 개발 (UI Engineer)

디자인 산출물을 코드로 구현하는 역할. 디자인 자체는 위 "디자인" 섹션 참조.

디자인 토큰 → 코드 변환 ↔ 디자인

Figma → Token Studio → 코드 토큰 연동
CSS Variables / Tailwind config로 토큰 매핑
다크모드 · 테마 전환 구현
토큰 변경 시 자동 업데이트 파이프라인

컴포넌트 구현 ↔ 디자인

Figma 컴포넌트 1:1 코드 매핑
상태별 구현 (default / hover / active / disabled / focus / error / loading)
Storybook 단위 문서화
Skeleton UI 구현

인터랙션 구현 ↔ 디자인

마이크로 인터랙션 코드 구현
페이지 전환 · 모달 전환 애니메이션
prefers-reduced-motion 대응
햅틱 · 사운드 (모바일)

반응형 구현

브레이크포인트별 레이아웃 구현 (mobile-first)
터치 타겟 44x44px 이상
가로/세로 모드 대응
폴더블 · 태블릿 대응

접근성 코드 구현 ↔ QA

시맨틱 HTML 우선, ARIA는 네이티브 불가 시
키보드 전 경로 동작 (Tab / Shift+Tab / Enter / Esc)
Focus trap · 복귀 처리
aria-live 영역 (동적 알림)
이미지 alt, form label, fieldset/legend

💻 프론트엔드 개발 (FE Developer)

프로젝트 세팅

Node 버전 고정 (.nvmrc, volta, packageManager 필드)
TypeScript strict 모드 + noUncheckedIndexedAccess
ESLint + Prettier + stylelint + commitlint
husky + lint-staged
.env.example · 환경변수 검증 (zod / envalid)

프레임워크 · 렌더링 전략

Vue 3 / Nuxt 3 · React / Next.js 선택 근거
페이지별 렌더링 모드 매핑 (CSR / SSR / SSG / ISR)
라우팅 구조 · 코드 스플리팅 경계
Hydration 전략 (Island / Partial)

컴포넌트 설계

단일 책임 · Props 인터페이스 명시
Composition API / Custom Hooks 로 로직 재사용
Controlled vs Uncontrolled 명확화
Slot / Children 으로 확장성
Storybook 단위 문서화

상태 관리

서버 상태 vs 클라이언트 상태 분리 (TanStack Query / SWR)
전역 상태 최소화 (Pinia / Zustand / Jotai)
Form 상태 (VeeValidate / React Hook Form + zod)
Derived state = computed / useMemo

API 통합 ↔ BE

OpenAPI / GraphQL 스키마 기반 타입 자동 생성
로딩 / 빈 / 에러 / 성공 4-state UI
Optimistic update 지점 식별
AbortController 로 race condition 방지
에러 경계(ErrorBoundary) 배치

타입 안정성

any 금지 → unknown + narrowing
Zod / Valibot 으로 런타임 검증 (API 응답, URL param)
Discriminated Union 으로 상태 모델링
tsc --noEmit CI 통합

접근성 구현

UI/UX 개발 섹션의 접근성 코드 구현 항목 참조
FE 고유: 서드파티 컴포넌트 접근성 검증

성능

Code splitting (라우트 + 무거운 컴포넌트)
이미지 loading="lazy", WebP/AVIF, srcset
번들 분석 + 예산 준수
리스트 가상화 검토 (1000+ 행)
Web Worker 필요 지점 식별
Core Web Vitals (LCP, INP, CLS) 계측

국제화

문자열 하드코딩 금지 (i18n 키로)
복수형 / 성별 처리 (ICU MessageFormat)
날짜 · 숫자 · 통화 포맷 (Intl API)
RTL 지원 여부 결정

AI 생성 코드 검증 (FE 관점)

git diff / git status 로 실제 변경 직접 확인
다중 파일 편집 누락 수동 체크
타입 체크 · lint · 테스트 모두 초록 후 커밋
R2 작업(배포, 마이그레이션) AI 단독 실행 금지

🔧 백엔드 개발 (BE Developer)

API 설계 ↔ FE

REST / GraphQL / gRPC 선택 기준
리소스 모델링 · URI 컨벤션
페이지네이션 방식 (cursor vs offset)
에러 포맷 표준 (RFC 7807 Problem Details 권장)
Rate limiting 정책
OpenAPI 스펙 자동 생성 · 유지

데이터 계층

DB 스키마 설계 · 정규화 수준 결정
인덱스 전략 (쿼리 패턴 기반)
N+1 쿼리 방지 (eager loading / DataLoader)
트랜잭션 경계 · 격리 수준
Soft delete 정책

마이그레이션

무중단 마이그레이션 (expand → migrate → contract 패턴)
롤백 스크립트 필수
시드 데이터 관리 (개발/스테이징/운영 분리)
대용량 마이그레이션 배치화

인증/인가 ↔ 보안

OAuth 2.0 / OIDC / SAML 선택
Session vs JWT 결정 (상태 관리 vs 무상태)
RBAC / ABAC 모델
Token refresh · 만료 처리
디바이스/세션 관리

성능 · 확장성

캐싱 레이어 (in-memory → Redis → CDN)
캐시 무효화 전략 (TTL / 이벤트 기반)
커넥션 풀 크기 · 타임아웃
비동기 작업 큐 (BullMQ, Celery 등)
Circuit Breaker · Bulkhead 패턴

에러 처리 · 재시도

Expected vs Unexpected 에러 분리
Exponential backoff + jitter
Dead Letter Queue
멱등성 키(idempotency key) 설계
부분 실패(Partial failure) 처리

관측성 ↔ 아키텍트

구조화 로깅 (JSON, correlation ID)
분산 트레이싱 (OpenTelemetry)
비즈니스 메트릭 수집
APM · Error tracking 통합

배치 · 스케줄링

Cron vs 이벤트 드리븐 선택
중복 실행 방지 (분산 락)
실패 알림 · 재처리 흐름

RAG / AI 백엔드 (해당 시)

벡터 DB 선택 (pgvector, Qdrant, Milvus)
임베딩 모델 · 청킹 전략
LLM 호출 타임아웃 · 재시도 · 비용 모니터링
"LLM은 자연어만, Rule Engine은 숫자/비즈니스 로직" 원칙
프롬프트 버저닝 · A/B 테스트

🛡️ 보안 (Security)

OWASP Top 10 대응

Injection (SQL / NoSQL / OS Command / LDAP)
Broken Authentication
Sensitive Data Exposure
XXE, Broken Access Control
Security Misconfiguration
XSS (Reflected / Stored / DOM-based)
Insecure Deserialization
Known Vulnerable Components
Insufficient Logging & Monitoring
SSRF

인증 · 세션

비밀번호 해싱 (bcrypt / argon2, 평문 저장 금지)
MFA · TOTP / WebAuthn 지원
Session fixation 방지 (로그인 시 세션 재생성)
Secure / HttpOnly / SameSite 쿠키
로그인 시도 제한 · 계정 잠금

데이터 보호

전송 중 암호화 (TLS 1.3, HSTS)
저장 암호화 (DB at-rest, 파일시스템)
PII · 민감정보 마스킹 (로그, 화면)
주민번호 · 카드번호 등 KISA 가이드 준수
백업 데이터 암호화 · 접근 통제

입력 검증 ↔ FE/BE

화이트리스트 방식 검증
XSS 방어 — v-html / dangerouslySetInnerHTML 전수 검토
CSRF 토큰 또는 SameSite 쿠키
파일 업로드 — 확장자 · MIME · 매직바이트 검증
SSRF 방어 (내부 IP 접근 차단)

공급망 보안

SCA (Snyk, Dependabot, GitHub Advanced Security)
SBOM 생성 · 관리
라이선스 감사 (GPL 등 제약 라이선스)
npm install 시 post-install 스크립트 주의
패키지 타이포스쿼팅 점검

인프라 · 시크릿

시크릿 관리 (Vault / AWS Secrets Manager / K8s Secret)
환경변수에 시크릿 하드코딩 금지
NEXT_PUBLIC_* 등 공개 prefix 오용 방지
IAM 최소권한 원칙
네트워크 세그멘테이션 · 방화벽 룰

웹 보안 헤더

CSP (Content Security Policy)
X-Frame-Options · X-Content-Type-Options
Referrer-Policy · Permissions-Policy
SRI (외부 스크립트 integrity)

감사 · 컴플라이언스

접근 로그 보존 (요구기간 확인 — 법률별 상이)
개인정보보호법 · GDPR · CCPA
ISMS-P / ISO 27001 (엔터프라이즈)
권한 변경 · 민감 조회 감사 로그

보안 테스트

SAST (SonarQube, Semgrep)
DAST (ZAP, Burp Suite)
침투 테스트 (릴리스 전)
시큐어 코드 리뷰 체크리스트

🧪 QA (Quality Assurance)

테스트 전략

테스트 피라미드 설계 (단위 > 통합 > E2E)
크리티컬 패스 식별 (매출·보안 직결 플로우)
테스트 환경 분리 (dev / staging / prod)
테스트 데이터 관리 (fixture, factory, seed)

단위 · 통합 · E2E

단위 테스트 — 도메인 로직 · 유틸 · 훅 (Vitest / Jest)
통합 테스트 — DB · 외부 API 경계
E2E — 핵심 플로우만 (Playwright / Cypress)
Contract 테스트 — FE↔BE 계약 (Pact)
MSW 로 API 모킹

비기능 테스트

성능 테스트 (k6, JMeter, Locust)
부하 · 스트레스 · 스파이크 테스트
내구성 테스트 (장시간 실행)
카오스 엔지니어링 (필요 시)

호환성

브라우저 매트릭스 (Chrome / Safari / Firefox / Edge / 삼성인터넷)
OS · 디바이스 (iOS / Android 주요 버전)
해상도 · 브레이크포인트 검증
BrowserStack / Sauce Labs 활용

접근성 테스트 ↔ UI/UX

자동화 (axe-core, Lighthouse a11y)
수동 — 스크린리더 (NVDA, VoiceOver, TalkBack)
키보드 전용 탐색
확대 200% 레이아웃 유지

회귀 테스트

스모크 테스트 (배포 직후 5분)
리그레션 스위트 (주요 경로 자동화)
Visual Regression (Chromatic / Percy)

릴리스 QA

릴리스 체크리스트 (승인 · 롤백 · 모니터링 대기)
UAT (User Acceptance Test)
Feature Flag 시나리오 검증
롤백 리허설

버그 관리

재현 절차 표준 포맷
심각도(Severity) · 우선순위(Priority) 구분
근본 원인 분석(RCA) 문서화
Flaky 테스트 격리 · 추적

AI 생성 코드 QA (QA 고유 영역)

AI 산출물 별도 검증 레벨 정의 (변경 범위 · 영향도 기반)
회귀 영향 분석 (AI 가 요약한 변경 vs 실제 git diff)
테스트 커버리지 요구 수준 명시
R2(비가역) 작업 — 배포/마이그레이션/권한변경 은 반드시 휴먼 QA 게이트

🔀 역할 간 경계 지점 (누가 할지 명확히)

항목	주책임	협업
페르소나 · 저니맵	기획	디자인
PRD · User Story	기획	아키텍트, 디자인
와이어프레임 (lo-fi)	기획	디자인
성공 지표 · KPI	기획	아키텍트, QA
디자인 시스템 · 토큰 정의	디자인	UI/UX 개발
비주얼 디자인 · 목업 (hi-fi)	디자인	기획 (검수)
디자인 토큰 → 코드 변환	UI/UX 개발	디자인 (검수)
접근성 디자인	디자인	QA (검증)
접근성 코드 구현	UI/UX 개발	QA (검증)
API 계약(Contract)	BE	FE, 아키텍트
인증 플로우 UI	FE	보안 (검수)
인증 플로우 로직	BE	보안
성능 예산 설정	아키텍트	FE, BE
성능 측정 · 튜닝	FE / BE	QA
시크릿 관리 정책	보안	아키텍트 (실행)
에러 포맷 표준	아키텍트	FE, BE
접근 로그 감사	보안	BE (구현)
E2E 테스트 작성	QA	FE (도움)
A/B 테스트	기획 (설계)	FE (구현), QA (분석)
릴리스 노트	기획	개발 (기술 검수)

🧩 조직 규모별 역할 구조

구조	적합 조직	역할
8-역할	대규모 · 디자인 분업	기획·디자인·아키텍트·UI/UX개발·FE·BE·보안·QA
7-역할	중소규모 (가장 흔함)	기획·디자인·아키텍트·FE·BE·보안·QA
6-역할	소규모 풀스택	기획·디자인·아키텍트·개발·보안·QA
5-역할	1~3인 팀	기획·디자인·개발·보안/QA(겸직)·아키텍트(겸직)

역할을 병합해도 체크리스트 항목 자체는 유지. 책임자만 조정한다.

⚠️ 자주 놓치는 지점

기획: Out of scope 미정의 → 개발 중 범위 끝없이 확장
기획: 실패 신호 · 롤백 조건 없이 런칭 → 문제 발생해도 판단 기준 없음
디자인: 빈 상태 · 에러 상태 디자인 누락 → FE가 즉흥적으로 만듦 → 일관성 깨짐
디자인: 다국어 텍스트 길이 미고려 → 독일어 등에서 레이아웃 깨짐
아키텍트: NFR(성능·가용성) 숫자 없이 "빠르게", "안정적으로"로 끝냄 → 후반에 재작업
FE: AI 생성 코드의 "다 반영했습니다" 맹신 → git diff로 재확인 안 함
BE: 멱등성 설계 누락 → 결제 · 주문 중복 발생
보안: 환경변수에 시크릿 노출 (NEXT_PUBLIC_*에 API 키) → 빌드 산출물에 유출
QA: E2E만 늘리고 단위 테스트 방치 → 실행 느려지고 flaky 증가

💡 운영 팁

RACI 로 변환: 01-raci-matrix.md 참조 — 스프린트 기획 시 "A는 누구?" 한 줄 확인으로 책임 공백 방지
역할 경계는 조직 크기에 따라 이동: 위 "조직 규모별 역할 구조" 참조
AI 오케스트레이션 관점: 각 역할의 R0/R1/R2 분류를 팀 규칙으로 고정해두면 Guard 룰과 직접 연결 가능
- R0: 읽기 · 분석 → AI 전담 가능
- R1: 가역 변경 (코드 작성, 테스트 생성) → AI 작업 + 리뷰
- R2: 비가역 (배포, 마이그레이션, 권한 변경) → Human Gate 필수
기획자 없는 조직: 아키텍트 또는 시니어 개발자가 기획 체크리스트 중 "지표·성공기준", "실패 신호"를 담당
디자이너 없는 조직: 디자인 시스템(shadcn/ui, Ant Design 등)으로 대체하되, 접근성·반응형 체크리스트는 UI/UX 개발자가 흡수