μ°λ¦¬κ° μ΄κ³ μλ μ 보ν μ¬νμμ, μΉμ λ¨μν νΈλ¦¬ν¨μ λμ΄ νμμ μΈ μ‘΄μ¬κ° λμμ΅λλ€.κ·Έλ¬λ μ΄λ¬ν λ³νλ λͺ¨λ μ΄λ€μκ² λλ±νκ² μ΄μ΅μ μ£Όμ§ μμ΅λλ€. μΉ μ κ·Όμ±μ λ°λ‘ μ΄λ¬ν λμ§νΈ λΆνλ±μ ν΄μνκΈ° μν λμμΈ μ² νμμ μΆλ°ν©λλ€.
λ³Έ κΈμμλ UX/UI λμμ΄λκ° μΉ μ κ·Όμ±μ μ€ννκΈ° μν΄ κ³ λ €ν΄μΌ ν ν΅μ¬ μμΉλ€μ μμλ³΄κ³ μ ν©λλ€.
λͺ
λ£ν λ΄λΉκ²μ΄μ
λ° λ μ΄μμ
λͺ νν λ©λ΄ λΌλ²¨λ§
μΉμ¬μ΄νΈμ μ¬μ©μ κ²½νμμ κ°μ₯ μ€μν κ² μ€ νλλ μ 보μ μ κ·Όμ±μ λλ€. ν¨κ³Όμ μΈ λ΄λΉκ²μ΄μ κ³Ό λ μ΄μμμ μ¬μ©μκ° μνλ μ 보λ₯Ό μ§κ΄μ μΌλ‘ μ°Ύμ μ μκ² ν΄μ€λλ€. μλ₯Ό λ€μ΄, μΌνλͺ°μμ 'ν', 'μν', 'μ£Όλ¬Έ' λ±μ λ©λ΄λ μ¬μ©μμκ² λͺ νν κΈΈμ‘μ΄κ° λ©λλ€. νμ§λ§ μ΄λ¬ν λͺ νμ±μ΄ κ³Όμ° λͺ¨λ μ¬μ©μμκ² λμΌνκ² μμ©ν κΉμ? μκ° μ₯μ κ° μλ μ¬μ©μλ κ³ λ Ήμ μ¬μ©μμκ²λ λμΌν μ¬μ©μ±μ μ 곡νκ³ μλμ§ κ³ λ―Όν΄λ³΄μμΌ ν©λλ€.
ν€λ³΄λ λ΄λΉκ²μ΄μ μ§μ
μΉ μ κ·Όμ±μμ μ’ μ’ κ°κ³Όλλ λΆλΆ μ€ νλλ ν€λ³΄λ λ΄λΉκ²μ΄μ μ λλ€. ν€λ³΄λλ₯Ό μ¬μ©νλ μ¬μ©μλ€λ μΉμ¬μ΄νΈμ λͺ¨λ κΈ°λ₯μ μννκ² μ¬μ©ν μ μλλ‘ μ€κ³νλ κ²μ νμμ μ λλ€. μλ₯Ό λ€μ΄, μν κ²μμ΄λ μ₯λ°κ΅¬λ μΆκ° κΈ°λ₯μ΄ ν€λ³΄λ μ‘°μλ§μΌλ‘λ κ°λ₯ν΄μΌ ν©λλ€. μ΄λ λ¨μν μ₯μ κ° μλ μ¬μ©μλ€λ§μ μν κ²μ΄ μλλΌ, λ λμ μλ―Έμμμ μ¬μ©μ κ²½νμ ν₯μμν€λ κ²μ λλ€.
λ체 ν μ€νΈμ μ½ν μΈ
μκ° μ₯μ μ¬μ©μλ₯Ό μν μ΄λ―Έμ§μ λν λ체 ν μ€νΈ
μκ° μ₯μ κ° μλ μ¬μ©μλ€μ μν λ체 ν μ€νΈ μ 곡μ νμμ μ λλ€. μλ₯Ό λ€μ΄, 'νλμ μ μΈ λ₯Ό μ μ λ¨μ± λͺ¨λΈ'κ³Ό κ°μ ꡬ체μ μΈ μ€λͺ μ κ·Έλ€μκ² μκ°μ μ΄λ―Έμ§λ₯Ό μ 곡ν©λλ€. μ¬κΈ°μ μ€μν κ²μ λ¨μν 'λ체'νλ κ²μ΄ μλλΌ, λλ±ν κ²½νμ μ 곡νλ κ²μ λλ€. μ΄λ λμμΈμμ μ 보μ μμ€ μμ΄ λͺ¨λ μ¬μ©μμκ² λμΌν κ²½νμ μ 곡νλ κ²μ μ€μμ±μ κ°μ‘°ν©λλ€.
λΉλμ€μ λν μλ§ λ° μ€λͺ
λΉλμ€ μ½ν μΈ λ₯Ό μ 곡ν λλ μ²κ° μ₯μ μΈμ μν΄ μλ§κ³Ό μ€λͺ μ ν¨κ» μ 곡ν΄μΌ ν©λλ€. μ΄λ₯Ό μν΄ HTML5μ μΊ‘μ νκ·Έλ μλ§ μμ± λꡬλ₯Ό μ¬μ©ν μ μμ΅λλ€. μΊ‘μ νκ·Έλ₯Ό μ¬μ©νλ©΄ λΉλμ€ νλ μ΄μ΄μ μλ§μ΄ μλμΌλ‘ νμλλ©°, μλ§ μμ± λꡬλ₯Ό μ¬μ©νλ©΄ μλμΌλ‘ μλ§μ μμ±ν μ μμ΅λλ€. λ λΉλμ€μ λν μ€λͺ μ μ 곡νμ¬ μ²κ° μ₯μ μΈμ΄ λΉλμ€μ λ΄μ©μ μ΄ν΄νμ¬ λμΌν μ¬μ©μ κ²½νκ³Ό μ 보λ₯Ό μ»μ μ μλλ‘ λμμΌ ν©λλ€.
μμκ³Ό λλΉ
κ³ λλΉ μμ νλ νΈ μ¬μ©
μ½κ² κ·Ήλ¨μ μΈ μμλ‘λ, #000000(κ²μμ)κ³Ό #FFFFFF(ν°μ)μ λλΉλ₯Ό μ¬μ©νλ κ²μ²λΌ λμ λλΉλ₯Ό ν΅ν΄ κ°λ μ±μ λμΌ μ μμ΅λλ€. WCAG 2.0μμλ λ°°κ²½κ³Ό μ κ²½μ λλΉ λΉμ¨μ΄ μ΅μ 4.5:1 μ΄μμ΄μ΄μΌ νλ€κ³ κΆκ³ νκ³ μμ΅λλ€.
μμμλ§ μμ‘΄νμ§ μλ μ 보 μ λ¬
κ³ λλΉ μμ νλ νΈμ μ¬μ©μ μκ°μ λͺ λ£μ±μ λμ΄λ μ€μν μμμ λλ€. κ·Έλ¬λ μμμλ§ μμ‘΄νλ λμμΈμ μλ§Ή λ±μ μ΄μ λ‘ μμμ μ νν ꡬλΆνμ§ λͺ»νλ μ¬μ©μλ€μ λ°°μ ν μνμ΄ μμ΅λλ€. λ°λΌμ, μμλΏλ§ μλλΌ λͺ¨μμ΄λ ν μ€νΈλ‘λ μ 보λ₯Ό μ λ¬νλ κ²μ΄ μ€μν©λλ€. μλ₯Ό λ€μ΄, κ²½κ³ λ©μμ§λ λΉ¨κ°μμΌλ‘ νμλλ κ²μ΄ ν¨κ³Όμ μ΄μ§λ§, λμμ ν μ€νΈ λ©μμ§λ‘λ κ·Έ λ΄μ©μ μ λ¬ν΄μΌ ν©λλ€.
λ°μν λμμΈ
μ μ°ν λ μ΄μμκ³Ό λ―Έλμ΄ μΏΌλ¦¬ νμ©
λ€μν κΈ°κΈ°μ νλ©΄ ν¬κΈ°μμμ μΉμ¬μ΄νΈ μ¬μ©μ±μ 보μ₯νλ λ°μν λμμΈμ μ΄μ νμμ μΈ μμμ λλ€. μ΄λ λ¨μν νλ©΄ ν¬κΈ°μ λ°λ₯Έ μ‘°μ μ λμ΄, μ¬μ©μμ μνΈ μμ© λ°©μμ λν κ³ λ €λ₯Ό ν¬ν¨ν΄μΌ ν©λλ€. μλ₯Ό λ€μ΄, λͺ¨λ°μΌ κΈ°κΈ°μμλ μμ νλ©΄μ λ§κ² λ©λ΄λ₯Ό μΆμνκ±°λ, λ²νΌμ ν¬κΈ°λ₯Ό μ‘°μ νμ¬ μ¬μ©μκ° μ½κ² μ‘°μν μ μλλ‘ ν©λλ€. λ νλΈλ¦Ώμ΄λ PCμμλ ν° νλ©΄μ λ§κ² λ©λ΄λ₯Ό νμ₯νκ±°λ, λ λ§μ μ½ν μΈ λ₯Ό νμν μ μλλ‘ λ μ΄μμμ μ‘°μ ν©λλ€.
ν°μΉμ€ν¬λ¦° μ΅μ ν
λͺ¨λ°μΌ μ¬μ©μλ₯Ό μν ν°μΉμ€ν¬λ¦° μΉνμ μΈ μμλ₯Ό ꡬνν΄μΌ ν©λλ€. μ΄λ₯Ό μν΄ ν°μΉ μ μ€μ²λ₯Ό μ§μνκ³ , μ μ ν ν¬κΈ°μ κ°κ²©μ μ μ§ν΄μΌ ν©λλ€. μκ°λ½μΌλ‘ νλ©΄μ μ€ν¬λ‘€νκ±°λ, λ²νΌμ ν°μΉνμ¬ κΈ°λ₯μ μ€νν μ μλλ‘ ν©λλ€. λ²νΌκ³Ό λ§ν¬μ μ μ ν ν¬κΈ° λ° κ°κ²© μ μ§κ° νμμ£ .
μ¬μ©μ νΌλλ°±
μνΈ μμ© μ λͺ νν μκ°μ /μ²κ°μ νΌλλ°±
μ¬μ©μμ νλμ λν μ¦κ°μ μΈ λ°μμ ν΅ν΄ μΉμ¬μ΄νΈμμ μνΈ μμ©μ μλ΄ν©λλ€. μλ₯Ό λ€μ΄, λ²νΌμ ν΄λ¦νλ©΄ λ²νΌμ΄ λ ΈλμμΌλ‘ λ³νκ±°λ, μ λλ©μ΄μ ν¨κ³Όκ° λνλλ λ±μ μκ°μ νΌλλ°±μ μ 곡ν μ μμ΅λλ€. λ λ²νΌμ ν΄λ¦ν λ μλ¦¬κ° λλ λ±μ μ²κ°μ νΌλλ°±μ μ 곡ν μλ μμ΅λλ€. μ΄λ κ² νλ©΄ μ¬μ©μλ μμ μ νλμ΄ μΉμ¬μ΄νΈμ λ°μλμλ€λ κ²μ μ½κ² μ μ μμ΅λλ€.
μ΄ν΄νκΈ° μ¬μ΄ μ€λ₯ λ©μμ§
μ¬μ©μκ° μ€λ₯λ₯Ό μ½κ² μ΄ν΄νκ³ ν΄κ²°ν μ μλλ‘ λμμ€λλ€. μ€λ₯ λ©μμ§μλ λ¬Έμ μ μμΈκ³Ό ν΄κ²° λ°©λ²μ λͺ ννκ² μ μν΄μΌ ν©λλ€. μλ₯Ό λ€μ΄, "μλ² μ€λ₯κ° λ°μνμ΅λλ€. μ μ νμ λ€μ μλν΄μ£ΌμΈμ."μ κ°μ΄ λ¬Έμ μν©μ λͺ ννκ² μλ €μ£Όκ³ , "μλ‘ κ³ μΉ¨" λ²νΌμ μ 곡νμ¬ μ¬μ©μκ° μ½κ² λ¬Έμ λ₯Ό ν΄κ²°ν μ μλλ‘ λμμ£Όλ κ²μ΄ μ’μ΅λλ€. λ²νΌμ ν΄λ¦ν λ λ°μνλ μκ°μ λ³νλ μ리λ μ¬μ©μμκ² μμ μ νλμ΄ μ±κ³΅μ μΌλ‘ λ°μλμλ€λ νμ μ μ€λλ€.
μΉ μ κ·Όμ±μ λ¨μν κΈ°μ μ μ€μλ₯Ό λμ΄μλ λ¬Έμ μ λλ€. μ΄λ λμμΈ μ² νμ κ·Όλ³Έμ μΈ μ νμ μꡬνλ©°, λͺ¨λ μ¬μ©μλ€μκ² λλ±ν κ²½νμ μ 곡νλ κ²μ λͺ©νλ‘ ν©λλ€.
λ°λΌμ μ°λ¦¬λ μ΄λ¬ν μμΉλ€μ μ€μν¨μΌλ‘μ¨ λ ν¬μ©μ μ΄κ³ μ κ·Ό κ°λ₯ν μΉ νκ²½μ μ‘°μ±νλ κ²μ΄ μλλΌ, λͺ¨λ μ¬μ©μμκ² λλ±ν κ°μΉμ κ²½νμ μ 곡νλ λμμΈμ μ§ν₯ν΄μΌ ν©λλ€. μ΄κ²μ΄ μ§μ ν μΉ μ κ·Όμ±μ μ€νμ΄μ, λμμΈμ λ³Έμ§μ μΈ λͺ©νμ΄κΈ°λ ν©λλ€.
'π‘ UXUI > UXUI' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[UXUI] λΉμ¦λμ€ λͺ¨λΈ μ©μ΄ μ λΆ μμ보기 : B2B, B2C, SaaS μΈ 9κ°μ§ (0) | 2023.12.28 |
---|---|
[UXUI] Google Lighthouseλ₯Ό UI/UX κ°μ μ νμ©ν΄λ³΄μ (1) | 2023.12.26 |
[UXUI] κ·Έλμ UXUIκ° λ¬΄μμΌκΉμ? (0) | 2023.12.22 |