이 글은 폴란드의 디지털 에이전시인 inFullMobile의 UX/UI디자이너인 Wojciech Zieliński "How to use typography in UI Design"을 번역하여 작성하였습니다(원저자에게 허락을 받았으며, 의역이 있습니다).




들어가며

타이포그래피는 UI 디자인에서 가장 어려운 부분이라해도 과언이 아닙니다. 우리는 오랫동안 다양한 방식으로 타이포그래피 작업을 해온 결과로 여러 규칙, 이론과 실제를 경험하게 되었는데요. 이 글에서는 따로 작업이 어려운 분들을 위해 프로젝트에 사용할 수 있는 몇 가지 실용적인 팁과 비결을 알려드리겠습니다.


예시로 보여드릴게요

타이포그래피는 재미있는 주제이긴 하지만, 이론적인 부분을 얘기하지는 않겠습니다. 문자 해부학이나 활자보다 바로 적용가능한 부분을 이야기해보겠습니다.


그래도 이론적인 부분이 궁금하다면 이걸 보세요.


사용자에 대한 고려

디자인에서 미학적 측면 외에도 사용자가 존재한다는 것을 기억해야 합니다. 고해상도의 주력 상품을 위해서만 디자인하는 것은 아니니까요...



폰트는 더 유연하게 다양한 두께, 더 많은 특수기호를 제공해야 하며, 레티나에서도 잘 적용되어야 합니다. 나의 무심함으로 인해 사용자가 어려움을 겪지 않도록 특히 신경써야 하는 부분입니다. 좋은 타이포그래피는 독자에게 “명쾌함"으로 인식되겠지만, 그 반대의 경우 화면 속 난장판의 주역이 될 것입니다.

가독성이 좋은 활자의 특징을 이해하면, UI를 위한 폰트를 고를 때 무엇을 살펴야 하는지에 관한 총체적인 관점을 얻을 수 있습니다.


판독성(Legibility)

특정한 서체에서 개개의 글자를 얼마나 쉽게 구별할 수 있는지의 정도를 판독성이라고 합니다. 서체와 글자, 디테일에 중점을 두는 것을 마이크로 타이포그래피(Micro-typography)라고 하는데요. 가장 기본적인 요소 중 하나이지만, 모든 서체가 판독성을 주된 디자인 기능으로 하여 만들어지지는 않습니다. 가장 흔한 문제는 대문자 I와 소문자 I의 구분이 없다는 것입니다. 이런 폰트는 작은 화면에서 읽기 어려우므로 피하는 것이 좋습니다.


1) 엑스 하이트(x-height*)

영문에서 우리가 읽는 글자의 95%는 소문자입니다. 대문자에 비해 소문자 x높이의 비율이 클수록 서체가 더 읽기 쉬워지는 경향이 있습니다.

*x-height: 폰트의 하나. 기준선(base line)에서 소문자 x의 높이를 말한다(역자 주).




2) 카운터(Counter)

글자는 여백을 가지고 있기도 합니다. 예를 들어 ‘o’, ‘u’, ‘d’를 보세요. 이 알파벳 안의 공간들을 카운터라고 합니다. 타이포그래피 전문가들은 이 공간이 많을수록 글자를 알아보기 쉽다고 말합니다.




3) 두께(Weight)

보통은 얇은 서체가 굵은 서체보다 판독성이 좋습니다. 이는 카운터와 관련 있으며, 문자 안의 공백을 넓게 하므로 서체를 수정할 필요가 없습니다.


어떤 것이 더 읽기 쉬울까요?


가장 이상적인 문자 획의 두께는

폰트 높낮이의 약 18%입니다.


4) 넓은 면적(Wide proportion)

높이와 연관된 글자의 너비는 면적으로 설명할 수 있습니다. 일반적으로 면적이 넓은 글자가 좁은(condensed) 글자보다 알아보기 쉽습니다.


