점 여섯 개가 두 개씩 붙어 있으면 우리는 점 여섯 개가 아니라 짝 세 쌍을 봅니다. 군데군데 끊긴 선으로 그린 원도 망설임 없이 원이라고 읽습니다. 눈은 낱낱의 조각보다 먼저 전체의 모양을 붙잡는데, 이런 지각의 규칙을 정리한 것이 바로 ‘게슈탈트 원리(Gestalt Principles of Perception)’입니다.

게슈탈트 원리란 쉽게 말해 ‘사람이 흩어진 시각 요소를 하나하나 따로 보지 않고, 가까움·닮음·이어짐 같은 단서에 따라 묶어서 하나의 덩어리로 인식하는 경향’을 의미합니다. 게슈탈트(Gestalt)는 ‘형태’나 ‘짜임’을 뜻하는 독일어로, 오늘날 화면과 지면을 정리하는 디자인의 기본 문법이 되었습니다.

본 자료에서는 게슈탈트 원리가 태어난 배경과 대표적인 원리부터 로고와 화면 속 활용 사례, 그리고 디자이너가 주의할 점까지 차례로 살펴보겠습니다.

눈이 먼저 정리하는 화면의 질서

게슈탈트 원리란 무엇인가?

게슈탈트 심리학은 20세기 초 독일에서 막스 베르트하이머(Max Wertheimer), 쿠르트 코프카(Kurt Koffka), 볼프강 쾰러(Wolfgang Köhler)가 세웠습니다. 출발점은 1912년 베르트하이머가 발표한 실험이었습니다. 번갈아 켜지는 두 줄기 빛을 보던 사람들은 실제로 움직이는 물체가 없는데도 빛이 한쪽에서 다른 쪽으로 옮겨 가는 것처럼 느꼈습니다. 그는 이 현상을 파이 현상(Phi Phenomenon)이라 불렀습니다.

당시 심리학의 주류는 경험을 가장 작은 감각 단위로 쪼개어 분석하려 했습니다. 게슈탈트 학자들은 반대로 전체가 먼저 지각되고, 부분의 의미는 전체 속에서 정해진다고 주장했습니다. 코프카는 이를 두고 “전체는 부분의 합과는 다른 무엇”이라고 표현했습니다.

1923년 베르트하이머는 사람이 지각 요소를 묶는 법칙을 논문으로 정리했고, 이것이 오늘날 게슈탈트 원리의 뿌리가 되었습니다. 모든 원리를 아우르는 바탕에는 프레그난츠의 법칙(Law of Prägnanz)이 있습니다. 사람은 보이는 것을 되도록 단순하고 규칙적이며 질서 있는 형태로 받아들이려 한다는 뜻입니다.

게슈탈트 원리의 5가지 대표 법칙

게슈탈트 원리는 여러 갈래로 정리되지만, 디자인에서 가장 자주 쓰는 것은 다음 다섯 가지입니다.

(1) 근접성(Proximity)
가까이 놓인 요소는 모양이 달라도 한 묶음으로 보입니다. 간격만 조절해도 무엇과 무엇이 한 편인지 알려 줄 수 있습니다.

(2) 유사성(Similarity)
색, 모양, 크기가 닮은 요소는 같은 무리로 읽힙니다. 같은 색의 버튼은 같은 종류의 기능이라고 짐작하게 됩니다.

(3) 연속성(Continuity)
사람은 갑자기 꺾이는 경로보다 부드럽게 이어지는 선을 따라가려 합니다. 두 선이 교차해도 각각을 끊기지 않은 하나의 선으로 봅니다.

(4) 폐쇄성(Closure)
윤곽 일부가 비어 있어도 머릿속에서 빈틈을 메워 완성된 도형으로 인식합니다.

(5) 전경과 배경(Figure-Ground)
눈은 화면을 앞으로 튀어나온 형상과 그 뒤에 깔린 바탕으로 나눕니다. 덴마크 심리학자 에드가 루빈(Edgar Rubin)은 1915년 무렵 두 사람의 옆얼굴로도, 하얀 꽃병으로도 보이는 ‘루빈의 꽃병(Rubin Vase)’으로 이 원리를 보여 주었습니다.

쉬운 예시로 이해하는 게슈탈트 원리

게슈탈트 원리는 우리가 매일 보는 로고와 화면 곳곳에 숨어 있습니다.

[사례] 글자 사이에 숨은 화살표, 페덱스 로고

1994년 랜더 어소시에이츠(Landor Associates)의 린든 리더(Lindon Leader)가 만든 페덱스(FedEx) 로고에는 대문자 E와 x 사이의 빈 공간에 오른쪽을 가리키는 화살표가 들어 있습니다. 처음에는 글자만 보이다가 한번 화살표를 알아차리면 그다음부터는 늘 눈에 띕니다. 배경이던 빈자리가 형상으로 바뀌는 전경과 배경의 원리를 영리하게 활용한 예입니다.

• 입력 양식(Form Layout): 항목 이름을 입력 칸 바로 위에 붙이고 항목끼리는 넉넉히 띄우면, 근접성 덕분에 어느 이름이 어느 칸의 것인지 헷갈리지 않습니다.
• 내비게이션 메뉴(Navigation Menu): 같은 모양과 색으로 맞춘 메뉴 항목은 유사성에 따라 한 집합으로 읽힙니다.
• 가로 스크롤 목록(Horizontal Scroll List): 오른쪽 끝 카드를 일부러 반쯤 잘라 보여 주면, 사람들은 연속성과 폐쇄성에 따라 뒤에 카드가 더 이어진다고 짐작하고 화면을 밀어 봅니다.

게슈탈트 원리를 쓸 때 주의할 점

게슈탈트 원리는 강력하지만 만능 공식은 아닙니다. 프레그난츠 같은 개념을 정확히 정의하기 어렵고, 현상을 묘사할 뿐 뇌 속 원리를 설명하지 못한다는 비판도 받았습니다. 그래서 뒤에 미국 심리학자 스티븐 파머(Stephen Palmer) 등이 선이나 상자로 둘러싼 요소를 한 무리로 보는 공통 영역(Common Region)의 원리를 덧붙이는 등 연구가 이어졌습니다.

• 원리끼리 충돌(Principle Conflict): 가까이 있지만 색이 다른 요소처럼 두 원리가 어긋나면 사용자는 어느 쪽으로 묶어야 할지 망설입니다. 하나의 묶음에는 단서를 한 방향으로 맞춥니다.
• 지나친 생략(Excessive Omission): 폐쇄성을 믿고 윤곽을 너무 많이 지우면 형태를 알아보지 못합니다. 작은 화면에서는 특히 조심합니다.
• 사용자 확인(User Testing): 디자이너 눈에 자연스러운 묶음이 사용자에게도 그런지는 실제로 보여 주고 확인해야 합니다.

게슈탈트 원리는 사람의 눈이 흩어진 요소를 가까움, 닮음, 이어짐, 닫힘, 형상과 바탕에 따라 묶어 전체로 읽는다는 지각의 규칙입니다. 100여 년 전 심리학 실험실에서 시작된 이 생각은 오늘날 로고와 웹 화면, 지도와 안내판의 질서를 만드는 바탕이 되었습니다.

요소를 하나씩 꾸미기 전에 눈이 그것들을 어떻게 묶어 볼지 먼저 헤아리는 것, 그것이 읽기 쉬운 디자인의 첫걸음입니다.