Prototype & Handoff Methods

한눈에 보기

Figma, 손스케치, HTML/Tailwind, 브라우저 캡처를 개발 검토 가능한 프로토타입과 핸드오프 번들로 연결하는 방식입니다.

• Mode: Fast draft → reviewed artifact — 빠른 초안 뒤 사람 검토
• Artifact: Prototype + handoff bundle — 화면, 상태, 코드 후보, 이슈
• Check: FE/BE/QA workshop — 구현 난이도와 리스크 합의

빠른 시안 경로

초기 프로토타입은 완성도가 아니라 대화 속도가 목적이다. 손스케치, Figma 와이어프레임, AI 생성 HTML, Tailwind 초안을 상황에 맞게 골라 빠르게 보고 판단한다.

• 아이디어 검증: 손스케치와 텍스트 플로우
• 구조 검증: Figma 와이어프레임
• 반응형 검증: HTML/Tailwind 프로토타입
• 인터랙션 검증: 브라우저에서 직접 클릭 가능한 상태

코드 가능한 프로토타입

프로토타입이 개발에 도움이 되려면 이미지가 아니라 구조를 남겨야 한다. 레이아웃, 컴포넌트 이름, 상태, 데이터 필드, API 후보가 코드와 연결될 수 있어야 한다.

• 컴포넌트 후보와 props 수준 메모
• 필드와 데이터 타입
• 상태별 렌더링 조건
• API 응답이 비어 있거나 실패할 때의 UI

워크샵 기준

핸드오프는 파일 전달이 아니라 합의의 자리다. FE, BE, QA가 1~2회 짧게 모여 MVP 범위, 구현 순서, 리스크, 자동화 가능 지점을 확정한다.

• 구현 난이도와 우선순위
• FE/BE 병렬 개발 가능 범위
• Mock과 실제 API 비교 기준
• 테스트 자동화 후보

핸드오프 번들

좋은 핸드오프는 “디자인 파일 여기 있어요”에서 끝나지 않는다. 프로젝트 카드, 플로우/상태, 기능 스펙 표, 화면 캡처, API/Data 후보, QA 뼈대를 한 묶음으로 넘긴다.

• 화면 목록과 대표 캡처
• 상태와 권한 분기
• 컴포넌트/레이아웃 규칙
• API/Data 영향과 QA 초안

연결 문서

• Design Methods — 프로토타입 이전의 화면 설계 기준
• QA & Operations Methods — 핸드오프 이후 검증 기준
• Work Method Library — 직무별 방법론 허브