π‘ UXUI
[UX] μ¬μ©μ κ²½ν: 10κ°μ§ μ¬λ¦¬ν λ²μΉ
UX/UIμ 10κ°μ§ μ¬λ¦¬ν λ²μΉ(μ‘΄ μΌλΈλ‘ μ€ν€μ μ )λ₯Ό μ½κ³ μμ±νλ κ°μλ¬Έμ λλ€. κ° νλͺ©μλ κ°μΈμ μΈ λ ν μμ½μΌλ‘ μμ±λμ΄ μκΈ° λλ¬Έμ μμΈνκ³ νμ€ν μ 보λ₯Ό μν΄μλ μ± μ μ½μ΄λ³΄μκΈΈ κΆν©λλ€. μ¬μ©μ κ²½ν(UX) λμμΈμ λ¨μν "κΉλνκ³ μμ κ²"μ μΆκ΅¬νλ κ²μ΄ μλλΌ, μΈκ°μ νλκ³Ό μ¬λ¦¬λ₯Ό κΉμ΄ μκ² μ΄ν΄νκ³ , μ¬μ©μμ νμμ μ νΈμ κΈ°λ°ν μ νμ΄λ μλΉμ€λ₯Ό μ€κ³νκ³ λμμΈνλ κ²μ λλ€. μ΄λ₯Ό ν΅ν΄ μ¬μ©μμ λ§μ‘±λλ₯Ό λμ΄κ³ , λΈλλ μ΄λ―Έμ§λ₯Ό κ°νν μ μμ΅λλ€. μ‘΄ μΌλΈλ‘ μ€ν€μ "Laws of UX"μ λ°λ₯΄λ©΄, UX λμμΈμ 10κ°μ§ ν΅μ¬ μ¬λ¦¬ν λ²μΉμ κΈ°λ°μ λκ³ μμ΅λλ€. μ΄ λ²μΉλ€μ λ¨μν μ΄λ‘ μ κ°μ΄λλΌμΈμ λμ΄, μ€λ¬΄μμλ μ€μνκ² μ μ©λ©λλ€.1. μ μ΄μ½₯μ λ²μΉμ΅μν ν¨ν΄μ μ°Έκ³ ν..
[UXUI] μΉ μ κ·Όμ±: "λͺ¨λ μ¬μ©μ"μκ² λμΌν κ²½νμ μ£Όκ³ μλκ°
μ°λ¦¬κ° μ΄κ³ μλ μ 보ν μ¬νμμ, μΉμ λ¨μν νΈλ¦¬ν¨μ λμ΄ νμμ μΈ μ‘΄μ¬κ° λμμ΅λλ€.κ·Έλ¬λ μ΄λ¬ν λ³νλ λͺ¨λ μ΄λ€μκ² λλ±νκ² μ΄μ΅μ μ£Όμ§ μμ΅λλ€. μΉ μ κ·Όμ±μ λ°λ‘ μ΄λ¬ν λμ§νΈ λΆνλ±μ ν΄μνκΈ° μν λμμΈ μ² νμμ μΆλ°ν©λλ€. λ³Έ κΈμμλ UX/UI λμμ΄λκ° μΉ μ κ·Όμ±μ μ€ννκΈ° μν΄ κ³ λ €ν΄μΌ ν ν΅μ¬ μμΉλ€μ μμλ³΄κ³ μ ν©λλ€. λͺ λ£ν λ΄λΉκ²μ΄μ λ° λ μ΄μμ λͺ νν λ©λ΄ λΌλ²¨λ§ μΉμ¬μ΄νΈμ μ¬μ©μ κ²½νμμ κ°μ₯ μ€μν κ² μ€ νλλ μ 보μ μ κ·Όμ±μ λλ€. ν¨κ³Όμ μΈ λ΄λΉκ²μ΄μ κ³Ό λ μ΄μμμ μ¬μ©μκ° μνλ μ 보λ₯Ό μ§κ΄μ μΌλ‘ μ°Ύμ μ μκ² ν΄μ€λλ€. μλ₯Ό λ€μ΄, μΌνλͺ°μμ 'ν', 'μν', 'μ£Όλ¬Έ' λ±μ λ©λ΄λ μ¬μ©μμκ² λͺ νν κΈΈμ‘μ΄κ° λ©λλ€. νμ§λ§ μ΄λ¬ν λͺ νμ±μ΄ κ³Όμ° λͺ¨λ μ¬μ©μμκ² λ..
[UXUI] λΉμ¦λμ€ λͺ¨λΈ μ©μ΄ μ λΆ μμ보기 : B2B, B2C, SaaS μΈ 9κ°μ§
1. B2B (Business to Business) κΈ°μ κ° κ±°λ κΈ°μ κ° κ±°λλ₯Ό μλ―Ένλ μ©μ΄λ‘, κΈ°μ μ΄ λ€λ₯Έ κΈ°μ μκ² μνμ΄λ μλΉμ€λ₯Ό ν맀νλ λͺ¨λΈμ λλ€. B2B κ±°λλ μΌλ°μ μΌλ‘ λλ μ£Όλ¬Έ, μ₯κΈ° κ³μ½, λ§μΆ€ν μλΉμ€ λ±μ΄ νΉμ§μ λλ€. μμ - μΌμ±μ μ : μ μΈκ³μ λ€μν κΈ°μ λ€μ λ°λ체 κ³΅κΈ 2. B2C (Business to Consumer) κΈ°μ κ³Ό μλΉμ κ° κ±°λ B2C λͺ¨λΈμμλ κΈ°μ μ΄ μ΅μ’ μλΉμμκ² μνμ΄λ μλΉμ€λ₯Ό ν맀ν©λλ€. μ΄ κΈ°μ μ μ μ‘°μ μ²΄μΌ μλ μκ³ , μ맀μ 체λ μ ν΅μ μ²΄μΌ μλ μμ΅λλ€. B2C κΈ°μ μ μλΉμμκ² λλ¬νκΈ° μν΄ μ¬λ¬ μ ν΅ μ±λμ μ¬μ©ν μ μμ΅λλ€. μ΄λ μ¨λΌμΈ μ€ν μ΄, 물리μ 맀μ₯, μ 3μ μ맀μ 체 λ±μ ν¬ν¨ν μ μμ΅λλ€. μλΉμμ κ°μΈμ μΈ μꡬμ λ§μΆ ..
[UXUI] Google Lighthouseλ₯Ό UI/UX κ°μ μ νμ©ν΄λ³΄μ
Google Lighthouseλ? νΉμ μ΄λ° κ²½ν μμΌμ κ°μ? πβοΈ λΆλͺ λ΄κ° λ§λ μΉμ¬μ΄νΈμΈλ°, λκ° λ¬Έμ μΈμ§ λν΅ λͺ¨λ₯΄κ² λ€. πβοΈ μ¬μ©μλ€μ΄ μκΎΈ λ리λ€κ³ νλλ°, μ΄λλ₯Ό μλ΄μΌ ν μ§ λ§λ§νλ€. πβοΈ μ΄μ¬ν λ§λ€μλλ°, κ²μ μμ§μμ μ μ°Ύμμ£Όμ§ μλλ€. Lighthouseλ μΉμ¬μ΄νΈμ μ±λ₯, μ κ·Όμ±, SEOλ₯Ό ν λ°©μ ν΄κ²°ν΄ μ£Όλ λꡬμ λλ€. μΉ κ°λ°μμ UX/UI λμμ΄λλΌλ©΄ κΌ μμμΌ ν νμ λκ΅¬μ£ . νμ΄μ§ λ‘λ© μλλ λ¬Όλ‘ , μ¬μ©μ κ²½ν, μ κ·Όμ± λ¬Έμ κΉμ§ μ½ μ§μ΄λ λλ€. κ²λ€κ° κ²μ μμ§ μ΅μ ν(SEO)κΉμ§ λμμ€λ€λ, UI κ°μ μ λ§ μ½μ£ ? Lighthouse, μ΄λ»κ² μ¬μ©ν κΉ? 1. Chrome DevToolsλ₯Ό ν΅ν μ¬μ© Google Chrome λΈλΌμ°μ μμ μνλ μΉ νμ΄..
[UI] 2λ°°μ, 3λ°°μ μμ μ νλ μ΄μ : νΌκ·Έλ§μ ν¬ν μ΅
UI λμμΈμμ μ΄λ―Έμ§μ κ·Έλν½μ ν΄μλλ μ¬μ©μ κ²½νμ ν° μν₯μ λ―ΈμΉ©λλ€. ν¬ν μ΅κ³Ό νΌκ·Έλ§μ κ°μ λμμΈ λꡬλ₯Ό μ¬μ©ν λ, 2λ°°μ λλ 3λ°°μλ‘ μμ νκ±°λ exportν΄μΌ νλ€λ λ§μ μμ£Ό λ£κ² λλλ°, μμΌκΉμ? ν¬ν μ΅μμ 2λ°°μ, 3λ°°μλ‘ μμ ν΄μΌ νλ μ΄μ κ° λκΉμ? ν¬ν μ΅μμ 2λ°°μ λλ 3λ°°μ μμ μ νλ μ΄μ λ μ£Όλ‘ κ³ ν΄μλ λμ€νλ μ΄λ₯Ό μ§μνκΈ° μν΄μμ λλ€. λ ν°λ λμ€νλ μ΄μ κ°μ κ³ ν΄μλ λμ€νλ μ΄λ ν½μ λ°λκ° λμμ νμ€ ν΄μλμ μ΄λ―Έμ§κ° μκ³ νλ¦Ώνκ² λ³΄μΌ μ μμ΅λλ€. μ΄λ₯Ό λ°©μ§νκΈ° μν΄ μλ ν¬κΈ°λ³΄λ€ ν° μ΄λ―Έμ§λ₯Ό μ¬μ©νμ¬ κ³ ν΄μλμμλ μ λͺ νκ² λ³΄μ΄λλ‘ ν©λλ€. μλ₯Ό λ€μ΄, 100x100 ν½μ μ μ΄λ―Έμ§λ₯Ό 200x200 ν½μ (2λ°°μ) λλ 300x300 ν½μ (3λ°°μ)λ‘ μ μν..
[UI] λμμ΄λκ° μμμΌ ν νμ λ¨μ: SP, DP, DPI, PPI, PX, PT
λμμ΄λκ° μμμΌ ν νμ λ¨μ: SP, DP, DPI, PPI, PX, PT λμμΈμ λ¨μν μκ°μ μλ¦λ€μμ λμ΄μ μ¬μ©μ κ²½νκ³Ό λ°μ νκ² μ°κ²°λμ΄ μμ΅λλ€. ν¨κ³Όμ μΈ λμμΈμ μν΄μλ λ€μν λ¨μμ κ°λ μ μ νν μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. μ΄ κΈμμλ SP, DP, DPI, PPI, PX, PTμ κ°μ ν΅μ¬ λ¨μλ€μ λν΄ μμλ³΄κ² μ΅λλ€. 1. SP (Scale Independent Pixels) μλλ‘μ΄λ κ°λ°μμ μ¬μ©λλ κΈκΌ΄ ν¬κΈ° λ¨μμ λλ€. μ¬μ©μμ κΈ°κΈ° μ€μ μ λ°λΌ κΈκΌ΄ ν¬κΈ°κ° μ‘°μ λμ΄, μ κ·Όμ±κ³Ό μ¬μ©μ±μ λμ λλ€. SPλ νΉν μλλ‘μ΄λμ μ κ·Όμ± κΈ°λ₯κ³Ό λ°μ νκ² μ°κ΄λμ΄ μμ΅λλ€. ex) μ¬μ©μμ μλ ₯ λ¬Έμ λ μ νΈμ λ°λΌ κΈκΌ΄ ν¬κΈ°λ₯Ό μ‘°μ ν λ μ μ©ν©λλ€. 2. DP (Density-ind..