이 글은 폴란드의 디지털 에이전시인 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



2015년 슬로워크 블로그에서 어떤 글이 인기 있었을까요? 

페이스북 참여 수 순으로 가장 있기 높았던 글 10개를 소개합니다.




10위: 추천! 웹디자인 스타일 가이드 7가지 (9월 2일) ➔ 더 읽기



웹사이트 스타일 가이드는 '패턴 라이브러리', 'UI 툴킷', 'UI 가이드라인' 등 여러 방식으로 소통됩니다. 웹사이트를 만드는 개발자, 디자이너, 콘텐츠 제작자에게 도움이 되는 잘 만들어진 7가지 스타일 가이드를 소개합니다.




9위: 슬로워크의 색다른 시도, '최고지속가능성책임자'를 영입했습니다! (4월 29일) ➔ 더 읽기



슬로워크는 2015년 CSR 분야의 전문가를 CSO로 영입했습니다. 최고지속가능성책임자(Chief Sustainability Officer)는 세계에서 기업의 사회적 책임을 적극적으로 실행하는 글로벌 기업에서만 찾아볼 수 있는 직책인데요, 슬로워크의 지속가능성을 위한 CSO의 고민을 들어봅니다.




8위: 화장을 지운 인형, Tree Change Dolls! ➔ 더 읽기 



아이들이 가장 좋아하는 장난감은 아마 인형이 아닐까요? 화려한 화장을 한 인형은 비현실적인 미에 대한 선입견을 심어줄 수 있습니다. 호주의 한 아티스트는 아이들에게 각자의 개성과 매력이 진정한 아름다움임을 가르쳐주는 화장을 지운 인형을 만듭니다. 작가의 텀블러 페이지에서 화장을 지우기 전과 후의 모습을 확인해보세요.




7위: 출력과 인쇄, 무엇이 다를까? ➔ 더 읽기 



'출력하다'와 '인쇄하다'의 차이를 아시나요? 두 용어의 차이를 정의했습니다. '출력', '인쇄' 두 과정과 장단점을 인포그래픽을 제작했습니다. 인쇄물이 필요한 프로젝트 담당자라면 '출력'과 '인쇄' 중 어떤 방법이 더 적합한지 알 수 있습니다.




6위: 디자이너 부럽지 않은 인포그래픽 만들기 ➔ 더 읽기 



일러스트레이터나 포토샵과 같은 디자인 툴을 사용할 수 없어도 쉽게 인포그래픽을 제작할 수 있는 사이트를 소개합니다. 소개된 사이트를 통해 잘 만들어진 인포그래픽의 색상 구성, 차트 형태 등을 공부해보는 것도 더 좋은 인포그래픽 만들기 위한 하나의 방법입니다.




5위: 도시의 동물들을 위한 작은 표지판, #TINYROADSIGN ➔ 더 읽기 



도시는 사람 외에도 여러 생물이 공존하는 공간입니다. 우리가 여러 생물과 도시 공간을 공유함을 상기시키는 동물들을 위한 표지판을 소개합니다.




4위: 비영리단체를 위한 10가지 뉴스레터 팁 ➔ 더 읽기 



이메일 뉴스레터는 비영리 단체의 소식을 알리고 참여를 유도하는 매우 중요한 도구인데요, 그저 '하던 대로'가 아닌, 마케팅 효과를 얻을 수 있는 10가지 뉴스레터 제작 팁을 공유합니다.




3위: 리플릿, 어떻게 접는게 좋을까? ➔ 더 읽기 



디지털 마케팅이 증가하면서 종이로 만들어진 홍보물은 점차 줄어들고 있습니다. 두꺼운 제본 형식의 인쇄물보다는 한 장으로 이루어진 리플릿의 비중이 높아진다고 하는데요, 리플릿 기획 과정에서부터 반드시 고려해야 할 기본적인 접지 방법을 소개합니다. 디자이너가 아니더라도 리플릿을 의뢰하는 경우가 종종 있다면 꼭 읽어보세요. 더 효과적으로 정보를 전달할 수 있습니다.




2위: 웹디자인에서 자간, 행간에 대한 고찰 ➔ 더 읽기 



웹디자인에서 행간과 자간을 어떻게 다뤄야 할까요? CSS와 포토샵의 단위 차이를 이해하고 디자이너와 개발자 모두 만족하는 방법을 알아보세요.




1위: 디자이너가 아니어도 괜찮아! 글꼴 다루기 ➔ 더 읽기 



