언제 쓰나
피그마 화면은 있는데 개발팀에 어떻게 전달할지 막막할 때.
디자이너와 개발자 사이에 "그 버튼이 어떻게 동작해야 해요?" 질문이 반복될 때.
컴포넌트 명세서를 처음 써보는데 어떤 항목을 넣어야 할지 모를 때.
디자인 → 명세 변환 레이어
flowchart LR
A["🖼️ 와이어프레임\n화면 설명"] --> B["컴포넌트\n목록 추출"]
B --> C["Props / 상태\n정의"]
C --> D["인터랙션\n시나리오"]
D --> E["엣지 케이스\n빈 상태·에러"]
E --> F["접근성\n고려사항"]
F --> G["📄 개발팀 전달용\n명세서 완성"]
프롬프트 (복사)
당신은 디자인 시스템 전문가입니다. 아래 화면 설명을 바탕으로 개발팀에 전달할 컴포넌트 명세서를 작성해 주세요.
**화면 정보**
- 화면 이름: [예: 상품 목록 필터 패널]
- 서비스 유형: [예: 이커머스 앱 / 내부 어드민 / 랜딩페이지]
- 기술 스택 (알고 있으면): [예: React + TypeScript / Vue / 무관]
**화면·컴포넌트 설명**
[예: 왼쪽에 카테고리 체크박스 목록, 상단에 가격 범위 슬라이더, 오른쪽 하단에 "적용" 버튼. 필터 적용 시 목록이 즉시 갱신됨]
**디자인 의도 / 특이사항**
[예: 모바일에서는 바텀 시트로 표시됨, 비활성 항목은 그레이아웃 처리]
---
다음 항목으로 명세서를 작성해 주세요.
**컴포넌트 목록** — 이 화면을 구성하는 컴포넌트 이름·역할 (계층 구조로)
각 핵심 컴포넌트마다:
| 항목 | 내용 |
|------|------|
| 컴포넌트명 | |
| 역할 | |
| Props | 이름 / 타입 / 기본값 / 필수여부 |
| 내부 상태 | 상태명 / 초기값 / 변경 조건 |
| 인터랙션 | 이벤트 → 동작 (표 형식) |
| 빈 상태 | 데이터 없을 때 표시 방식 |
| 에러 상태 | 로딩 실패·입력 오류 처리 |
| 접근성 | aria 레이블, 키보드 네비게이션 |
**개발팀에 추가로 확인받아야 할 것** — 명세에서 결정 못 한 사항
디자인 파일 링크나 이미지 없이 이 명세서만으로 개발 가능한 수준으로 작성해 주세요.
잘 쓰는 팁
- 피그마 링크가 있다면 명세서 맨 위에 링크를 포함해 두면 나중에 추적이 쉽습니다.
- 엣지 케이스 (빈 상태, 로딩, 에러)를 먼저 정의해 두면 개발 중 "이럴 땐 어떻게 해요?" 질문이 줄어듭니다.
- 명세서 초안이 나온 뒤 개발팀에 먼저 공유하고 "이 명세서에서 불명확한 점을 짚어 줘"라고 다시 한번 검토하면 완성도가 높아집니다.