언뜻 보기에는 차이가 별로 없어 보입니다.



5) 자간(Letter spacing)

글자 간격을 계산하는 궁극적인 방법은 없지만, 대부분의 경우 글자 크기가 클수록 필요한 자간이 더 작아집니다. 안 그러면 서체가 많이 벌어져 보일 수 있고, 이에 따라 수동으로 간격을 조정해야 하기 때문입니다. UI 디자인에서 이 정도 크기는 보통 헤더(header)에 해당하는 부분입니다.


이것도 작은 차이입니다.



가독성(Readability)

가독성(Readability)은 총체적인 읽기 경험입니다. 얼마나 쉽게 텍스트 레이아웃, 제목(header)과 부제(subheading), 문단(paragraphs)과 단락(blocks)을 구별할 수 있는지를 의미합니다. 마이크로 타이포그래피는 텍스트를 시각적으로 매력적으로 만들어 사람들이 더 잘 읽도록 유도합니다. 대비, 색상, 사이즈, 구성, 작은 디테일을 통해 더 좋은 읽기 경험을 가능하게 하는 일종의 예술인 셈입니다.


1) 세리프(Serif) vs 산세리프(Sans Serif)

역사적으로 보면 세리프가 더 읽기 쉽습니다. 오랜 시간 인쇄에 사용되었으며, 긴 텍스트에서의 가독성이 많이 개선되었기 때문입니다. 세리프는 눈이 텍스트의 흐름을 쉽게 타도록 합니다.


그러나 웹과 모바일에서는 다릅니다. 가독성이 좋은 여러 개의 산세리프가 존재하며, 오늘날의 시각디자인은 보다 심플한 글자 모양(letterforms)을 선호하기 때문입니다. 실제로 웹, 특히 모바일에서는 산세리프체가 훨씬 많습니다. 게다가 디스플레이는 종이가 아니고, 보통 웹에서 긴 텍스트는 읽지 않습니다. 특히 앱에서는 더욱 그렇습니다.


트위터 앱에는 세리프를 찾아볼 수 없으나 미디엄에는 있네요.


이는 각자가 제공하는 프로젝트에서 사용자들이 콘텐츠를 어떻게 읽는지에 따라 다를 것입니다. 예로, 보통 미디엄에는 대부분 긴 것을 읽기 때문에 세리프가 많습니다. 이것이 좋은 디자인 접근방식일테니까요.



2) 행간(Line height)

행간(줄 높이)의 경우 황금비율을 사용하시는 것을 강력히 권해드립니다.


글자크기에 1.618을 곱하면

완벽한 행간이 나옵니다.


여기(링크)에서 높이를 계산해보세요.


더 경험이 많은 사람이라면 감으로 조정할 수도 있습니다. 물론 이 규칙에도 예외는 있으며 상황에 따라 대처하면 되겠습니다.


작은 차이지만, 가독성에는 큰 영향을 줍니다.



3) 텍스트 블록 너비(Text block width)

살얼음에 발을 디디는 것과 같은 부분입니다. 텍스트 블록이 너무 넓으면 눈이 다음 줄을 찾기가 어렵습니다. 라인이 너무 좁으면 줄이 너무 자주 바뀌어서 읽기 리듬이 깨지겠지요.


우리의 무의식은 다음 줄로 넘어갈 때 힘을 얻습니다.(너무 잦지 않으면) 독자들에게 계속 글을 읽게 할 에너지를 주려면, 텍스트 라인은 50~75자 정도(영문 기준)가 적당합니다.



4) 색상(Colors)

물론 작업물의 특성에 따라 다르지만, 팁 하나를 공유하자면, 순수한 그레이(또는 검정)를 사용하기보다, 주색상을 고르고 아래와 같이 주변에서 선택하는 것입니다.


분홍색 삼각형을 주목하세요.


이는 일반적인 #CCC를 사용하는 것보다 더 매력적이고 독특할 것입니다. 작은 디테일은 시각적으로 돋보일 수 있게 만듭니다.



