오른손잡이의 왼손으로 그림그리기

여백 : Whitespace

by 마크 볼튼(Mark Boulton)

저는 맨체스터의 작은 인쇄물 디자인 에이전시에서 처음으로 디자인 분야의 일을 시작했습니다. 이 에이전시는 패키지, 출판, 홍보물 및 전단지까지 다양한 분야의 디자인 작업을 행하는 곳이었죠. 저는 대학 때 배웠던 그래픽 디자인의 원리들이 실제 전단지를 디자인 할 때는 그다지 쓰이질 않는다는 걸 곧 깨달았습니다. 크고 두껍게 그리고 전단지를 빈틈 없이 가득 채우는 일은 매우 흔한 일이었죠. 아마 전 "여백(whitespace)은 공백(empty space)이다"라고 했던 한 고객의 말을 잊을 수 없을 겁니다.

제가 맡았던 고객은 전단지에서 제품의 패키지가 저렴해 보였으면 했습니다. 왜냐면 실제로 저가의 제품들이었기 때문입니다. 하지만 그 외의 나머지에 대해서는 제 고객도 어떻게 해야 좋을지를 알지 못했죠.

여백의 정의

"여백(whitespace)" 또는 "부정적 공간(negative space)"란 구성 요소들 간의 공간을 말합니다. 좀 더 세분화해서 구성 요소들 중 주요한 요소들 간의 공간을 '매크로 공간(macro space)'이라 하고, 작은 단위의 항목들 간이나, 이미지와 캡션 간, 또는 단어와 글자 간과 같은 세부적인 요소들 간의 공간은 '마이크로 공간(micro space)'이라 합니다.

 

그렇다면 여백은 실제로 무엇을 할 수 있을까요?

마이크로 여백과 가독성

두 달여 전쯤, 저는 한 강의에서 에릭 슈피커만(Erik Spiekermann)을 만날 기회가 있었습니다. 그의 강연 중 일부분은 그가 했던 The Economist 신문의 재디자인(redesign)에 관한 내용이었는데, 듣는 청중들이 스스로가 만든 디자인들이 얼마나 읽기 어렵게 만들었던가는 깨닫게 해주는 강연이었습니다.

신문 디자인에서는 정보들이 매우 빽빽합니다. 가끔 웹 디자인에서도 다루고 있는 콘텐츠의 특성상 여백을 추가하기가 매우 어려운 경우가 있습니다. 신문에서는 이 점 때문에 본문의 서체를 얇은 서체를 사용해서 글자 주변에 여백을 많이 확보하고는 합니다. 이것이 슈피커만이 The Economist 신문을 재디자인하면서 사용했던 방법이죠.

슈피커만은 원래 서체의 형태를 약간 바꿔서 개별 글자에 여백을 추가하면서도, 기존 Economist 서체가 가지고 있던 구불구불한 느낌은 남겨두었습니다. 그 후 글자들을 아주 약간 더 작게 하면서 동시에 행간을 조금 더 주었습니다. 이런 변경을 통해 본문 디자인에 매크로 여백을 추가 할 수 있었습니다. 전체 결과물은 언뜻 보기에는 큰 차이가 없어 보입니다. 하지만 내용들은 보다 읽기 편해졌고, 여전히 같은 양의 내용을 전달하면서도 신문이 주는 전체적인 느낌은 이전보다 훨씬 가벼워졌습니다.

슈피커만은 The Economist지에 매크로 여백과 색깔을 더했을 뿐이지만, 이런 작은 변화들을 통한 그의 성공적인 작업은 디자인의 효용성에 큰 영향을 줄 수 있었습니다. 그리고 물론 이 점은 웹에서 이뤄지는 디자인에도 적용할 수 있는 부분들입니다.

브랜드 포지셔닝 (Brand positioning)

디자이너들은 고급 브랜드의 세련되고 우아한 느낌을 만들어 내기 위해 여백을 사용합니다. 타이포그래피와 포토그래피를 감각 있게 사용하고 여백을 아주 넉넉하게 사용하는 것은 명품 시장에서 흔히 볼 수 있는 디자인 경향입니다. 예를 들어, 화장품의 경우 그들의 판매 촉진용 매체(포스터나 브로셔 등등)에서 여백을 아주 많이 사용함을 통해 소비자에게 그들이 세련되고, 고급이며 보통은 매우 비싸다는 것을 알리곤 합니다.

앞에서 언급한 전단지 제작을 의뢰한 고객은 그의 특정 제품들에 대해 여백에 대한 옮은 기준을 가지고 있었습니다. 왜냐면 전단지는 저가형 시장에서 배포 될 목적을 가지고 있었고, 이런 용도의 전단지 디자인에 여백을 충분히 준다는 것은 그의 디자인에 불필요한 의미(고품질이라는…)를 넣는 것이기 때문입니다. 다음의 예를 보시죠.

두 디자인에 들어간 내용, 요소, 사진들은 모두 똑같습니다. 하지만 두 디자인은 브랜드 스펙트럼의 아주 상반된 곳에 포지셔닝을 하고 있습니다. 여백이 없을수록 싼 쪽에… 여백이 많을수록 비싼 쪽에 말이죠.

여백 말고도 브랜드 포지셔닝에 영향을 주는 많은 요소들이 있습니다. 하지만 충분한 여백이 브랜드를 고급화 할 것이라는 점을 고객에게(그리고 타깃 소비층에게) 잘 전달하고 나면 그 제품은 분명 경쟁 제품들과 함께 성공적으로 시장에 진입할 수 있을 것 입니다.

