근접성 원리와 관계가 보이는 간격

이 제목은 어느 작품의 제목일까요?

작품 목록을 보고 마음에 드는 작품의 제목을 메모하려고 합니다. 아래에는 이 글을 위해 직접 만든 추상 연습작 두 개가 있습니다. 실제 작가나 미술관의 소장품은 아닙니다. 배치 A와 B를 차례로 읽어보세요.

제목의 짝을 찾기 전에, 간격부터 읽어봅니다

작품 사이에 놓인 표지는 어느 이미지의 설명인지 모호합니다. 작품과 표지의 간격을 먼저 살펴보세요.

파란 세로 면과 작은 원이 있는 작품의 제목을 찾아보세요. 제목 아래의 설명은 어느 작품에 속하나요? 두 배치에서 확인한 순서와, 다시 보게 된 부분이 있었다면 그 위치를 비교해보세요. 어느 쪽이 더 예쁜지 고르는 과제는 아닙니다.

가까운 것끼리 묶여 보이는 까닭

파란 세로 면과 작은 원이 있는 작품의 제목은 “오후의 층”입니다. 그 아래의 제작 표기와 설명도 이 작품의 정보입니다. A에서는 이미지와 제목 사이가 넓고, 제목 정보 다음의 새 이미지가 더 가까이 붙어 있습니다. B에서는 이미지와 제목 정보를 가까이 두고, 다음 작품이 시작되기 전 간격을 벌렸습니다. 두 배치에서 달라진 것은 이 두 간격입니다.

근접성 원리는 다른 조건이 비슷할 때 가까운 요소들이 한 묶음처럼 보이는 경향입니다. 여기서 중요한 것은 절대적인 거리보다 주변 요소와의 상대적인 간격입니다. 작품 이미지와 제목 사이만 재어서는 충분하지 않습니다. 그 제목이 다음 작품 이미지와 얼마나 떨어져 있는지도 함께 살펴야, 어느 작품의 제목으로 읽힐지 판단할 수 있습니다.

Max Wertheimer는 1923년 연구에서 점들의 간격을 달리하며 무엇이 함께 묶여 보이는지 살폈습니다. 이 글에서 확인한 자료는 1938년에 출판된 영어 번역입니다. 원문은 근접성에 이어 유사성을 다루고, 두 단서가 같은 묶음을 지지하거나 서로 충돌하는 경우도 설명합니다. 작품 목록은 그 연구의 실험 화면을 재현한 것이 아니라 관계를 읽어보도록 만든 설계 예입니다. 영어 번역 I–III절

“그러나 근접성만이 자연스러운 묶음에 관여하는 유일한 요인은 아니다”라는 뜻입니다. 작품 목록에서도 간격을 고친 다음에는 색, 테두리, 정렬이 같은 관계를 보여 주는지 확인해야 합니다. 원리의 이름을 알았다고 모든 배치의 답이 정해지는 것은 아닙니다.

두 배치 모두에서 제목을 바로 찾았어도 괜찮습니다. 내용의 뜻이나 익숙한 읽기 순서도 짝을 찾는 데 쓰일 수 있습니다. 이 비교는 간격을 관찰하기 위한 예이며, 독자의 지각 능력이나 원리의 강도를 점수로 재는 시험이 아닙니다.

여백을 정하기 전에 한 작품의 범위를 정합니다

먼저 한 작품에 속하는 정보를 적어봅니다. 이 목록에서는 이미지, 제목, 제작 표기, 설명이 한 단위입니다. 디자이너가 한 번에 읽히기를 바라는 내용과 독자가 한 작품을 이해하는 데 필요한 내용이 맞는지 확인합니다. 제목과 이미지는 붙였지만 설명을 다음 작품 아래로 보냈다면, 겉모양을 정리했어도 정보의 짝은 흐려집니다.

그다음 묶음 안의 간격과 묶음 사이의 간격을 따로 조절합니다. 제목 바로 아래의 제작 표기와 설명은 서로 이어지고, 설명이 끝나면 다음 작품의 시작을 알아볼 수 있어야 합니다. 디자이너끼리는 이 두 종류의 간격에 이름을 붙여 재사용할 수 있습니다. 다만 “8px과 24px”, “항상 세 배”처럼 특정 수치나 비율을 원리 자체로 외우지는 마세요. 글자 크기와 내용 길이가 달라지면 다시 살펴야 합니다.

묶음을 구분하려고 여백을 계속 늘리면, 두 작품의 설명을 비교할 때 오히려 더 많이 오가게 될 수 있습니다. 한 작품의 정보는 함께 읽히되, 비교할 작품들이 불필요하게 멀어지지 않는 지점을 찾으세요. “얼마나 넓게 띄울까?”보다 “무엇과 무엇을 함께 읽어야 할까?”가 먼저입니다.

