UI에서 서체 최적화를 위한 4가지 팁

타이포그래피, typography:
디자인에 있어서 활자(活字)의 서체나 글자 배치 등의 구성 및 표현.

전세계적으로 모든 인류문명이 사용하는 문자, 문자는 예술영역으로 인식되기 전 커뮤니케이션에 중요한 목적을 가지고 탄생했습니다. 이는 인쇄술의 발달로 쓰이고 읽히는 언어적 기능에 충실한 문자가 때론 착시를 일으켜 입체적으로 혹은 움직이는 것처럼 보이기도 하는데, 이처럼 예술의 영역으로 인식된건 얼마 되지 않았습니다. 익숙하지만 절대로 만드는데에는 쉽지 않은 바로 타이포그래피 입니다.

다양한 언어의 타이포그래피가 존재한다

우리는 종이에 쓰여진 문자의 모양을 서체라 하고, 서체들의 배열과 구성 등 여러 시각 요소가 합쳐진 그래픽 디자인을 ‘타이포그래피’라 합니다.

커뮤니케이션은 디자인에 있어서 중요한 역할을 합니다. 아무리 디자인이 잘된 인쇄매체, 출력매체라도 결국, 화면에서의 커뮤니케이션은 텍스트를 통해 일어나고, 글꼴은 언어의 UI인 것입니다.

디자이너 Oliver Reichenstein는 “ 웹디자인의 95%는 타이포그래피” 라고 말했다.

UI&UX 디자이너 Oliver Reichenstein 은 철학을 공부했던 Information Architect 로 정보&기술&소비자의 관계에서 디자이너, 엔지니어, 설계자, 책임자의 역할을 현대의 모바일과 웹에서 잘 표현하였습니다. 이어지는 영상은 2012년 TEDx에서 발표한 자신의 디자인 철학을 설명했습니다. 그는 2005년 자신의 iA 회사를 일본으로 가져가 정착하며 일본문화의 정결함, 아기자기함 등을 배우고 어떻게 발전시켜 나갔는지 이해를 돕습니다.

그는 사람들이 이야기하는 부정적 표현들 (NO, impossible)을 들었을때 철학을 공부한 사람이어서인지는 몰라도 왜 그런 표현들이 나오는지 논리적으로 생각하기 시작합니다.

그는 회사가 설립되면서 무수히 많은 기업과 작업을 했고 제품, 웹, 앱, 시스템 등을 새롭게 설계하고 구축하여 자신이 하고싶어하는 사업도 성장시키시 시작합니다. “Writer” 라는 제품을 만들어 MS Word 를 사용할때 힘들었던 부분을 개선합니다. PC나 랩탑의 환경과 iPhone, iPad 등의 모바일환경이 주는 Writing 환경이 어떻게 다른지 논리적으로 생각한거죠.

이는 완전히 새롭게 만든 프로그램이 아니라 익숙함을 원하는 사용자들에게 그들에게 맞춰진 환경을 최대한 존중하며 개선한 프로그램입니다.

이어지는 영상은 익숙하지만 불편한 과거의 프로그램들을 개선한 “Writer” 를 설명한 영상입니다.

국내에도 훌륭한 1세대 서체 디자이너들이 많지만, 국내에서 타이포그래피를 떠올리면 이 사람을 빼놓고 말하는 건 힘들지 않을까 합니다. 바로 안그라픽스의 대표이자 생활이 문자 실험자인 디자이너 안상수 입니다.

한글을 단순 글자가 아닌 감정과 정서가 담긴 문화로 설명한 안상수

안상수는 탁월한 편집 디자인으로 아름다운 책들을 내놓는 출판인이기도 하지만, 포스터 제작과 로고, 타이포그래피 디자인의 거목으로 꼽히죠. 최근에는 국내 유일한 타이포그래피 학교, PaTI(파주타이포그라피학교)를 세워 한글의 창조적 정신을 중심에 둔, 한글 타이포를 위한 예술 학교를 설립했습니다.

PaTI는 시험없는 학교로도 유명하다

그럼 UI에서 서체의 최적화를 위해 필요한건 어떤게 있을까요?

타이포그래피는 콘텐츠 자체를 존중하는데 존재한다.

모든 인터페이스는 사용자가 원하는 최적의 조건을 반영하여 결정할수있게 도와주어야 합니다. 너무 디자인에 심취한 나머지 본래의 목적을 잊어버리면 안되는거죠.

1. 다양한 크기에 대응할수 있는 서체

현대의 매체는 다양한 크기의 출력화면에서 글자를 볼수있습니다. 그렇기 때문에 서체 또한 다양한 크기에 대응할수 있어야 합니다. 애플워치의 작은 화면에서 시인성을 위해 샌프란시스코 서체를 새로 개발한 사례가 좋은 예입니다.

Avenir 서체로 다양한크기를 대응한 사례

2. 같은 서체라도 쉬운 활자의 구분

영문서체의 경우 대문자 ‘I’ 와 소문자 ‘L’은 매우 비슷하게 보입니다. 또, 소문자 ‘r’과 ‘n’이 함께 쓰였을 때는 소문자 ‘m’ 으로 보이기도 합니다. 그러므로 이러한 글자 형태의 구분이 확실한 서체를 사용해 사용자들에게 의미를 명확하게 전달해야합니다.

대문자 ‘I’ 와 소문자 ‘L’은 매우 비슷하게 보인다

3. 텍스트를 UI의 요소로 생각

좋은 디자이너는 텍스트를 컨텐츠로 생각하지만, 위대한 디자이너는 텍스트를 UI로 다룬다.

미국의 디자이너 카메론 몰이 거의 10년 동안 해왔던 유명한 말입니다. 텍스트가 어떠한 기능적인 역할을 할 때, 그것은 UI의 한 요소가 됩니다. ‘미세요’라고 적힌 당기는 문 손잡이를 보았을 때 느끼는 혼란에 대해 생각해보면 이해가 쉽습니다.

어쩌라는거야 ㅅㅂ

4. 사용자에게 제공해야하는 목적을 생각

대부분의 디자이너가 컴퓨터로 작업을 할때 겪게되는 오류입니다. 내가 만드는 디자인이 사용자의 문제를 풀수있는 도구가 될지, 아니면 그냥 이쁜 쓰레기인지 말이죠.

Medium 이란 서비스는 이 문제에 대해 잘 해결한 좋은 서비스입니다. 읽고 쓰는 플랫폼 답게, 미디움은 타이포그래피를 가장 중요하게 생각합니다. 브런치는 이에비해 해상도 최적화부터 문제가 아직 많죠.

UI로서의 텍스트라는 컨셉을 잘 이해한 Medium

미디움은 Freight Text ProJAF Bernino Sans 두가지 서체를 사용합니다. 글을 쓸 때에는 퍼블리싱이 완료 되었을 때와 똑같은 모습으로 보여지기 때문에, 두 가지 모드(글쓰기 모드와 미리보기 모드)를 왔다갔다 할 필요가 없습니다.

UI에 사용된 서체를 살펴보면 Bernino라는 서체를 사용하였는데 작은 사이즈라도 시인성이 좋아 직관적으로 구별할수 있습니다.

UI 서체를 고민한다는 것

어떤 프로젝트건, 타이포그래피는 UI에 있어서 중요한 역할을 하고있습니다. 서체를 잘 설정하면 사용자를 도와주지만, 잘못 설정한다면 오히려 사용자를 방해하기도 하죠. 미약하지만 이 가이드라인을 생각하고 고민한다면, 더 좋은 결과로 사용자에게 다가갈 수 있을 것이라 확신합니다.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.