5) 여백(White space)

여백에 관련된 많은 책과 출판물이 있지만, 타이포그래피에서는 이 한 가지를 기억해야 합니다.


여백의 주요 역할은

사용자들이 동시에 보는 텍스트의 양을

줄이는 것입니다.


이는 레이아웃을 더 효율적으로 볼 수 있게 하며, 콘텐츠가 과부하 되지 않게 도와줍니다. 여백은 레이아웃 쪽으로 시선을 끌며 잘 정돈된 느낌과 정교함, 우아함을 선사합니다.


Luxy — Tablet by Nguyen Le



6) 위계(Hierarchy)

위계는 콘텐츠를 읽는 법을 정의합니다. 계층은 제목, 부제목, 본문을 구분할 수 있게 도와줍니다. 우리는 다양한 대비(contrast), 글씨 크기(text sizes), 패딩(padding), 마진(margins)등을 사용하여 위계를 완성할 수 있습니다. 훌륭한 가독성을 만들기 위해서 반드시 마스터해야하는 테크닉입니다.


디테일을 주목하세요. 날짜와 서술한 부분의 색상이 다른데, 처음에는 차이가 잘 보이지 않습니다.

(Event_Discovery_App by Jakub Antalík)



7) 세퍼레이터(Separators)

콘텐츠를 섹션별로 나누는 좋은 방법은 세퍼레이터를 사용하는 것입니다. 가장 많이 쓰이는 것은 라인입니다. 다소 애매한 방법이지만 가독성을 높이는 데에 큰 역할을 합니다.


또 다른 방법은 요즘 인기있는 카드형식을 사용하는 것입니다. 이것은 전체 내용과는 분리된 콘텐츠에 사용하기 좋습니다. 모바일과 큰 썸네일에 사용하기 좋으며 레이아웃을 더 잘 감별할 수 있게 하기도 합니다.


두 예시를 함께 보여드릴게요. (왼쪽하단의 카드형식과 오른쪽의 라인 세퍼레이터)

nearby attractions by me



8) 반복과 리듬

이 부분은 UI 디자인에서 가장 많은 시간이 소요됩니다. (적어도 저한테는요) 반복되는 요소들은 통일감을 줍니다. 포지셔닝(positioning), 글씨 크기, 색상, 패딩, 마진, 규칙 사용, 배경, 박스들이 포함됩니다. 예컨대 저는 보통 패딩이나 여백의 사이즈를 5로 주어 일관성을 지킵니다. (제 규칙 중 하나입니다) 반복은 리듬을 만듭니다.


avsc by me



마치며

타이포그래피를 배우는 일은 실력을 향상시키면서 멋진 문구와 만족스러운 뷰를 만들어내는 매력적인 여정입니다. 실력은 블로그 글을 읽는다고 늘지 않습니다. 직접 배우고 연습해보세요. 스케치(Sketch)를 켜(포토샵 사용자들에게는 미안하지만) 멋진 작업물을 만들어보세요.


예술의 훌륭함은

흔한 것이 아닌 독특한 것을 찾는 것이다.

– Isaac Basyenis Singer (1904-1991)


ps. 이번 토픽은 이전 게시글에 대한 Viki G의 코멘트에 의해 만들어졌습니다.



원문 보러 가기





Posted by slowalk



“삶의 걸음과 인생의 시간은 나란히, 그리고 평행하게 걸어갑니다.”


한걸음 달력
은 2014 하반기 슬로워크 버닝데이에 출품한 달력입니다. 
누구에게나 공정한 시간, 그러나 누구에게나 같은 양의 시간이 주어지지는 않습니다. 삶의 걸음과 인생의 시간은 나란히, 그리고 평행하게 흐릅니다. 때론 빠르게, 때론 천천히. 하지만 멈추지는 않습니다. 내가 걸어가는 시간에도 변하지 않을 시간을 기록해 줄 달력, 그 걸음걸이에 힘을 주고 위로가 될 수 있는 달력으로 제작하게 되었습니다.


