어드민 대시보드 설정 페이지를 처음 만들 때, 저도 그랬습니다. 간격을 16px로 통일하면 깔끔해 보일 거라 생각했습니다. 그런데 파일럿 테스트에서 5명 중 3명이 "섹션 경계를 찾기 어렵다"고 했을 때, 뭔가 근본적인 걸 놓쳤다는 걸 직감했습니다. 간격이 균일하면 정돈돼 보인다는 건 초심자 시절의 미신이었습니다. 공간이 의미를 만든다는 관점으로 전환하지 못하면 시각 위계 자체가 무너집니다.
균일한 간격이 왜 오히려 독이 되는가
UI 설계에서 간격은 단순한 여백이 아닙니다. 어떤 요소가 같은 그룹에 속하는지, 어디서 섹션이 끊기는지를 눈이 아닌 뇌가 먼저 판단합니다. 이 판단의 근거가 되는 것이 바로 게슈탈트(Gestalt) 원리입니다. 게슈탈트란 독일어로 '형태' 또는 '전체'를 뜻하는 개념으로, 인간의 뇌가 개별 요소를 모아 하나의 의미 있는 전체로 인식하는 심리적 경향을 설명합니다.
게슈탈트 원리 중 UI에서 가장 자주 오용되는 것이 근접성(Proximity)입니다. 근접성이란 서로 가까이 있는 요소들을 같은 그룹으로 인식하는 원리입니다. 문제는 간격을 균일하게 설정하면 이 근접성이 작동하지 않는다는 점입니다. 그룹 안의 요소 간 간격과 그룹 밖 간격이 같으면 뇌는 어디가 묶음이고 어디가 경계인지 구분할 수 없습니다.
제가 직접 겪은 사례가 이를 잘 설명합니다. 16px 균일 간격을 그룹 내 12px, 그룹 간 32px로 분리하자 재테스트에서 5명 중 4명이 섹션을 즉시 식별했습니다. 수치로 보면 단순해 보이지만, 이 비율의 차이가 사용자의 인지 부담을 실질적으로 줄입니다. UX 연구에서도 시각적 그루핑이 명확할수록 과제 완료 시간이 단축된다는 결과가 반복적으로 확인됩니다(출처: Nielsen Norman Group).
게슈탈트의 또 다른 원리인 폐쇄성(Closure)도 실무에서 중요하게 작동합니다. 폐쇄성이란 인간의 뇌가 불완전한 형태를 보완하여 완전한 도형으로 인식하려는 경향을 말합니다. 카드 컴포넌트를 설계할 때 1px 보더 대신 배경 명도 차이 8%만으로 영역을 구분해봤는데, 정보 밀도는 그대로 유지되면서 시각 피로 평가가 7점 만점 기준 5.2점에서 6.4점으로 올랐습니다. iOS 설정 앱이 여백과 배경색 차이만으로 영역을 구분하는 방식이 바로 이 원리를 적극 활용한 것입니다. 반면 Material Design은 그림자(엘리베이션)로 깊이감을 보강합니다. 정보 밀도와 깊이감 사이의 트레이드오프인데, 국내 서비스 중 상당수는 여전히 1px 보더로 모든 카드를 감싸는 관성에서 벗어나지 못하고 있습니다.
디자인 토큰으로 게슈탈트를 코드화하는 법
개인 작업 수준에서 간격 비율을 조정하는 것과, 팀 전체가 같은 감각으로 UI를 만드는 것은 전혀 다른 문제입니다. 제가 경험상 이건 좀 다른 차원의 문제라고 생각하는데, 아무리 좋은 간격 원칙을 세워도 구현 단계에서 제각각이 되면 의미가 없습니다.
이 문제를 해결하는 통로가 디자인 토큰(Design Token)입니다. 디자인 토큰이란 색상, 간격, 폰트 크기 등 디자인 시스템의 핵심 값을 코드로 정의한 변수 단위를 말합니다. 쉽게 말해 디자인 결정을 변수명으로 저장해두는 방식입니다. 저는 spacing-group-inner와 spacing-group-outer 두 개의 토큰을 분리 등록했고, 그 이후 팀 전체의 간격 적용 방식이 표준화됐습니다. 이전까지는 컴포넌트마다 간격 값이 달랐는데, 토큰 하나로 그 혼선이 정리됐습니다.
컬러 코딩 규약도 같은 맥락입니다. 상태 배지를 빨강·노랑·초록 세 계열로 통일하고 나서, 사용자가 글자를 읽지 않고 색만으로 상태를 3초 안에 스캔할 수 있게 됐습니다. 이건 단순한 미적 선택이 아니라 사용성 휴리스틱(Heuristic) 관점에서도 중요합니다. 사용성 휴리스틱이란 야콥 닐슨이 제안한 UI 설계의 10가지 경험 법칙으로, 사용자가 시스템 상태를 즉시 인식할 수 있어야 한다는 원칙이 여기 포함됩니다.
디자인 토큰 기반의 시스템을 구축할 때 확인해야 할 핵심 포인트는 다음과 같습니다.
- 그룹 내 간격(inner)과 그룹 간 간격(outer)을 반드시 분리된 토큰으로 정의할 것
- 상태 표현은 색상 단독이 아닌 아이콘 또는 텍스트와 병행하여 접근성을 확보할 것
- 토큰 명명 규칙을 역할 기반(role-based)으로 설정하여 의미 전달이 가능하게 할 것
- 토큰 변경 시 전체 컴포넌트에 반영되는 단방향 흐름을 유지할 것
게슈탈트를 코드로 구현하는 방식이 결국 디자인 토큰이라는 것, 이걸 체감하고 나서야 시스템 설계의 의미가 달라 보였습니다.
파일럿 테스트 없이 출시하면 벌어지는 일
솔직히 이건 예상 밖이었습니다. 테스트를 생략하고 싶은 유혹은 항상 있습니다. 일정이 빠듯하고, 본인 눈에는 완성도가 충분해 보이기 때문입니다. 그런데 UX 연구에서 반복적으로 드러나는 사실이 있습니다. 디자이너 자신은 자신의 설계를 너무 잘 알기 때문에 오히려 사용자의 혼란을 예측하지 못합니다. 이것이 디자이너 편향(Designer Bias)입니다. 디자이너 편향이란 설계자가 자신의 경험과 기대치를 기준으로 사용자 행동을 예측함으로써 실제 사용자의 필요와 어긋나는 결정을 내리는 현상을 말합니다.
엠파시 맵(Empathy Map)은 이 편향을 줄이는 데 유효한 도구입니다. 엠파시 맵이란 사용자가 말하는 것, 생각하는 것, 행동하는 것, 느끼는 것을 네 영역으로 나눠 시각화한 차트입니다. 인터뷰나 테스트 관찰 결과를 이 구조에 정리하면, 디자이너가 가정한 것과 사용자가 실제로 경험하는 것 사이의 간극이 명확하게 드러납니다. 제 파일럿 테스트에서 사용자가 페이지를 여러 번 새로 고침하거나 화면에 얼굴을 가까이 들이미는 행동을 관찰했는데, 이게 바로 섹션 경계를 찾지 못한다는 신호였습니다. 말로는 "좀 복잡한 것 같아요"였지만, 행동이 진짜 피드백이었습니다.
Nielsen Norman Group의 연구에 따르면 사용자 테스트는 5명만으로도 주요 사용성 문제의 약 85%를 발견할 수 있다고 알려져 있습니다(출처: Nielsen Norman Group). 대규모 리서치가 어려운 환경이라면 소규모 파일럿 테스트만으로도 치명적인 설계 오류를 출시 전에 잡을 수 있다는 의미입니다. 마이크로 인터랙션을 세밀하게 다듬기 전에 이 정적 UI의 시각 위계가 먼저 제대로 작동하는지 확인하는 것, 그게 우선순위라고 생각합니다.
게슈탈트 원리는 UI 디자인의 타이포그래피처럼 기본 소양에 해당합니다. 이걸 놓친 상태에서 애니메이션이나 인터랙션을 고도화해봐야 사용성 평가에서 감점부터 받습니다. 간격 하나, 색 하나가 사용자의 인지 흐름을 결정한다는 걸 직접 데이터로 확인하고 나면, 설계의 기준이 달라집니다. 다음 프로젝트에서 간격 설정을 시작하는 순간, 먼저 그룹 내와 그룹 간을 분리해서 생각해보시길 권합니다.