근접성의 원칙: 간격이 곧 관계를 설명한다The Proximity Principle: Organize Without Drawing Boxes
게슈탈트 심리학의 근접성 원칙을 폼·카드·내비게이션 설계에 적용하는 방법을 설명합니다.How Gestalt proximity works in UI layout, practical spacing ratios for grouping elements, and why spacing can replace most decorative dividers.
- 간격의 문법: 안은 좁게, 밖은 넓게
- 폼 디자인에서의 근접성
- 선과 박스를 지우는 용기
- 근접성과 다른 게슈탈트 원칙들
- 간격 비율의 경험칙
- Proximity in practice
- Spacing ratios for grouping
- Replacing decorative dividers
사람의 뇌는 가까이 있는 것들을 자동으로 한 묶음으로 인식합니다. 게슈탈트 심리학이 말하는 근접성의 원칙(Law of Proximity)입니다. 이 원리가 디자인에서 강력한 이유는, 별도의 선이나 박스 없이 간격만으로 정보의 구조를 전달할 수 있기 때문입니다.
간격의 문법: 안은 좁게, 밖은 넓게
근접성을 레이아웃 규칙으로 번역하면 이렇게 됩니다. 관련된 요소 사이의 간격은 작게, 무관한 요소 사이의 간격은 크게. 제목과 그 본문 사이가 8px라면 본문과 다음 제목 사이는 32px이어야 합니다. 이 비율이 무너져 제목이 위아래 문단의 정중앙에 떠 있으면, 독자는 제목이 어느 쪽에 속하는지 매번 추론해야 합니다. 시각적 모호함은 곧 인지 비용입니다.
폼 디자인에서의 근접성
근접성 위반이 가장 자주 일어나는 곳이 입력 폼입니다. 레이블이 자신의 입력란보다 위 입력란에 더 가까운 폼은 사용자를 끊임없이 헷갈리게 합니다. 레이블과 해당 입력란은 4~8px로 붙이고, 필드와 필드 사이는 20~24px로 벌리세요. 관련 필드들(주소, 상세주소, 우편번호)은 그룹으로 묶고 그룹 사이에 더 큰 간격을 두면, 긴 폼도 구조가 한눈에 읽힙니다.
선과 박스를 지우는 용기
구분이 필요할 때 디자이너는 반사적으로 구분선을 긋고 박스를 칩니다. 하지만 근접성을 제대로 쓰면 그 대부분이 불필요합니다. 실험해 보세요. 화면의 모든 구분선과 배경 박스를 지운 뒤, 간격 조정만으로 같은 구조가 전달되는지. 성공한다면 화면은 훨씬 가볍고 현대적으로 변합니다. 선이 꼭 필요한 자리는 그때 가서 최소한으로 되살리면 됩니다.
디자인 리뷰에서 "여기 선 하나 넣을까요?"라는 말이 나오면 먼저 물어보세요. 간격으로 해결할 수는 없나요? 간격은 가장 조용하면서 가장 강력한 구조화 도구입니다.
근접성과 다른 게슈탈트 원칙들
근접성은 게슈탈트 원칙 가족의 맏이일 뿐입니다. 유사성(비슷하게 생긴 것끼리 묶임)은 같은 색·모양의 태그가 한 그룹으로 읽히는 이유이고, 공통 영역(같은 테두리 안은 한 묶음)은 카드 UI의 근거이며, 연속성(정렬된 선을 따라 읽힘)은 정렬이 중요한 이유입니다. 실무에서는 이들이 함께 작동합니다. 근접성으로 묶고, 유사성으로 같은 종류임을 알리고, 정렬로 흐름을 만드는 식입니다. 원칙들이 서로 충돌하면(가까운데 색이 다름) 사용자는 혼란을 느끼므로, 신호들이 같은 말을 하게 정렬하는 것이 핵심입니다.
간격 비율의 경험칙
'안은 좁게 밖은 넓게'를 숫자로 만들면 1:2 규칙이 됩니다. 요소 내부의 간격이 8이면 그룹 사이는 16, 그룹 내부가 16이면 그룹 사이는 32. 최소 두 배의 차이가 나야 사람의 눈이 '이건 다른 묶음'이라고 즉시 인식합니다. 1.2배, 1.5배 같은 어중간한 차이는 구분인지 실수인지 모호합니다. 8pt 그리드의 간격 토큰(8, 16, 32, 64)이 두 배수로 뛰는 것도 이 원리와 맞물려 있습니다.
근접성의 원칙은 비용이 들지 않는 디자인 개선입니다. 새 컴포넌트도, 새 색상도 필요 없이 간격의 재배치만으로 화면의 명료함이 올라갑니다. 오늘 작업 중인 화면에서 제목과 본문의 위아래 간격부터 점검해 보세요.
The Gestalt proximity principle is one of the most practically useful concepts in visual design: elements that are close together are perceived as belonging together, regardless of any other visual treatment. No borders, no background colors, no labels required — spacing alone creates groups.
Proximity in practice
Every heading should be closer to its following content than to the content above it. The gap between a label and its input field should be smaller than the gap between two separate form fields. A button that belongs to a card should be inside the card's padding, not in the margin between cards. These relationships communicate ownership and connection without a single visual element.
Spacing ratios for grouping
A useful rule of thumb: the space between items in the same group should be 4–8px; between a group and its heading, 8–12px; between separate groups, 24–40px; between sections, 48–80px. The exact values matter less than the hierarchy of differences. The brain reads "closer means related" automatically — you just need the ratios to be distinct enough to trigger the reading.
Replacing decorative dividers
Most <hr> elements, 1px divider lines, and background-color section breaks can be replaced by adequate spacing. An <hr> is often a signal that spacing is insufficient rather than that a line is needed. Try removing it and doubling the margin — if the content still reads as clearly separated, the line was solving a problem that spacing should have handled.
Proximity is a cost-free design improvement. No new components, colors, or assets — just gap redistribution. Start with the screen you're working on right now and check every heading-to-content spacing relationship.