---
type: knowledge
domain: product
role: Frontend
status: active
last-reviewed: 2026-07-27
---

# Frontend 기획 가이드

> Frontend 기획은 발주사와 합의된 화면정의서(스토리보드)·기능사양서를 화면·컴포넌트·상태·API 의존성과 검수 가능한 품질 기준으로 바꾸는 작업이다.

## 책임과 경계

- 책임: UI 컴포넌트, 라우팅, 상태 소유권, 접근성, 반응형, 클라이언트 성능
- 입력: 요구사항정의서(SRS)·RTM, 화면정의서(스토리보드), 기존 디자인 시스템, Backend API 정의서
- 범위 밖: 서버 비즈니스 로직, DB 마이그레이션, 자체 인증·토큰 검증, CI/CD
- 다음 소비자: Backend, Tech Lead, QA(테스트케이스 작성), 발주사 검수자

## 필수 입력

| 입력 항목 | 원천 | 없을 때 처리 |
|---|---|---|
| 요구사항정의서(SRS)·요구 ID | PM·PO·BA (RTM) | 착수 보류, PM에 ID 발급 요청 — ID 없는 화면은 RTM 추적 불가 |
| 화면정의서(스토리보드) 승인본 | UX·UI디자인 + 발주사 합의 | 임의 화면 설계 금지, 승인 요청 후 대기. 구두 요청은 CR로 회부 |
| Backend API 계약 | Backend API 정의서 | 가상의 API 전제 구현 금지 — mock 계약을 합의하고 의존성을 미결로 표시 |
| 기존 디자인 시스템·토큰 | 기존 코드베이스·디자인 가이드 | 화면 전용 토큰 발명 금지, UX·UI에 토큰 정의 요청 |
| 품질 기준(접근성·성능 합의값) | 발주사와 합의된 NFR | 착수 전 합의 요청 — 사후 합의 값은 검수 기준으로 무효 |

## 납품 연결 ([[외주 개발 산출물]])

| 이 역할의 결과물 | 납품 산출물 | 마일스톤 |
|---|---|---|
| 화면·컴포넌트 구현 | 화면정의서(스토리보드) 준수 — 검수 시 화면정의서와 1:1 대조 | 개발 완료 |
| 소스코드·커밋 이력 | **소스코드 일체(저장소 이관) + 형상관리·버전 이력** | 개발 완료 |
| 빌드 설정·배포 절차 | **빌드·배포 스크립트** — "개발사 컴퓨터에서만 됨" 방지 | 개발 완료 |
| 화면 단위 검증 기록 | 테스트결과서(화면별 PASS/FAIL)·RTM 갱신 | 검수 |

## 기획 순서

1. [[01_화면·라우트 목록]]에서 요구사항과 화면 진입점을 연결한다.
2. [[02_컴포넌트·상태 설계]]에서 컴포넌트 경계와 상태 소유권을 정한다.
3. [[03_API 의존성 계약]]에서 실제 endpoint와 payload를 확정한다.
4. [[04_접근성·반응형·성능 계획]]에서 측정 가능한 품질 기준을 정한다.
5. 구현 전후 [[90_Frontend 완료 체크리스트]]를 대조한다.
6. 구현자는 [[99_Frontend Result Card 템플릿]]으로 변경과 검증을 인계한다.

## 파일 지도

| 파일 | 용도 | 주 소비자 |
|---|---|---|
| 현재 문서 | 역할 책임·입력·기획 순서 | Frontend |
| [[01_화면·라우트 목록]] | 요구사항과 화면 진입점 연결 — 화면정의서 대응 원본 | UX·UI, Tech Lead, QA |
| [[02_컴포넌트·상태 설계]] | 컴포넌트 경계와 상태 소유권 | Frontend 구현자, 리뷰어 |
| [[03_API 의존성 계약]] | 실제 endpoint·payload 확정과 미결 의존성 | Backend, Tech Lead |
| [[04_접근성·반응형·성능 계획]] | 측정 가능한 품질·검수 기준 | QA, 발주사 검수자 |
| [[90_Frontend 완료 체크리스트]] | 구현 전후 완료 자체 점검 | Reviewer, QA |
| [[99_Frontend Result Card 템플릿]] | 변경·검증 인계 카드 | Tech Lead, QA |

## 핵심 결정 원칙

- 서버 상태, 클라이언트 상태, URL 상태를 섞지 않는다.
- 기본·빈·로딩·오류·권한 없음 상태를 정상 상태와 함께 설계한다.
- 기존 디자인 토큰과 공식 theme API를 우선하며 화면 전용 토큰을 발명하지 않는다.
- Backend 계약이 없으면 가상의 API를 전제로 구현하지 않고 의존성을 미결로 표시한다.
- “반응형 지원” 대신 기준 폭별 배치와 오버플로 조건을 적는다.
- 화면정의서에 없는 화면·기능 요청(발주사 현업의 구두 요청 포함)은 임의 구현하지 않고 **CR(변경요청)로 회부**한다 ([[SI 수주와 범위 관리]]).
- 접근성·성능 등 품질 기준은 **착수 전 발주사와 합의된 값만 검수 기준으로 유효**하다 — 사후 합의는 분쟁 원인.

## 진입 게이트

- [ ] 발주사와 합의된 화면정의서(스토리보드) 승인본이 있다.
- [ ] Backend API 계약이 확정됐거나 mock 계약이 합의되고 미결로 기록됐다.
- [ ] 요구사항 ID(SRS·RTM)가 확보돼 화면·상태를 추적할 수 있다.
- [ ] 접근성·성능 등 검수에 쓸 품질 기준이 착수 전 발주사와 합의됐다.

## 완료된 기획의 인계물

- 요구사항 ID가 화면, 상태, API, 검수 항목까지 추적된다(RTM 갱신 가능).
- 결정에는 근거·영향·승인자·미결 사항이 있다.
- 구현자가 이전 대화를 재구성하지 않고 착수할 수 있다.
- 미수행 검사는 빈칸이 아니라 `미수행`과 사유로 남는다.
- 종료 게이트: 다음 역할이 착수 가능한 동시에, 산출물이 **검수·계약 근거로 쓸 수 있는가**를 통과한다.

## 함께 읽기

- [[00_역할별 기획 허브]]
- [[00_역할별 기획 운영 가이드]]
- [[역할별 개발 산출물]]
- [[외주 개발 산출물]]
- [[SI 수주와 범위 관리]]
- [[03_프론트엔드 설계]] — 설계 판단 기준(03_설계 역할별)