16Mode Fast draft -> reviewed artifact / Artifact Prototype + handoff bundle / Check FE/BE/QA workshop
Prototype & Handoff Methods
Figma, 손스케치, HTML/Tailwind, 브라우저 캡처를 개발 검토 가능한 프로토타입과 핸드오프 번들로 연결하는 방식.
빠른 초안 뒤 사람 검토
화면, 상태, 코드 후보, 이슈
구현 난이도와 리스크 합의
Method / Prototype / FE Handoff핸드오프 기준선
method v1.0 · portfolio draft
01작업 요약
Figma, 손스케치, HTML/Tailwind 초안을 개발 검토 가능한 프로토타입과 핸드오프 번들로 연결합니다.
핸드오프가 파일 전달로 끝나면 FE/BE/QA는 상태, 데이터, API, 구현 순서를 다시 질문하게 됩니다.
02입력 의존성
- Representative screensready
목록/상세/작성/상태 변형
- Interaction notesready
클릭, 저장, 실패, 재시도
- API / Data candidateswatch
응답 구조 검토 필요
- Workshop noteswatch
FE/BE/QA 합의 기록
03리스크 신호
| Signal | Severity | Meaning | First response |
|---|---|---|---|
static_mock_only | medium | 이미지만 있고 구조가 없음 | HTML/Tailwind 또는 component notes 추가 |
handoff_without_state | high | 상태와 권한 분기가 전달되지 않음 | 상태별 캡처와 조건 정리 |
api_late_discovery | high | API 제약을 개발 중 뒤늦게 발견 | API/Data impact를 워크샵에서 검토 |
no_review_owner | low | 누가 최종 보완할지 없음 | 역할별 검토 책임 지정 |
04반복 절차
빠른 프로토타입 선택
아이디어 검증 속도가 중요할 때손스케치, Figma, HTML/Tailwind 중 현재 질문에 맞는 가장 가벼운 형식을 선택합니다.
SketchWireframeClickable HTML구현 가능성 메모
FE가 구조를 잡기 전컴포넌트 후보, props, 데이터 필드, 상태별 렌더링 조건을 코드로 옮길 수 있게 남깁니다.
Component candidatesProps notesState render rules핸드오프 워크샵
개발 착수 직전FE/BE/QA가 MVP 범위, 구현 순서, API 리스크, 자동화 후보를 짧게 합의합니다.
MVP orderRisk logQA seed cases05역할 분담
| Role | Primary work | Handoff |
|---|---|---|
| Designer | 대표 화면과 상태 변형 | Screen set / Design notes |
| Frontend | 컴포넌트 구조와 반응형 | Component plan |
| Backend | API와 데이터 제약 | API impact notes |
| QA | 검증 흐름과 예외 케이스 | Scenario seed |
06완료 체크리스트
프로토타입 목적 명확
검증하려는 것이 구조, 인터랙션, 반응형, 비주얼 중 무엇인지 분명해야 합니다.
상태별 산출물 포함
정상 화면만 아니라 실패와 빈 상태까지 캡처 또는 설명되어야 합니다.
개발 검토 가능
컴포넌트와 데이터 후보가 있어야 FE/BE가 바로 리스크를 판단할 수 있습니다.
합의 기록 존재
워크샵에서 정한 구현 순서와 포기한 범위가 Decision Log에 남아야 합니다.