간격을 조절해도 설명이 누구의 것인지 불분명하다면 문구를 살펴봅니다. “상세 정보” 같은 제목이 반복되고 내용에도 대상이 드러나지 않으면 공간만으로 뜻을 만들기 어렵습니다. 작품 이름을 분명히 쓰거나 필요한 소제목을 보완하세요. 모든 목록을 테두리 카드로 나누기 전에, 독자가 작품 하나를 읽는지 여러 작품의 같은 항목을 비교하는지도 정해야 합니다.

같은 색과 같은 테두리는 서로 다른 관계를 말할 수 있습니다

이제 각 작품에 “도형 연습”이라는 같은 색의 표지를 붙이고 작품별 테두리를 둘러봅시다. 유사성은 같은 색이나 모양처럼 닮은 특징을 묶음의 단서로 삼는 경향입니다. 공통 영역은 같은 경계 안에 있는 요소가 함께 묶여 보이는 경향을 말합니다. 앞서 본 근접성과 함께 살필 수 있는 단서들입니다. Wertheimer II–III절, Palmer의 해설, 102쪽

두 “도형 연습” 표지는 같은 종류라는 관계를 나타내지만, 그렇다고 두 작품의 설명을 한 작품의 설명으로 합치는 것은 아닙니다. 작품별 경계 안에는 각각의 이미지와 정보가 들어갑니다. 닮은 표지와 개별 작품의 테두리가 서로 다른 수준의 관계를 표현하는 셈입니다. 같은 색을 썼다는 이유만으로 모든 요소가 하나의 대상에 속한다고 설명해서는 안 됩니다.

반대로 테두리가 첫 작품의 설명과 다음 작품의 이미지를 함께 감싸면, 가까운 제목이 가리키는 관계와 경계가 가리키는 관계가 어긋날 수 있습니다. 이때 “근접성이 테두리보다 항상 강하다” 같은 순위로 해결하지 않습니다. 먼저 어떤 내용을 한 작품으로 묶을지 다시 확인하고, 잘못 감싼 경계를 고칩니다. Wagemans와 동료들의 2012년 리뷰도 근접성 외에 유사성, 공통 영역 등 여러 묶음 원리를 다룹니다. 대학 공개 초록

정렬은 글자나 이미지의 시작선을 맞추는 배치 방식입니다. 작품마다 제목과 설명의 시작선이 같으면 어디에서 읽기 시작할지 일관되게 제시할 수 있습니다. 하지만 모든 제목만 한 열에 모으고 모든 설명을 다른 열에 모았다고 해서 작품별 짝이 저절로 정해지지는 않습니다. 정렬이 표현하는 줄이나 열이 실제 읽기 과제에 맞는지 보아야 합니다.

화면이 좁아져도 작품별 읽기 순서를 유지합니다

데스크톱에서는 두 작품을 나란히 놓고, 휴대전화에서는 한 작품씩 세로로 읽게 할 수 있습니다. 이때 이미지들, 제목들, 설명들을 각각 모아 둔 채 겉보기 위치만 맞추면 화면이 좁아졌을 때 짝이 갈라질 수 있습니다. 작품 하나의 이미지부터 설명까지를 한 내용 단위로 두고, 그 단위가 통째로 다음 줄로 이동하도록 구성합니다.

화면에서 가까워 보이는 것과 보조기술이 관계를 읽을 수 있는 것은 별개의 점검입니다. HTML에서도 작품 목록과 각 항목을 구분하고, 제목·이미지 설명·본문이 어느 작품에 속하는지 드러나게 구성합니다. 문서 순서란 화면의 좌표가 아니라 코드에 담긴 내용의 순서입니다. 이 예에서는 한 작품의 내용을 마친 다음 다른 작품으로 넘어가는 순서가 뜻을 유지합니다.

WCAG 1.3.1은 표현으로 전달하는 정보와 관계를 프로그램으로 판별할 수 있거나 텍스트로 제공하도록 요구합니다. 1.3.2는 제시 순서가 의미에 영향을 줄 때 올바른 읽기 순서를 프로그램으로 판별할 수 있어야 한다는 기준입니다. 작품별 관계와 순서를 함께 점검하되, 모든 화면에 오직 하나의 읽기 순서만 있다고 받아들이지는 마세요. WCAG 2.2 기준, 1.3.1 공식 해설

검수할 때는 제목이 두 줄이 되고 설명이 여러 줄이 된 상태를 넣어보세요. 글자를 확대했을 때 설명이 잘리거나 다음 작품의 제목이 앞 작품에 붙지 않는지 확인합니다. 관련 정보를 같은 높이에 맞추려 내용을 숨기기보다, 작품별 묶음이 자연스럽게 늘어나도록 합니다. 실제 읽는 순서를 따라 제목과 설명의 짝을 다시 짚어보는 것이 중요합니다.

