π‘ UXUI
[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..