λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°

πŸ‘©‍πŸ’»Deep Wide School/πŸ’˜Product Design

νƒœμŠ€ν¬ ν”Œλ‘œμš°, μœ μ € ν”Œλ‘œμš°, ν”Œλ‘œμš°μ°¨νŠΈ, ν”Œλ‘œμš° λ‹€μ΄μ–΄κ·Έλž¨, IA? Task

728x90
λ°˜μ‘ν˜•

κ°œλ…μ„ ν•˜λ‚˜μ”© μ •λ¦¬ν•˜κ³  κ°€μž 

<UXμŠ€ν† λ¦¬λ³΄λ“œ* μž‘μ„± ν”„λ‘œμ„ΈμŠ€> 

*UX μŠ€ν† λ¦¬λ³΄λ“œ: UX κ΅¬ν˜„μ— μˆ˜λ°˜λ˜λŠ” μ‚¬μš©μžμ™€ νƒœμŠ€ν¬, μΈν„°νŽ˜μ΄μŠ€ κ°„ μƒν˜Έμž‘μš©μ„ μ‹œκ°ν™”ν•˜μ—¬, 개발자/λ””μžμ΄λ„ˆμ˜ μ˜μ‚¬μ†Œν†΅μ„ λ•λŠ” λ„κ΅¬μ΄μž μ™„μ„±ν•΄μ•Ό ν•  μ•± μ„œλΉ„μŠ€μ™€ μ˜ˆμƒλ˜λŠ” μ‚¬μš©μž κ²½ν—˜μ„ 미리 보기 μœ„ν•œ 방법둠을 λ§ν•œλ‹€. 

 

 

1. Feature List : UX concept/ UX Needs의 κ΅¬ν˜„μ— ν•„μš”ν•œ κΈ°λŠ₯ 리슀트
2. User Task Flow : ν•΄λ‹Ή κΈ°λŠ₯μˆ˜ν–‰κ³Ό μ‚¬μš©μžμ˜ ν–‰μœ„ 맡핑 및 흐름도
3. IA (Information Architecture) : μ •λ³΄μ˜ ꡬ쑰화와 μœ„κ³„κ΄€κ³„λ§(μš°μ„ μˆœμœ„)
4. Wireframe : ν•΄λ‹ΉκΈ°λŠ₯ κ΅¬ν˜„μ„ μœ„ν•œ μΈν„°νŽ˜μ΄μŠ€ μš”μ†Œμ˜ λ°°μΉ˜μ™€ ν™”λ©΄ ꡬ쑰
5. Workflow : μ—¬λŸ¬ 개의 와이어 ν”„λ ˆμž„ λ˜λŠ” κ°œλ³„ κΈ°λŠ₯ κ°„ ν™”λ©΄ μ „ν™˜ 흐름

μ§€λ‚œ Feature List ν¬μŠ€νŒ…μ—μ„œ Feature List > User Task Flow> Information Architecture > Wireframe > Workflow 이런 μˆœμ„œλ‘œ 섀계가 μ§„ν–‰λœλ‹€κ³  ν•œ λ°” μžˆλ‹€. UXUI κ°œκ΄„μ— λŒ€ν•œ νŠΉκ°•μ„ 듀은 적 μžˆλŠ”λ°, κ·Έ λ•Œ μ •λ¦¬ν•œ λ‚΄μš©μ΄λ‹€. 그런데 단계 ν•˜λ‚˜ ν•˜λ‚˜μ— λŒ€ν•œ κ°œλ… μ •μ˜λΆ€ν„° λ‹€μ‹œ 짚고갈 ν•„μš”κ°€ μžˆλ‹€κ³  μ—¬κ²Όλ‹€. 두 번째 단계인 User Task Flow에 λŒ€ν•΄ μ•Œμ•„λ³΄κΈ° μœ„ν•΄ κ²€μƒ‰ν•΄λ³΄λ‹ˆ, Task Flow, User flow, User Task Flow, flowchart, flow diagramκ³Ό 같은 단어듀이 λ’€μ„žμ—¬ λ‚˜μ™€μ„œ, λŒ€μ²΄ μ–΄λ–€ 차이가 μžˆλŠ”κ±΄μ§€ ν—·κ°ˆλ ΈκΈ° λ•Œλ¬Έμ΄λ‹€. 

 