다른 화면에서는 무엇의 조건인지 물어봅니다

예약 폼에서도 같은 질문을 할 수 있습니다. “연락처” 라벨, 번호 입력란, “예약 안내를 받을 번호”라는 도움말을 함께 읽게 하고 다음 필드와 구분합니다. 동시에 라벨과 입력란, 도움말과 해당 입력란의 의미 관계도 연결해야 합니다. 간격과 문구, 코드 연결을 모두 바꾼 개선안의 결과를 간격 하나의 효과라고 보고해서는 안 됩니다.

이번에는 도서 목록을 생각해보세요. “빛의 지도”는 대출 가능하고, “도시의 결”은 대출 중이며 예약할 수 있습니다. “반납되면 알림을 보냅니다”라는 문장은 두 책 사이에 떠 있습니다. 어느 책의 예약 조건인지 분명하게 하려면 무엇을 함께 놓아야 할까요?

이 조건은 예약할 수 있는 “도시의 결”과 함께 읽혀야 합니다. 책 제목, 대출 중 상태, 예약 가능 안내, 알림 조건을 같은 책의 정보로 묶습니다. 그다음 앞 책과의 간격을 살피고, 작은 화면의 순서와 코드의 관계도 확인합니다. 간격을 예쁘게 맞추는 일보다 먼저 조건의 대상을 정하는 것입니다.

가격의 추가 비용이나 이용 조건도 관련 선택과 함께 검토할 수 있어야 합니다. 중요한 조건을 멀리 떼어 놓고 화면이 깔끔해졌다고 평가하지 않습니다. 서로 독립적인 동의 항목을 하나의 묶음처럼 보여 한꺼번에 수락하도록 유도하는 일도 피해야 합니다. 무엇이 함께 속하고 무엇이 별개의 선택인지 모두 분명해야 합니다. 동의를 거절해도 어떤 다음 행동이 가능한지 이해할 수 있게 안내합니다.

완성한 화면은 “어느 쪽이 보기 좋은가” 외의 질문으로 확인해보세요. 사용자가 특정 설명이 어느 작품에 속하는지, 예약 조건이 어느 책에 적용되는지 가리키고 이유를 말하게 합니다. 잘못 짝지은 항목과 되돌아가 확인한 부분을 기록합니다. 간격 자체를 비교하려면 문구, 순서, 글꼴, 폭 등 다른 조건을 고정합니다. 여기의 예시는 앞으로 그런 검토를 할 수 있게 만든 것이며, 실제 학생이나 사용자 시험 결과를 보고한 것은 아닙니다.

확인해볼 질문

• 한 작품이나 항목에 속하는 제목, 설명, 상태, 조건을 말로 구분할 수 있는가?
• 묶음 안의 간격과 다음 묶음까지의 간격이 실제 소속 관계를 드러내는가?
• 같은 색, 테두리, 정렬이 어떤 관계를 나타내며 서로 충돌하지 않는가?
• 좁은 화면, 긴 문장, 확대된 글자에서도 작품별 내용과 읽기 순서가 유지되는가?
• 시각적 배치뿐 아니라 문서의 제목·목록·설명 연결도 맞으며, 중요한 조건이 해당 선택과 함께 읽히는가?

근접성은 여백을 많이 만드는 방법이 아니라 정보 사이의 관계를 읽는 데 쓰이는 단서입니다. 먼저 무엇이 한 대상에 속하는지 정하고, 주변과 비교한 간격을 조절합니다. 다른 묶음 단서와 의미 구조까지 같은 관계를 전할 때 비로소 화면을 더 정확하게 다듬을 수 있습니다.

근거를 읽는 범위

Wertheimer의 영어 번역은 근접성과 유사성의 고전적 설명을, Wagemans와 동료들의 리뷰는 여러 묶음 단서와 그 관계를 다룹니다. 공통 영역은 Palmer의 연구자 해설에서도 확인할 수 있습니다. W3C의 해설과 WCAG 2.2는 접근성 요구를 설명하며, 특정 간격이 더 빨리 읽힌다는 실험 근거와는 구분해야 합니다.

작품 목록과 도서 목록, 간격 선택, 재배치 방식은 이 글의 교육용 설계 제안입니다. 원논문의 그림이나 실제 미술품을 복제하지 않았습니다. 고정된 픽셀 기준, 모든 단서의 우선순위, 시선 이동 경로, 수행 시간이나 이해도 개선율을 제시하지 않습니다. 실제 제품에 적용한 뒤의 결과는 별도로 확인해야 합니다.