통합 요약노트
Ch.1 게슈탈트 원리
인간이 형태를 인식하는 시각 법칙 — 근접성, 유사성, 폐합, 전경/배경
이 챕터의 내용
게슈탈트 6가지 원칙
100년 전 독일 심리학자들이 밝혀낸 게슈탈트 원리 — UI 디자인의 가장 기본적인 문법입니다.
같은 정보, 다른 배치 — 왜 느낌이 완전히 달라질까?
인간의 뇌는 시각 정보를 받아들일 때 자동으로 패턴을 찾습니다. 가까운 것은 묶고, 비슷한 것은 같은 그룹으로 인식하죠. 이 자동 규칙을 체계화한 것이 게슈탈트 심리학입니다.
게슈탈트(Gestalt) = '전체 형태' — 부분의 합 이상을 본다
- 근접성: 가까운 것은 한 그룹
- 유사성: 닮은 것은 한 그룹
- 연속성: 시선은 흐름을 따른다
- 폐합: 빈 곳을 채워 인식한다
- 전경/배경: 주인공과 무대를 분리
- 프래그난츠: 단순한 형태를 선호
실제 앱에서 게슈탈트 찾기
좋은 UI는 게슈탈트를 의식적으로 활용하고, 나쁜 UI는 무의식적으로 위반합니다.
좋은 UI는 게슈탈트를 의식적으로 활용합니다
Spotify 홈 화면: 플레이리스트 카드들이 같은 크기와 간격으로 배열(유사성 + 근접성). 카테고리 간 넓은 간격이 섹션을 구분(근접성).
Airbnb 검색 결과: 사진-제목-가격이 하나의 카드로 밀착 배치(근접성). 지도 위 핀과 목록이 동시에 하이라이트(공동 운명).
프래그난츠 법칙과 단순성
답은 숨기는 것이 아니라 구조화하는 것입니다. 게슈탈트 원칙이 그 방법을 알려줍니다.
정보가 적은 게 아니라 구조가 명확한 것이 단순함이다
프래그난츠 법칙에 따르면, 인간의 뇌는 가능한 한 단순하고 규칙적인 해석을 선호합니다. 이는 UI 설계에서 두 가지를 의미합니다:
6가지 원칙이 함께 작동할 때 비로소 읽히는 UI가 됩니다
- 게슈탈트 6원칙: 근접성, 유사성, 연속성, 폐합, 전경/배경, 공동 운명
- 상위 법칙: 프래그난츠 — 뇌는 단순한 해석을 선호
- 좋은 UI = 게슈탈트를 의식적으로 활용한 UI
- 다음 주제: 8px 그리드 시스템 → 근접성을 수치로 통제하는 방법
핵심 용어 모음
디자인 씽킹
사용자 공감으로 시작하는 문제 해결 프로세스
공감
사용자의 입장에서 문제를 이해하고 느끼는 것
사용자 리서치
사용자의 행동·니즈·동기를 조사하는 것
페르소나
실제 사용자 데이터를 기반으로 만든 가상 인물
와이어프레임
UI의 구조와 레이아웃을 보여주는 저해상도 설계도
프로토타입
실제 작동하는 것처럼 만든 시제품
규칙 1
요소의 수를 줄이는 것보다 **패턴을 일관되게** 유지하는 것이 중요하다
규칙 2
예외가 많아지면 뇌의 패턴 인식이 실패하여 '복잡하다'고 느낀다
비교 정리
| 항목 | 게슈탈트 준수 | 게슈탈트 위반 |
|---|---|---|
| 간격 | 관련 요소 8px, 섹션 간 32px | 모든 간격이 동일하거나 랜덤 |
| 스타일 | 같은 역할 = 같은 색·크기 | 버튼마다 다른 스타일 |
| 구분 | 카드 그림자로 전경/배경 분리 | 모든 요소가 같은 평면 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기