"UX Glossary: Task Flows, User Flows, Flowcharts and some new-ish stuff" λΌλŠ” κΈ€κ³Ό "What are the differences between user flows, task flows and workflows?"λΌλŠ” 도움이 될 λ§Œν•œ 글을 λ°œκ²¬ν–ˆκ³ , 이λ₯Ό μ€‘μ‹¬μœΌλ‘œ ν•΄λ‹Ή νŽ˜μ΄μ§€μ˜ λ‚΄μš© 일뢀λ₯Ό λ²ˆμ—­ν•΄κ°€λ©° μ •λ¦¬ν•˜κ³ μž ν•œλ‹€. 

 


1. What is Flow? 

 

ν”Œλ‘œμš°λ₯Ό λ§Œλ“€λ©΄, νŠΉμ • νŽ˜μ΄μ§€μ—μ„œ μ‚¬μš©μžμ˜ λ°©λ¬Έ μ „ ν›„λ‘œ μ–΄λ–€ 일이 μΌμ–΄λ‚˜λŠ” 지 λ””μžμ΄λ„ˆκ°€ μƒκ°ν•  수 μžˆλ„λ‘ λ„μ™€μ£Όκ²Œ λœλ‹€. κ°œλ°œμžκ°€ μ›Œν‚Ήν•˜λŠ” ν”„λ‘œν† νƒ€μž…μ„ λ§Œλ“œλŠ” 첫 단계에 λŒμž…ν•˜κΈ° 전에, ν”Œλ‘œμš°λŠ” μ„œλΉ„μŠ€κ°€ μ–΄λ–»κ²Œ μž‘λ™ν• μ§€ 이해할 수 있게 ν•œλ‹€. 

 

 

2. Flowcharts/ Flow Diagram 

 

 

ν”Œλ‘œμš°μ°¨νŠΈλŠ” λ³΅μž‘ν•œ μ‹œμŠ€ν…œ/ν™œλ™μ— ν¬ν•¨λœ μ‚¬λžŒμ΄λ‚˜ 물건의 μ›€μ§μž„/ν–‰λ™μ˜ μˆœμ„œλ₯Ό λ‹€μ΄μ–΄κ·Έλž¨μœΌλ‘œ λ§Œλ“  것이닀. 'ν˜•μ‹'을 μ˜λ―Έν•˜λŠ” 것 κ°™λ‹€. (λ”°λΌμ„œ ν”Œλ‘œμš°μ°¨νŠΈμ™€ ν”Œλ‘œμš° λ‹€μ΄μ–΄κ·Έλž¨μ€ 사싀상 같은 μ˜λ―Έλ‹€.)

 

 

 

3. Task Flow vs User Flow

 

 

νƒœμŠ€ν¬ ν”Œλ‘œμš°μ™€ μœ μ € ν”Œλ‘œμš°λŠ” 크게 λ‹€λ₯΄μ§€ μ•Šλ‹€. 이 λ‘˜μ˜ λͺ©ν‘œλŠ”, μ΅œμ†Œν•œμ˜ 마찰둜 νƒœμŠ€ν¬λ₯Ό μ„±κ³΅μ‹œν‚€κΈ° μœ„ν•΄ μœ μ €μ˜ ν™œλ™μ„ μ΅œμ ν™”ν•˜λŠ” 것이닀. λ‘˜ λ‹€, κΈ°λŠ₯이 μ‹€μ œ 개발되기 이전, 생각을 λ•λŠ” 역할을 ν•œλ‹€. 

 

  • Task Flow
    νƒœμŠ€ν¬ν”Œλ‘œμš°λŠ” λ‹¨μΌν•œ ν”Œλ‘œμš°λ‘œ, λͺ¨λ“  μ‚¬μš©μžλ“€μ— μ˜ν•΄ νŠΉμ •ν•œ μ•‘μ…˜μœΌλ‘œ μœ μ‚¬ν•˜κ²Œ μˆ˜ν–‰λœλ‹€. 즉, 같은 Entry Pointλ₯Ό κ³΅μœ ν•˜λŠ” μœ μ €λ“€μ˜ νƒœμŠ€ν¬λ₯Ό λ‹€λ£° λ•Œ μ ν•©ν•˜λ‹€λŠ” μ˜λ―Έλ‹€. 
    ex1. νšŒμ›κ°€μž…
    ex2.μ•ŒλžŒμ‹œκ³„ λͺ¨λ°”일 μ•±) μ•„λ§ˆλ„ 'μ•ŒλžŒ μ‹œκ°„μ„ μ„€μ •ν•˜λ‹€'와 같은 νƒœμŠ€ν¬λŠ” λͺ¨λ“  μœ μ €λ“€μ—κ²Œ 같은 λ°©μ‹μœΌλ‘œ μˆ˜ν–‰λ  것이닀.  

 