보고서, 기획서, 프레젠테이션 등 우리는 일상에서 수많은 문서를 만듭니다. 보기 좋은 문서와 그렇지 않은 문서의 차이를 만드는 데는 여러 요소가 있는데요, 그 중 중요한 것은 글꼴입니다. 김은영 디자이너의 책 '좋은 문서디자인 기본 원리 29는' 비디자이너도 보기 좋은 문서를 만들 수 있는 원리를 쉽게 설명하는데요, 몇 가지 유용한 팁을 공유합니다.




Posted by slowalk

좋은 타이포그래피는 콘텐츠를 효과적으로 전달할 수 있게 해줍니다. 웹사이트의 95%는 텍스트로 이루어져 있고, 그 텍스트를 표현하는 타이포그래피는 매우 중요합니다.


이메일도 마찬가지입니다. 이미지, 일러스트, 인포그래픽 등을 활용하기도 하지만, 텍스트 그 자체의 가독성을 높였을 때 콘텐츠를 더 효과적으로 전달할 수 있습니다.





Smashing Magazine은 2013년에 진행한 웹사이트 타이포그래피 조사(Typographic Design Patterns And Current Practices (2013 Edition))에 이어 지난 8월에 이메일 타이포그래피 조사를 진행했습니다. 50개의 이메일을 무려 95개의 항목으로 분석했습니다.



Helvetica VS Georgia


  • 타이틀에 사용한 폰트 중 74%는 고딕체, 26%는 명조체입니다.

  • 본문에 사용한 폰트 중 64%는 고딕체, 36%는 명조체입니다.

  • 고딕체 폰트 중 가장 많이 사용한 것은 Helvetica 입니다.

  • 명조체 폰트 중 가장 많이 사용한 것은 Georgia 입니다.


일반적으로 명조체는 텍스트 크기가 작을 때 뭉개지는 현상이 있기 때문에 본문에는 잘 사용하지 않습니다. 이메일은 본문과 타이틀 모두 고딕체의 사용 비중이 훨씬 높습니다.


Helvetica는 타이틀에서는 16%, 본문에서는 20% 사용됐습니다. Gerogia는 타이틀에서는 14%, 본문에서는 24% 사용됐습니다. 이 외에도 Arial, Open Sans 등의 폰트가 사용됐습니다.





이메일에서 명조체를 사용하는 비율은 36%로, 웹사이트의 56.1%에 비해 훨씬 낮습니다. 조사한 웹사이트에 뉴스 사이트가 많이 포함됐기 때문이기도 하고, 이메일은 본문 내용이 상대적으로 적기 때문이기도 합니다. 이메일은 핵심적인 마케팅 메시지만 타이틀 형태로 표시하고, 자세한 내용은 랜딩페이지에서 전달합니다. 타이틀에는 대부분 고딕체를 사용하기 때문에 명조체 사용 비율이 낮을 수 밖에 없습니다.



14px VS 16px


  • 가장 많이 사용된 본문 텍스트 크기는 16px 입니다. (44%)

  • 본문 텍스트 크기의 범위는 최소 13px부터 최대 20px까지 입니다.

  • 72%가 데스크톱, 모바일에서 모두 같은 텍스트 크기를 사용합니다.





텍스트 크기가 너무 작으면 가독성이 떨어집니다. 특히 데스크톱보다 화면 크기가 작은 모바일에서 이메일을 확인하는 사용자가 많아지면서 가독성은 더 중요해졌습니다. 모바일 환경을 고려하면 적어도 14px 이상의 텍스트 크기를 사용하는 것이 좋습니다.



540px VS 600px

타이포그래피의 중요한 요소 중 하나는 얼마나 많은 텍스트를 보여주느냐 입니다. 가독성을 높이기 위해서는 적당한 본문 가로 크기를 설정하고, 그 안에 적당한 양의 텍스트를 표시해야 합니다.

  • 가장 많이 사용된 본문 가로 크기는 600px 입니다.

  • 본문 가로 크기의 범위는 최소 480px부터 최대 760px까지 입니다.

  • 데스크톱을 기준으로 했을 때 한 줄에 평균 53.86자가 표시됩니다.

  • 모바일에서는 한 줄에 최소 22자에서 최대 57자가 표시됩니다.





The Elements of Typographic Style Applied to the Web에서 데스크톱을 기준으로 한 줄에 45자에서 75자의 텍스트를 표시할 것을 권장하고 있습니다. 가장 이상적인 것은 66자입니다. 66px의 Georgia 폰트로 테스트 해보면, 본문 가로 크기가 540px일 때는 한 줄에 71자가, 480px일 때는 66자가 표시됩니다.



