VUILD

이 레슨이 끝나면

유저 플로우 = "화면 → 화면 흐름"이라는 한 줄 정의를 안다
vuild.kr PLAN 6단계에서 자동 생성된 플로우 2~3개를 검토하고, 클릭 수가 많은 곳을 줄였다
"가입 → 가치 모먼트(첫 결과)까지 5단계 안에" 원칙을 적용했다

유저 플로우가 뭐예요?

유저 플로우 = 사용자가 우리 서비스에서 화면 → 화면을 어떤 순서로 거치는지의 흐름이에요. 예: 독서 노트 앱의 "책 추가" 플로우는 다음과 같아요.

홈 → 로그인 → 책 목록 → "+ 새 책" 클릭 → 책 입력 폼 → 저장 → 책 목록(추가된 책 보임)

7단계예요. 사용자가 책 한 권 추가하려고 7번 화면 전환을 거쳐야 한다는 뜻. 이게 너무 길면 사용자가 중간에 포기해요. 그래서 플로우 검토의 핵심은 "단계 줄이기"예요.

왜 유저 플로우를 따로 그려야 하나?

기능 명세(3-3)와 블루프린트(3-4)에서는 "무엇이 있는가"를 정했어요. 유저 플로우는 "그것들을 어떤 순서로 만나는가"를 정해요. 같은 기능도 순서가 다르면 사용성이 천차만별이에요.

좋은 플로우: 가입 → 첫 결과(가치 모먼트)까지 3~5 단계
안 좋은 플로우: 가입 → 이메일 인증 → 프로필 입력 → 결제 → 튜토리얼 → 첫 결과 (8단계)

비개발자가 가장 자주 하는 실수는 "가입 직후 본인 서비스 자랑(튜토리얼·온보딩)"을 너무 길게 넣는 거예요. 사용자는 본인이 알아서 익혀요. "빨리 결과를 보여주면" 그게 가장 좋은 온보딩이에요.

🎨 생성 (Codex CLI) — 좋은 플로우 vs 안 좋은 플로우 비교. 좌(3단계) 우(8단계) 가로 화살표 + 각 화면 mockup. — 짧은 플로우가 거의 항상 이겨요.

옆 탭에 PLAN 6단계 열기

옆 탭 주소

https://vuild.kr/projects/[본인프로젝트번호]/plan/user_flows

처음 들어가면 자동으로 핵심 플로우 2~3개가 생성돼 있거나, "플로우 생성하기" 버튼이 보여요. AI는 보통 다음 3가지 플로우를 자동으로 만들어요.

플로우	설명	목표 단계 수
신규 가입 + 첫 사용	처음 들어온 사람이 가입해서 첫 결과를 보기까지	3~5단계
핵심 기능 사용	가입한 사용자가 메인 기능을 한 번 사용하는 흐름	3~7단계
재방문 + 데이터 확인	두 번째 방문 사용자가 본인 데이터를 보는 흐름	2~4단계

📷 캡쳐 — user_flows index 화면. 플로우 2~3개가 카드로 나열된 풀화면. — 플로우 카드를 클릭하면 단계별 화면 흐름이 펼쳐져요.

플로우 카드 검토 — 4가지 자문

플로우 카드 한 개를 클릭하면 단계별 화면이 가로로 펼쳐져요(또는 세로 리스트). 본인 서비스를 처음 쓰는 사람이라고 상상하면서 다음 4가지를 자문하세요.

자문 1 — 클릭 수가 너무 많지 않나?

가입 → 첫 결과까지 5단계 이하가 목표예요. 7단계가 넘으면 어떤 단계를 건너뛸 수 있을지 보세요. 예: "이메일 인증" 단계를 빼고 "OAuth(구글/카카오)"만 쓰면 한 단계 줄어요.

자문 2 — 가치 모먼트가 충분히 빨리 오나?