사전구상

달력이라는 매체의 속성을 곰곰이 생각해보았을 때, 얻은 결론은 '기능'에 충실할 것과, 그 기능을 사용함에 있어 불편하게 하지 않는 선에서 사용자에게 만족감을 주는 '콘텐츠'적인 요소, 이 두 가지에 집중하는 것이었습니다. 우리는 매년 만드는 달력에서 의미 있는 콘텐츠를 찾아 사용자에게 지적이거나 감성적인 반응을 이끌어 내는 방식을 택해왔습니다. 2014년, 많은 사건사고와 이슈들로 인해 지친 마음을 위로할 수 있는 방안을 생각해보았고, 시간이 지나가는 것과 인생의 흐름을 아우르는 '걸음걸이'에 집중했습니다. 


주제선정과 구성

걸음걸이를 지면에 효과적으로 표현한다는 것은 생각만큼 쉽지 않았습니다. 자료조사와 아이디어 회의를 수차례 거친 끝에, 다양한 걸음걸이에 대한 순우리말 표현을 주제로 결정하였습니다. 국내 문학에서 사용된 표현이나 전해져 내려오는 구문 속 명칭들은 의미를 알게 되면 무릎을 탁 치게 되는 재치 있는 표현과, 표음문자 그대로의 뜻과 전혀 다른 뜻을 내포하는 등 이런 재미있는 요소들을 타이포그래피로 표현해 보았습니다. 


제작을 위해 각 달에 생각해 볼 수 있는 이미지를 계절별, 기간별로 분류했습니다. 1~2월은 결심/시작 | 3~5월은 봄의 느낌 | 무더운 6~8월은 극복 | 9월은 가족, 사랑 10, 11월은 유머, 건강 | 12월은 한 해의 마무리로 의미를 부여했습니다. 이후 분류된 기간별 이미지에 어울리는 한글 걸음을 백여 개의 자료 중 세심하게 배치했습니다. 


디자인 시안
1차 시안으로 제작된 1월의 화장걸음의 원 뜻은 '주변을 신경 쓰지 않는 듯 팔을 벌리고 뚜벅뚜벅 자신 있게 걸어가는 걸음' 이라는 의미로,  '한 해의 시작인 1월, 자신 있고 당당한 발걸음으로 힘차게 시작'이라는 의미를 담았습니다.



5월의 명매기 걸음은 '춘향전에서 춘향이가 걸었던 걸음으로 이를 본 이몽룡이 그 교태에 넋을 잃고 바라보게 된 걸음걸이'입니다. 이는 훈훈한 바람이 불어오는 애틋한 5월의 분위기를 표현하기에 더없이 적절한 걸음걸이라고 생각했습니다. 

 




중간보고 및 의견반영

제작된 시안을 발표하는 중간보고에서 다른 슬로워커들이 예리하게 평가하고, 그 의견을 주었습니다. 기획 측면에서의 의견은  "달력을 구매하고 싶게 만드는 콘텐츠 요소가 조금 더해지면 좋겠다", "걸음걸이 이름이 유용한 정보는 아닌 것 같다", "달마다 의미가 있으니까 디자인만 하는 것을 넘어서 추가적인 메시지(이야기)가 있으면 좋겠다", 디자인 측면의 의견으로는 "타이포그래피 표현 방법이 다채로웠으면 좋겠다", "타이포에 조금 더 성격이나 기분이 느껴지는 색, 추가적인 모티브가 있으면 좋지 않을까?", "서체에서 걸음걸이 특징이 드러나도록 구성하였으면 좋겠다" 등의 의견이 있었습니다.


중간보고 후 전해 받은 의견들