#000000 VS #333333


  • 본문 텍스트에서 가장 많이 사용된 색은 #000000(검정색)입니다. (20%)

  • 두 번째로 많이 사용된 색은 #333333입니다. (16%)

  • 56%가 타이틀과 본문 텍스트에 같은 색상을 사용했습니다.



주요 이메일 뉴스레터들의 타이틀, 본문 텍스트 색상 조합



거의 모든 이메일이 검정색 계열을 사용하는데, 경우에 따라 완전한 검정색을 사용하기도 하고, 다양한 명도의 회색을 사용하기도 합니다. 내용을 강조하기 위해 다른 색을 써야할 때가 있지만 가독성을 높이기 위해서는 한 가지 계통의 색을 사용하고 강조할 텍스트는 명도를 다르게 하는 것이 좋습니다.


가운데 정렬 VS 왼쪽 정렬

  • 데스크톱에서 열어봤을 때 타이틀은 가운데 정렬이 54%, 왼쪽 정렬이 46%입니다.

  • 모바일에서 열어봤을 때 타이틀은 왼쪽 정렬이 54%, 가운데 정렬이 46%입니다.

  • 데스크톱에서 열어봤을 때 본문 텍스트는 왼쪽 정렬이 74%, 가운데 정렬이 26%입니다.

  • 모바일에서 열어봤을 때 본문 텍스트는 왼쪽 정렬이 76%, 가운데 정렬이 24%입니다.



가운데 정렬된 긴 글은 읽기 어렵습니다. 매 줄마다 시작되는 지점이 다르기 때문입니다.



데스크톱, 모바일 모두 타이틀은 가운데 정렬이 많고, 본문 텍스트는 왼쪽 정렬이 많습니다. 본문처럼 길이가 긴 텍스트를 가운데 정렬로 표시하면 보기도 어색하고 가독성도 떨어집니다. 타이틀이나 이미지 설명 같은 짧은 텍스트는 가운데 정렬을 사용해도 되지만, 본문 텍스트는 왼쪽 정렬을 사용하는 것이 좋습니다.



정리하면 이메일에서는,
  • 고딕체를 더 많이 사용합니다.
  • 가장 많이 사용되는 본문 텍스트 크기는 16px 입니다.
  • 가장 많이 사용되는 본문 가로 크기는 600px 입니다.
  • 가장 많이 사용되는 본문 텍스트 색상은 #000000과 #333333입니다.
  • 타이틀은 가운데 정렬, 본문은 왼쪽 정렬을 사용합니다.


이 외에도 타이틀의 텍스트 크기, 미리보기 텍스트의 사용 여부, 로딩 속도 등 다양한 항목에 대해 다루고 있습니다. 자세한 내용이 궁금하시면 원문 Typographic Patterns In HTML Email Newsletter Design를 확인하세요.

잘 디자인 된 이메일 사례가 필요하다면 Really Good Emails를 방문해보세요. 카테고리별로 다양한 참고 사례가 정리되어있습니다.

> 더 읽기: 이포그래피, 웹에서 어떻게 활용할까?올바른 웹, 모바일 폰트 사용하기


by 낙타 발자국


Posted by slowalk

웹사이트의 95%는 텍스트로 이루어져 있다고 합니다. 여러분이 읽고있는 이 글 또한 웹에 적용된 타이포그래피라고 할 수 있을텐데요, 사이트 방문자가 콘텐츠를 잘 읽고 목적지를 쉽게 찾아갈 수 있도록 하는 웹에서의 타이포그래피는 인쇄물에서의 그것보다 더 중요하다고 해도 과언이 아닐 것입니다. 웹 디자이너가 적용할 수 있는 웹 타이포그래피 요소와 디자인 팁을 소개합니다.





다양한 폰트의 선택, 미세한 활자의 조정이 가능해 디자이너의 창의성을 발휘할 수 있는 인쇄 작업과는 달리 웹에서 완벽한 타이포그래피를 구현하기에는 한계가 있습니다. 그럼에도 불구하고, 다양한 스타일의 웹폰트와 CSS의 출연으로 그래픽툴을 이용하지 않고도 웹상에서 훌륭한 타이포그래피를 구현할 수 있게 되었습니다. 웹에서 좋은 타이포그래피를 구현하는 방법을 디자인의 원리와 요소를 통해 알아보겠습니다.


