πŸ’‘ 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 κ°œμ„ μ— ν™œμš©ν•΄λ³΄μž

    [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배수 μž‘μ—…μ„ ν•˜λŠ” 이유: ν”Όκ·Έλ§ˆμ™€ 포토샡

    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..