DAY 02 ㅣ UI와 UX

UX 디자인 이론과 대표적인 앱 사례 분석

1. 게슈탈트 원칙 (Gestalt Principles)

📌 이론 개요
게슈탈트 원칙은 인간이 시각적 요소를 어떻게 인식하고 그룹화하는지에 대한 심리학적 원칙으로, UX/UI 디자인에서 중요한 역할을 합니다.

📌 주요 원칙과 대표 앱 사례

✅ (1) 근접성의 원칙 (Proximity Principle) – 유튜브 (YouTube)

• 근접한 요소들은 서로 관련이 있는 것으로 인식됨.
• 유튜브는 추천 동영상이 한 그룹으로 묶여 있어 사용자가 직관적으로 연관된 콘텐츠를 찾을 수 있음.

✅ (2) 유사성의 원칙 (Similarity Principle) – 인스타그램 (Instagram)

• 색상, 모양, 크기가 비슷한 요소는 하나의 그룹으로 인식됨.
• 인스타그램의 피드는 이미지와 텍스트 배치가 동일한 패턴으로 구성되어 있어 사용자가 빠르게 적응할 수 있음.

✅ (3) 연속성의 원칙 (Continuity Principle) – 넷플릭스 (Netflix)

• 선이나 패턴이 연속적으로 연결될 때 같은 그룹으로 인식됨.
• 넷플릭스의 가로 스크롤 방식 추천 섹션은 콘텐츠가 자연스럽게 이어지는 듯한 느낌을 줌.

✅ (4) 폐쇄성의 원칙 (Closure Principle) – 구글 로고 (Google)

• 불완전한 형태라도 사용자는 완전한 것으로 인식.
• 구글 로고는 몇 가지 색상의 도형만으로 구성되어 있지만, 사용자는 전체적인 형태를 구글 로고로 인식함.

✅ (5) 공통성의 원칙 (Common Fate Principle) – 카카오톡 (KakaoTalk)

• 같은 방향으로 움직이는 요소들은 하나의 그룹으로 인식됨.
• 카카오톡의 채팅 목록에서 새로운 메시지가 있는 대화창이 같은 위치(상단)로 이동하여 시각적으로 강조됨.

---

2. 힉의 법칙 (Hick’s Law)

📌 이론 개요
선택지가 많을수록 사용자의 의사 결정 시간이 증가하므로 필요한 정보만 제공해 인지 부담을 줄이는 것이 중요함.

📌 대표 앱 사례 – 애플 (Apple)

• 아이폰 설정 메뉴는 필수 기능만 남기고 복잡한 설정을 ‘더보기’ 옵션으로 숨김.
• 맥북의 트랙패드는 버튼 수를 최소화하고 단순한 제스처 조작으로 사용성을 높임.

🔹 UX 디자인 적용 포인트
✅ 불필요한 옵션을 제거하여 사용자 부담 최소화
✅ 단계적으로 옵션을 제공하여 탐색 시간을 단축

---

3. 피츠의 법칙 (Fitts’ Law)

📌 이론 개요
화면에서 목표 요소(버튼, 링크 등)가 클수록, 그리고 가까울수록 더 쉽게 클릭할 수 있음.

📌 대표 앱 사례 – 페이스북 (Facebook)

• 좋아요(👍), 공유(🔄), 댓글(💬) 버튼이 크고 손가락이 닿기 쉬운 하단에 위치.
• 모바일에서는 하단 내비게이션 바를 크게 배치하여 한 손으로 쉽게 조작 가능.

🔹 UX 디자인 적용 포인트
✅ 주요 버튼은 크고 손이 닿기 쉬운 위치에 배치
✅ 터치 타겟 크기를 충분히 확보하여 실수 방지

---

4. 제이콥의 법칙 (Jakob’s Law)

📌 이론 개요
사용자는 이미 익숙한 디자인 패턴을 기대하므로, 기존의 웹사이트나 앱의 UX/UI와 비슷하게 설계해야 사용성이 높아짐.

📌 대표 앱 사례 – 아마존 (Amazon)

• 장바구니 아이콘, 검색 창 상단 배치, 상품 상세 페이지 구성 등 대부분의 쇼핑몰과 동일한 구조를 사용.
• 사용자는 별도의 학습 없이도 직관적으로 탐색할 수 있음.

🔹 UX 디자인 적용 포인트
✅ 기존에 익숙한 UI/UX 패턴을 유지
✅ 불필요한 실험적 디자인을 줄이고 직관적인 사용성을 우선

---

5. 밀러의 법칙 (Miller’s Law)

📌 이론 개요
사람의 단기 기억 용량은 7 ± 2개 요소 정도이므로, 한 번에 너무 많은 정보를 제공하면 사용자가 쉽게 피로감을 느낌.

📌 대표 앱 사례 – 넷플릭스 (Netflix)

• 카테고리별 최대 7개의 콘텐츠를 한 번에 보여줌.
• ‘더 보기’ 옵션을 사용해 사용자가 필요할 때만 추가 정보 탐색 가능.

🔹 UX 디자인 적용 포인트
✅ 한 화면에 제공하는 정보 개수를 최소화
✅ 중요 정보만 먼저 보여주고, 추가 정보는 점진적으로 노출