타이포그래피의 요소, 웹에 적용하기 

Hierarchy(계층)

신문이나 잡지 등의 인쇄 매체에서 텍스트를 보여줄 때는 일련의 계층 구조가 필요합니다. 웹도 마찬가지입니다. 가독성이 좋은 웹페이지는 중요도에 따라 헤더와 서브타이틀, 본문, 링크 등이 시각적으로 구조화되어 시각적으로 안정감을 줍니다. 웹에서의 텍스트 계층은 글꼴의 크기 차이를 두는 것 외에도 굵기, 컬러, 기울임, 폰트 선택 등으로 적용할 수 있습니다. 타이틀과 본문을 구분지어주는 기본적인 역할부터 중요도에 따라 콘텐츠를 나누어 사용자들이 잘 읽을 수 있도록 도와줍니다. 



계층이 명확한 컨텐츠 구조는 사용자가 어디에서부터 어떠한 방식으로 글을 읽어가야 하는지 안내해 줍니다.


 

Contrast(대비)

흰 배경에는 블랙 계열의 컬러를 사용하고 헤드라인과 본문의 텍스트 크기의 차이를 두는 것 모두 대비라는 요소를 적용한 것입니다. 일반적으로 배경과 텍스트 색상의 강한 대비는 가독성을 높여줍니다. 




크기와 컬러의 '대비'는 컨텐츠의 가독성을 높여줍니다.



하지만 지나친 대비는 오히려 사이트의 분위기를 해치고 텍스트 요소간의 결합을 흩뜨리며 가독성을 떨어뜨립니다. 흔히 블랙과 화이트의 강렬한 대비가 가독성을 높여준다고 생각하기 쉽지만, 빛을 내는 스크린에서의 이러한 강한 대비는 오히려 눈에 피로감을 줄 수 있습니다. 때문에 본문의 컬러는 완전한 블랙이 아닌 진한 회색 계열의 컬러를 사용하는 것이 좋습니다. 


컬러 

웹에서의 컬러는 시선을 유도하고 사용자들이 콘텐츠를 그룹화 해 읽을 수 있도록 도와주는 중요한 요소입니다. 전체 사이트의 분위기와 사용자의 행동까지 유도하는 웹에서의 컬러 선택은 그만큼 중요하다고 할 수 있을텐데요, 그렇다면 웹에서의 글꼴 컬러 선택은 어떻게 하는 것이 좋을까요?


1. 텍스트의 가독성을 위해 배경과 글꼴 요소간의 충분한 컬러의 대비를 부여합니다.

2. Less is more - 제한된 컬러의 사용은 콘텐츠를 더욱 돋보이게 해 줍니다.

3. 온,오프라인 컬러 시스템 통일 - 브랜드 로고 및 아이덴티티 컬러를 적용하면 사용자들에게 일관된 시각적 메시지와 통일감을 줄 수 있습니다. 때문에 브랜드에 사용된 컬러 시스템을 토대로 Main, Sub, Point컬러를 텍스트에 조화롭게 적용하는 것이 좋습니다. 



