dennisyjlee/prototype-reel

프로토타입 릴

실제처럼 프로토타입하고, 비디오로 스토리를 전하세요.

정적 목업은 화면이 어떻게 보이는지만 보여줍니다. 제품이 어떻게 느껴지는지는 보여줄 수 없습니다: 무엇이 먼저 로드되는지, 엄지손가락이 어디에 닿는지, 실패할 때 무슨 일이 일어나는지. 이 스킬은 실제 구축 중인 것처럼 행동하는 프로토타입을 만들고, 피드백을 위해 사람들 앞에 내놓은 다음, 동일한 프로토타입을 프레임별로 구동하여 워크스루 비디오를 렌더링합니다. 화면 녹화가 아니므로 디자인 변경은 재촬영이 아닌 재렌더링을 의미합니다.

여기의 규칙은 실제 리뷰 라운드에서 비롯되었습니다. 각 규칙은 리뷰어의 메모에서 시작되어 두 번 다시 그 메모를 남길 필요가 없도록 기본값이 되었습니다.

사용 시기 (및 사용하지 말아야 할 시기)

• 프로토타이핑은 아이디어가 타이밍, 로딩, 전환, 제스처, 에지 케이스 또는 다단계 플로우 같은 동작에 의존할 때 사용합니다. 또한 리뷰어들이 경험이 아닌 그림에 계속 반응할 때 사용합니다.
• 비디오 제작은 대상 청중이 클릭할 수 없을 때 사용합니다: 루핑 슬라이드, 사이트 타일, 비동기 업데이트, 케이스 스터디. 비디오는 프로토타입이 대규모로 공유되는 방식입니다.
• 건너뛰기는 정적 프레임으로 답할 수 있는 레이아웃이나 시각적 질문, 그리고 와이어프레임이 더 저렴한 매우 초기 아이디어의 경우입니다. 방향이 결정된 후에 프로토타입을 만드세요.

워크플로우

순서대로 수행하세요. 렌더링으로 건너뛰지 마세요.

1. 컨텍스트 로드. 실제 디자인(디자인 파일, 스크린샷, 디자인 토큰), 플로우 및 목표를 가져옵니다. 대상 청중이 시청하거나 클릭한 후에 이해해야 할 것이 무엇인지 물어보세요. references/fidelity.md를 읽으세요.
2. 상태와 동작을 먼저 나열하세요. 코드 작성 전에 모든 화면, 상태 및 전환을 작성하세요: 로딩, 빈 상태, 오류, 성공, 뒤로 가기, 토스트, 에지 케이스. 각 항목은 한 줄로 작성하세요. 해당 목록을 상대방과 확인하세요.
3. 라이브 HTML 구축. kit/shell.html에서 시작합니다. 화면을 핫스팟이 있는 스크린샷이 아닌 실제 DOM과 실제 탭 대상으로 재구축하세요. references/behavior.md를 읽으세요.
4. 직접 클릭해보세요. 데스크톱과 모바일 모두에서 헤드리스 브라우저로 모든 경로를 실행하세요. 각 상태를 스크린샷으로 찍으세요. 콘솔 오류가 없어야 합니다. 공유하기 전에 수정하세요.
5. 피드백을 위해 공유하세요. 캡션과 탭 힌트가 켜진 링크를 게시하세요(references/sharing.md). 모든 메모를 references/feedback-log.md 형식(메모, 그 메모가 된 규칙)으로 기록하세요.
6. 샷 목록을 작성하세요. 비트당 한 줄: 시간 | 화면 내용 | 액션 | 샷 | 스토리 포인트. 각 비트를 샷 이름(설정, 인서트, 액션 컷, 매치 컷, 페이오프; references/pacing.md, 영화 문법 참조)으로 지정하세요. 비트당 하나의 아이디어. 비디오 제작 전에 승인을 받으세요.
7. 미리보기, 그 다음 렌더링. 일시 중지된 시계로 프로토타입을 구동하고 프레임을 캡처하세요. 먼저 저해상도 미리보기(15fps, 절반 크기)를 보내세요. 타이밍이 승인된 후에만 전체 품질로 렌더링하세요. references/pacing.md 및 references/motion-tokens.md를 읽으세요.
8. QA, 그 다음 전달. references/qa.md의 모든 검사를 실행하고 전달 메시지에서 확인한 사항을 알리세요. 수정은 지적된 부분만 변경합니다.

절대 타협하지 않는 사항

• 라이브 DOM, 핫스팟이 있는 이미지 사용 금지. 이미지는 사진, 로고 및 미디어에만 사용합니다.
• 텍스트는 디자인의 토큰(패밀리, 크기, 줄 높이, 자간)을 사용하며, 수동으로 설정된 값을 사용하지 않습니다. 렌더링하는 곳에 글꼴이 설치되어 있는지 확인하세요.
• 토스트와 오버레이는 콘텐츠 위에 위치합니다. 페이지를 밀어내지 않습니다.
• 작품당 하나의 이징 패밀리. 진입에는 이즈-아웃, UI에서는 이즈-인 사용 금지, 0에서 스케일 사용 금지. UI에는 바운스 금지, 페이오프 순간은 제외(motion-tokens.md 참조, Play는 페이오프를 위한 것).
• 새 화면에 도착한 후 움직임이 시작되기 전에 유지: 가벼운 화면의 경우 약 0.9초, 기본값 1.4초, 텍스트가 많은 화면의 경우 약 2.4초.
• 탭을 컨텍스트와 함께 프레이밍: 버튼만이 아닌 행이나 그룹으로 확대.
• 영화 언어는 UI 동작을 절대 재정의하지 않습니다. 모든 요소는 자체 레이어에서 애니메이션됩니다.
• 탭 마커는 탭에만 표시. 스크롤에는 손가락 표시 금지.
• 슬라이드 루프는 스토리에 더 필요하고 상대방이 동의하지 않는 한 20초 이하로 유지. 설명 클립은 가르치는 순간만 루프.
• 전체 렌더링 전에 저해상도 미리보기.
• QA 통과 없이 전달 금지.
• 리뷰어가 메모를 남기면 규칙으로 만든 후 기록하세요.

파일

• references/behavior.md: 프로토타입이 실제 제품처럼 동작하도록 만들기
• references/fidelity.md: 소스 디자인과 정확히 일치시키기
• references/sharing.md: 피드백을 위한 설정
• references/pacing.md: 워크스루 비디오의 프레젠테이션 속도 조절
• references/motion-tokens.md: 이징, 지속 시간 및 모션 패턴
• references/qa.md: 모든 전달이 통과해야 하는 검사
• references/feedback-log.md: 메모가 규칙이 되는 방법 (실제 예제 포함)
• kit/shell.html: 중립적인 프로토타입 셸 (툴바, 데스크톱/모바일, 디바이스 프레임, 캡션, 탭 힌트)
• kit/proto.css, kit/proto.js: 전환, 시트, 토스트, 스켈레톤, 커서