회원가입 폼의 라벨은 입력창 바로 위나 옆에, 차트의 범례는 차트 곁에 둡니다. 너무 당연해서 이유를 따져 본 적이 없을 수도 있지만, 이 배치 뒤에는 30년 넘게 검증된 ‘근접 호환성 원칙(Proximity Compatibility Principle, PCP)’이 있습니다. 제이콥 닐슨도 11월 9일자 UX Roundup에서 이 원칙을 다시 꺼내 들며 반응형과 생성형 UI 시대에 더 중요해졌다고 강조했죠.
조종석에서 시작된 한 문장
이 원칙은 1995년 크리스토퍼 위켄스와 멜로디 카스웰이 학술지 Human Factors에 정리했습니다. 핵심은 “머릿속에서 함께 처리해야 하는 정보는 화면에서도 가깝게 보여야 한다”는 한 문장입니다. 속도와 기울기, 고도를 동시에 종합해야 하는 조종사는 계기 사이 거리가 멀어질수록 판단에 비용을 치렀습니다. 웹도 마찬가지입니다. 비교할 두 값이 화면 양 끝에 있으면 사용자는 기억력으로 그 거리를 메워야 합니다.
붙여야 할 것과 떼어야 할 것
라벨과 에러 메시지는 해당 입력창 바로 옆에, 비교할 값은 한 표나 한 차트 안에, 범례는 데이터 곁에 둡니다. 수정·삭제 버튼도 멀리 있는 전역 툴바보다 대상 항목 옆에 있을 때 눈에 잘 띄고 손의 이동도 줄어듭니다.
반대로 되돌리기 어려운 삭제 동작은 자주 쓰는 버튼과 거리를 두고 스타일도 달리해야 실수를 막습니다. 계속 지켜봐야 하는 핵심 숫자 하나는 넉넉한 여백 속에 홀로 세울 때 더 잘 읽힙니다. 공간이 부족하다면 같은 색, 연결선, 하나의 박스로 ‘가깝다’는 신호를 줄 수 있지만, 스크롤 한 번에 그 연결이 끊기지 않는지 꼭 확인하세요.
움직이는 레이아웃에는 그룹 규칙이 필요하다
닐슨이 이 원칙을 다시 강조한 이유는 레이아웃이 더 이상 고정돼 있지 않기 때문입니다. 반응형 레이아웃은 브레이크포인트마다 화면을 다시 배치하고, 생성형 UI는 사용자와 맥락에 맞춰 화면을 매번 새로 조립합니다. 시안에서 붙어 있던 라벨과 입력창이 실제 화면에서는 멀어질 수 있다는 뜻이죠. 그래서 ‘이 요소들은 반드시 함께 있어야 한다’는 그룹 규칙을 디자인 시스템에 명시해 두는 것이 중요합니다.
시안을 넘기기 전 세 가지 질문
함께 판단해야 하는 정보끼리 가까이 있는지, 위험한 버튼은 충분히 떨어져 있는지, 화면이 줄어들어도 그 관계가 유지되는지 확인해 보세요. 이 세 가지 질문만으로도 사용자가 덜 헤매는 화면을 만들 수 있습니다.
📎 출처: https://jakobnielsenphd.substack.com/p/ux-roundup-20261109