π©π»Deep Wide School/πProduct Design (36) μΈλ€μΌν 리μ€νΈν User Flow Diagram 그리λ λ°©λ² νλ‘μ° λ€μ΄μ΄κ·Έλ¨?μμμ Flow chart, Flow Diagram, Task Flow, User Flowμ κ°λ μ λν΄μ μμ보μλ€. μ¬μ€μ λͺ¨λ κ°μ λ§₯λ½μ λ¨μ΄λΌλ κ²μ μ΄μ λ μ΄ν΄νλ€. ν΅μΉν΄μ Flow Diagramμ΄λΌκ³ μ§μΉνκ² λ€. μ΄ ν¬μ€ν μμλ λ³΄λ€ λν μΌνκ² μ΄λ»κ² νλ‘μ° λ€μ΄μ΄κ·Έλ¨μ 그리λ μ§μ λν΄μ λ€λ€λ³΄κ³ μ νλ€. νλ‘μ° λ€μ΄μ΄κ·Έλ¨μ κ°λ μ λν΄μλ μ΄μ ν¬μ€ν μμ μ 리νκΈ° λλ¬Έμ, κ°λ μ λν μ€λͺ μ μλ΅νκ³ λ°λ‘ λ€μμ μ νλΈ μμ λ΄μ©μ μ°Έκ³ νμ¬ 'ꡬ체μ μΈ λ°©λ²'μ λν΄ μ 리νκ² λ€. How to Create a User Flow Diagram youtu.be/_kPuHPKpCP0How to Create a User Flow Diagram νλ‘μ° λ€μ΄μ΄κ·Έλ¨ λ§λλ λ²κ΅¬μ±μμ .. νμ€ν¬ νλ‘μ°, μ μ νλ‘μ°, νλ‘μ°μ°¨νΈ, νλ‘μ° λ€μ΄μ΄κ·Έλ¨, IA? Task κ°λ μ νλμ© μ 리νκ³ κ°μ *UX μ€ν 리보λ: UX ꡬνμ μλ°λλ μ¬μ©μμ νμ€ν¬, μΈν°νμ΄μ€ κ° μνΈμμ©μ μκ°ννμ¬, κ°λ°μ/λμμ΄λμ μμ¬μν΅μ λλ λꡬμ΄μ μμ±ν΄μΌ ν μ± μλΉμ€μ μμλλ μ¬μ©μ κ²½νμ 미리 보기 μν λ°©λ²λ‘ μ λ§νλ€. 1. Feature List : UX concept/ UX Needsμ ꡬνμ νμν κΈ°λ₯ 리μ€νΈ 2. User Task Flow : ν΄λΉ κΈ°λ₯μνκ³Ό μ¬μ©μμ νμ 맡ν λ° νλ¦λ 3. IA (Information Architecture) : μ 보μ ꡬ쑰νμ μκ³κ΄κ³λ§(μ°μ μμ) 4. Wireframe : ν΄λΉκΈ°λ₯ ꡬνμ μν μΈν°νμ΄μ€ μμμ λ°°μΉμ νλ©΄ ꡬ쑰 5. Workflow : μ¬λ¬ κ°μ μμ΄μ΄ νλ μ λλ κ°λ³ κΈ°λ₯ κ° νλ©΄ μ ν νλ¦ μ§λ Fea.. νΌμλμ κΈ°λ°ν User Scenarios μ μ μλλ¦¬μ€ νΌμλμ μ μ μλλ¦¬μ€ κΈ°λ°μΌλ‘ Feature Listλ₯Ό μμ±ν΄μΌ νλλ°, μλΉμ€λμμΈ λ¬λλ€μ΄μ΄λ¦¬ #16 νΌμλ νΈμ λ±μ₯νλ 'μ μ μλ리μ€'μ λν μ€λͺ μ΄ λΆμΆ©λ¬Έν΄μ λ΄μ©μ 보κ°νκ³ μ νλ€. μ μ μλ리μ€μλ 무μμ λ΄μμΌ νλκ°? μ μ μλ리μ€μμλ μ¬μ©μλ€μ΄ 'νμ¬ μ΄λ»κ² νλνλμ§'μ λν΄ λ¬μ¬νλ€. νΌμλκ° μμ μ λͺ©μ μ λ¬μ±νκΈ° μν΄ 'λ―Έλμ μ°λ¦¬ μ νμ μ΄λ»κ² μ¬μ©ν μ§' κ·Έλ €λ³΄κΈ° μν΄ μλ리μ€λ₯Ό λ§λλ κ²μ΄λ€. λ°λΌμ, νΌμλμ λ¬Έμ μ λμ¦, λ©ν λͺ¨λΈκ³Ό λκΈ°λ₯Ό λ°νμΌλ‘ νΌμλμ νλμ μμΈν λ¬μ¬ν΄μΌ νλ€. μ΄κΈ° λ¨κ³μμλ, μλ‘κ² λμμΈνλ €λ μ νμ μλλ²κ³Ό ꡬν λ°©λ²μ μκ°νμ§ λ§κ³ , μ΅λν μ¬μ©μ λͺ©νμλ§ μ§μ€ν΄μΌ νλ€. μλ리μ€μ λ²μλ λκ³ , κΉμ΄λ μκ² μμ±ν΄μΌ νλ€κ³ νλ€. μ.. μ±/μΉ μλΉμ€ λμμΈ UX Features list Feature List νΌμλλ₯Ό λ§λ€κ³ νΌμλ κΈ°λ° μ μ μλ리μ€λ₯Ό λ§λ€μλ€λ©΄, μ΄μ 본격μΌλ‘ μ±/μΉμμ ꡬνν Feature Listλ₯Ό μμ±ν΄μΌ νλ€. μ΄λ€ κΈ°λ₯λ€μ΄ νμν μ§, λ§ κ·Έλλ‘ κΈ°λ₯μ 리μ€ν ν΄λ³΄λ κ²μ΄λ€. μ°λ¦¬κ° νν λ€μ΄λ³Έ 'νλ‘μ° μ°¨νΈ'λ 'μμ΄μ΄νλ μ'μΌλ‘ κ°κΈ° μν΄μλ μ΄λ° λ¨κ³κ° νμνλ€.1. Feature List 2. User Task Flow 3. IA (Information Architecture) 4. Wireframe 5. Workflowλ§μΉ μ°λ¦¬κ° 리μμΉλ₯Ό κΈ°λ°μΌλ‘ μ΄νΌλν° λ€μ΄μ΄κ·Έλ¨μ μ§ννκ³ , νΌμλλ₯Ό λ§λ κ²μ²λΌ μ΄μ λ¨κ³λ₯Ό ν λλ‘ μ§νλ λ κ°μ₯ μ±κ³΅μ μΈ κ²°κ³Όλ¬Όμ λ§λ€ μ μλ€. ν λ¨κ³μ© μ΄ν΄λ³΄λ©° ν¬μ€ν νλλ‘ νκ² λ€. ꡬκΈμ UX Feature Listλ₯Ό κ²μ.. νΌμλ Personas νΌμλ Personasλ 무μμΈκ°νΌμλλ νΉμ μ νμ΄λ μλΉμ€λ₯Ό μ¬μ©ν λ€μν μ¬μ©μλ₯Ό μ€μ λ‘ κ΄μ°°ν΄μ μ»μ μ 보λ₯Ό λ°νμΌλ‘ λ§λλ μ λ΅μ κ°μμ μΈλ¬Όμ΄λ€. λμμ΄λλ νΌμλλ₯Ό λ§λ€λ©΄μ μ¬μ©μμκ² κ³΅κ°νκ³ , μμ±λ νΌμλλ₯Ό ν΅ν΄ μ¬μ©μκ° νΉμ κΈ°λ₯μ΄λ μν©, νκ²½μ μ΄λ»κ² λ°μν κ²μΈμ§ μμν΄λ³Ό μλ μλ€. 'λꡬλ₯Ό μ£Όμν νκΉμΌλ‘ μ€μ ν κ²μΈκ°'μ λν κ³ λ―Όμ ν΄κ²°νκ³ λμμΈ λ°©ν₯μ μ‘λλ° κΈΈμ‘μ΄ μν μ ν μ μλ λꡬλ€. νΌμλλ₯Ό λ§λλ κ³Όμ μμ λμμΈ νμ μλΉμ€λ μ νμ΄ μ 곡ν΄μΌ ν ꡬ체μ μΈ μꡬμ¬νμ ν©μν μ μκ² λμ΄ λμμΈ μ μμ μ΄μ μ λΆλͺ ν ν μ μλ€. λ μλΉμ€λ μ νμ΄ λ§μ‘±μμΌμΌ ν λ€μν νΌμλλ₯Ό λ§λ€μ΄ λ°λμ μΆ©μ‘±μν¬ μ μλ μꡬμ¬ν κ·Έλ¦¬κ³ νΌν΄μΌν μꡬμ¬ν λ±μ κ³ λ €ν΄ μ.. μ΄νΌλν° λ€μ΄μ΄κ·Έλ¨ Affinity Diagram μ΄νΌλν° λ€μ΄μ΄κ·Έλ¨ Affinity Diagramμ΄λ?νλ‘μ νΈ κ³Όμ μ€ μμ§ν μλ§μ μ 보μ μ‘°κ°λ€μ λ€μνκ² λ°°μΉν΄λ΄μΌλ‘μ¨ κ°λ³λ‘ 보μμ λλ μκ°μ§ λͺ»νλ μ°κ²°μ λ€μ μ°Ύκ³ μλ‘μ΄ ν΅μ°°μ μ»λλ‘ λλ λꡬλ€. μμ λμμΈ λꡬλ€λ‘λΆν° μ»μ μ 보λ₯Ό λΉλ‘―ν΄ νλ‘μ νΈμ μ κ΄ν μ£Όμ λ°κ²¬μ , μμ¬μ , μμ΄λμ΄ λ±μ λ©λͺ¨μ§μ λ¬Έμ₯μΌλ‘ μ μ΄ νμλ€κ³Ό 곡μ νκ³ , μ΄λ₯Ό λμ 곡κ°μ νΌμ³λκ³ λΆλ₯νλ©° ν¨ν΄μ μ°Ύλλ€. μ΄νΌλν° λ€μ΄μ΄κ·Έλ¨μ λ°©λν μμ μλ£λ₯Ό νμλ€κ³Ό ν¨κ» ν΄μ, λΆλ₯, μ 리νλ νλ ₯μ μ΄κ³ μ°½μμ μΈ ν΄μ λκ΅¬λΌ ν μ μλ€. ν¨κ³Όνμμ΄ νμ₯μμ κ°μ λ€λ₯Έ λꡬλ₯Ό μ¨ μμ§ν΄μ¨ μ 보λ€μ 체κ³μ μΌλ‘ 곡μ νκ³ , κ°λ³μ μΈ μ 보λ€μ μ°κ΄μ±μ μ°Ύμ μ¬μ©μ κ²½νμ λν μ΄μ²΄μ μΈ μ΄ν΄μ λμμΈ λ°©ν₯μ μ‘λλ° νμ©ν μ .. κΈ°λμΉ μ§λ Expectation Maps [νꡬ λꡬ]κΈ°λμΉ μ§λ Expectation Mapsλ 무μμΈκ°? -κ³ κ° μ¬μ μ λ°λΌ κ³ κ°μ κ°μ μ μκ°μ μΌλ‘ 맡ννλ κ²μΌλ‘, κ³ κ°μ΄ μλΉμ€μ λν΄ κ°λ κΈ°λλ₯Ό μ‘°μ¬νκ³ λμννλ κ²μ΄λ€. μ΄ μ§λλ νΉμ μλΉμ€μ μ΄μ μ λ§μΆκ±°λ μ΄λ€ μλΉμ€ λ²μ£Όμ μΌλ°μ ννλ₯Ό λΆμνκΈ° μν΄ μ¬μ©ν μ μλ€. μ΄λ»κ² μ¬μ©νλκ°-κΈ°λμΉ μ§λλ₯Ό λ§λλ λ° νμν μλ£λ λ€μν κ³³μμ μ°Ύμ μ μλ€. -μλ₯Ό λ€μ΄ μ΄μμ λ―Έλμ΄μ 보λ λ΄μ© λ±μ λ°νμΌλ‘ λ§λ€ μ μλ€. -κΈ°μ μ΄ 'λ°κΉ₯μΈμ'μμ μ΄λ»κ² μΈμλκ³ μλμ§μ κ°μ μΌλ°μ μΈ μ§νλ₯Ό μ 곡νλ€. -ννΈ κ³ κ°μ μκ°μ νμΈνκΈ° μν μ¬μΈ΅ μΈν°λ·° λ±μ 본격μ μΈ μ°κ΅¬λ νΉμ μμμ λν μΈλΆμ μΈ λ΄μ©μ νμΈνκΈ° μν΄ μ§ννλ€. -See, Hear, Say & Do, Th.. μλΉμ€ λμμΈ λꡬ μΌμμ ν루 A Day in Life [νꡬ λꡬ]μΌμμ ν루 A Day in Lifeλ 무μμΈκ°'μΌμμ ν루'λ νΉμ κ³ κ°μ μΌμμ μ€λͺ νκΈ° μν΄ κ·Έ 곑κ°μ κ΄λ ¨λ μλ£λ₯Ό μμ§νλ μΌμ΄λ€. μ΄λ»κ² μ¬μ©νλκ°-λ€μν ννλ‘ λ§λ€ μ μλ€. -κ°λ¨ν κ·Έλν½μ΄λ λ§νλ λΉ λ₯΄κ³ μ¬μ°λ©°, λΉλμ€λ μ¬μ§μ μ¬μ©μ νκ²½κ³Ό μΌμμ νλΆνκ² λ¬μ¬ν μ μλ€. μ΄λ€ λ°©λ²μ μ νν건 'μΌμμ ν루'λ κ°λ₯ν ν λ§μ ν΅μ°°μ μ»μ μ μμ΄μΌ νλ€.-μ΄ μ‘°μ¬μ λͺ©μ μ κ³ κ°μ΄ μλΉμ€μ μνΈμμ©νλ μκ° μΈμλ μΌμμ μΈ μΌκ³Όμμ μ΄λ€ μκ°κ³Ό νλμ νλμ§μ λν κ°μλ₯Ό μ»λ κ²μ΄λ€. μ μ¬μ©νλκ°-'μΌμμ ν루'λ κ³ κ°μ΄ μλΉμ€λ₯Ό μ¬μ©νλ λ§₯λ½μ μ΄ν΄ν μ μλλ‘ νΉμ ν°μΉν¬μΈνΈμ μνΈμμ©ν λ κ³ κ°μ μκ°κ³Ό λλμ λν μ 보λ₯Ό μ 곡νλ€. -λ¨μν κ³ κ°μ΄ μλΉμ€λ₯Ό .. μ΄μ 1 2 3 4 5 λ€μ