게슈탈트 심리학과 디자인 Gestalt × Visual Design

디자인과 수업을 들을 때 교수님들은 직관에 의지하여 컨펌을 하시는 경향이 강했고,

현업으로 근무할 때에도 대부분 클라이언트들은 개인의 취향과 좋아보이는 것?에 쉽게 설득이 되었다.

하지만 디자인을 커뮤니케이션의 관점에서 본다면

어떤 의도로 형태와 색을 사용하는지, 내가 전달할 메시지는 무엇인지를

먼저 규정하고 이를 표현해야 한다.

문자로 정의한 언어라는 도구를 사용하는 대신 시각요소를 사용한다면 심리학적 접근법이 꽤 유용할 것이다.

게슈탈트 심리학을 이해한다면 이런 시각 커뮤니케이션에 좀 더 도움이 될 것이라 정리해둔다.

우리는 요소를 하나씩 보지 않고
‘관계’를 하나의 형태로 봅니다.

게슈탈트(Gestalt)는 독일어로 ‘형태·전체적인 모습’을 뜻합니다. 디자인에서는 개별 점·선·색보다 요소 사이의 관계가 어떻게 하나의 의미로 지각되는가를 설명하는 데 중요합니다.

핵심 문장

“전체는 단순한 부분의 합 이상의 구조로 지각된다.”

01 근접성

HOW WE PERCEIVE

서로 가까이 있는 요소들은 실제로 연결되어 있지 않아도 같은 그룹에 속한다고 지각합니다.

DESIGN APPLICATION

정보 사이의 간격만으로도 카테고리와 위계를 만들 수 있습니다. 카드 UI, 폼, 메뉴처럼 정보 구조가 중요한 디자인에서 특히 강력합니다.

DESIGN CHECK

관련된 요소의 내부 간격은 좁게, 서로 다른 그룹 사이의 간격은 더 넓게 설정했는지 확인합니다.

02 유사성

HOW WE PERCEIVE

색, 크기, 모양, 방향 등 시각적 속성이 비슷한 요소를 서로 관련된 것으로 인식합니다.

DESIGN APPLICATION

동일 기능이나 카테고리에 일관된 색·형태를 부여하면 설명 없이도 정보 체계를 빠르게 이해시킬 수 있습니다.

DESIGN CHECK

같은 의미에는 같은 시각 언어를, 다른 의미에는 충분히 다른 시각 언어를 사용했는지 확인합니다.

03 연속성

HOW WE PERCEIVE

우리의 눈은 갑자기 끊기거나 방향을 바꾸기보다 자연스럽게 이어지는 경로를 따라가려는 경향이 있습니다.

DESIGN APPLICATION

레이아웃에 시각적 축과 흐름을 만들면 사용자의 시선을 다음 정보로 자연스럽게 이동시킬 수 있습니다.

DESIGN CHECK

사용자의 시선이 첫 요소에서 다음 요소로 자연스럽게 이동할 수 있는 시각적 경로가 있는지 봅니다.

04 폐쇄성

HOW WE PERCEIVE

형태의 일부가 비어 있거나 끊어져 있어도 충분한 단서가 있다면 뇌가 빈 부분을 채워 완전한 형태로 인식합니다.

DESIGN APPLICATION

모든 윤곽을 직접 그리지 않아도 형태를 전달할 수 있어 로고와 심벌을 간결하고 기억하기 쉽게 만드는 데 활용됩니다.

DESIGN CHECK

불필요한 선을 제거해도 사용자가 형태를 충분히 완성해 볼 수 있는지 시험해봅니다.

05 전경과 배경

HOW WE PERCEIVE

시각장은 주목하는 대상인 전경(Figure)과 그 뒤를 이루는 배경(Ground)으로 구분되어 지각됩니다.

DESIGN APPLICATION

명도·색·크기·여백 대비를 조절하면 무엇을 먼저 보게 할지 결정할 수 있습니다. 반대로 관계를 모호하게 하면 이중 이미지도 만들 수 있습니다.

DESIGN CHECK

가장 중요한 요소가 배경에 묻히지 않고 명확한 전경으로 읽히는지 확인합니다.

06 공동운명

HOW WE PERCEIVE

같은 방향이나 속도로 움직이는 요소들은 서로 관련된 하나의 집단으로 인식됩니다.

DESIGN APPLICATION

정적인 화면에서도 방향성을 통해 그룹을 표현할 수 있고, 모션 UI에서는 함께 움직이는 요소들의 관계를 즉각적으로 전달할 수 있습니다.

DESIGN CHECK

함께 움직이는 요소가 실제로 같은 기능·상태·맥락을 공유하는지 확인합니다.

좋은 디자인은 요소를 배치하는 것이 아니라, 요소 사이의 관계를 설계합니다.