좋은 UI는 여백에서 완성된다
결과물이 어색하다면, 원인은 간격일 수 있습니다.
사실 간격 시스템 자체는 흥미로운 개념이 아닙니다. 그저 몇 개의 숫자를 정해 놓은 규칙에 불과합니다. 하지만 그 단순한 규칙은 프로젝트를 진행하며 수백 번 반복되는 ‘몇 px가 적당할까?’라는 고민을 단 한 번의 결정으로 바꿔줍니다.
좋은 디자인 시스템의 목적은 디자이너가 매번 더 좋은 판단을 내리게 만드는 것이 아닙니다. 애초에 잘못된 판단을 내릴 기회를 줄이는 것입니다. 어설픈 인터페이스를 하나 띄워놓고 색상이나 폰트는 잠시 잊어보세요. 오직 간격만 바라보는 것입니다. 제목과 본문 사이의 거리, 카드와 카드 사이의 공간, 버튼 내부의 여백까지 화면을 이루는 모든 간격을 살펴보세요.
열에 아홉은 바로 그 지점에서 문제가 발견됩니다. 문제는 팔레트나 서체가 아니라 간격에 있습니다. 처음부터 명확한 기준 없이 요소를 배치할 때마다 눈대중으로 조정하다 보니 화면 속 간격들이 서로 아무런 관계를 갖지 못하게 된 것입니다.
흥미로운 점은 비주얼 디자인에서 가장 자주 간과되는 요소 역시 간격이라는 사실입니다. 색상처럼 한눈에 눈에 띄지 않기 때문입니다. 아무도 레이아웃을 스크린샷으로 찍어두고 “이 간격 좀 봐”라고 말하지는 않습니다. 하지만 실제로는 화면 안에서 다른 어떤 요소보다 사용성을 좌우하는 것이 간격입니다. 간격 뒤에 숨어 있는 시스템만 이해해도 가장 적은 비용과 가장 짧은 시간으로 화면의 완성도를 크게 끌어올릴 수 있습니다.