topic★★★★★난이도 · 약 15분
게슈탈트 6가지 원칙
근접성 · 유사성 · 연속성 · 폐합 · 공동운명 · 전경/배경 — 시각 그룹핑의 6대 법칙.
#근접성#유사성#연속성#폐합#공동운명#전경/배경
왜 배우는가
디자이너가 요소를 배치할 때 무의식적으로 따르는 원칙이 바로 게슈탈트다. 이 6가지를 의식적으로 적용하면 정보 구조가 명확한 UI를 만들 수 있다.
게슈탈트(Gestalt)는 독일어로 '형태' 또는 '전체'를 뜻한다. 20세기 초 독일 심리학자들이 발견한 시각 인지 법칙으로, 인간의 뇌는 개별 요소를 따로 보지 않고 패턴과 그룹으로 인식한다는 것이 핵심이다. UI 디자인에서 이 원리를 활용하면 레이블이나 선 없이도 정보의 관계를 시각적으로 전달할 수 있다.
| 원칙 | 정의 | UI 적용 예시 |
|---|---|---|
| 근접성 (Proximity) | 가까이 있는 요소들을 하나의 그룹으로 인식한다 | 폼 필드와 라벨 사이 간격을 좁히고, 그룹 간 간격을 넓힌다 |
| 유사성 (Similarity) | 색상·형태·크기가 비슷한 요소를 같은 그룹으로 본다 | 같은 카테고리의 카드에 동일한 아이콘 색상을 적용한다 |
| 연속성 (Continuity) | 요소가 선이나 곡선을 따라 배열되면 하나의 흐름으로 인식한다 | 스텝 인디케이터를 직선 위에 나열하여 진행 흐름을 표현한다 |
| 폐합 (Closure) | 불완전한 형태도 뇌가 빈 부분을 채워 완전한 형태로 인식한다 | 로고에서 일부를 생략해도 전체 형태를 인지할 수 있다 |
| 공동운명 (Common Fate) | 같은 방향·속도로 움직이는 요소를 한 그룹으로 본다 | 드래그 시 선택된 파일들이 함께 이동하며 그룹임을 알린다 |
| 전경/배경 (Figure/Ground) | 시각은 전경(주 대상)과 배경을 자동으로 분리한다 | 모달 뒤에 어두운 오버레이를 깔아 전경(모달)에 집중시킨다 |
근접성이 가장 강력하다. 색상이나 형태가 달라도, 가까이 있으면 같은 그룹으로 인식된다. 반대로 같은 색이어도 멀리 떨어져 있으면 별개로 본다. UI에서 간격(spacing)이 시각적 그룹핑의 1순위 도구인 이유다.
실전 체크리스트 — ① 관련 요소는 가까이, 무관한 요소는 멀리 (근접성) ② 같은 역할의 요소는 같은 스타일 (유사성) ③ 진행 흐름은 직선·곡선 배치 (연속성) ④ 아이콘은 단순화해도 인식 가능하게 (폐합) ⑤ 애니메이션은 그룹 단위로 (공동운명) ⑥ 중요한 것은 전경으로 분리 (전경/배경)