Chapter 1. UX/UI μ λλ‘ μ΄ν΄νκΈ°
1-1 UX λμμΈ? UI λμμΈ?
UI(User Interface)
β’
UIλ μ°λ¦¬κ° μΈμμ μ΄μκ°λ©° λ§μ£Όνλ λ€μν μκ°μ ꡬμ±μμ
β’
μ±, μΉμ¬μ΄νΈ κ°μ λμ§νΈ κΈ°λ°μ λμμΈμμ UIλ λΉμ£ΌμΌ λμμΈκ³Ό κ°μ κ°λ
β’
UIλ μμ΄μ½, νμ΄ν¬κ·ΈλνΌ λ±κ³Ό κ°μ μκ° μμλ‘ μ νμ΄λ μλΉμ€λ₯Ό κ²½ννλ νΉμ
νλ λ°©μμ νμ±
β’
UXμ UIλ μνΈλ³΄μ κ΄κ³
UX(User Experience)
β’
UXλ μ¬μ©μκ° μ΄λ€ μ νμ΄λ μλΉμ€μ μνΈμμ―νλ κ³Όμ μμ μ»λ μ΄μ²΄μ κ²½νμ μλ―Έ
β’
βUX λμμΈβμ΄λ μ΄λ° κ²½νμ μλΉμ€λ μ νμΌλ‘ ꡬννκΈ° μν΄ μ€κ³νκ³ μ€ννλ κ²
β’
μ¬μ©μμ λμ¦λ₯Ό νμ
νλ κ²μ΄ μ’μ UXμ κΈ°λ³Έ 쑰건μ΄μ ν΅μ¬
μ’μ UXμ μμ
- νμΈμ¦ μΌμ²© : μΌμ²©μ΄ λ°λ₯μ λ¨λ κ²μ΄ μ«μ μ¬λμ λμ¦λ₯Ό κ³ λ €ν λμμΈ
β’
λ무 μ°½μμ μΈ κ΄μ μΌλ‘ UXλ₯Ό λ°λΌλ³΄λ©΄ μ€νλ € μ¬μ©μ±μ λ¨μ΄λ¨λ¦Ό
β’
UX λμμ΄λλ μ νμ λλ¬μΌ λ§₯λ½ νκ³, λ κ΄μ΅μ μΈ μΈ‘λ©΄μ μΆ©λΆν κ³ λ €ν λ€ μ΅μ μ κ²½νμ λ§λλ κ²μ λͺ©νλ‘ μΌμμΌ ν¨
νλ‘λνΈ λμμ΄λ
β’
νλ‘μ νΈ λμμ΄λλ λμ§νΈμ λ€λ£¨λ λμμ΄λμ΄λ©°, μ ν μ€μ¬ μ‘°μ§μ μν¨
β’
μ ν μ€μ¬ μ‘°μ§μ΄λ βκΈ°ν-λμμΈ-κ°λ°βμ²λΌ κΈ°λ₯ λ¨μλ‘ νμ ꡬλΆνμ§ μκ³ κΈ°μ
μ΄ κ°λ°λ μ νμ λ°λΌ ννΈλ₯Ό λ¬Άλκ²μ μλ―Έν¨ (μμ- κ²μ ν, μμΈ νμ΄μ§ ν, νμ νλ±)
β’
νλ‘νΈ λμμ΄λλ μΈν°νμ΄μ€λ₯Ό λΉΌμ΄λκ² λ§λλ κ²λ§μΌλ‘λ λΆμ‘±νλ©° μ’
μ¬ν μ°μ
κ΅°μ λν κΉμ μ§μμ΄ νμν¨
UX/UI λμμΈμ μ§ν κ³Όμ
β’
UX/UI λμμΈμ΄ μ§νλλ κ³Όμ μ μ νκ³Ό μλΉμ€, μν©μ λ°λΌ λ¬λΌμ§
β’
보νΈμ μΈ UX/UI λμμΈ κ³Όμ - βλλΈ λ€μ΄μλͺ¬λβ
β’
λλΈ λ€μ΄μλͺ¬λλ μλμ 4λ¨κ³λ‘ ꡬμ±λμ΄μ§
01. λ°κ²¬
- 리μμΉ λ¨κ³: κ΄λ ¨ λ°μ΄ν°λ₯Ό λͺ¨μΌκ³ λ¬Έμ λ₯Ό νμ
- μλ₯Ό λ€μ΄ λ°μ€ν¬ 리μμΉ, μ λ¬Έκ° μΈν°λ·°, κ΄μ°°μ‘°μ¬, ν¬μ»€μ€ κ·Έλ£Ή μΈν°λ·° λ±μ΄ μμ
02. μ μ
- μ λ΅ λ° μ»¨μ
λμΆ λ¨κ³
- μ΄νΌλν° λ€μ΄μ΄κ·Έλ¨, νλ₯΄μλ, μ λ λ§΅κ³Ό κ°μ κΈ°λ²μ΄ μ£Όλ‘ μ¬μ©λ¨
03. λ°μ
- μ€μ§μ μΌλ‘ ν΄κ²°ν λ°©λ² νΉμ μ±κ³΅μ μΌλ‘ ꡬνν λ°©λ²μ λ
Όμ
- μμ΄μ΄ νλ μ μ μ, IA λ±μ΄ μ΄ λ¨κ³μμ μ§ν
04. μ λ¬
- λΉμ£ΌμΌ λμμΈμ΄ μ§νλλ λ¨κ³
- λ΄λΆμμ ν
μ€νΈλ₯Ό μ§ννμ¬ μ€λ₯λ μ¬μ©μκ° μ΄λ €μμ κ²ͺμ λ§ν λΆλΆμ 미리 λ°κ²¬ν¨
1-2 UIμ ꡬ쑰μ μμ
β’
λ©ν λͺ¨λΈ
- μ¬λ¬Όμ΄ μ΄λ»κ² μλν κ²μ΄λΌ μ μΆνλ μΈκ°μ μ¬κ³ κ³Όμ μ ꡬ쑰ν ν κ²μ λ»ν¨
- κ° λΆμΌλ§λ€ μ¬λλ€μ΄ κΈ°λνλ UXκ° λ€λ¦
- μμ) μ
λ ₯ μ°½μ 보면 μ
λ ₯ν μ€λΉλ₯Ό ν¨
β’
λ©ν λͺ¨λΈ λΆμ‘°ν
- μ¬λ¬Όμ μλ λ°©μμ΄ μμμμ λ²μ΄λλ κ²μ μλ―Έν¨
- μ¬μ©μ κ²½νμ μ€κ³νλ κ²μ 무μμ μ λ₯Ό λ§λλ μ°½μ νλκ³Όλ λ€λ¦
- μ§λμΉκ² μ°½μμ μ΄κ±°λ κ΄μ΅μ 무μνκ³ UIλ₯Ό λμμΈνλ©΄ λ©ν λͺ¨λΈ λΆμ‘°νκ° μΌμ΄λ¨
UIμ ꡬ쑰
β’
μΉμ¬μ΄νΈ ꡬ쑰
- κ°λ‘ ꡬ쑰νκ³Ό μΈλ‘ ꡬ쑰νμΌλ‘ λλ μ μμ
- κ°λ‘ ꡬ쑰ν- μμμλΆν° ν€λ, μ½ν
μΈ , νΈν°λ‘ μμμ΄ λλμ΄ μμ
- μΈλ‘ ꡬ쑰ν - μΌμͺ½μ΄ ν€λ, μ€λ₯Έμͺ½ μλ¨μ΄ μ½ν
μΈ , κ·Έ μλκ° νΈν°
β’
λͺ¨λ°μΌ μ¬μ΄νΈ ꡬ쑰
- λκ² νλ©΄ μμ λ΄λΉκ²μ΄μ
μ λ°°μΉνκ±°λ 맨 μλ νλ°λ₯Ό λ
- λ΄λΉκ²μ΄μ
κ³Ό νλ°λ₯Ό ν¨κ» μ¬μ©ν΄ μ£Όμ νμ΄μ§λ‘ μ΄λνκ±°λ κΈ°λ₯μ νλμ λ³Ό μ μκ² ν¨
1-3 λͺ¨λ°μΌ λμμΈ νΈλ λμ λ³ν
β’
μ€νμ΄λͺ¨ν½ λμμΈ
- μ¬λ¬Όμ μ¬μ€μ μΌλ‘ νννλ κΈ°λ²
β’
νλ« λμμΈ
- νμ€μ±μ΄ μ¬λΌμ§ ννν ννμ λμμΈ
iOS 7 νλ«λμμΈ vs iOS 6 μ€νμ΄λͺ¨ν½ λμμΈ
β’
λ¨Έν°λ¦¬μΌ λμμΈ
- ꡬκΈμ΄ μ°½μν λμμΈ κ°μ΄λλ‘, 그리λ κΈ°λ°μ λ μ΄μμκ³Ό κ³νμ μΈ μμ μ€κ³, μλμ μΈ μ¬λ°±μΌλ‘ λλ΄νκ³ κ·Έλν½μ μΈ λΉμ£ΌμΌμ μΆκ΅¬νλ λμμΈ κΈ°λ²
β’
λ΄λͺ¨νΌμ¦
- νλ« λμμΈμ΄λ λ¨Έν°λ¦¬μΌ λμμΈκ³Ό λ¬λ¦¬ λΉκ³Ό κ·Έλ¦Όμλ‘ μ¬μ€μ μ΄λ©΄μ λ―Έλμ μΈ κ²μ΄ νΉμ§
- Soft Uiκ° νΉμ§
λλμ
μ’μλ μ
μ λ§€λͺ¨νΈνλ uxuiμ κ°λ
μ νμ€νκ² μκ² λμ΄μ μ’μλ€. μ¬μ©μμ λμ¦λ₯Ό νμ
νλ κ²μ΄ UXμ ν΅μ¬μ΄λΌλ κ²μ κΉ¨λ¬μμΌλ©°, UX/UIμ λλ΅μ μΈ μ§ν κ³Όμ μ μ μ μμλ€. κΈ°μ΄μ μΈ UI μμλ€λ μ±
μ ν΅ν΄ μκ² λμμΌλ©°, μλκ° νλ₯΄λ©΄μ λ³νν UIμ νΈλλκ° κ΅μ₯ν ν₯λ―Έλ‘κ² λ€κ°μλ€.
μκ²λ κ°λ
β’
UX/UIμ κΈ°λ³Έ κ°λ
κ³Ό UIμ κΈ°μ΄μ μΈ μμ
β’
UI λμμΈμ λ³ννλ νΈλλ