Task Flow/ 좜처: https://ux.stackexchange.com/questions/45405/what-are-the-differences-between-user-flows-task-flows-and-workflows

 

 

  • User Flow
    μœ μ € ν”Œλ‘œμš°λŠ” νƒœμŠ€ν¬ ν”Œλ‘œμš°μ™€ μœ μ‚¬ν•œλ°, 이것은 μ„œλ‘œ λ‹€λ₯Έ μœ μ €κ°€ μ„œλ‘œ λ‹€λ₯Έ νƒœμŠ€ν¬λ₯Ό μˆ˜ν–‰ν•˜κ±°λ‚˜ λ‹€λ₯Έ 경둜둜 이동할 수 μžˆλ‹€λŠ” 점(λŒ€κ°œ μ„œλ‘œ λ‹€λ₯Έ Entry Point에 κΈ°μΈν•œλ‹€)을 κ°•μ‘°ν•œλ‹€λŠ” 것이 λ‹€λ₯΄λ‹€. μœ μ € ν”Œλ‘œμš°λŠ” μ „ν˜•μ μœΌλ‘œ νΌμ†Œλ‚˜λ‚˜ νŠΉμ • Entry Point에 ν•¨κ»˜ λΆ™λŠ”λ‹€.
  • 예λ₯Ό λ“€μ–΄, 두λͺ…μ˜ μœ μ €κ°€ Amazonμ—μ„œ Nirvana CDλ₯Ό κ΅¬λ§€ν•˜κΈ° μœ„ν•΄ 검색쀑일 λ•Œ, 이 λ‘˜μ€ μ™„μ „νžˆ λ‹€λ₯Έ μ—¬μ •μœΌλ‘œ 이λ₯Ό μˆ˜ν–‰ν•  수 μžˆλ‹€. ν•œλͺ…은 λΈŒλΌμš°μ €μ˜ μ£Όμ†Œμ°½μ„ 톡해 μ•„λ§ˆμ‘΄ μ‹œμŠ€ν…œμ— μ—”ν„°ν•΄μ„œ, κ·Έλ…€κ°€ μ‚¬κ³ μžν•˜λŠ” 앨범을 κ²€μƒ‰ν•˜κ³ , μž₯λ°”κ΅¬λ‹ˆμ— μΆ”κ°€&ꡬ맀할 수 μžˆλ‹€. λ‹€λ₯Έ ν•œ λͺ…은 ꡬ글에 κ²€μƒ‰ν•΄μ„œ, 링크λ₯Ό 톡해 μ•„λ§ˆμ‘΄ μƒν’ˆνŽ˜μ΄μ§€μ— λ„μ°©ν•˜κ³ , ν›„κΈ°λ₯Ό 읽어보고, μ•„λ§ˆλ„ λ‹€λ₯Έ CD와 비ꡐ 등을 ν•  수 μžˆλ‹€. 

 

User flow_ μœ μ € μ‹œλ‚˜λ¦¬μ˜€μ™€ ν•¨κ»˜ ν•œλ‹€. / 좜처: https://ux.stackexchange.com/questions/45405/what-are-the-differences-between-user-flows-task-flows-and-workflows

 

  • μœ μ € ν”Œλ‘œμš°λŠ” λ―Έλ‹ˆ μœ μ € μ €λ‹ˆ(고객 μ—¬μ •)이라고 생각할 수 μžˆλ‹€. 이 ν”Œλ‘œμš°λŠ” μ§μ„ ν˜•μ΄ μ•„λ‹ˆμ–΄λ„ 되고, λΉ„μ„ ν˜•μ μΈ 경둜둜 가지λ₯Ό μ³λ‚˜κ°ˆ 수 μžˆλ‹€. 이 경둜λ₯Ό κ²°μ •ν•˜λ©΄μ„œ, 경둜λ₯Ό 톡해 κ°€λŠ₯ν•œ λ°©ν–₯ μ „ν™˜μ„ λ³Ό 수 있고 μ‚¬μš©μž κ²½ν—˜μ„ μ΅œμ ν™”ν•  수 μžˆλ‹€. μœ μ € ν”Œλ‘œμš°λŠ” κ°„λ‹¨ν•˜κ²Œ μ‹œμž‘ν•  수 있고, 'Red routes'γ…‘Key user journeyλ₯Ό κ²°μ •ν•˜λŠ”λ° 도움을 μ€€λ‹€. 

