Phase 2 · Day 5 · mock

스킨 전에 플로우 —
mock & User Flow

그라데이션 #7을 두고 싸우기 전에, 화면 순서부터 맞추세요.
mock = 클릭 가능한 흐름 · design = 픽셀·토큰.

케이스

0그릇 — mockup 플로우

입구 → 소개 → 체험 → 영수증 — HTML 프로토타입.

mock shows flow and copy.
design shows look and feel.

오늘의 용어

다섯 단어 — 각각 한 문장

용어 한 줄 (Core)
Clickable flow — screens, order, copy
Low-fidelity layout of screens
Path users take through screens
Diagram tool for flows
mock agreed → design system starts

용어를 누르면 설명이 열립니다.

따라 치기

30초 드릴 — 키보드로

박스 안 희미한 3줄을 그대로 친 뒤, 빈칸을 채워 보세요. (채점·저장 없음 — 로컬만)

shows screen flow and copy, not final pixels.

shows look and feel — tokens, components, overlays.

is the path through screens.

정답 보기
  • mock
  • design
  • User flow

퀴즈

T / F — 3문항

  1. mock과 design은 Figma 파일 하나에만 있어야 한다.
  2. CSS 전에 mock에서 화면 순서를 검증할 수 있다.
  3. Must Have PRD 전에 Phase 2를 한다.
정답 보기
  1. F
  2. T
  3. F

L0 · 사례

실전에서 보기

Day 5 Reference — 큐레이션 조각만. 전체 repo ❌

0그릇 체험 · mock 플로우

클릭 가능한 체험관 — 계정·빌드 없이 흐름만.

0그릇 체험

L0 슬라이스는 오버레이 · 클릭 체험은 zero (L1)

오늘 할 일 · 하나

화면 제목 세 개

Core Loop에 맞춰 순서만 — 그림 없이 제목만.

Read full

Medium · Brunch 본문

표·긴 설명은 연재 본문 · 여기는 드릴과 L0.

Medium (EN) Brunch (KO)

SSOT: manuscripts/ko/05-day05-mock.md

waitlist

시즌 2가 열리면 알려 드립니다

7일 Drill과 함께 써도 됩니다.