브랜드의 컬러 시스템을 적용한 웹사이트 (http://www.heungkuklife.co.kr/)




크기

텍스트의 역할과 중요도에 따라 달라지는 크기는 어떠한 요소를 강조하거나 그 반대의 경우를 위해 사용됩니다. 강조를 위한 너무 큰 크기의 사이즈도, 너무 작은 사이즈도 시각적인 균형을 깨트립니다. 때문에 보기 좋은 헤드라인과 본문 글꼴의 적당한 크기 차이를 두어 구성하면 시각적 안정감을 돕습니다. 일반적으로 타이틀에 사용되는 글꼴의 크기는18px ~ 32px, 본문에 사용되는 사이즈는 12px~16px 정도이며, 웹에서 잘 읽을 수 있는 최소 폰트의 사이즈는 13px, 0.813em라고 합니다. 



비율(Scale)

우리가 보는 웹페이지에는 다양한 크기의 텍스트가 적용되어 있습니다. 타이틀과 본문 등을 적당한 비율의 크기로 배치한다면 콘텐츠를 더욱 짜임새 있게 구성할 수 있습니다. typescale은 1.618이라는 황금비율을 포함한 다양한 비율을 적용해 폰트 크기를 비교해 볼 수 있는 사이트입니다.

 


http://type-scale.com/



행간(line-height), 자간(letter-spacing)

인쇄물과 마찬가지로 웹에서의 행간과 자간은 본문의 가독성에 중요한 역할을 합니다. 어느 정도의 줄간격은 가독성을 더욱 높여줍니다. 특히 폰트의 크기가 작을수록 자간을, 내용이 많은 문단일수록 행간을 늘여주는 것이 좋습니다. 너무 좁은 줄간격도, 넓은 줄간격도 좋지 않으며 폰트 사이즈의 150%이상의 행간은 읽기 좋은 본문을 만들어줍니다. 

참고글 - 웹디자인에서의 자간과 행간에 관한 고찰 



어떠한 폰트를 선택할까?

Less is More

모든 종류의 시스템폰트를 웹에 적용할 수는 없지만 '돋움체, 굴림체' 등 웹상에서의 폰트 선택이 제한적이었던 과거에 비해 다양한 웹폰트를 사용할 수 있게 되었는데요, 과연 웹페이지에서 많은 웹폰트를 적용한 화려한 디자인이 과연 좋은 디자인일까요? 좋은 웹사이트는 한 가지 폰트로도 위에 언급한 '대비'요소를 통해 크기와 두께, 색상의 변화만으로 사이트 전체에는 시각적 통일성과 안정감을 주고, 사이트의 무게는 더욱 가볍게 만듭니다.



이미 검증받은 폰트 선택, 절반은 성공!

오랜 역사와 대중성 있는 폰트는 그 자체로 가독성과 조형성을 갖추고 있습니다. 명조, 고딕이 들어간 웹폰트가 널리 사용되는 이유 또한 가독성이 높기 때문입니다. 다양한 굵기의 서체를 지원하는 Adobe의 본고딕 또한 깔끔하고 뛰어난 가독성 때문에 많은 사이트에서 이용되고 있습니다.



타이틀과 본문에 어울리는 폰트 선택.

같은 크기에서 가독성이 더 우수한 폰트가 있을까요? 헤더와 본문 등 각 영역에 어울리는 폰트는 따로 있습니다. 일반적으로 세리프(Serif)글꼴은 본문에 작은 크기로 적용되었을 때 뭉개지는 현상이 있는데요,(예외로, Georgia같은 폰트는 크기가 작을 때 더 좋은 가독성을 보입니다.) 때문에 폰트가 어떤 영역에 적용되는지에 따라 적합한 폰트를 선택해야 합니다.



'명조(Serif)는 본문이 아닌 타이틀에 크게 적용되었을 때 웹에서 더 우수한 가독성을 보입니다.



영문과 한글의 조화 

한글 웹폰트에 비해 영문 웹폰트는 선택 폭이 넓습니다. 한글과 영문을 함께 사용할 때, 한글 웹폰트로도 영문을 쓸 수는 있지만, 사이트의 심미적인 부분을 좀 더 고려한다면 영문 웹폰트를 독립적으로 사용하기도 합니다. 적용 명조체에는 세리프 서체, 고딕체에는 산세리프 서체가 잘 어울립니다. 사이트의 성격과 분위기에 맞는 한글과 영문의 조합은 시각적 통일성을 높입니다.



나눔고딕 + Lato 


나눔명조 + PT Serif 



좋은 타이포그래피는 웹사이트가 전달하는 메시지를 돋보이게 해 주며 명확하게 내용을 전달 해 줍니다. 웹에서의 타이포그
피 활용를 통해 방문자들이 더 머물고 싶은, 즐겨찾는 사이트를 디자인 하는 데 도움이 되길 바랍니다.


출처 : Smashing Magazine, tutsplus, typecast


by 소금쟁이 발자국

 

Posted by slowalk




웹 기술이 발전하면서 우리는 다양한 디자인을 시도할 수 있게 되었는데요. 그중 하나가 웹 폰트라고 생각합니다.

제가 처음 웹을 접했을 때만 해도 기본 시스템 폰트인 돋움과 에어리얼(Arial)을 쓰면서 만족했던 적도 있습니다. 하지만 이제는 수많은 웹 폰트가 존재하는데요. 그만큼 프로젝트를 시작할 때마다 어떤 폰트를 쓸지 깊게 고민해봐야 합니다.

세상에 나온 지 2년 가까이 되었지만, 성능과 디자인에 비해 외면받는 ‘피라산스(Fira Sans)’를 소개합니다.





브라우저 '파이어폭스'로 유명한 모질라 재단은 오랫동안 오픈소스 소프트웨어 커뮤니티의 선구자였습니다. 2012년 모질라는 파이어폭스 OS에 들어가는 새로운 타이포그래피로 ‘피라 산스(Fira Sans)’라는 폰트를 선택했습니다.


FF 메타(FF Meta) 디자이너로 유명한 에릭 스피커만(erik spiekermann) 씨와 랄프 두 카로이스(Ralph du Carrois) 씨는 모질라 재단으로부터 타이포그래피 제작을 의뢰받았습니다. 모질라재단은 그들의 아이덴티티를 해치지 않으면서 모바일과 같은 작은 화면에도 적합한 디자인을 요구했습니다. 예전에 스피커만 씨가 디자인했던 FF 메타(FF Meta)는 모질라 재단의 핵심 아이덴티티 였으며, 메타를 발전시키는 방향으로 작업했습니다.





FF 메타와 매우 비슷하면서도, 다른 점이 많이 보이는데요. 작은 화면에서도 가독성을 높이기 위해 엑스 하이트(x-height:소문자 x의 높이)가 높아지고, 자간이 조금 넓어졌습니다. FF 메타의 터미널(획의 끝맺음)이 비슷하지만, 좀 더 직선적이며 조형성을 갖췄습니다.





디자이너 스피커만 씨는 자신의 블로그에 헬베티카의 가독성에 대해 논한 적이 있습니다. 1, i, l(소문자 L)이나 I(대문자 i)가 작은 화면에서 보기에는 구분이 잘 안된다는 내용이었는데요. 그는 이러한 문제점을 잘 해결해서 피라산스에 반영했습니다.




모질라 재단는 피라산스를 무료로 배포하고 있습니다. 모질라재단 깃허브, 구글 웹폰트, 타입키트, 폰트스퀴럴 등에서는 웹 폰트로 배포하고 있는데요. 피라산스는 정말 많은 패밀리를 가지고 있으며, 용량도 가벼운 편이라 오픈산스(Open Sans)를 대체할 수 있는 좋은 웹폰트라고 생각합니다.


타이포그래피의 중요성은 웹에서도 말할 것 없이 중요합니다. 특히 웹 폰트는 렌더링 방식에 따라 천차만별이기 때문에 디자이너, 개발자도 공부가 필요한 부분이라고 생각합니다. 영문 폰트를 먼저 소개하게 되어서 아쉽지만 다음에는 아름다운 한글폰트도 소개할 수 있었으면 좋겠습니다.



출처: 어도비 타입키트 블로그, 에릭 스피커만 블로그 


by 원숭이발자국




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

뉴욕에 다녀오신 적 있으신가요? 빅애플이라 불리는 뉴욕은 미국의 상업·금융·무역의 중심지로서, 또 공업도시로서 경제적 수도라 하기에 충분한 지위에 있으며, 더불어 많은 대학·연구소·박물관·극장·영화관 등 미국 문화의 중심지로도 중요한 위치를 차지하고 있지요. 구석구석마다 그 특색이 분명하고 재미가 숨어있는 도시 뉴욕.  

 

오늘 소개해 드릴 이야기는 뉴욕을 여행한 후, 뉴욕의 지도를 타이포그래피로 표현한 Theo Inglis 의 엽서 디자인을 소개시켜드릴까 합니다.

 

2010년 3월, Theo Inglis 는 미국 뉴욕으로 여행을 떠났습니다. 그를 매료시킨 뉴욕의 매력은 그의 디자인 작업에도 영향을 미쳤죠. 여행에서 돌아온 그는, 뉴욕의 지도를 만들기로 결심합니다. 뉴욕 속 여러 지역의 이름을 시각적으로 표현하여 각각 지역의 이름에 합리성을 부여하는 작업.

 

 

 

 

그럼 한번, 감상해 보실까요??

 

 


 

그의 작품을 통해 예전엔 미쳐 몰랐던 사실을 알게되었네요. 그저 이름만 알고 있었는데, 이제는 왜 그 이름을 얻게 된 이유를 확실히 알 수 있었습니다. SOHO = SOUTH OF HOUSTON ST, NOLITA = NORTH OF LITTLE ITALY, TRIBECA = TRIANGLE BELOW CANAL STREET...

  

지역의 이름을 위치적인 요소와 타이포그래피를 이용해 설명해주니 훨씬 이해도 빠르고 재치있지 않나요?

  

 

by 토끼발자국

 

공감하시면 아래 손가락 모양 클릭^^ - 더 많은 사람들과 이야기를 나눌 수 있습니다

 

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

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


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

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


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




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

바로 '이야기'입니다.

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

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

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