UI 디자인에 여백을 활용하는 8가지 팁

본 콘텐츠는 위시켓이 선정해 번역한 해외 콘텐츠입니다. 디지털 매체 미디엄(Medium)을 통해 UX Collective에서 발표한 글입니다. 작가인 Yuan Qing Lim은 디자인 툴, UI 엔지니어링, JavaScript, Figma에 대한 글을 쓰고 있으며, Shopify의 디자인을 맡고 있습니다. 본문은 UI 디자인에 여백을 활용하는 8가지 팁을 소개하고 있습니다. 괜찮은 팁은 바로 적용해보아도 좋겠죠?

훌륭한 UI 디자인이라는 것은 수많은 디자인 요소들부터 페이지 전체에 이르기까지, 그리고 아주 작은 부분에서부터 커다란 부분에 이르기까지 인터페이스의 모든 부분에서 여백을 신중하게 잘 활용하는 것입니다. 여백을 잘 활용하면 조화롭고 읽기 쉬우며, 무엇보다도 사용하기 쉽고 편리한 인터페이스가 만들어지게 됩니다.

1. 근접성의 법칙(Law of Proximity)을 따른다.

UI에서는 각 구성요소들이 서로 얼마나 여백을 두고 있는지에 따라서, 각각의 요소들이 서로 어떤 관계에 있는지 나타납니다. 이를 근접성의 법칙이라고 하는데, 이는 다음과 같이 요약할 수 있습니다.

1. 연관성이 있는 요소들은 서로 가까이 있어야 한다. 반대로, 관련이 없는 요소들은 충분히 멀리 떨어져 있어야 한다.
2. 동일한 “유형”을 가진 요소들은 같은 간격을 두고 배치되어 있어야 한다.

이런 기본적인 원칙들을 잘 따른다면, 사용자들이 UI의 전체적인 구조와 체계를 쉽게 받아들일 수 있습니다.

2. 여백을 넉넉하게 주는 것부터 시작한다.

디자인이 숨을 쉴 수 있게 해야 합니다. 인터페이스를 사용하기 쉽게 만드는 가장 좋은 방법은 각각의 요소들 사이에 충분한 여백을 주는 것입니다.

물론 예외도 있기는 합니다. (이에 대해서는 마지막 팁을 보시기 바랍니다.) 하지만 대부분의 UI에서는 일반적으로 여백을 충분하게 주는 것이 너무 적은 것보다는 훨씬 더 좋습니다.

3. 여백을 활용해서 디자인의 특정한 요소를 주목하게 만든다.

페이지 내에 정보의 양을 줄이고 디자인적인 요소들도 적게 사용하면 명확성과 집중력을 높이는데 도움이 됩니다. 따라서 해당 페이지의 정보와 디자인적인 요소들에 대해서 더욱 집중하게 만들 수 있습니다.

여백은 또한 텍스트를 강조하기 위한 효과적인 방법이 될 수도 있습니다. 즉, 여백은 텍스트와 조합해서 사용될 수 있는데, 텍스트의 크기를 키우거나, 텍스트의 색상, 대/소문자, 두께 등을 변경할 때 여백을 함께 활용하면 좋습니다. 그리고 때로는 텍스트를 대체할 수도 있습니다.

·

·

·

실제 예를 들어 보자면, 여백으로 둘러싸인 이 문장에 시선이 쏠린다는 것을 알 수 있습니다.

·

·

·

사람들의 시선을 끌 수 있는 방법은 구성요소의 크기를 키우거나 밝게 만드는 것만 있는 것이 아닙니다. 모든 것들이 크고 밝아서 전부 중요하게 보인다면, 실제로는 아무것도 중요해 보이지 않을 것입니다.

4. 거리를 설정할 때에는 디자인 단계와 실제 구현 단계에서 모두 동일한 기준을 사용한다.

서로 인접한 요소들 사이의 거리를 측정하는 방법은 다음과 같은 두 가지 중 하나입니다.

“테두리 상자(bounding box)” 사이의 거리를 측정한다.

이 방식은 웹페이지에 대한 문서 객체모델(Document Object Model)과 같은 대부분의 UI 렌더링 엔진(rendering engine, 웹 페이지의 정보를 시각적인 표현으로 변환해주는 기능)에서 거리를 측정하는 방법입니다. 하지만 이 방법으로 측정된 수치는 정확한 값은 아닌데, 각각의 테두리 상자의 위쪽과 아래쪽에 “계산에 포함되지 않은” 여분의 공간이 존재하기 때문입니다.

대문자의 높낮이로 거리를 측정한다.

이 방법이 좀 더 정확하기는 하지만, 실제 구현하기는 상당히 어려울 수 있습니다.

두 가지 방식 모두 나름의 장점이 있기는 하지만, 각자 절충해야 하는 부분들도 있습니다. 여기에서 중요한 것은 각 요소들 사이의 거리를 설정할 때는 디자인 단계와 구현 단계에서 모두 동일한 기준을 사용해야 한다는 것입니다. 그렇게 해야만 여러분이 디자인 한 것이 정확하게 코드로 변환될 수 있습니다.

