UI 디자인에서 타이포그래피를 사용하는 방법 (번역본)
UI 디자이너가 알아야할 타이포그래피 사용방법
이 게시물은 Medium, Prototype.io 채널의 'How to use typography in UI Design' 라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지 못한 표현이 있을 수 있으며, 피드백을 주시면 최대한 반영하도록 하겠습니다.
https://blog.prototypr.io/how-to-use-typography-in-ui-design-ce045fa4ff2e
UI 디자인에서 타이포그래피를 사용하는 방법
실무에서 사용할 수 있는 실용적 방법
시작하는 글 (Introduction)
타이포그래피는 UI디자인에서 가장 어려운 부분이라고 말해도 과언이 아닐겁니다. 타이포는 오랜 세월동안 우리와 함께해왔죠. 덕분에 여러가지 규칙과 관행, 이론들이 많이 만들어져있습니다. 우리는 이 문서에서 여러분의 프로젝트에서 사용할 수 있는 실용적인 방법을 이야기해볼겁니다.
이론보다, 실제 사례를 보자! (Practical examples over theory)
우린 이 글에서 타이포그래피에 대한 이론적인 부분을 논하진 않을겁니다. 글꼴 분석이나 글꼴의 합쳐진 모양같은걸 논하기보다, 실전으로 바로 들어가봅시다.
https://vimeo.com/77330383
사용자를 배려합시다 (Think about the users)
미적인 아름다움보다 중요한건 바로 사용자에 대해 생각하는 일일 겁니다. 우린 고해상도 플래그쉽 기종의 스마트기기 외에도 여러 해상도의 기기를 사용하는 사용자들을 생각해야합니다.
우리가 사용하는 폰트는 항상 상황에 맞춰 유연성을 가져야합니다. 폰트는 항상 다양한 굵기와 다양한 특수 기호 표기시에도 문제가 없어야합니다. 단지 보기에만 좋아서는 안되죠. 사용자들이 고통받는걸 좋아하는게 아닌 이상, 글씨의 지원범위와 가용성에 대해 고민하는건 정말 중요한 일입니다. 좋은 타이포그래피는 독자들에게 내용을 전달하는데에만 충실하기에, 눈에 잘 띠지 않을겁니다. 하지만 반대로 잘못 쓰인다면 타이포그래피 자체가 주인공이 되어 화면을 온통 시끄럽게 만들어놓겠죠.
문자를 읽기 위해 중요한 몇가지 요소를 이해하고나면, UI에 쓰일 글꼴을 선택하는 일도 매우 쉬워집니다.
가독성 (Legibility)
가독성은 문자들이 얼마나 잘 구별되는지를 나타내는 기준점입니다. 글씨체, 글꼴, 그리고 세부적인 디테일을 살피는건 타이포에서 가장 중요한 요소입니다. 실제로 여러 폰트들을 살펴보면, 모든 서체가 가독성 우선시하는건 아닙니다. 영어 서체에서 가장 일반적인 문제는 대문자 I와 소문자 i의 차이가 없다는 점이죠. 사용자들은 작은 디스플레이에서 이런 글꼴을 읽는 데 문제를 겪을 수 밖에 없습니다. 그러니 대문자 I와 소문자 i의 차이가 없는 서체는 사용하지 않는게 좋습니다.
X-높이값 (X-height)
우리가 알파벳에서 읽게되는 대부분의 글꼴 (약 95%)는 소문자로 되어있습니다. 그리고 대/소문자의 글자 비율이 클수록 글자체의 가독성이 높아집니다. 한번 확인해보세요.
카운터 (Counters)
영어는 글자 안에 뻥 뚫린 하얀 공간을 가지고 있는 경우가 많습니다. 대표적으로 "o"u"d" 같은 알파벳이 그렇죠. 이런 공간들은 카운터라고 불리고, 이 공간이 더 클수록 글씨를 인식하기가 더 쉽습니다.
(굵어지는 경우, 이게 글자인지 아이콘 그림인지가 조금 헷갈리긴 하네요)
서체의 굵기 (Weight)
얇은 서체는 일반적으로 굵은 서체보다 가독성이 뛰어납니다. 이 부분은 물론 위에서 이야기했던 카운터라는 개념과 관련이 있습니다. 대부분의 기본서체의 경우도 동일한 개념이 적용된다고 보시면 됩니다. ( It’s related to counters and allow for non modified character shapes.)
두 글씨중에 어떤쪽이 더 읽기가 쉬운가요?최적의 글씨 굵기는 X높이값의 약 18%입니다.
넓은 비율 (Wide proportion)
폰트의 좌우 너비를 기준으로, 높이값을 비교해봤을 때. 좌우 너비가 더 넓은 쪽이 인식하기가 쉽습니다. 당연히 가독성도 더 증가하게되죠.
처음 보기에는 차이가 그렇게 명확해보이진 않을겁니다.문자 간격 (Letter spacing)
최적의 문자 간격을 계산하는 방법이 따로 있는건 아닙니다. 다만 대부분의 경우 - 문자 크기가 클수록 필요한 문자 간격이 줄어듭니다. 각각의 글자들이 너무 넓게 벌어져있는 경우, 간격을 수동으로 조정해야 합니다. UI 디자인에서는 헤더나 타이틀 부분에서 주로 이 문제가 발생하죠.
작은 차이지만, 간격을 줄인 것이 더 보기에 좋다는걸 알게되실겁니다가독성 (Readability)
가독성은 글씨를 읽기 위해 가장 중요한 요소입니다. 글자들의 단락을 얼마나 쉽게 잡아내고, 찾아내는지. 제목이나 부제목, 단락 및 블록을 구분하는지는 가독성에 달렸죠. 가독성은 텍스트 자체보다 그 내용에 온전히 집중할 수 있게 도와주는 요소입니다. 대비나 색상, 글씨 크기, 구성등의 차이가 합쳐져 종합적인 가독성을 만들어내죠.
세리프체 (Serif) vs 산 세리프체 (Sans Serif)
세리프체가 산세리프체보다 읽에 편하다는건 역사적으로 증명된 사실입니다. 세리프체는 인쇄술이 나타난 이래 오랜 시간동안 쓰여왔고, 실제로 더 나은 가독성을 제공합니다. 하지만 웹과 모바일에서는 전혀 이야기가 달라집니다. 웹과 모바일에서는 가독성이 좋은 여러 산 세리프체들이 주로 쓰입니다. 게다가 시각 디자인의 트렌드에서는 더 단순한 글자 형태를 선호합니다. 실제로 웹과 모바일 환경에서는 세리프체보다 산세리프체가 더 많이 쓰입니다. 우리가 보는 화면은 종이가 아닌데다, 웹이나 앱에서는 긴 텍스트를 읽게되는 경우가 많지 않기 때문입니다.
트위터를 보세요, 산세리프체라곤 하나도없죠? 하지만 정작 medium에서는 세리프체를 쓰는군요!폰트 사용은 프로젝트의 성격과 사용자의 컨텐츠 소비 방식에 따라 다릅니다. 예를 들어, medium 서비스에서는 세리프체가 사용됩니다. 대부분의 경우 사용자들이 긴 글씨를 읽게되기 때문입니다. 대부분의 게시글들이 긴 글들로 이뤄져있는 medium에서는 충분히 납득할 수 있는 선택이죠.
줄 간격 (Line height)
문장간격에 있어서는, 황금 비율만한게 또 없습니다.
글꼴의 크기에 1.618을 곱하면 완벽한 줄 간격이 만들어집니다
예제사이트를 첨부해보겠습니다. 한번 직접 확인해보세요.
https://jsbin.com/todidu/1/edit?output
굳이 계산을 해서 만들필요까지는 없습니다. 만약 경험이 풍부한 디자이너라면 수동으로 이 결과를 조정할 수도 있죠. 물론 이 규칙이 언제나 옳바른 선택인것만은 아닙니다. 예외란게 있기 마련이고, 필요하다면 언제든지 어길수있는 거죠.
줄간격은 사소한 차이지만 가독성에 큰 영향을 미칩니다.글씨영역의 좌우너비 (Letter spacing)
사람에게 일정 영역 이상의 글씨영역을 보여주면, 인식하기가 어려워지는 순간이 있습니다. 역으로 너무 좁아도, 읽다가 다음줄로 넘어가기를 반복해야하니. 글씨를 읽는게 너무 어려워지죠. 그래서 일반적으로 읽기좋은 텍스트 숫자는 (영어 기준으로) 50에서 75자 사이인것이 일반적입니다.
(한글의 경우는 영어보다 생김새가 복잡하고 단어 의미가 압축적이라, 더 적은 숫자일듯 하네요. 직접 테스트해보니 약 40에서 50자 정도가 적당한 숫자인듯 합니다)
색
프로젝트마다 상황은 다르겠지만, 여기 또 한가지 트릭이 있습니다. 채도가 없는 완벽한 회색이나, 검은색을 사용하기보다 - 푸른빛이 도는 회색이나 검은색을 사용해보세요.
위의 이미지에서 빨간 삼각형이 그려진 영역 내에서 색상을 고르시면 좋습니다.
일반적인 회색을 사용하는 것보다 더 멋지게 나올겁니다. 작은 팁이지만 꽤나 중요한 팁이죠.
하얀 여백 (White space)
여백에 대한 이야기는 항상 여러 책과 출판물에서 다뤄지는 내용입니다. 하지만 타이포그래피에 있어서는 이 한가지만 기억하시면 됩니다.
하얀 여백이 쓰이는 이유는 한번에 보이는 텍스트의 양을 줄이기 위해서다.
하얀 여백은 잘 쓰일 경우, 컨텐츠를 알기쉽고, 간결하게 만들어줍니다. 하얀 여백은 항상 우리의 시선을 다음 내용으로 안내하고, 질서정연한 우아함을 선사해주죠.
Luxy — Tablet by Nguyen Le계층구조
계층구조는 정보의 단계를 나누고, 컨텐츠를 읽는 순서를 만들어줍니다. 계층구조가 생기면서 상단영역과 서브영역, 본문내용을 서로 구분해주죠. 우린 다른 명도로 대비를 주거나, 텍스트 크기나, 텍스트 간격, 여백 등을 사용해서 - 각각의 정보를 구분지어줄 수 있습니다. 가독성에 있어서는 가장 중요한 내용중 하나죠.
Event_Discovery_App by Jakub Antalík
작은 차이에 주의를 기울여보세요. 위의 시안에서 날짜 텍스트 색상은 그 아래에 배치된 설명글의 색상과 미세하게 다릅니다. 심지어 타이틀 색상과도 차이가 나죠. 처음에는 이 차이가 잘 보이지 않을겁니다.
구분자 (Separator)
각각의 영역을 서로 나누는 가장 좋은 방법은 바로 구분자를 사용하는 것입니다. 가장 인기있는 방식은 바로 선을 긋는 방식이죠. 물론 언제나 정답이라고 말하긴 어렵겠지만, 선을 통한 구분방식은 여전히 가독성을 위해 자주 쓰이는 방식입니다. 이외에 다른 방법은웹 트렌드로 유명한 카드 방식을 사용하는 겁니다. 이런 형식은 해당 내용들이 서로 연관되지않은 - 각각의 내용일 경우 매우 효과적입니다. 모바일 환경에서 엄지 손가락으로 넘기면서 새로운 내용을 찾기에도 적합합니다.
Both examples at once. nearby attractions by me반복되는 패턴과 리듬 (Repetition and rythm)
반복적인 패턴과 리듬감을 살리는건 UI설계에서 가장 어려운 부분중 하나입니다. 무언가가 반복되는 형태는 통일성을 높이고 일관적인 느낌을 줍니다. 반복은 위치값이나, 텍스트 크기, 색상, 컨텐츠 간격, 여백, 규칙, 배경 및 박스규격 등에서 다양하게 사용될 수 있습니다. 예를 들어, 저는 보통 마진값(Margin)을 패딩(padding)값으로나누어 훨씬 더 일관되게 보입니다. 반복은 리듬을 만든다.
avsc by me결론
타이포그래피는 디자인 기술을 배우는데 있어서 가장 매력적인 여행이 되어줄겁니다. 글을 읽는것 이상으로 배우고, 연습하는 과정에서 기술이 늘기 마련입니다. 그러니 지금 바로 멋진 습작을 만들어 보세요. 분명 멋진 결과를 만들 수 있을테니까요.
"예술의 위대함은 평범함을 찾는 것이 아니라 독특함을 찾는 것에 있다."
-아이작 바스베니스 싱어(1904-1991)
-
저자가 디자인을 그렇게 잘하는게 아닌데, 생각보다 많이 뻐기네요. 이사람의 앱디자인에서의 비례만 봐도, 그리드를 잡는데 실력이 떨어진다는걸 알 수 있으니... 게다가 중간중간 미사여구가 많아서, 의역 혹은 아예 표현자체를 없애고, 알기쉽게 단순화한 경우가 많았습니다. 다만 글씨에 대한 내용에 있어서는 팁이될 수 있을 것 같아서 번역을 해봅니다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
