근접성

정의

근접성은 서로 가까이 놓인 요소를 눈이 자연스럽게 한 덩어리로 묶어 인식하는 성질입니다. 관련된 것끼리는 바싹 붙이고 관련 없는 것과는 확실히 떨어뜨리면, 별도의 제목이나 구분선을 그리지 않아도 어떤 것들이 한 묶음인지가 저절로 드러납니다. 예를 들어 폼에서 라벨을 바로 아래 입력칸에 붙여 두면 그 둘이 한 쌍으로 읽히고, 다음 항목과의 간격을 넓히면 서로 다른 항목이라는 사실도 함께 전해집니다. 이렇게 근접성은 거리라는 단서 하나만으로 화면의 구조를 조용히 전달하는 방식이며, 게슈탈트 네 가지 원칙 가운데 눈이 작동하는 방식을 가장 직관적으로 보여 주는 원리이기도 합니다.

왜 중요한가

화면에는 보통 정보가 많고, 사용자는 그것을 한 글자씩이 아니라 덩어리 단위로 훑어 봅니다. 근접성이 잘 지켜지면 눈이 관련 있는 항목을 즉시 하나로 묶어 읽어, 훨씬 적은 노력으로 전체 구조를 파악합니다. 반대로 모든 간격이 균일해서 무엇이 무엇과 한 쌍인지 알 수 없으면 사용자는 매번 관계를 스스로 추측해야 하고, 그 작은 부담이 항목마다 쌓여 화면 전체가 어수선하게 느껴집니다. 근접성의 큰 장점은 선이나 박스, 배경색 같은 시각적 요소를 하나도 더하지 않고도 정보를 정리한다는 점입니다. 덕분에 화면은 가볍게 유지되면서도 관계가 또렷해지고, 요소가 늘어나도 구조가 쉽게 무너지지 않아 유지보수와 확장에도 훨씬 유리해집니다.

흔한 실수

• 모든 요소 사이의 간격을 똑같이 주는 경우입니다. 간격이 균일하면 그룹의 경계가 사라져, 한 묶음이어야 할 항목과 아무 관련 없는 항목이 뒤섞여 보이고, 사용자는 어디까지가 한 덩어리인지 매번 다시 판단해야 합니다.
• 라벨과 입력칸 사이는 넓히면서 다음 항목과의 간격은 오히려 좁게 두는 식으로 거리를 거꾸로 주는 경우입니다. 그러면 라벨이 엉뚱한 입력칸에 붙어 보여 폼을 오독하게 되고, 입력 실수로 이어지기도 합니다.
• 그룹을 나눈다며 간격은 그대로 둔 채 구분선부터 잔뜩 긋는 경우입니다. 선이 많아질수록 화면은 복잡해지는데, 정작 여백만 조절해도 깔끔하게 해결되는 관계가 대부분입니다.

실무 팁

• 그룹과 그룹 사이의 간격을 그룹 안쪽 간격보다 확실히 크게 두세요. 이 대비 하나만 지켜도 선이나 배경 없이 여백만으로 어디까지가 한 묶음인지를 정확히 전달할 수 있습니다.
• 관계가 헷갈릴 때는 구분선이나 배경색을 더하기 전에 간격부터 조절해 보세요. 거리로 해결되면 화면이 한결 가벼워지고, 그래도 부족할 때만 최소한의 선을 얹으면 충분합니다.
• 간격 값은 그때그때 정하지 말고 미리 정한 여백 스케일 안에서 고르세요. 안쪽과 바깥쪽 간격을 각각 정해 두면 그룹 구조가 화면 전체에서 흔들림 없이 일관되게 유지되고, 나중에 항목이 추가되어도 같은 규칙을 그대로 적용할 수 있어 관리가 훨씬 수월해집니다.

관련 개념