5. 띄어쓰기 시스템을 활용한다.

띄어쓰기 시스템이란 디자인에서 사용할 수 있는 다양한 간격을 지정해 두고, 상황에 맞게 활용하는 것을 말합니다. 이러한 띄어쓰기 시스템을 잘 활용하면, UI를 일관성 있고 조화롭게 보이게 만드는 데 도움이 됩니다.

컬러 팔레트(color palette, 색상표)에서 색상을 선택하는 것처럼, 띄어쓰기 시스템으로 여백을 지정하게 됩니다. 컬러 팔레트를 이용하는 것과 마찬가지로, 띄어쓰기 시스템을 활용하면 일정한 규칙을 가진 범위 내에서만 선택을 하게 됩니다. 이러한 띄어쓰기 시스템을 갖추어 놓으면, UI 디자인을 하는 과정에서 몇 가지의 선택권 내에서만 결정을 내리면 됩니다. 이렇게 함으로써 반복적인 작업들을 좀 더 빠르고 체계적으로 수행할 수 있습니다.

6. 간격을 설정할 때는 비슷한 값을 사용하면 안 됩니다.

숫자로는 다르지만 눈으로 보기에는 별 차이가 없는 값을 사용하면, 사용자가 그런 요소들 사이의 논리적 체계를 파악하기가 어려워질 수 있습니다. 서로 다른 것은 차이가 나타나야 합니다. 만약 두 개의 간격이 서로 다른 것을 의미한다면, 그 둘 사이에 서로 충분히 차이가 나는 값을 설정해서 실제로 눈에 확실하게 구분되도록 해야 합니다.

띄어쓰기 시스템을 만들 때는 여러 간격 수치들이 서로 분명하게 시각적으로 구분될 수 있도록 충분히 “넓은” 차이를 갖고 있어야 합니다.

위의 이미지는 간격의 값이 작은 것에서부터 커질수록 그 차이가 확연히 넓어지게 만든 하나의 예시입니다.

7. 텍스트의 크기를 늘릴 때는 라인 높이(line height)를 줄인다.

라인 높이를 일정한 비율로 유지하면서 텍스트의 크기를 늘리면 각각의 텍스트 라인 사이의 여백이 너무 커지지 않게 만들 수 있습니다. 텍스트의 크기에 따라서 다르긴 하지만, 일반적으로 제목의 라인 높이는 본문 텍스트의 라인 높이보다는 더 적게 설정해야 합니다.

8. 정보의 양이 많은 UI에서는, 여러 요소들 사이의 관계를 분명하게 전달하기 위해서 여백 이외의 다른 테크닉을 활용한다.

• 관련된 요소들의 주위에 은근하게 색상 채우기를 하거나 경계선을 추가한다.
• 여러 요소들이 세로로 가까이 붙어 있는 경우에는, 구분선을 활용한다. 또는 가로로 배열되어 있는 요소들이라면, 그 사이에 점(·)을 찍어서 구분하는 방법도 있다.
• UI 요소들 사이의 연관성이나 차별성을 보여주려면 텍스트의 크기, 대/소문자, 두께, 색상을 변경하는 것도 한 가지 방법이다.

인터페이스에 정보의 양이 많아지면, 사용성의 측면에서는 효과가 더욱 좋을 수도 있습니다. 정보의 양이 많다고 해서 그런 인터페이스가 반드시 어수선하거나 산만하다고 느낄 필요는 없습니다.

마지막으로 여백을 효과적으로 배울 수 있는 방법은 “걸작을 모방하는 것”입니다. (사실, 이것은 UI 디자인에서 일반적으로 활용할 수 있는 방법입니다.) 여러분이 아주 마음에 드는 인터페이스를 가진 앱이나 웹사이트를 발견했다면, 그중 한 두 개를 골라서 그것을 아예 처음부터 똑같이 따라서 만들어 보세요. 그 과정에서 여러분은 그 작품의 디자인과 관련하여 작지만 수많은 결정들이 내려져 있다는 것을 알게 될 것입니다. 그리고 흥미로운 패턴도 발견하게 될 것이며, 위에서 설명한 팁들이 실제로 그런 뛰어난 UI에 어떻게 적용되어 있는지도 파악할 수 있을 것입니다.

어떤 인터페이스가 “좋아 보이는” 데에는 몇 가지 이유들이 있습니다. 수많은 경험과 훈련을 통해서, 여러분은 자신의 디자인에서 여백을 어떻게 활용하는지에 대해 자신만의 시각적인 감각과 직관을 기를 수 있습니다. 그러면 사용자들도 여러분에게 고마움을 느끼게 될 것입니다.

> 이 글은 'Applying white space in UI design'을 각색하여 작성되었습니다.