※즉, ν”Œλ‘œμš°μ°¨νŠΈ/ν”Œλ‘œμš°λ‹€μ΄μ–΄κ·Έλž¨μ€ ν‘œν˜„μ˜ '방식, ν˜•μ‹'을 μ˜λ―Έν•˜λŠ” 것이고, λ‚΄μš©μ— μžˆμ–΄μ„œλŠ” νƒœμŠ€ν¬ ν”Œλ‘œμš°/μœ μ € ν”Œλ‘œμš°λ‘œ κ΅¬λΆ„λ˜λŠ” 것이닀. νƒœμŠ€ν¬ ν”Œλ‘œμš°μ™€ μœ μ € ν”Œλ‘œμš°μ˜ 두 κ°œλ…μ€ 살짝 λ‹€λ₯΄μ§€λ§Œ, μ˜λ―ΈλŠ” μœ μ‚¬ν•˜λ©° User Task Flow둜 λ¬Άμ–΄μ„œ ν•œ λ²ˆμ— ν‘œν˜„ κ°€λŠ₯ν•œ 것 κ°™λ‹€. 

 

 

 

IA (Information Architecture)
IAλŠ” ν”Œλ‘œμš°μ°¨νŠΈ/ν”Œλ‘œμš°λ‹€μ΄μ–΄κ·Έλž¨μ—μ„œ ν™•μΈν•œ κΈ°λŠ₯듀을 μ •λ³΄μ˜ μœ„κ³„μ™€ κ΄€κ³„λ§μœΌλ‘œ κ΅¬μ‘°ν™”ν•˜λŠ” 것을 μ˜λ―Έν•œλ‹€. μ•„λž˜μ˜ 첫번째 이미지가 'ν”Œλ‘œμš°μ°¨νŠΈ'라면, κ·Έ ν”Œλ‘œμš°μ°¨νŠΈλ₯Ό ν† λŒ€λ‘œ λ‘λ²ˆμ§Έ 이미지인 IAλ₯Ό λ§Œλ“€ 수 있게 λ˜λŠ” 것이닀. 

 

μ˜ν™”ν‹°μΌ“ 예맀 ν”Œλ‘œμš° 차트/ https://carrotdesign.tistory.com/entry/UXUI-%EA%B8%B0%ED%9A%8D-11%EA%B0%95
μ˜ν™”ν‹°μΌ“ 예맀 IA/ https://carrotdesign.tistory.com/entry/UXUI-%EA%B8%B0%ED%9A%8D-11%EA%B0%95

 

정보 μ•„ν‚€ν…μ²˜λŠ” μ›Ή μ‚¬μ΄νŠΈ, μ•± λ˜λŠ” 기타 μ œν’ˆμ˜ ꡬ쑰λ₯Ό λ§Œλ“œλŠ” κ²ƒμœΌλ‘œ, μ‚¬μš©μžλŠ” 이λ₯Ό 톡해 μžμ‹ μ΄ 어디에 있고, μ›ν•˜λŠ” 정보가 ν˜„ μœ„μΉ˜μ™€ 비ꡐ해 어디에 μžˆλŠ”μ§€ νŒŒμ•…ν•  수 μžˆλ‹€. 정보 μ•„ν‚€ν…μ²˜λ₯Ό λ°”νƒ•μœΌλ‘œ λ‚΄λΉ„κ²Œμ΄μ…˜, 계측 ꡬ쑰 및 λ²”μ£Όν™”κ°€ 이루어진닀. 

 

IA μ˜ˆμ‹œ/ https://blogs.adobe.com/creativedialogue/design-ko/what-does-a-ux-designer-actually-do/

 

 

 

