좋은 화면은 설명하기 전에 먼저 읽힙니다. 사용자가 버튼과 라벨의 관계를 1초 만에 파악하는 것은 우연이 아니라, 우리의 눈이 형태를 조직하는 방식 — 즉 게슈탈트 원리가 작동한 결과입니다. 이번 글에서는 근접성, 유사성, 폐쇄성, 연속성, 전경과 배경, 공동 영역이라는 여섯 가지 원리가 UI 디자인에서 어떻게 화면의 구조를 만들어내는지, 그리고 실무에서 이를 어떤 순서로 적용하면 좋은지 살펴봅니다.
1. 게슈탈트 심리학 — “전체는 부분의 합과 다르다”
게슈탈트(Gestalt)는 ‘형태’, ‘전체 모습’을 뜻하는 독일어입니다. 20세기 초 베르트하이머, 쾰러, 코프카를 중심으로 한 게슈탈트 심리학자들은 인간의 지각이 개별 자극을 하나씩 더해가는 방식이 아니라, 먼저 전체 구조를 파악한 뒤 부분을 이해하는 방식으로 작동한다고 보았습니다. “전체는 부분의 합과 다르다”라는 유명한 명제가 여기서 나왔습니다.
이 통찰이 디자인에 중요한 이유는 분명합니다. 사용자는 화면의 요소를 하나씩 읽지 않습니다. 눈은 화면에 닿는 순간 거리, 색, 형태, 정렬 같은 시각적 단서를 근거로 요소들을 자동으로 묶고, 덩어리 단위로 의미를 추측합니다. 디자이너가 이 자동 묶음의 규칙을 이해하면, 설명 문구나 장식 없이도 구조가 스스로 말하는 화면을 만들 수 있습니다.
2. 여섯 가지 원리, 화면 위에서 읽기
근접성은 가까이 있는 것들을 한 묶음으로 보는 성질입니다. 입력 필드와 라벨 사이 간격이 필드와 다음 라벨 사이 간격보다 좁아야 폼이 올바르게 읽히는 이유가 여기에 있습니다. 유사성은 색·크기·모양이 비슷한 요소를 같은 역할로 인식하는 성질입니다. 화면의 모든 링크가 같은 색을 쓰면, 사용자는 처음 보는 화면에서도 무엇을 누를 수 있는지 압니다.
폐쇄성은 불완전한 형태를 완성해서 보는 성질입니다. IBM의 줄무늬 로고나 WWF의 판다 심벌처럼 윤곽이 끊겨 있어도 우리는 전체 형태를 어려움 없이 읽습니다. UI에서는 화면 가장자리에 살짝 걸쳐 잘린 카드가 “옆으로 더 있다”는 신호가 되어 스크롤을 유도합니다. 연속성은 하나의 흐름 위에 놓인 요소들을 이어서 지각하는 성질로, 정렬된 리스트와 그리드가 편안하게 읽히는 근거입니다.
근접성 · 공동 영역
거리와 울타리로 묶습니다. 카드, 여백, 배경면이 “이것들은 한 세트”라고 말해 줍니다.
유사성 · 연속성
반복과 정렬로 묶습니다. 같은 스타일과 같은 축 위의 요소는 같은 역할로 읽힙니다.
폐쇄성 · 전경/배경
생략과 대비로 초점을 만듭니다. 잘린 카드는 스크롤을, 딤 처리는 모달을 앞세웁니다.
전경과 배경은 시야를 주인공과 무대로 나누는 성질입니다. 모달 뒤의 화면을 어둡게 처리하는 딤 오버레이는 이 원리를 그대로 이용해 대화 상자를 전경으로 끌어올립니다. 마지막으로 공동 영역은 같은 경계선이나 배경면 안의 요소를 한 그룹으로 보는 성질입니다. iOS 설정 화면이 관련 항목을 둥근 흰 면 위에 올려 구분하고, Google의 머티리얼 디자인과 Airbnb의 숙소 목록이 카드를 기본 단위로 삼는 이유가 바로 이것입니다.
3. 실무 적용 — 여백부터 시작하는 다섯 단계
원리를 아는 것과 화면에 적용하는 것은 다른 문제입니다. 실무에서는 다음 순서를 권합니다. 핵심은 선과 상자 같은 명시적 장치보다 간격과 반복 같은 조용한 장치를 먼저 쓰는 것입니다.
화면의 정보를 종이 위에서 먼저 그룹으로 묶어 봅니다. 무엇이 한 덩어리인지 정의되지 않으면 어떤 원리도 도울 수 없습니다.
근접성부터 적용합니다. 그룹 안 간격은 좁게, 그룹 사이 간격은 그 두 배 안팎으로 — 간격의 위계가 곧 정보의 위계입니다.
유사성으로 역할을 통일합니다. 같은 기능은 같은 색·크기·모양으로, 다른 기능은 확실히 다르게 만듭니다.
정렬선을 정리해 연속성을 확보합니다. 시선이 꺾이는 지점이 적을수록 화면은 조용해집니다.
그래도 구분이 약한 곳에만 공동 영역(카드·배경면)과 전경/배경 대비를 더합니다. 최후의 수단으로 아껴 쓸수록 효과가 큽니다.
💡 실무 포인트 — 그룹이 잘 묶였는지 확인하려면 화면을 흐릿하게 보는 스쿼트 테스트를 해 보세요. 눈을 가늘게 뜨고 봤을 때 의도한 덩어리 개수만큼 덩어리가 보이면 성공, 하나로 뭉개지거나 잘게 흩어지면 간격 위계부터 다시 손봐야 합니다.
흔한 실수 — 여백 대신 선으로 묶기
가장 자주 보이는 실수는 그룹을 나눌 때마다 구분선과 테두리 상자를 추가하는 것입니다. 선은 확실해 보이지만 그 자체가 시각적 소음이 되어, 몇 개만 겹쳐도 화면이 창살처럼 답답해집니다. 근접성만으로 이미 묶을 수 있는 것을 상자로 다시 묶으면 잉크만 늘어날 뿐입니다. Muji의 매장과 패키지가 구획선 없이 정돈돼 보이는 것처럼, 여백은 선이 하는 일을 더 조용하게 해냅니다. 선을 긋고 싶어질 때마다 “간격을 조정해서 해결할 수 없는가”를 먼저 물어보시기 바랍니다.
마치며
게슈탈트 원리는 새로운 유행이 아니라, 백 년 전에 정리된 지각의 문법입니다. 눈은 가까운 것을 묶고, 닮은 것을 잇고, 끊긴 것을 메우고, 흐름을 따라가며, 주인공과 배경을 나눕니다. 디자이너의 일은 이 자동 반응을 거스르지 않고 정보 구조에 맞게 빌려 쓰는 것입니다.
다음에 화면이 복잡하게 느껴진다면 요소를 지우기 전에 먼저 물어보세요. 눈이 지금 이 화면을 어떻게 묶어 읽고 있는가 — 그 답 안에 정리의 실마리가 있습니다.
Design Daily Life · 디자인의 일상을 기록합니다
한국에 온 외국인 친구가 있나요? 메뉴 번역·택시 요금·약국 카드가 한 앱에 있는 K-OREA를 알려 주세요.
Visiting Korea? K-OREA puts menu scanning, taxi fare guidance and a pharmacy card in one app. Get it on the App Store.