"가치 모먼트" = 사용자가 우리 서비스의 핵심 가치를 처음 느끼는 순간이에요. 예: 독서 노트 앱이라면 "본인이 첫 책을 등록하고 그 책이 목록에 보이는 순간". 가치 모먼트가 가입 후 5단계 이상 뒤에 있으면 너무 늦어요.

자문 3 — 막다른 길이 없나?

플로우 안에 사용자가 "다음에 뭐 하지?" 막히는 화면이 없는지 확인. 예: "책 등록 완료" 화면 후에 다음 행동(다른 책 등록 / 목록 보기) 버튼이 없으면 막다른 길. 모든 화면 끝에 "다음 행동" CTA(Call To Action) 버튼이 있어야 해요.

자문 4 — 모바일에서 손가락으로 닿는 위치인가?

한국 사용자는 70% 이상 모바일이에요. 핵심 버튼이 화면 위쪽에 있으면 손가락이 닿기 힘들어요. "가장 많이 누를 버튼은 화면 아래쪽 또는 가운데" 원칙. 플로우 단계마다 핵심 버튼 위치를 머리 속으로 그려 보세요.

📷 캡쳐 — 플로우 한 개 상세 화면. 단계 박스 5~7개가 가로 화살표로 연결, 각 박스에 화면 mockup 썸네일.

플로우 다듬는 방법 — 2가지

방법	하는 일
A. 단계 직접 편집	단계 박스 클릭 → 제목·설명 수정 / 박스 우상단 ⋯ → 삭제
B. AI Coach에 요청	"신규 가입 플로우를 5단계 안에 끝나게 다시 만들어 줘" 한 줄

📷 캡쳐 — AI Coach에 "5단계로 줄여 줘" 요청한 후 플로우가 짧아진 before/after 비교.

실습 — 신규 가입 플로우 5단계로

"신규 가입 + 첫 사용" 플로우 카드 클릭
현재 단계 수 세기 — 7~8단계라면 줄일 여지 있음
가치 모먼트가 어디인지 표시 — 머리 속으로 "여기다" 정하기
가치 모먼트 전 단계 수 줄이기 — AI Coach에 "가치 모먼트(첫 결과)까지 5단계 안에 도달하도록 다시 만들어 줘"
각 단계에 "다음 행동" 버튼이 있는지 확인

막히는 지점 — 미리 답

"플로우가 너무 단순해요(2~3단계)" → 좋은 신호. 단순한 게 거의 항상 좋음. 더 늘리려 하지 마세요.
"플로우가 너무 복잡해서 이해 안 돼요" → AI Coach에 "이 플로우 한 단락으로 한국어로 설명해 줘"
"가치 모먼트를 어디에 둬야 할지 모르겠어요" → "사용자가 친구에게 우리 서비스 자랑할 만한 첫 순간"이 가치 모먼트예요
"이메일 인증 단계 꼭 넣어야 하나요?" → 결제 / 진짜 신원 확인 필요한 경우만. 일반 SaaS는 OAuth(구글/카카오)로 대체하면 한 단계 줄어요.

완료 체크리스트

☐ 플로우 카드 2~3개가 화면에 보인다
☐ "신규 가입 + 첫 사용" 플로우의 단계 수가 5 이하다
☐ 모든 단계에 "다음 행동" 버튼이 있다
☐ 가치 모먼트(첫 결과)가 가입 후 3~5단계 안에 온다

다음 단계 → 3-7 와이어 프레임

플로우 단계마다 화면이 잡혔으면 다음은 그 화면 한 장 한 장의 와이어프레임이에요. 와이어프레임 = 화면 레이아웃 스케치(디자인은 빠지고, 어떤 박스·버튼·입력이 어디에 있는지만). AI가 자동 생성해주고, 비개발자는 "버튼 위치 / 폼 길이 / 가장 중요한 한 가지가 보이는가"만 검토해요.

유저 플로우 — 화면과 화면을 잇는 최단 경로