κ·Έλ™μ•ˆ 자주 λ§ˆμ£Όν–ˆμ§€λ§Œ λͺ…ν™•ν•˜κ²Œ 의미 ꡬ뢄을 ν•˜μ§€ λͺ»ν–ˆλ˜ Flow chart, Flow Diagram, Task Flow, User Flow, IA의 κ°œλ…μ„ 이해할 수 μžˆμ—ˆλ‹€. 사싀 λ¦¬μ„œμΉ˜λ₯Ό μ§„ν–‰ν•˜λ©΄μ„œ 이것 외에도 μœ μ‚¬ν•œ λ„€μ΄λ°μ˜ κ°œλ…λ“€μ΄ λ“±μž₯ν–ˆλŠ”λ°, ν¬μŠ€νŒ…μ—λŠ” ν¬ν•¨ν•˜μ§€ μ•Šμ•˜λ‹€. 였늘 λ“±μž₯ν•œ λͺ¨λ“  κ°œλ…μ„ ν¬ν•¨ν•΄μ„œ UX에 κ΄€λ ¨λœ κ°œλ…λ“€μ΄ μ›Œλ‚™ μ˜€λž˜λ˜μ§€ μ•Šμ€ ν•™λ¬Έ 뢄야라 κ·ΈλŸ°μ§€, μ™„μ „ν•˜κ²Œ μ •λ¦½λœ ν•˜λ‚˜μ˜ 'μ •μ˜'λž„κ²Œ μ—†μ—ˆλ‹€. λˆ„κ΅°κ°€κ°€ 톡상 '이런 의미둜 쓰인닀'ν•˜κ³  정리해둔 것듀이 λ§Žμ•˜λ‹€. μ‹€μ œ λ‹€μ–‘ν•œ ν”„λ‘œμ νŠΈμ— μ μš©ν•΄ κ°€λ©΄μ„œ ν”„λ‘œμ νŠΈ μ„±μ§ˆ, 성격에 맞게 μ˜λ¦¬ν•˜κ²Œ ν™œμš©ν•΄λ‚˜κ°€λŠ” 게 μ€‘μš”ν•˜κ² λ‹€λŠ” 생각이 λ“ λ‹€. 

λ‹€μŒ ν¬μŠ€νŒ…μ—μ„œλŠ” μ΄μ–΄μ„œ Wireframe, Workflow λŒ€ν•œ 곡뢀λ₯Ό 이어가도둝 ν•˜κ² λ‹€. 


 

참고자료

-https://carrotdesign.tistory.com/entry/UXUI-%EA%B8%B0%ED%9A%8D-11%EA%B0%95

-https://blogs.adobe.com/creativedialogue/design-ko/what-does-a-ux-designer-actually-do/

ν•˜λ‹¨ νŽ˜μ΄μ§€λ“€μ˜ 일뢀λ₯Ό λ²ˆμ—­ν–ˆμŠ΅λ‹ˆλ‹€. 

-UX Glossary: Task Flows, User Flows, Flowcharts and some new-ish stuff

https://uxplanet.org/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d

 

-What are the differences between user flows, task flows and workflows?

https://ux.stackexchange.com/questions/45405/what-are-the-differences-between-user-flows-task-flows-and-workflows

.

.

.

.

DEEP WIDE STUDIO

μŠ€ν”Όλ…ΈμžλŠ” λ§ν–ˆμŠ΅λ‹ˆλ‹€. "λ‚˜λŠ” 깊게 파기 μœ„ν•΄ λ„“κ²Œ 파기 μ‹œμž‘ν–ˆλ‹€."

μ €λŠ” 'μ² ν•™'을 μ „κ³΅ν•˜λ©° μΈκ°„μ˜ 근본에 λŒ€ν•΄ νƒκ΅¬ν–ˆκ³ , 

μΈκ°„μ˜ 일상을 기술적으둜 ν˜μ‹ ν•˜λŠ”  'IT 업계'에 관심을 κ°–κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

κΉŠμ–΄μ§€κΈ° μœ„ν•΄, 천천히 넓은 물둜 λ‚˜μ•„κ°€λŠ” μ€‘μž…λ‹ˆλ‹€. 

μΈμŠ€νƒ€κ·Έλž¨μœΌλ‘œ 더 κ°€κΉŒμ΄ μ†Œν†΅ν•΄μš”!

Instagram @skyblueyekk

 

 

 

 

 

 

 

 

 

 

 

728x90
λ°˜μ‘ν˜•