지그재그 앱을 통한 UX 디자인 원칙 정리
① 게슈탈트 원칙 (Gestalt Principles)
1. 공통성의 원리 (Common Region)
동일한 배경, 테두리, 컬러로 그룹을 형성하면 하나의 덩어리로 인식됨.
✅ 지그재그 앱 적용 사례
- 상품 카드 디자인: 각 상품은 테두리가 있는 카드 형태로 구분 → 해당 영역이 하나의 그룹임을 직관적으로 알 수 있음.
- 필터 영역 강조: 필터 옵션(카테고리, 브랜드 선택 등)은 테두리 박스로 감싸져 있어 그룹화됨.
📌 효과: 화면 구성의 일관성 증가, 사용자의 정보 탐색 효율 향상.
2. 연속성의 원칙 (Continuity Principle)
요소들이 정렬된 패턴을 따를 때, 사용자는 시각적으로 이를 자연스럽게 따라감.
✅ 지그재그 앱 적용 사례
- 상품 리스트 정렬: 수평 스크롤 가능한 추천 상품은 가로로 정렬되어 있어 사용자가 자연스럽게 스와이프하도록 유도.
- 카테고리/필터 메뉴 배열: 메뉴가 한 줄로 정렬되어 있어 좌우 탐색이 용이.
📌 효과: 사용자 흐름을 자연스럽게 유도, 탐색 효율성 증가.
3. 폐쇄성의 원칙 (Closure Principle)
불완전한 형태라도 뇌가 자동으로 채워 하나의 완전한 이미지로 인식함.
✅ 지그재그 앱 적용 사례
- 상품 카드 디자인: 상품 썸네일과 상품 정보(이름, 가격, 리뷰)가 하나의 카드 안에 배치되며, 테두리가 명확하지 않아도 사용자는 하나의 덩어리로 인식.
- 아이콘과 버튼 디자인: ‘찜(♥)’ 아이콘이 단순한 윤곽선(Outline) 형태일 경우에도, 사용자는 이를 전체적인 하트 형태로 인식하고 기능을 예측.
📌 효과: 시각적 피로 감소, 인지적 효율 증가.
4. 근접성의 원칙 (Proximity Principle)
가까이 배치된 요소들은 같은 그룹으로 인식됨.
✅ 지그재그 앱 적용 사례
- 상품 정보 배치: 상품 이미지 바로 아래에 상품명, 가격, 리뷰 개수가 함께 배치 → 사용자가 이 정보들을 하나의 단위로 인식.
- 찜(♥) 아이콘과 상품 카드의 근접성: 각 상품의 ‘찜’ 아이콘이 이미지 안쪽 상단에 배치 → 해당 상품과 연관된 기능임을 직관적으로 이해 가능.
📌 효과: 정보를 직관적으로 그룹화, 사용자의 시선 이동 최소화.
5. 유사성의 원칙 (Similarity Principle)
형태, 색상, 크기가 비슷한 요소들은 같은 그룹으로 인식됨.
✅ 지그재그 앱 적용 사례
- 아이콘 통일성: ‘찜(♥)’, ‘장바구니(🛍)’, ‘검색(🔍)’ 등 주요 아이콘은 동일한 스타일(라인 디자인)로 구성 → 같은 기능으로 인식됨.
- 상품 목록의 그리드 형태: 동일한 크기의 상품 이미지가 반복적으로 배치되어 있어 리스트를 일관되게 인식.
📌 효과: 사용자 경험의 일관성 유지, UI 학습 비용 절감.
② 힉의 법칙 (Hick’s Law)
선택지가 많을수록 의사결정 시간이 증가함.
✅ 지그재그 앱 적용 사례
- 홈 화면에서 큐레이션된 콘텐츠 제공 (ex. 추천 상품, 인기 랭킹) → 첫 화면에서 선택 부담 감소
- 온보딩 과정에서 개인화된 추천 제공 → 사용자의 관심사를 미리 필터링
- 필터 검색 기능 제공 → 방대한 상품 중 원하는 조건만 추려볼 수 있음
📌 효과: 사용자의 결정 부담 감소, 빠른 쇼핑 경험 제공.
③ 피츠의 법칙 (Fitts’ Law)
클릭/터치 대상이 클수록, 손가락이 닿기 쉬운 곳에 있을수록 빠르게 선택 가능.
✅ 지그재그 앱 적용 사례
- 상품 이미지 크기 크게 배치 → 사용자가 탭하기 쉽게 유도
- 찜(♥), 즐겨찾기(★) 아이콘을 넉넉한 크기로 배치 → 오작동 방지
- 하단 네비게이션 바(홈, 카테고리, 찜, 마이페이지) 위치 최적화 → 엄지손가락이 닿기 쉬운 곳에 배치
📌 효과: 터치 편의성 증가, 오작동 방지, 빠른 인터랙션 가능.
④ 제이콥의 법칙 (Jakob’s Law)
사용자는 기존에 익숙한 UI 패턴을 기대함.
✅ 지그재그 앱 적용 사례
- 타 쇼핑몰과 유사한 UI 구조 (하단 바텀 내비게이션, 상품 리스트 디자인) → 별도 학습 없이 쉽게 사용 가능
- 표준화된 아이콘 사용 (돋보기=검색, 하트=찜, 장바구니=구매) → 직관적으로 기능 이해 가능
📌 효과: 기존 이커머스 경험을 살려 빠른 적응, UX 학습 부담 감소.
⑤ 밀러의 법칙 (Miller’s Law)
인간의 단기 기억 용량은 7±2개 항목 정도이므로, 정보를 적절히 묶어서 제공해야 함.
✅ 지그재그 앱 적용 사례
- 메인 메뉴 5개 이하로 구성 (홈, 스토어, 카테고리, 찜, 마이페이지) → 정보 과부하 방지
- 상품 검색 결과를 단계적으로 필터링 가능 → 정보를 한 번에 많이 노출하지 않음
- 리뷰 요약 제공 (ex. "리뷰 한눈에 보기") → 사용자가 방대한 정보 속에서 핵심만 파악 가능
📌 효과: 인지 부담 감소, 정보 처리 속도 향상, 편리한 쇼핑 경험 제공.
실습 과제 : '지그재그' 앱
마무리
오늘 수업을 통해 실질적인 UX 이론을 깊이 있게 이해할 수 있었으며, 실제 사례를 분석하며 이러한 원리가 어떻게 적용되는지를 차근차근 살펴볼 수 있어 매우 뜻깊은 시간이었습니다. 이론적 개념을 실무 사례와 연결 지어 학습하면서 UX 디자인에 대한 인사이트를 한층 더 넓힐 수 있었고, 이를 통해 더욱 체계적인 시각을 가질 수 있을 것이라 기대됩니다.
앞으로 다양한 경험을 쌓고 시야를 더욱 확장한다면, 명확한 기준을 바탕으로 효과적인 디자인을 제안할 수 있는 전문가로 성장할 수 있을 것이라 생각합니다. 아직 배울 것이 많고 갈 길이 멀지만, 꾸준히 노력하며 발전해 나가겠습니다.