능동적 여백과 수동적 여백 (Active and passive whitespace)

여백은 레이아웃을 조화롭고 균형 있게 만들기 위해 자주 사용됩니다. 즉, 여백은 사진 작가들이 프레임의 중심으로부터 대상물을 떨어지게 촬영하는 것과 같은 원리로 콘텐츠를 살펴보는 사용자(독자)들의 흐름을 유도하는 것이지요. 이렇게 여백이 글을 읽는 사람들을 한 요소에서 다른 요소로 이끄는 역할을 할 때 이것을 "능동적 여백(active whitespace)"라고 합니다.

능동적 여백을 적용하기 전에 다음의 예를 한 번 보겠습니다.

Figure 4. 여백이 추가되기 전의 텍스트

전체적으로 다소 답답함을 느낄 수 있습니다. 우리는 여기에 여백을 추가해서 디자인적인 조화와 함께 시각적 편안함을 만들어내야 할 것 같습니다. 우선 저는 마진(margin)을 추가하고, 서체군(font family)과 서체의 두께(weight)를 변경하고, 행간(leading - CSS에서는 line-height가 되겠죠)를 더 벌렸습니다. 이것은 모두 "수동적 여백(passive whitespace)"입니다.

Figure 5. 수동적 여백이 추가된 텍스트

일부 사람들은 수동적 여백은 디자인의 구성상에서 그다지 고려할 필요 없는 공간이라고 말하기도 합니다. 하지만 전 동의하지 않습니다. 만약 모든 여백들에 대한 고려가 없다면, 그건 분명 나쁜 디자인입니다. 수동적 여백은 콘텐츠에 여유로움과 조화를 부여하기 때문입니다. 따라서 매우 중요한 것이죠.

아직 끝나지 않았습니다. 이 콘텐츠 내에는 독자들의 시선을 좀 더 끌어주길 바라는 부분이 있었습니다. 바로 두 번째 인용문이었죠. 저는 이 요소에 다른 색을 입히거나 글자 크기를 더 키우거나 할 수 있었습니다. 하지만 이 예에서는 사용자의 시선을 끌기 위해 요소 주변에 단순히 매크로 여백만을 추가하였습니다. 그런 후 글자를 굵게(bold)처리하여 마이크로 여백을 줄여줬습니다.

Figure 6. 능동적 여백이 추가되고 난 후의 모습

이것이 능동적 여백입니다. 전체 구성에 여백이 추가되어 강조, 구조화, 정보 전달의 효과가 더욱 좋아졌습니다.

연습, 연습 그리고 연습

오직 연습만이 여백이 가진 본연의 개념을 붙잡는 유일한 방법입니다. 조각가가 단순한 드릴 사용 기법을 익히는데 많은 시간을 투자하듯, 그래픽 디자이너도 많은 연습이 필요합니다. 그래픽 디자인을 전공하는 학생들은 보통 십여 년 가까이 구성에 대한 연습을 하고, 일부 디자인 영역에서의 이런 과정들은 지난 수년간 문서화가 진행되어 왔습니다. 우리에겐 참 다행인 일이죠. 에밀 루더(Emil Ruder)는 제가 좋아하는 사람중의 하나입니다.

루더는 1970년에 세상을 떠난 스위스의 타이포그래퍼의 한 명입니다. 21년간 타이포그래피를 가르친 후, 그는 Typography: A Design Manual라는 책을 냈습니다. 그곳에서 그는 이렇게 말했죠.

이 책에서는 순수 타이포그래피를 정확한 측정 체계보다는 사전에 미리 만들어진 글자들을 가지고 내용을 전달합니다. 이는 매우 제한적인 내용을 전달하게 되겠지만, 타이포그래피의 법칙을 분명하게 하기 위함이며, 타이포그래피와 그래픽 디자인 간에 공통적으로 보이는 확실한 특징들에도 불구하고 이렇게 하는 이유는 그들 간의 차이점은 얼마나 더 자유로운가와 복잡한가를 말해주기 위함입니다.

루더는 타이포그래피와 활자를 디자인 할 때 고려해야 할 세세한 부분에 초점을 맞추어 아주 흑백이 뚜렷하게 내용을 말하고 있습니다. 구성의 기본적인 원리를 가르치는 것으로부터 시작해서 어떤 것이 옳고, 어떤 것이 그른가를 여러분에게 알려주고 있죠. 이 책은 여백과 구성에 대한 너무나 훌륭한 예제들이 가득합니다. 물론 책 값은 좀 비싸지만… 비싼 값을 하는 책입니다.

이렇게 콘텐츠 구성에서의 내부, 외부 그리고 주변의 여백을 디자인하고 조절하는 방법을 알게 되면, 사용자(독자)들이 편리하게 글을 읽을 수 있도록 해 줄 수 있으며, 보다 적절한 위치에 제품을 위치 시킬 수 있고, 더 나아가 여러분의 콘텐츠를 보다 두드러져 보이게 할 수 있을 겁니다.

일러스트레이션: 케빈 코넬(Kevin Cornell)

저자에 대하여

마크 볼튼(Mark Boulton)은 영국의 그래픽 디자이너이자 작가이며, 초보 분재 재배가 입니다. 그는 Mark Boulton Design이라는 작은 디자인 스튜디오를 운영하고 있으며, 그의 블로그에서는 전통적인 그래픽 디자인 이론에 대한 내용들을 만나실 수 있습니다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.