※ 잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다. 현재 8만 이상의 디자인 업체, 디자인 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다.
프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오, 예상기간을 한 번에 비교해보세요:)
잘 설계한 디자인은 잘 내놓은 디저트와 같습니다. 둘 다 번듯하고, 둘 다 손이 많이 갑니다. 달콤한 사탕, 바삭한 스콘, 그리고 시큼한 시럽이 버튼, 카드, 그리고 CTA로 바뀐 것일 뿐입니다.
아무리 맛있는 디저트라도 해괴하면 안 되고, 아무리 아름다운 것이라도 맛이 써서는 안 됩니다. 심미적이면서 기능적인 디자인, 잘 만든 디자인은 그런 것입니다. 디저트와 다를 것 없이, 한 가지만 지키면 그 두 조건을 모두 충족할 수 있습니다. 각 요소를 적절하게 구분해서 조화로이 만드는 일이 그것입니다.
그런데 왜 그래야만 할까요? 왜 확실하게 나누고, 구분 짓고, 분리하는 것을 디자인의 완성이라고 여기는 걸까요? 절도 있게 구분된 요소가 모여 만들어진 디자인이 왜 훌륭한지, 그 이유가 디자인 티타임의 세 번째 이야기입니다.
커팅식의 우아한 순간
구분된 상태와 조각난 상태에는 무슨 차이가 있을까요? 같은 책이라도 이리저리 내던져진 모습과 책장에 가지런히 꽂힌 모습은 다른 것처럼, 요소의 구분에는 일정한 규칙이 필요합니다.
인터랙션 디자인에서 이런 규칙의 존재는 단순히 정돈된 모습의 디자인을 만들기 위함이 아닙니다. 각 요소는 개별적으로 보면 역할이 작아보일지 모릅니다. 내비게이션의 링크는 어느 폼에 연결되고, 파란 버튼은 어느 모달에 연결되고, 어떤 입력값은 어느 토스트와 연결됩니다.
많은 콘텐츠, 다양한 경험을 디자인에 녹여낼수록 디자인은 커지고 복잡해집니다. 그런 디자인은 디자이너를 지치게 만듭니다. 그런 디자인을 경험하는 사용자도 마찬가지입니다. 구분된 요소는 그 복잡한 연결고리를 일정한 모습으로 통일시킵니다. 그렇게 형태를 학습하는 수고는 덜고, 본질적인 콘텐츠를 받아들이는데 집중할 수 있습니다.
가장 단순하면서, 가시적인 구분은 개행이라고 볼 수 있습니다. 장문 콘텐츠에서 서로 다른 주제를 가지고 있는 문단끼리 구분하여 독자의 집중을 갱신하고 가독성을 높여줍니다. 모든 사용자는 글 앞에서 산만해집니다. 기승전결이 완벽하고 구조적으로나 의미상으로나 뛰어나도 사용자는 읽지 않습니다. 쓱쓱 지나갈 뿐입니다. 디자이너의 의도는 흔히 무시됩니다. 모든 독자에게 매번 같은 가치, 의미가 전달되는 것은 어려운 일입니다.
닐슨노먼그룹의 시선 추적 실험결과에 따르면 구분된 한 문단 내에 있는 글은 그 위치에 따라 명백한 차이를 가집니다. 노출률(해당 문장을 직시한 독자의 비율, 원문 : Users who looked at the paragraph)이 확연하게 달라집니다.
- 첫 번째 줄 : 81%
- 두 번째 줄 : 71%
- 세 번째 줄 : 63%
- 네 번째 줄 : 32%
3줄 요약의 훌륭한 근거인 이 실험결과를 보면 알 수 있듯 콘텐츠의 구분은 사용자의 주의력에 강한 영향을 미칩니다. 사용자의 주의력이 요구되는 콘텐츠라면 적절한 구분은 큰 도움이 될 수 있습니다. 결국 콘텐츠의 구분은 철저하게 계산해서 의도된 바를 표현할 때 제대로 된 효과를 발휘한다는 겁니다.
짧지도 굵지도 않은 구분선
구분이 얼마나 중요한지는 알겠습니다. 이제 구현을 해야 할 때입니다. 이를 위한 도구는 크게 두 가지가 있습니다. 일단 구분선(Divider)에 대해 알아봅시다.
구분선은 굉장히 오래된 요소입니다. 경계의 개념이 투사된 원시적인 모습의 요소입니다. 현실에서 다양한 모습을 가지고 있던 그것은 인터랙션 디자인에서 가장 단순한 형태로 남게 되었습니다. 길고 얇은 선의 형태가 그것입니다. 구분선은 콘텐츠와 콘텐츠, 요소와 요소 사이에 위치해서 그 둘을 분리합니다. 앞서 언급한 텍스트와 같이 경계가 모호한 요소 사이에서 경계선의 역할을 맡는 방식으로 작동합니다.
가시적인 여타 요소처럼 구분선 역시 형태가 존재하기 때문에 그 변형이 분명하다는 특징이 있습니다. 옅은 색상의 것이 있을 수 있고, 반대로 진한 색상의 것이 있을 수 있습니다. 어느 정도 제한 내에서 브랜드에 맞춰 변형할 수 있다는 의미입니다. 유아용품을 판매하는 쇼핑몰로 예시를 든다면, 제품 설명 그룹과 평점 그룹 사이에 짧은 점선 형태의 구분선을 삽입해서 아기자기한 바느질 느낌을 줄 수 있을 겁니다. 세세한 부분까지 브랜드의 이미지에 종속시켜 브랜드와 좀 더 가까운 디자인을 제작할 수 있는 것입니다.
그저 다른 요소에 작용해서 그들의 심미성과 기능성에 도움을 수동적인 요소로 남는 것이 아니라, 자신의 심미성과 기능성을 개선하는 능동적인 요소로서 배치되는 겁니다. 발전적인 방향으로의 사용이라고 생각할 수 있습니다.
유령 같은 공백
공백은 수동적인 배경이 아닌 능동적인 요소이다.
- 얀 치홀트
구분을 위한 또 다른 도구로는 공백(White Space)이 있습니다. 난해한 요소라고 생각하실지도 모르겠습니다. 공백의 특성부터가 그렇습니다. 형태가 없고 보이지도 않습니다. 그렇기 때문에 여느 요소가 가질 만한 당연한 성질, 좌우 및 중앙 정렬이 가능하다든지, 색상을 입힌다든지, 하는 것들을 지니지 않습니다.
그러나 공백은 없는 걸 찾기가 더 어렵습니다. 적어도 제대로 된 인터랙션 디자인이라면 말입니다. 공백을 푸짐하게 사용한 대표적인 사례는 랜딩 페이지입니다. 헤드카피와 히어로 이미지로 이뤄진 간단한 구조의 랜딩 페이지가 최근 많은 서비스에서 활용되고 있습니다. 카피의 정렬, CTA의 유무, 이미지의 내용은 중요하지 않습니다.
사방에서 카피를 감싸고 있는 공백이 어떤 역할을 하는지를 상상해보시기 바랍니다. 카피와 이미지의 분리만을 수행하고 있는 것이 아니라 카피를 강조하고 있습니다. 공백의 본질은 부재입니다. 어떤 콘텐츠도 요소도 공백 안으로 들어올 수는 없습니다. 그리고 이 부재가 상대하고 있는 요소를 주의력 있게 부각시킵니다. 마치 흰 셔츠에 작고 검은 얼룩 하나가 눈에 잘 띄는 것처럼 말입니다.
이러한 공백의 특징은 텍스트 콘텐츠 내에서 좀 다르게 작용합니다. 대부분의 텍스트 콘텐츠는 가로로 읽히는 문장 요소가 위에서 아래로 쌓여가며 구성됩니다. 여기서 공백은 가로로 놓이게 됩니다. 세로로 진행되던 텍스트 콘텐츠를 끊는 것입니다. 이렇게 해서 사용자는 텍스트를 길게 이어지는 몇 개의 개체로 보는 것이 아니라 공백을 중심으로 각기 다른 위상을 가지는 블록 형태로 인식하게 됩니다. 블록을 따로따로 들여다봄으로써 콘텐츠 전달은 훨씬 수월해집니다. 복수의 주제가 혼재되어있더라도 구분을 통해 문제 없이 소통할 수 있습니다.
구분선 VS 공백
이제 정리해봅시다. 구분선은 다음과 같은 특징을 가지고 있습니다 :
- 가시적
- 다양한 변형이 있지만 원형은 확정형
- 정렬 등의 뱡향성을 띠는 조작 가능
그리고 공백은 이렇습니다 :
- 비가시적
- 변형이라고 할 수 있는 것은 공간의 크기 뿐으로, 부정형
- 뱡향성을 띠는 조작 불가능
나열해 놓고 보면 공백은 분명 부자유스러운 성격을 지니고 있지만, 역설적으로 이런 성격 때문에 공백은 어디에서나 자유롭게 사용할 수 있습니다. 다른 요소가 쫓아올 수 없는 정도의 가벼움을 자랑하기 때문입니다.
이는 위에서부터 줄곧 비교의 기준이 되었던 텍스트 안에서 더욱 두드러집니다. 자리를 차지하는 건 두 요소 모두 마찬가지이지만, 그 공간의 활용은 판이합니다. 아무리 얇은 구분선도 결국에는 보입니다. 의도와는 별개로 어쩔 수 없이 시각적 긴장이 형성됩니다. 이를 자연스럽게 처리하는 건 다른 문제가 되겠지만, 이 본질적인 사실은 변하지 않습니다.
그에 비해 공백은 편합니다. 고려할 건 적절한 거리뿐입니다. 아무리 많아도 열 번의 시도 안에는 적정거리를 파악할 수 있을 겁니다.
성공적인 밀당을 기원하며
대부분의 경우에 구분선은 차선책이고 공백은 최선책입니다. 불필요한 밀집을 막고 자연스러운 디자인의 조화를 유도하면서 그 범용성을 증명하고 있습니다.
하지만 마냥 공백만이 좋았다면 구분선이 남아있을 까닭이 없죠. 구분선도 두각을 나타내는 부분이 있습니다. 공백보다 구분이 명확하다는 점입니다. 시각적 긴장을 동반하는 것이기에 가능하면 공백을 사용하지만, 가끔 최선책이 힘들 때가 있습니다. 가령 모바일 화면이나 모달처럼 작은 캔버스만이 주어진 경우나, 상단 내비게이션 바처럼 항시 존재하면서 다른 요소를 가릴 수도 있는 요소 같은 경우 말입니다.
최선책이 힘들 때 차선책이 쓰이는 법입니다. 공백은 그 크기로 구분의 역할을 수행하는 도구입니다. 좁아터진 공간에서는 무작정 스크롤을 믿을 것이 아니라 구분선 도입을 따져봐야 합니다.
잘 설계한 디자인은 잘 내놓은 디저트와 같습니다. 둘 다 번듯하고, 둘 다 손이 많이 갑니다. 손이 닿지 않은 곳에 있다면 소용이 없는 사실 역시 상통합니다. 아무리 예쁜 색상, 멋진 내용을 담아도 전달되지 않으면 무의미합니다. 그런 맥락에서 구분선과 공백의 가치는 매우 큽니다. 그저 콘텐츠와 요소를 나누는 게 전부가 아닙니다.
손에 닿는 디자인을 설계하는 건 손쉽지만은 않습니다. 그러니 고민해봅시다. 구분선과 공백의 커팅식부터.
원문: 위시켓 블로그
참고자료
- Jakob Nielsen – 「Website Reading: It (Sometimes) Does Happen」
- Nick Babich – 「The Power of Whitespace」
이 필자의 다른 글 읽기
