게슈탈트 원리 (Gestalt Principles)

개요·정의

게슈탈트 원리(Gestalt Principles)는 사람이 눈앞의 시각 요소를 하나씩 따로 보는 것이 아니라 위치와 형태, 색, 연결 관계를 바탕으로 서로 묶어 인식하는 방식을 설명한다.

20세기 초 게슈탈트 심리학에서 발전했으며 그래픽 디자인과 UI, 정보 디자인, 사인 시스템에서 널리 활용한다. 화면에 테두리를 직접 그리지 않아도 서로 가까이 놓인 요소는 같은 묶음처럼 보이고, 같은 색과 형태를 반복하면 서로 떨어져 있어도 관련된 정보로 받아들이기 쉽다.

대표적으로 근접성(Proximity), 유사성(Similarity), 연속성(Continuity), 폐쇄성(Closure), 전경과 배경(Figure-Ground), 공통 영역(Common Region) 등이 있다. 실제 디자인에서는 이 원리들이 각각 따로 작동하기보다 여러 가지가 함께 정보의 구조를 만든다.

특징

근접성은 가까이 놓인 요소를 같은 묶음으로 보는 경향이다. 제목과 설명 사이의 간격을 좁히고 다음 항목까지의 간격을 넓히면 별도의 선이 없어도 어디까지가 하나의 정보인지 구분할 수 있다.

유사성은 같은 색과 형태, 크기를 가진 요소를 서로 관련된 것으로 보는 경향이다. 같은 종류의 버튼과 같은 상태의 데이터에 동일한 형태를 반복하면 화면 곳곳에 떨어져 있어도 같은 역할이라는 점을 알아보기 쉽다.

공통 영역은 여러 요소를 하나의 배경이나 테두리 안에 넣었을 때 같은 그룹으로 받아들이는 원리다. 이메일 목록이나 대시보드에서 관련 기능을 하나의 패널 안에 묶는 방식이 대표적이다.

연속성은 선과 배열이 일정한 방향으로 이어질 때 그 흐름을 계속 따라가는 성질이다. 그래프와 타임라인, 단계별 진행 화면에서 정보의 순서를 보여줄 때 많이 활용한다.

전경과 배경은 무엇이 중심 대상이고 무엇이 뒤에 놓인 요소인지 구분하는 원리다. 팝업을 띄울 때 뒤쪽 화면을 어둡게 하거나 영상 옆에 별도의 정보 패널을 만드는 방식처럼 사용자가 어느 영역에 집중해야 하는지 나누는 데 쓰인다.

사례

스포티파이 2026 태블릿 UI

스포티파이는 2026년 태블릿 앱을 전면 개편하면서 스마트폰 화면을 단순히 크게 늘리는 방식을 버렸다. 넓어진 화면을 재생 영역과 탐색 영역으로 나눠 음악이나 영상을 계속 재생하면서 옆에서 라이브러리와 추천 콘텐츠를 찾아볼 수 있게 했다.

접었다 펼 수 있는 사이드바는 탐색 기능을 하나의 영역 안에 모으고, 현재 재생 중인 콘텐츠는 별도의 영역으로 유지한다. 서로 관련된 항목을 가까이 묶는 근접성과 하나의 패널 안에 모으는 공통 영역이 정보 구조를 만드는 방식이다.

세로와 가로 방향에 따라 화면을 단순 확대하지 않고 요소의 위치와 관계를 다시 배치한다는 점도 중요하다. 화면 크기가 달라져도 어떤 요소들이 한 묶음인지 유지하도록 설계한 최근 사례다.

노션 메일

2025년 출시된 노션 메일(Notion Mail)은 하나의 받은편지함을 모든 메일이 섞인 긴 목록으로만 보여주지 않는다. 사용자는 중요도와 주제, 발신자 같은 조건에 따라 커스텀 뷰를 만들고 서로 다른 메일 묶음을 별도로 볼 수 있다.

AI 자동 라벨을 사용하면 조건에 맞는 메일에 같은 표식을 붙여 비슷한 성격의 메시지를 구분할 수도 있다. 가까이 모인 메시지와 반복되는 라벨이 근접성과 유사성을 함께 만든다.

게슈탈트 원리가 단순한 로고나 포스터 구성에만 쓰이는 것이 아니라 많은 정보가 계속 쌓이는 업무 도구에서 정보를 묶고 빠르게 찾게 만드는 데도 적용될 수 있음을 보여준다.

유튜브 TV

유튜브는 2024년 TV 앱에서 영상을 보면서 댓글과 설명, 라이브 채팅 같은 정보를 함께 확인할 수 있도록 시청 화면을 다시 구성했다.

댓글을 열면 영상을 가리는 팝업을 화면 위에 덮는 대신 영상 영역을 줄이고 옆에 별도의 정보 패널을 만든다. 영상은 하나의 큰 영역으로 유지하고 댓글과 설명은 다른 영역 안에 묶어 두 기능을 동시에 볼 수 있게 했다.

영상과 부가 정보를 각각 공통 영역으로 나누면서도 크기 차이를 통해 영상이 계속 중심에 남도록 만든다. 같은 화면 안에서 전경과 배경, 공통 영역, 근접성을 이용해 서로 다른 종류의 정보를 구분한 사례다.

```