# [[UX Design]] ## πŸ“Œ Brief Summary UX λ””μžμΈ(μ‚¬μš©μž κ²½ν—˜ λ””μžμΈ)은 λ‹¨μˆœν•œ μ‹œκ°μ  심미성을 λ„˜μ–΄ μ‚¬μš©μžμ˜ 행동과 심리λ₯Ό μ΄ν•΄ν•˜κ³ , 직관적이고 λΉ λ₯΄λ©° 접근성이 높은 μ›Ή κ²½ν—˜μ„ κ΅¬μΆ•ν•˜λŠ” μ „λž΅μ  과정이닀 [1-3]. 2025λ…„μ˜ ν˜„λŒ€μ  UX λ””μžμΈμ€ 데이터와 연ꡬλ₯Ό 기반으둜 인지적 κ³ΌλΆ€ν•˜λ₯Ό 쀄이고, μ„±λŠ₯ μ΅œμ ν™”μ™€ κ²°ν•©ν•˜μ—¬ λΉ„μ¦ˆλ‹ˆμŠ€ μ „ν™˜μœ¨(Conversion)을 κ·ΉλŒ€ν™”ν•˜λŠ” 데 쀑점을 λ‘”λ‹€ [4-6]. ## πŸ“– Core Content * **μ‚¬μš©μž 쀑심 섀계 (User-Centered Design):** UX λ””μžμΈμ€ μ§κ΄€μ΄λ‚˜ λ‹¨μˆœν•œ 미적 감각에 μ˜μ‘΄ν•˜μ§€ μ•Šκ³  연ꡬ와 ν…ŒμŠ€νŠΈλ₯Ό 톡해 μ‚¬μš©μžμ˜ μš”κ΅¬μ™€ 행동, λͺ©ν‘œλ₯Ό μ΄ν•΄ν•˜λŠ” κ²ƒμ—μ„œ μΆœλ°œν•œλ‹€ [7]. μ‚¬μš©μž 페λ₯΄μ†Œλ‚˜λ₯Ό κ°œλ°œν•˜κ³ , λŒ€ν™”ν˜• ν”„λ‘œν† νƒ€μž…μ„ ν…ŒμŠ€νŠΈν•˜λ©°, νžˆνŠΈλ§΅μ΄λ‚˜ μ„Έμ…˜ 기둝과 같은 λ„κ΅¬λ‘œ μ‹€μ œ μ‚¬μš©μž 행동을 λΆ„μ„ν•˜μ—¬ λ””μžμΈμ„ μ§€μ†μ μœΌλ‘œ κ°œμ„ ν•΄μ•Ό ν•œλ‹€ [8]. * **인지적 λͺ…ν™•μ„±κ³Ό 직관적인 λ‚΄λΉ„κ²Œμ΄μ…˜:** μ‚¬μš©μžκ°€ κ³ λ―Όν•˜κ²Œ λ§Œλ“€μ§€ μ•ŠλŠ” 것이 ν˜„λŒ€ UX의 핡심이닀 [4, 9]. 'μ •λ³΄λ‘œ 꽉 μ°¬ κ°€λ°©' λͺ¨λΈμ—μ„œ λ²—μ–΄λ‚˜, μ—¬λ°±κ³Ό λͺ…ν™•ν•œ 헀딩을 ν™œμš©ν•œ 'λΉŒλ³΄λ“œ' λͺ¨λΈλ‘œ μ „ν™˜ν•˜μ—¬ 인지적 λͺ…확성을 μ œκ³΅ν•΄μ•Ό ν•œλ‹€ [10]. μ΅œλŒ€ 5~7개의 메인 메뉴 ν•­λͺ© μ œν•œ, λͺ…ν™•ν•œ μš©μ–΄ μ‚¬μš©, 그리고 μ€‘μš” 정보에 3번 μ΄λ‚΄μ˜ 클릭으둜 도달할 수 있게 ν•˜λŠ” '3번 클릭 κ·œμΉ™(Three-Click Rule)'을 톡해 논리적이고 예츑 κ°€λŠ₯ν•œ λ‚΄λΉ„κ²Œμ΄μ…˜μ„ ꡬ좕해야 ν•œλ‹€ [11]. * **μ‹œκ°μ  계측 ꡬ쑰 및 μ „ν™˜ 쀑심 λ―Έλ‹ˆλ©€λ¦¬μ¦˜:** μš”μ†Œμ˜ 크기, 색상, λŒ€λΉ„, μ—¬λ°±(Whitespace)을 μ „λž΅μ μœΌλ‘œ λ°°μΉ˜ν•˜μ—¬ μ‚¬μš©μžμ˜ μ‹œμ„ μ„ κ°€μž₯ μ€‘μš”ν•œ μ •λ³΄λ‚˜ μ½œνˆ¬μ•‘μ…˜(CTA)으둜 μžμ—°μŠ€λŸ½κ²Œ μœ λ„ν•΄μ•Ό ν•œλ‹€ [12-14]. 주의λ₯Ό λΆ„μ‚°μ‹œν‚€λŠ” μš”μ†Œλ₯Ό μ œκ±°ν•˜κ³  단일 CTA에 μ§‘μ€‘ν•˜λŠ” λ―Έλ‹ˆλ©€λ¦¬μ¦˜ λ””μžμΈμ€ μ „ν™˜μœ¨μ„ 크게 ν–₯μƒμ‹œν‚¨λ‹€ [15-17]. * **λͺ¨λ°”일 퍼슀트 및 λ°˜μ‘ν˜• λ ˆμ΄μ•„μ›ƒ:** μ „ 세계 μ›Ή νŠΈλž˜ν”½μ˜ 과반수(μ•½ 58%~60.4%)κ°€ λͺ¨λ°”μΌμ—μ„œ λ°œμƒν•˜λ―€λ‘œ, λͺ¨λ°”일 화면을 μ΅œμš°μ„ μœΌλ‘œ μ„€κ³„ν•˜μ—¬ κ°€μž₯ μ€‘μš”ν•œ μ½˜ν…μΈ μ˜ μš°μ„ μˆœμœ„λ₯Ό μ •ν•΄μ•Ό ν•œλ‹€ [18, 19]. λ‹¨μˆœν•œ 크기 μΆ•μ†Œκ°€ μ•„λ‹Œ ν„°μΉ˜ νƒ€κ²Ÿ 크기 μ΅œμ ν™”, 짧은 폼, μŠ€μ™€μ΄ν”„ λ“± λͺ¨λ°”일 특유의 μƒν˜Έμž‘μš©μ„ κ³ λ €ν•œ μœ λ™μ μΈ λ ˆμ΄μ•„μ›ƒμ΄ ν•„μˆ˜μ μ΄λ‹€ [20-23]. * **마이크둜 μΈν„°λž™μ…˜κ³Ό AI 기반 κ°œμΈν™”:** λ―Έμ„Έν•œ μ• λ‹ˆλ©”μ΄μ…˜, λ²„νŠΌ 색상 λ³€ν™”, μ§„ν–‰ μƒνƒœ ν‘œμ‹œμ€„ λ“± μž‘μ€ μ‹œκ°μ  ν”Όλ“œλ°±(마이크둜 μΈν„°λž™μ…˜)은 μ‚¬μš©μžμ˜ 행동을 μ•ˆλ‚΄ν•˜κ³  λΆˆν™•μ‹€μ„±μ„ 쀄여 μ „λ°˜μ μΈ 참여도λ₯Ό 높인닀 [24-27]. λ˜ν•œ, AIλ₯Ό ν™œμš©ν•΄ μ‚¬μš©μžμ˜ 행동, μœ„μΉ˜ 등에 따라 μΈν„°νŽ˜μ΄μŠ€μ™€ μ½˜ν…μΈ λ₯Ό λ™μ μœΌλ‘œ λ§žμΆ€ν™”ν•˜λŠ” μ μ‘ν˜•(Adaptive) UXκ°€ μƒˆλ‘œμš΄ ν‘œμ€€μœΌλ‘œ 자리 작고 μžˆλ‹€ [2, 28]. * **μ ‘κ·Όμ„±(Accessibility) 및 포용적 λ””μžμΈ:** μž₯μ• λ₯Ό κ°€μ§„ μ‚¬μš©μžλ₯Ό 포함해 λͺ¨λ“  μ‚¬λžŒμ΄ μ‚¬μš©ν•  수 μžˆλ„λ‘ WCAG 2.1 AA 및 2.2 ν‘œμ€€μ„ μ€€μˆ˜ν•΄μ•Ό ν•œλ‹€ [29, 30]. μΆ©λΆ„ν•œ 색상 λŒ€λΉ„(예: μ΅œμ†Œ 4.5:1), ν‚€λ³΄λ“œ λ‚΄λΉ„κ²Œμ΄μ…˜ 지원, λͺ…ν™•ν•œ 포컀슀 ν‘œμ‹œ, 슀크린 리더λ₯Ό μœ„ν•œ ARIA 라벨 및 λŒ€μ²΄ ν…μŠ€νŠΈ(Alt text) 제곡 등은 λͺ¨λ‘λ₯Ό μœ„ν•œ λ™λ“±ν•œ μ›Ή κ²½ν—˜μ„ μ œκ³΅ν•˜λŠ” ν•„μˆ˜μ  μš”μ†Œμ΄λ‹€ [31-33]. * **UX와 μ„±λŠ₯의 κ²°ν•© (Core Web Vitals):** λ‘œλ”© 속도와 응닡성은 μ‚¬μš©μžμ˜ λ§Œμ‘±λ„λ₯Ό κ²°μ •ν•˜λŠ” 핡심 UX μ§€ν‘œμ΄λ‹€ [34, 35]. μ½”μ–΄ μ›Ή λ°”μ΄νƒˆ(Core Web Vitals)의 μ£Όμš” μ§€ν‘œμΈ λ Œλ”λ§ 속도(LCP), μƒν˜Έμž‘μš© μ§€μ—° μ‹œκ°„(INP), μ‹œκ°μ  μ•ˆμ •μ„±(CLS)을 μ΅œμ ν™”ν•˜μ—¬ λœμ»Ήκ±°λ¦Όμ΄λ‚˜ λ ˆμ΄μ•„μ›ƒ 이동이 μ—†λŠ” λ§€λ„λŸ¬μš΄ μ‚¬μš©μž κ²½ν—˜μ„ 보μž₯ν•΄μ•Ό ν•œλ‹€ [36-38]. ## πŸ”— Knowledge Connections - **Related Topics:** [[User-Centered Design]], [[Core Web Vitals]], [[Mobile-First Design]], [[Accessibility (WCAG)]], [[Visual Hierarchy]], [[Micro-interactions]] - **Projects/Contexts:** [[Landing Page Optimization]], [[Website Redesign Case Studies]], [[Conversion Rate Optimization (CRO)]] - **Contradictions/Notes:** 과거의 μ›Ή λ””μžμΈμ€ μ’…μ’… μ‹¬λ―Έμ„±μ—λ§Œ μ§‘μ€‘ν•˜μ—¬ 무거운 κΈ°λŠ₯μ΄λ‚˜ ν™”λ €ν•œ μ• λ‹ˆλ©”μ΄μ…˜ 등을 μ„ ν˜Έν–ˆμœΌλ‚˜, 2025λ…„μ˜ ν˜„λŒ€μ  UX λ””μžμΈμ€ μ΄λŸ¬ν•œ μš”μ†Œλ“€μ΄ μ„±λŠ₯ μ €ν•˜ 및 인지적 κ³ΌλΆ€ν•˜λ₯Ό μ΄ˆλž˜ν•œλ‹€κ³  보며, κ·Έ λŒ€μ‹  μ² μ €νžˆ μ „ν™˜(Conversion)κ³Ό 속도, λͺ…확성을 μš°μ„ μ‹œν•˜λŠ” λ―Έλ‹ˆλ©€λ¦¬μ¦˜μ„ ꢌμž₯ν•œλ‹€ [16, 39]. --- *Last updated: 2026-04-26*