์ ์ ํ๋ก์ฐ ํํ ๋ฆฌ์ผ User Flow Tutorial
๋ชจ๋ฐฉ์ผ๋ก ํ์ตํ๊ธฐ
์ ๋ฒ ํฌ์คํ ์ ์ ๋ฆฌํ๋ฉด์, User flow์ ๋ํด ์~์ด์ ์ข ์ ๊ฒ ๊ฐ๋ค! ํ๋๋ฐ ๊ด๋ จ๋ ์๋ฃ๋ค์ ๋ ์ฐพ์๋ณด๋ ๋ค์ ํท๊ฐ๋ฆฌ๊ธฐ๋ ํ๋ค. ์ฌ๋๋ง๋ค ๋ฏธ๋ฌํ๊ฒ ์์ ์์๋ ๋ฐฉ์์ด ๋ค๋ฅด๊ณ , ์๋ฉ์๋ ์กฐ๊ธ์ฉ ์ฐจ์ด๊ฐ ์์ด์ ์์ง์ ์ข ํท๊ฐ๋ฆฐ๋ค. ์์ ์ ๊ฐ์ UXUI ๊ด๋ จ๋ ์ฑ ์ ์ข๋ ์ฐพ์๋ด์ผ๊ฒ ๋ค. ๊ทธ๋ฌ๋ ์ค, ์ง๋ ๊ฒจ์ธ์๋ ๋ดค๋ ์์์ ๋ค์ ๋ณด๊ฒ ๋์๋ค. ์ํ๋์์ค์ฝ์์ UX Designer๋ก ์ผํ๊ณ ์๋ Youtuber Chunbuns์ ์ฑ๋์ด๋ค. ๊ทธ๋๋ ์ด ์์์ ๋ณด๊ณ ๋ ๊ฐํ ํํ ๋ฆฌ์ผ์ ๊ฐ์ด ์๋ํด๋ณผ ์๊ฐ์ ๋ชปํ์๋ค. ์ด์ ๋ ์ด ์์์์ ์๊ฐํ๋ User Flow์ ๊ฐ๋ ์ ๋ค์ ํ ๋ฒ ์ ๋ฆฌํด๋ณด๊ณ , ์ ๊ณตํ๋ ํํ ๋ฆฌ์ผ ๊ณผ์ ๋ฅผ ์ํํด๋ณด๊ณ ์ ํ๋ค.
์ถ์ฒ: youtu.be/TIV1y11xz7k
๊ธฐ๋ณธ ๊ฐ๋ ๋ค์ ๋ค์ ธ๋ณด๊ธฐ
User flow๋?
User Flow๋ ์ฌ์ฉ์๊ฐ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๊ธฐ ์ํด ํํ๋ ์ผ๋ จ์ ํ๋๋ค์ด๋ค. User Flow๋ 3๊ฐ์ง ๊ตฌ์ฑ ์์๋ก ์ด๋ฃจ์ด์ ธ ์๋ค.
1. ์ฌ์ฉ์ User๊ฐ ๋๊ตฌ์ธ๊ฐ?
2. ๊ทธ๋ค์ ๋ชฉํ Goal์ ๋ฌด์์ธ๊ฐ?
3. ๊ทธ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๊ธฐ ์ํด User์๊ฒ ํ์ํ ๋จ๊ณ๋ค Steps์ ๋ฌด์์ธ๊ฐ?
์ด ์ธ๊ฐ์ง๋ฅผ ๋ช ํํ ํ๊ณ ๊ฐ๋ฉด, ์ดํ์ Wireflow, Task flow์ ๊ฐ์ ์์ ๋ค์ด ํ๊ฒฐ ์์ํด์ง๋ค.
User Flow๊ฐ ๋์์ด๋์๊ฒ ์ค์ํ ์ด์ ?
์ง๋ ํฌ์คํ ์์ User Flow Diagram์ด ์ค์ํ ์ด์ ๋ ๋์์ด๋์ ๊ฐ๋ฐ์๊ฐ ์์ ์ ์ํํ ๋ ๋ง์ ์๊ฐ์ ๋น์ฉ์ ๋ญ๋น๋ฅผ ์ค์ฌ์ค ์ ์๊ธฐ ๋๋ฌธ์ด๋ผ๊ณ ์ธ๊ธํ ๋ฐ ์๋ค. ์ด ์ ํ๋ธ์์๋ ๋ค๋ฅธ ์ด์ ๋ฅผ ๋ ์๊ฐํด์ฃผ์๋ค.
์งํํ๋ ๋์์ธ์ ๋ํด '์ฌ์ฉ์' ๊ด์ ์์ ์ปค๋ฎค๋์ผ์ด์ ํ ์ ์๋ ๋ฐฉ๋ฒ์ด๊ธฐ ๋๋ฌธ์ด๋ผ๋ ๊ฒ์ด๋ค. ์ค์ ํ์ ์์๋ ์์ง๋์ด, PM, ๊ทธ ์ธ ๋ค์ํ ์ดํด๊ด๊ณ์์ ์ปค๋ฎค๋์ผ์ด์ ํ๋ฉฐ ์๋น์ค๋ฅผ ๋ง๋ค์ด๊ฐ๊ฒ ๋๋๋ฐ, ํ๋ก์ ํธ๊ฐ ์งํ๋๋ค๋ณด๋ฉด ๊ธฐ์ ์ ์ธ ๋ฌธ์ , ๋ค์ํ ํ์ ์๊ฑด๋ค์ด ๋๋ฌดํ๊ฒ ๋์ด ์ด๋ ์๊ฐ ๊ธธ์ ์๊ฒ ๋๋ ๊ฒฝ์ฐ๊ฐ ์๊ธธ ์ ์๋ค๊ณ ๋งํ๋ค. ๋์ ๊ฐ์ ๋ณด๋ฉด, ํ๋ก์ ํธ ๋ ผ์์ ์ฌ์ฉ์๋ ๊ทธ ์ด๋์๋ ์๊ฒ ๋๋ ์ผ๊น์ง ์๊ธฐ๊ฒ ๋ ์ ์๋ค๋ ๊ฒ์ด๋ค. ํ๋ก์ ํธ์ ์ํด์๋ ์๋ง์ ์ดํด๊ด๊ณ์๋ค์ด ๊ธธ์ ์์ง ์๊ธฐ ์ํด '์ฌ์ฉ์๊ฐ ์ด๋ฃจ๊ณ ์ ํ๋ ๋ชฉํ'๋ฅผ ๋ช ํํ ํ๊ณ , ๊ทธ๊ฒ์ ๊ทผ๊ฑฐํด์ ์ปค๋ฎค๋์ผ์ด์ ํ๋ ๊ฒ์ด ์ค์ํด์ง๋ค. ์ด๋, 'User Flow'๊ฐ ์์ฃผ ์ค์ํ ์ญํ ์ ํด์ค๋ค. ํนํ ํฌ๊ณ ๋ณต์กํ ํ๋ก์ ํธ๋ฅผ ์งํํ ๋ ์ ์ฉํ๋ค
์ด ์์์์๋, ๋ณดํต ๋์์ธ ๋ฌธ์ ๋ ๊ธฐ๋ฅ์ด ํด์๋ก, ์ด๋ฐ์ User Flow๋ฅผ ์ค์ ํ๋๋ฐ ๋ ๋ง์ ์๊ฐ์ ์ด๋ค๊ณ ํ๋ค. ๊ทธ๋์ High-fidelity Mockup์ Wireframe์ ๋ง๋ค๊ธฐ ์ ์, ์๋น์ค ๋ด์์ ๋ฐ์ํ ์ ์๋ ๋ชจ๋ User Flow๋ฅผ ๊ตฌ์ํ๋ ๊ฒ์ด๋ค.
ํด๋น ์์์์ ๋ค์์ ๊ธ์ ์ถ์ฒํด์ฃผ์๋ค.
https://uxdesign.cc/the-biggest-wtf-in-design-right-now-87139f367d66
User Flow๋ ์ด๋ป๊ฒ ์๊ฒผ๋?
User flow๋ ๋ค์์ ์ธ๊ฐ์ง์ ์กฐํฉ์ผ๋ก ๊ตฌ์ฑ๋ ์ ์๋ค๊ณ ๋งํ๋ค.
1. Task flows
2. wireflows (lo-fi)
3. Screen flows (hi-fi)
์ด๋ฅผ ์ค๋ช ํ๊ธฐ ์ํด, ์์์ ์ํฉ์ ๋ค๊ณ ์๋ค.
1. Who is the User?
A shopper who works for Instacart
์ธ์คํ์นดํธ์์ ์ผํ๋ ์ผํผ
2. What is the shopper's goal?
To cash out their money immediately after working a few hours
๋ช ์๊ฐ ์ผํ ํ ์ฆ์ ๋์ ํ๊ธํํ๋ค.
3. Task Flow๋ฅผ ๊ทธ๋ ค๋ณด์
User์ Shopper๋ผ๋ User์ ๋ชฉํ๋ฅผ ์ ๋ฆฌํ๋ค๋ฉด, ์ด์ ๊ทธ๋ค์ ๊ณ ๋ คํ Task Flow๋ฅผ ๊ทธ๋ฆฌ๊ธฐ ์ํด ์ข ์ด์ ํ์ ๊บผ๋ด๋ค๊ณ , ๋ค์๊ณผ ๊ฐ์ ์ง๋ฌธ์ ๋์ก๋ค.
-How would the user access the feature? ์ ์ ๊ฐ ์ด ๊ธฐ๋ฅ์ ์ด๋ป๊ฒ ์ ๊ทผํ๋๊ฐ?
-Where does the feature live? ์ด ๊ธฐ๋ฅ์ ์ด๋์๋ถํฐ ์์ํ ๊น?
์ ์ง๋ฌธ์ ๋ํ ๋ต์ ์์์ผ๋ก Task Flow๋ฅผ ๊ทธ๋ ค๋ณธ๋ค. ์์์์๋, Shopper๊ฐ ์ฑ ์์ ๋ค์ด๊ฒ์ด์ ๋ฐ์์ 'Earnings page'๋ฅผ ๋๋ฅด๋ ๊ฒ์์ ์์๋๋ค๊ณ ๋ณด์๋ค. ์ด๋ ๊ฒ ์ฌ์ฉ์๊ฐ ์ด๋ค ๊ณผ์ ์ ๊ฑฐ์ณ์ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๊ฒ ๋๋์ง ํผ์ง ํผ์งํ๊ฒ Task๋ค์ ์์๋๋ก ์ ์ด๋ณธ๋ค. (์ด ์์์์๋ ์ง๋ ํฌ์คํ ์ User Flow Diagram์์ ์ฌ์ฉํ๋ ์ง์ฌ๊ฐํ, ๋ค์ด์๋ชฌ๋ ๊ฐ์ ๋ชจ์์ ๊ตฌ๋ถ์ด ํ์ ์์ ๋ง์ด ์ฌ์ฉ๋์ง๋ ์๋๋ค๊ณ ํจ์คํ๋ค.)
4. ํ ์๋น์ค ๋ฆฌ์์น
์ ์ฌํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ํ ์๋น์ค๋ค์ ์ดํด๋ณด๊ณ ์ฐธ๊ณ ํ๋ฉฐ, ๊ทธ๋ค์ด ์ด๋ป๊ฒ ๊ธฐ๋ฅ์ ๊ตฌํํ๋์ง, ์ด๋ป๊ฒ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋์ง ๋ฑ, ๋ก์ง์ ๋ํ ์์ด๋์ด๋ฅผ ์ป๋๋ค.
4. Low-fi Wire Flow
Task Flow์ ํ ์๋น์ค ๋ฆฌ์์น๋ฅผ ํ ๋๋ก, Lo-fi Wire flow๋ฅผ ๊ทธ๋ฆฐ๋ค.
Wireframe์ด Layout, UI, UX๋ฅผ ๋ชจ๋ ํฌํจํ๋ค๋ฉด, ๊ทธ๊ฒ์ lo-fi๋ฒ์ ์ผ๋ก ํ๋ฆ์ ์๊ฐํ ํด๋ณด๋ ๊ฒ์ด๋ค.
(Wireflow์ Wireframe์ ์ฐจ์ด๋ฅผ ์์ง ์ ํํ๋ ๋ชจ๋ฅด๊ฒ ๋ค. ๋ค์ ํฌ์คํ ์์ ์๋ง ์ดํด๋ณผ ๋ฏ ํ๋ค.)
5. Hi-fi Screenflow
low-fi๋ฅผ ํ ๋๋ก Hi-fi Screenflow๋ฅผ ๊ทธ๋ฆฌ๊ธฐ ์ํด, ๋ค์๊ณผ ๊ฐ์ ์น์ฌ์ดํธ๋ฅผ ๋๊ตฌ๋ก ์ด์ฉํ๋ ๊ฒ์ ์ถ์ฒํด์คฌ๋ค.
๋ค์๊ณผ ๊ฐ์ด ๋ง๋ค์ด ๋ณผ ์ ์๋ ๊ฒ์ด๋ค.
์ด์ ๋ด ์ฐจ๋ก!
๊ณ์ํด์ ์์์ ์ดํด๋ณธ Instant Payment Feature ์ฌ๋ก๋ฅผ ๊ฐ์ง๊ณ ์์ฒญ์๊ฐ ํํ ๋ฆฌ์ผ์ ํด๋ณผ ์ ์๊ฒ, ๋ฏธ์ ์ ์ ์ํด์ฃผ์๋ค. ํ๊ณผ ์ข ์ด๋ฅผ ๊บผ๋ด๋ค๋ผ๊ณ ์์ผ์ ์ค๋นํด์๋ค. ์ ์๋ ๋ฏธ์ ์ ๋ค์๊ณผ ๊ฐ๋ค.
์ฌ์ฉ์๋ ์์ง ๊ฐ์ธ ๊ณ์ข๋ฅผ ์ฑ์ ์ฐ๋ํ์ง ์์๋ค.
ํด๋น Instant payment ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ฉด์ ์ง๋ถ์นด๋๋ฅผ ์ฐ๊ฒฐํ๋ flow๋ฅผ ๊ทธ๋ ค๋ณด๋ผ.
์์์ ์ ์งํ๊ณ , ์ด ์ ์ ์๋๋ฆฌ์ค์ ๋ํ Task Flow์ Low-fi Wireflow๋ฅผ ๊ทธ๋ ค๋ณด๋ผ๊ณ ํ๋ค.
๋๋ฆ๋๋ก ์์์ ์ ์ํ 3๊ฐ์ง ์ ์ ์๋๋ฆฌ์ค ์คํ ์ ์ด์ด์ 4,5,6๋ฒ์ ์ ์ด๋ณด๊ณ ๊ทธ๋ ค๋ดค๋๋ฐ.. ๊ทธ๋ฆฌ๋ฉด์ ๋ญ๊ฐ ์ด์ํ๋ฐ ์ถ์์ง๋ง ๊ฟ๊ฟํ (์๋ง๋ ๋๋ง ์์๋ณผ ์ ์๊ฒ) ๊ทธ๋ ธ๋ค...
๊ทธ๋๋ ์ด๋ค ํ๋ฆ์ผ๋ก ์ ๊ฐํ ๊ฒ์ธ์ง ์ค๋ช ์ ํด๋ณด์๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.
1. ๋จผ์ ๋ค์, User์ ์ต์ข ๋ชฉํ๋ฅผ ํ์ธํ๋ค. "์์์ ๋ง๋ Instant Payment Feature ๊ณผ์ ๋ด์์, Debit Card ์ฐ๋ํ๊ธฐ"๋ผ๊ณ ์ ๋ฆฌํ๋ค.
2. Task flow๋ฅผ ๊ทธ๋ฆฌ๊ธฐ์ ์์์ ์ง๋ฌธ์ ๋์ ธ๋ณด์๋ค.
- '์ ์นด๋ ์ฐ๋ํ๊ธฐ' ๊ธฐ๋ฅ์ ์ด๋์ ์์ํด์ผํ ๊น?
- ์ด ๊ธฐ๋ฅ์ ์ํํ๊ธฐ ์ํด์ ์ด๋ค ์์๋ค์ด ํ์ํ ๊น?
3. ์ด๋ฏธ ์์์ ๊ทธ๋ ธ๋ lo-fi wireflow๋ฅผ ๊ณ ๋ คํ์ ๋, ์ต์ข ์ ์ผ๋ก '๋ด ๊ณ์ข๋ก ์ฎ๊ธฐ๊ธฐ confirm'์ ๋๋ฅธ ๋ค์, ๊ณ์ข ๋ฐ์นด๋ ์ ํ ํ์ด์ง๊ฐ ์งํ๋๋ ํ๋ฆ์ ์๊ฐํ๋ค.
4. Task Flow๋ฅผ ์ ์ด๋ณด์๋ค.
โฃ ์ด๋ฏธ ์ฐ๋๋ ๊ณ์ข๊ฐ ์๋ค๋ฉด, ์ฐ๊ฒฐ๋์ด ์๋ ์นด๋๋ฅผ ์ ํํ๋ค. ์ฐ๋๋ ๊ณ์ข๊ฐ ์๋ค๋ฉด, ์๋ก์ด ๊ณ์ข/์นด๋๋ฅผ ๋ฑ๋กํ๋ค.
โค ๋ณด์ ํ๊ณ ์๋ ์นด๋๋ฅผ ๊ณ ๋ฅด๊ณ , ์๋ก์ด ์นด๋ ๋ฑ๋ก์ ํ์ํ ๊ฐ์ธ ์ ๋ณด๋ฅผ ์ ๋ ฅํ๋ค.
โฅ ๋น๋ฐ๋ฒํธ๋ฅผ ์ค์ ํ๋ค.
๋ณด์์ด ์ค์ํ ๊ฒ์ด๋ผ ์๊ฐํ๋ค. ์ด๋ฏธ ์ฑ์ ์ต์ด๋ก ๋ก๊ทธ์ธํ ๋ ๋น๋ฐ๋ฒํธ๊ฐ ํ์ํ๋ค ํ๋๋ผ๋, ์นด์นด์คํ์ด ๊ฒฐ์ ๋ฅผ ์งํํ ๋ ์ฒ๋ผ ํ ๋ฒ ๋ ๊ฐ๋จํ ๋น๋ฐ๋ฒํธ๋ฅผ ์ ๋ ฅํ ์ ์๋๋ก โฅ์ ๋ง๋ค์๋ค.
๋ค ๊ทธ๋ฆฌ๊ณ ์, ๋ต์์ง ์ฑ์ ํ๋ฏ ์์์ ์ด์ด ๋ดค๋ค.
๋ด๊ฐ Task flow ์ดํด๋ฅผ ์ข ์๋ชปํ๋ค๋ ๊ฒ์ ๋ฐ๊ฒฌํ๋ค. ๋๋ '๊ฐ์ธ ๊ณ์ข๋ก ๋ ์ฎ๊ธฐ๊ธฐ confirm' ๋ฒํผ์ ๋๋ฅด๊ณ ๋์, ๊ณ์ข๋ฅผ ์ ํํ๊ฑฐ๋ ์๋ก์ด ๊ณ์ข์ ๊ฐ์ธ์ ๋ณด๋ฅผ ์ ๋ ฅํ๋ ๊ณผ์ ์ ์งํํ ๊ฒ์ด๋ผ ์๊ฐํ๋ค. ๊ทธ๋ฐ๋ฐ ์ด๊ฑธ ๋ณด๋, Task flow ์์์ '๊ฐ์ธ ๊ณ์ข๋ก ๋ ์ฎ๊ธฐ๊ธฐ'๋ผ๋ ์คํ ์ด ๋ง์ง๋ง์ ํํ๋๋ ๊ฒ์ด ํฉ๋นํด๋ณด์ธ๋ค. '๊ณ์ธ๊ณ์ข๋ก ๋ ์ฎ๊ธฐ๊ธฐ'๋ฅผ ์ด๋ฏธ ํ ๋ค์์ '๊ณ์ข ์ค์ ํ๊ธฐ'๊ฐ ๋ค์ด๊ฐ๋๊ฒ ๋ง์ด ์ ๋ง๊ธฐ ๋๋ฌธ์ด๋ค. ์ฌ๊ธฐ์ ๋์ ์ค์๋, ์์์ ์ด๋ฏธ ๊ทธ๋ฆฐ wire flow๋ฅผ ๋ณด๋ฉด์ ์๊ฐํด์ ๊ทธ๋ฐ ๊ฒ ๊ฐ๋ค. ํ๋์ ์ ์ ์๋๋ฆฌ์ค์ ๋ํ Task flow๊ฐ ๋ชจ๋ ์์ฑ๋ ๋ค์์ wire flow๋ก ๋์ด๊ฐ์ผ ํ๋ ๊ฒ์ธ๋ฐ, ํผ์ ์์๊ฐ ๊ฒ์ด๋ค.
Lo-fi ๊ทธ๋ ค๋ณด๋ผ๊ณ ํ๋ ๊ฑฐ ๊ฐ์๋ฐ, hi-fi๋ก screen flow๊น์ง ๋ณด์ฌ์ฃผ์๋ค. ๊ทธ๋๋ ์นด๋ ์ ๋ณด๋ฅผ ์ ๋ ฅํ๋ค๋ ๊ฐ ํ๋ ์์๋ค์ ์ ๋ ์ฌ๋ฆฐ ๊ฒ ๊ฐ์์, ์๋ฒฝํ์ง ์์์ง๋ง ์๊ฒ ์นญ์ฐฌํด์ฃผ๊ณ ๋ง์น๋๋ก ํ๊ฒ ๋ค. ์ ๋ฒ์ ๊ทธ๋ ค๋ณธ ํ๋ก์ฐ ๋ค์ด์ด๊ทธ๋จ์ด๋์ ๋ ๋๋์ด ๋ค๋ฅธ๋ฐ, ๋ค์ํ ๋ฒ์ ๋ค์ ์๋ํด๋ณด๊ณ ๋์ ์ ๋ฌด ํจ์จ์ ๋์ฌ์ฃผ๋ ์ต์ ์ ๋ฐฉ๋ฒ์ ์ฐพ์๋๊ฐ๋ฉด ๋๋ ๊ฒ ๊ฐ๋ค. ๊ทธ์ ์์์, ์ผ๋จ ๋ง์ด ๋ณด๊ณ ๋ ๋ง์ด ์ฐ์ตํด๋ด์ผ๊ฒ ๋ค.
์ง๋ ํฌ์คํ
https://deep-wide-studio.tistory.com/38?category=873590
Hi-fi Screenflow ๋ง๋ค๊ธฐ