UI 디자인에서 타이포그래피를 위한 4가지 팁
포스팅한 지 좀 된 글이지만, 미디움에서 브런치로 옮겨와보았습니다 :0
이 글은 InVision팀이 미디움에 기고한 ‘4 tips on typography in UI design’ 을 번역한 글입니다.
원문은 링크에서 확인하실 수 있습니다.
커뮤니케이션은 디자인에 있어서 중요한 역할을 한다. 웹디자인, 모바일 앱 혹은 웨어러블 UI 등 어떤 것을 디자인하더라도, 창작물은 명확하게 그 의도와 목적을 전달해야 한다. 커뮤니케이션에 있어서 텍스트는 매우 중요한 역할을 하기 때문에, 디자이너는 타이포그래피에 대한 단단한 이해가 필요하다.
물론, UI를 디자인하는 것은 ebook이나 블로그 테마를 디자인하는 것과는 다르다. 그러나 글자 중심이라는 원칙은 똑같이 적용된다. 결국, 화면에서의 커뮤니케이션은 텍스트를 통해 일어나고, 글꼴은 언어의 UI인 셈이다.
Oliver Reichenstein는 그의 주요 에세이에서 “ 웹디자인의 95%는 타이포그래피”라고 말했다.
타이포그래피를 최적화하는 것은 가독성, 접근성, 사용성뿐만 아니라 전반적인 그래픽 발란스를 맞추는 것이다.
즉, 타이포그래피를 최적화시키는 것은 곧 당신의 UI를 최적화시키는 것이라 할 수 있다. 이를 위한 4가지 팁과, 더불어 서체를 잘 활용한 3가지 예시에 대해서도 소개하려 한다.
UI에서 타입 세팅을 위한 4가지 팁들
타이포그래피 거장 로버트 브링 허스트는 그의 대표작, 타이포그래피 스타일의 요소 (The Elements of Typographic Style)에서 다음과 같이 말한다.
타이포그래피는 콘텐츠를 존중하기 위해 존재한다.
모든 인터페이스는 사용자가 직접 결정하고 선택할 수 있는 요소가 있다. 타이포그래피는 사용자가 인지 부하를 일으키지 않는 선에서 콘텐츠를 보여주고, 사용자의 의사결정 과정을 도와주어야 한다. 위대한 타이포그래피는 독자를 콘텐츠로 이끄는 것이지, 서체 그 자체에 집중하게 하면 안 된다.
1. 다양한 사이즈에 대응할 수 있는 서체를 고르자
대부분의 UI는 다양한 크기의 텍스트 요소로 이루어져 있다(버튼 카피, 필드 라벨, 섹션 해더 등등). 모든 크기에서 가독성과 사용성을 유지할 수 있도록, 다양한 크기와 웨이트에서도 잘 읽힐 수 있는 서체를 골라야 한다.
예시 : Avenir, Univers, Lato
Avenir가 사용된 예시2. 활자끼리 쉽게 구분될 수 있는 서체를 고르자
많은 서체들은 비슷한 글자 형태끼리 헷갈리기 쉽다. 예를 들어 대문자 ‘I’와 소문자 ‘L’은 매우 비슷해 보인다. 또, 소문자 ‘r’과 ’n’이 함께 쓰였을 때는 소문자 ’m’으로 보이기 쉽다. 그러므로 이러한 글자 형태의 구분이 확실한 서체를 골라 사용자들에게 의미를 명확하게 전달해야 한다.
예시 : Clear Sans VS Lato (대문자’I’와 소문자 ‘L’을 보라)3. 텍스트를 UI로 생각하자
‘ 좋은 디자이너는 텍스트를 콘텐츠로 생각하지만,
위대한 디자이너는 텍스트를 UI로 다룬다.’
미국의 디자이너 카메론 몰이 거의 10년 동안 해왔던 말이다. 장황하게 들리겠지만, 이것은 인터페이스를 디자인할 때 정말 맞는 말이다. 텍스트가 어떠한 기능적인 역할을 할 때, 그것은 UI가 된다. 모든 UI 디자인은 텍스트와 관련이 있다. 만약 납득이 가지 않는다면, ‘미세요’라고 적힌 당기는 문 손잡이를 보았을 때 느끼는 혼란에 대해 생각해보면 된다.
4. 사용자의 진정한 목적을 생각하자 (Job to be done)
JTBD란 사용자의 진정한 니즈를 위한 디자인 관점이다. 사용자가 문제를 해결하는 과정을 어떻게 디자인적으로 도와줄 수 있는지 계속 질문을 던져야 한다. 이 질문에 대한 답은 당신의 UI에 반영되어야 한다. 타이포그래피도 포함해서 말이다.
팀 브라운은 이렇게 말했다.
서로 다른 서체들은 다른 역할을 한다.
Instapaper는 사용자의 진정한 목적과 그에 맞는 서체를 잘 조합하여 좋은 작업물을 만들어냈다.
Instapaper의 웹과 모바일앱은 크게 두 가지 기능으로 나눌 수 있는데,
1. 사람들이 웹 콘텐츠를 저장하고
2. 후에 그것을 읽을 수 있도록 하는 것이다.
Instapaper의 UI는 대부분 텍스트 기반이고 읽는 것에 초점이 맞춰져 있기 때문에, 디자이너들은 두 가지의 다른 서체를 선택했다.
: 콘텐츠를 위한 텍스트는 세리프 서체인 Lyon과 디스플레이에 적합한 웨이트를, 그리고 UI에서는 산세리프 서체인 JAF Bernino Sans를 사용한 것이다. 이는 사용자가 즐겨야 할 콘텐츠와, 그 외의 것들(UI 요소들)을 명확하게 구분 지을 수 있었다.
사용자의 기대에 부응하는 이러한 서체의 선택은 굉장한 효과를 가져왔다. 그동안 우리는 수 천권의 책, 잡지 그리고 신문들에서 세리프 서체를 통해 장문의 콘텐츠를 소비하곤 했다. 최근의 산세리프 스타일은 웹의 출현을 통해 더욱 두드러졌고, UI 요소로서 자연스럽게 자리 잡은 것이다.
Instapaper text UI배울만한 좋은 예시들
고맙게도, 우리에게 영감을 줄 만한 아름답고 유용한 타입 세팅을 가진 UI 사이트는 아주 많다. 여기 글쓴이가 가장 좋아하는 3가지의 예시를 보자.
Medium (미디엄)
미디엄은 “UI로서의 텍스트”라는 컨셉을 아주 훌륭하게 소화했다. 읽고 쓰는 플랫폼답게, 미디움은 타이포그래피를 가장 중요시한다. 다른 글쓰기 플랫폼이나 CMS들은 미디움의 예시를 참고하면 좋을 것 같다.
Type setting of Medium UI미디움은 Freight Text Pro와 JAF Bernino Sans 두 가지 서체를 사용한다. 게재된 컨텐츠들은 매우 아름답고, 읽기 쉽도록 사용자를 섬세하게 배려했다. (두 가지의 스타일의 인용문도 쓸 수 있다!) 더군다나, 글을 쓸 때에는 퍼블리싱이 완료되었을 때와 똑같은 모습으로 보이기 때문에, 두 가지 모드(글쓰기 모드와 미리보기 모드)를 왔다 갔다 할 필요가 없다. — 당신이 보는 그대로 업로드할 수 있는 것이다.
UI에 사용된 서체를 살펴보면 Bernino라는 서체를 사용하였는데, 컨텐츠의 제목과 같은 서체이다. 그러나 UI에서는 더 작은 사이즈를 써서 직관적으로 구별할 수 있다.
Slack (슬렉)
슬렉에서도 텍스트는 중요한 컨텐츠다. 슬렉은 팀 협업 커뮤니케이션 플랫폼인데, 여러 인터렉션이나 구성 요소들을 보면 슬렉이 텍스트 기반이라는 것을 알 수 있다. Buffer(버퍼)처럼, 슬렉은 하나의 서체(Lato)를 고수하지만 이를 최대한 잘 활용하고 있다.
테두리, 다양한 웨이트와 색상, 그리고 여백에 대한 고심을 통해 슬렉의 디자이너들은 방향성을 잃지 않으면서도 쉽게 컨텐츠를 읽을 수 있는 플랫폼을 개발해냈다.
Slack UIRdio (알디오)
음악 앱으로써, 알디오는 텍스트의 영향을 가장 적게 받는다. 그러나 우리는 이 작은 텍스트도 UI의 한 부분으로 여긴 것과, 서체 (Whitney)가 다양한 크기에서도 잘 어우러지는 것을 볼 수 있다.
Rdio UI(번외) Lato와 Whitney 서체 모두 대문자 ’I’와 소문자 ‘L’이 구분이 가지 않는다는 단점이 있다. 서체를 고를 때에는 서체의 모든 글자들을 반드시 확인하고, 이것이 당신의 프로덕트에 얼마나 영향을 끼치는지 평가해보아야 할 것이다.
UI 서체를 정한다는 것
어떤 프로젝트건, 타이포그래피는 당신의 UI에 있어서 중요한 역할을 할 것이다. 서체를 잘 설정하면 사용자를 도와주지만, 잘못 설정한다면 오히려 사용자를 방해한다. 그러니 이 가이드라인을 숙지하고 충분한 연습을 한다면, 더 좋은 결과로 사용자에게 다가갈 수 있을 것이다.
원문 출처: blog.invisionapp.com on April 6, 2015.