수집된 좋은 의견들을 반영한 최종 결과물입니다. 시안은 벽결이 형태로 디자인되었으며, 서체의 구성을 조금 더 자유롭게 변경하여 서체 자체만으로도 걸음걸이의 이미지를 얻을 수 있도록 했습니다. 또한 걸음걸이의 이름을 비롯해 해당 걸음이 뜻하는 의미와, 상징적으로 표현되는 단어/구절을 삽입하여 사용자가 좀 더 감각적인 유희를 즐길 수 있도록 하였습니다. 애초 기획한 의도대로 달의 구분은 걸음으로 변경하고 타이포그래피 부분을 뜯어내어 별도의 용도로 사용할 수 있도록 구상했습니다.




의견을 반영해 최종 제작된 프로토타입



순우리말이나 타이포그래피를 이용해 만든 제품이나 달력은 이미 많이 볼 수 있기 때문에 접근 방법에 대한 고민은 기획 단계에서 가장 고민하고 우려했던 부분이었습니다. 또한 걸음을 타이포로 표현하고자 하는 의도를 과연 성공적으로 구현할 수 있을것인가에 대한 의문도 프로토타입 개발 시 늘 머릿속을 따라다니던 질문이었습니다. 하지만 무엇보다도 근본적인 질문은 사람들이 이 달력의 의도를 이해하고, 그 이상의 감각적인 만족을 느낄 수 있을지에 대한 걱정과 기대였습니다. 


디자인은 그 근본적인 물음에 대한 답을 찾아가는 과정입니다. 그리고 그 과정에서 참여하는 모든 사람들의 힘과 노력, 끈기와 열정이 뒷받침되면 분명히 그 답을 찾을 수 있을 것입니다. 오늘부터 한 걸음씩 답을 찾는 발걸음을 내딛고, 한 걸음에 결과물로 여러분과 만나기를 희망합니다. 



* 한걸음 달력은 버닝데이 1위 수상작으로, 실제 달력으로 제작될 예정입니다. 다음 주(11/10)에 예약판매를 시작하니 많이 기대해 주세요! 


물범, 누렁이, 사모예드, 나무늘보 발자국


Posted by slowalk
우리 흔히 보는 지도들에는 각종 기호들과 그림이 가득합니다.
그런 기호들과 그림들은 우리가 원하는 정보를 아주 단순명료하게 전달해줍니다.

여기, 그 흔한 지도들과는 조금 다른 지도가 있습니다.


Axis Maps에서 제작한 Typographic Maps입니다.

이 지도는 선과 도형, 그리고 조금의 글씨로 이루어진 다른 지도들과 달리, 오로지 글씨만으로 이루어져있습니다.
글씨와 친하지 않다면, 조금은 어려운 지도일 수도 있겠네요.


위 그림처럼 지도 안의 글씨들을 자세히 보면, 길, 도로, 지역의 명칭들이 써져있음을 알 수 있습니다.




우리는 보통 길을 찾아가거나 어떤 장소에 대한 정보를 얻기 위해 지도를 보곤 합니다.
그런데 사실 길이나 장소에는 위치라는 단순한 정보말고도 더 많은 것들이 담겨있습니다.

바로 '이야기'입니다.

하지만 우리가 여행을 하거나, 어떤 장소를 찾아갈 때,
아마 여행 책자에서 읽거나, 우연히 만난 사람으로부터 전해 듣기 전에는,
그곳에 담긴 이야기를 알게 되기는 쉽지 않습니다.

Typographic Maps처럼 글씨로만 이루어진, 그리고 단순히 명칭 뿐만 아니라,
지역의 이야기를 담고 있는 지도를 만들면 어떨까요?
이를테면, 삼청동 이야기 지도 같은 것 말이죠.
지도를 보는 것만으로도 한 권의 책을 읽고 긴 이야기를 듣는 재미를 느낄 수 있겠죠?

아마 지도를 '읽는다'고 하는게 더 맞을지도 모르겠네요.
Posted by slowalk