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





여기 크기를 맞춘 도형 조합 A, B가 있습니다. A, B 중 사각형과 원의 크기 비율이 같아 보이는 조합은 무엇인가요?  저는 B조합이 훨씬 더 자연스럽게 보입니다. A는 가로 세로 크기를 똑같이 맞췄으며, B는 상대적으로 면적을 고려해 원형의 크기를 사각형보다 조금 더 크게 그렸습니다. 이처럼 사람의 눈에 자연스럽게 보이도록 조정하는 작업을 ‘시각적 보정’이라고 합니다.


디자이너, 혹은 디자이너가 아닌 사람들도 다양한 프로그램을 통해 미세한 크기를 똑같이 맞출 수 있습니다. 하지만 프로그램이 오브젝트를 인식하는 것과 사람이 보는 것은 다르기 때문에, 때론 아주 정확한 것이 부자연스럽게 보일 수 있습니다. 서로 다른 형태 사이의 차이점을 보완해주는 작업이 필요합니다.  


최근 저는 이러한 시각적 보정에 대해 요목조목 잘 정리된 루크 존스(Luke Jones)의 “Optical Adjustment”를 읽었습니다. 여기에 몇 가지 추가 사례를 덧붙여 함께 소개합니다. (“Optical Adjustment”의 원문 번역글은 강수영님의 “시각적인 보정”에서 확인할 수 있습니다.)







1. 도형에 따른 크기 조정하기





앞서 살펴본 원과 사각형의 크기 조절부터 다시 볼까요? 사방 80pixel의 영역 안에서 사각형은 원보다 넓은 면적을 차지합니다. 우리 눈은 사방 길이를 통해 크기를 인식하기 보다는, 면적을 보고 어림잡아 비슷한 크기를 가늠합니다. 사각형보다 원의 크기를 조금 더 크게 그려주면 비교적 두 도형의 크기가 동일해 보입니다.






2. 시각적 무게 중심 고려하기






시각적 무게 중심에 따른 정렬은 플레이 버튼 아이콘을 통해서 해볼 수 있습니다. 원형과 삼각형을 중앙 정렬하면 A 아이콘처럼 됩니다. 중앙에서 빗겨나 있는 것처럼 보이는데요, 이는 삼각형의 무게 중심이 원형의 중심과 맞지 않아서 그렇습니다. 이렇게 서로 다른 형태의 오브젝트를 정렬할 때는 무게 중심을 고려하여 B 아이콘처럼 수정해주는 것이 좋습니다.







3. 면적 대비 색상 조정하기







면적에 따라서 색상의 무게감이 달라집니다. A는 파란 아이콘에 비해 텍스트 컬러가 살짝 연해 보입니다. 이렇게 넓은 면적과 비교적 좁은 면적(텍스트/라인)에 같은 색상이 쓰이는 경우가 많습니다. 이럴 때 좁은 면적의 컬러를 조금 더 짙게 수정해주면 면적의 넓이와 상관없이 (비교적) 동일한 색상으로 인지됩니다.







3. 형태를 고려해 오브젝트 정렬하기






이번에는 슬로워크에서 디자인한 DMZ국제다큐영화제 시그니처를 예시로 정렬을 살펴보겠습니다. 자세히 보면 시그니처의 우측 가장자리에 ‘~제' 로 끝나는 첫줄과 ‘-29.’로 끝나는 마지막줄이 있습니다. 온점은 한글보다 공백을 많이 포함하고 있습니다. 그래서 A처럼 정직하게 정렬하면 마지막줄만 움푹 들어간 것 처럼 보입니다. 이를 B처럼 튀어나오게 수정해주는 것이 보기에 자연스럽습니다.  









4. 명도에 따라 굵기 조정하기






4번의 컬러 조정과 같은 맥락으로, 오브젝트의 명도에 따라 굵기가 달리 보일 수 있습니다. 좌측의 흰색 텍스트와 우측 상단 검은색 텍스트(굵기 조정 전)는 같은 굵기의 폰트입니다. 검은색 텍스트가 상대적으로 가늘어 보여서 조금 더 굵게 수정했습니다. 네거티브, 포지티브 적용을 동시에 할 때 이런 점을 고려하곤 합니다.







5. 영문폰트와 한글폰트 조합시 조정하기






한글폰트와 영문폰트를 조합해서 디자인하는 경우가 많습니다. 편집디자인 툴인 인디자인 프로그램에는 ‘합성글꼴’이라는 기능이 있어 숫자, 영문, 국문, 기호 등을 각각 다른 폰트로 지정하고 세세하게 크기도 다르게 할 수 있습니다. 서로 다른 폰트를 억지로 이어붙이는 것이기 때문에, 크기값이 같아도 한글폰트가 더 커보입니다.(좌측 텍스트) 이때 크기와 높낮이를 직접 조정해주는 것이 좋습니다.(우측 텍스트)








6. 커닝(글자 간격 조정)하기








왼쪽 텍스트를 자세히 들여다보면 글자의 각기 다른 모양 때문에 배열이 균등하지 않아 보입니다. 이때 글자의 형태를 고려해 적당한 간격으로 보이도록 수정하는 것을 커닝(kerning)이라고 합니다. 커닝은 상대적으로 공백을 많이 가진 글자(숫자 1, 알파벳 A, W, V)일수록 조정을 필요로 합니다. 디자인을 전공하면 가장 기초적으로 배우는 부분임에도, 저는 커닝을 완벽히 하는 것이 제일 어렵습니다.


커닝을 연습할 수 있는 사이트도 있습니다. 완성도에 따라 점수도 매겨줍니다. 간단하게 여러분의 눈썰미가 얼마나 날카로운지 확인해보세요. -> 커닝 해보기








참고: Luke Jones - Optical Adjustment





Posted by slowalk

지난  ‘웹페이지에 굴림체만 보이는 이유, 웹폰트 이해하기’에서는 웹의 매체 특성 때문에 OS에 설치되지 않은 글꼴을 사용하려면 웹폰트를 사용해야 한다고 말씀드렸습니다. 그리고 웹폰트의 아름다움과 그 가능성에 대해 함께 알아보았는데요. 이번에는 이런 웹폰트를 어떻게 하면 잘 활용할 수 있는지, 기초부터 차근차근 알아보도록 하겠습니다.


웹폰트 불러와 사용하기


웹페이지는 많은 정보로 이루어져 있습니다. 아주 기본적인 텍스트 정보부터 사진, 그림과 같은 이미지 정보는 물론 동영상 정보도 불러올 수도 있습니다. 이 모든 것들은 웹페이지에서 HTML 태그와 몇 가지 기술로 ‘불러오는’ 것들입니다. 호출한다고 표현하기도 하는데, 영어로는 loading으로 쓰곤 합니다. 웹폰트도 다르지 않습니다. 웹페이에서 ‘불러와(loading)’ 사용하는 것일 뿐입니다. 그럼 웹폰트는 어떻게 불러올까요? 

가장 먼저 웹페이지에서 사용하고 있는 CSS파일 안에서 불러오기(import) 할 수 있습니다. 만약 index.html 에서 style.css를 사용하고 있습니다. 그럼 style.css의 상담에 다음과 같은 코드를 넣어 웹폰트를 불러올 수 있습니다. 


@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


또는 html 페이지에 <link>태그로 바로 적용할 수도 있습니다.


<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">



위와 같은 구조로 html페이지에서 ‘나눔고딕’ 웹폰트를 사용할 수 있습니다. 주소(URL)를 보면 googleapis.com이라는 주소가 보입니다. 구글에서 온라인에 폰트를 올려두고 우리에게 무료로 웹폰트를 서비스해 주고 있는 것이죠. 간편하게 웹폰트를 사용할 수 있는 이유입니다. 사용 방법은 아래와 같습니다. 


  1. https://fonts.google.com/ 에 접속합니다.

  2. 마음에 드는 웹폰트를 찾습니다. 

  3. 우측 상단의 +버튼을 눌러 ‘Family selected’에 담습니다

  4.  ‘Family selected’를 열어보면 <link> 또는 @import방법이 나옵니다.

  5. 내 웹페이지에 적용합니다.

  6. fonts.google.com에서는 영문 폰트만 볼 수 있습니다. 한글은 https://www.google.com/fonts/earlyaccess 를 방문하여 찾아봅시다.




웹폰트 직접 만들어 사용하기


google fonts의 수많은 지원 웹폰트에도 불구하고 마음에 드는 글꼴이 없을 때는? 웹폰트를 직접 만들어서 쓸 수 있습니다. 물론 사용하려는 웹폰트의 저작권 문제가 해결되어야 합니다. 웹폰트를 만드는 가장 손쉬운 방법은 온라인 생성기를 이용하는 방법입니다. 대표적인 생성기인 Web font generator를  사용하는 방법을 알아보겠습니다. 


  1. Web font generator 에 접속합니다.
  2. 가지고 있는 폰트 파일(주로 TTF파일)을 선택하고, 하단의 저작권 관련 내용을 확인합니다.
  3. 웹폰트가 생성되었습니다.
  4. 웹폰트 세트가 묶인 압축 파일을 다운로드합니다.




생성기를 통해 만들어진 웹폰트와 CSS파일을 가지고 있는 서버에 올리고 웹페이지에서 불러와 사용할 수 있습니다. 여기서 잠깐 style.css파일을 살펴보겠습니다.



@import처럼 @로 시작하는 몇 줄의 코드가 보입니다. 2행의 font-family는 앞으로 쓸 폰트의 이름입니다. 기본적으로 업로드한 폰트명으로 설정되지만 다른 것으로 바꾸어도 무관합니다. 그리고 이어 나오는 src는 폰트파일의 경로입니다. 생성된 폰트 파일의 경로를 한 줄 씩 보여주고 있는데요. 폰트는 하나인데 이렇게 복잡한 코드가 필요한 이유는 사용자들이 쓰는 브라우저가 각기 다르기 때문입니다. 브라우저마다 필요한 글꼴의 형식이 달라 이렇게 여러 줄로 안전하게 사용하는 것이죠. 

style.css안의 내용을 우리가 사용 중인 CSS파일 상단에 넣으면 지정한 font-family로 웹폰트를 사용할 수 있습니다. 


웹폰트 서비스 이용하기


웹폰트를 사용하고 싶지만 만드는 과정이 쉽지 않고, 저작권 문제가 걱정되는 것이 사실입니다. 웹폰트 생성기를 통해 상용 폰트를 웹폰트로 만들어 사용할 수도 있지만 그에 따른 저작권 책임은 온전히 사용자의 몫이기 때문입니다. 그럴 때는 유료 웹폰트 서비스를 사용해볼 수 있습니다. 저작권을 가진 웹폰트를 회원가입을 통해 나의 웹사이트에 사용하고 그에 따른 사용료를 지불하는 방식입니다. 


국내에는 아직 많이 사용되고 있지 않지만, 영미권에서는 유료 웹폰트 사용이 매우 활발합니다. Adobe에서 운영하는 Typekit이나  Monotype에서 운영하는 fonts.com이 대표적입니다. Helvetica, Futura 등 알만한 상용 폰트들을 웹에서 서비스하고 있습니다. 단순히 같은 폰트를 온라인에 올려놓은 것이 아니고, 종이가 아닌 스크린 환경에 최적화된 버전들을 서비스하고 있습니다. 


하지만 아직 한글 웹폰트를 서비스하는 곳은 많지 않습니다. 타입스퀘어를 통해 웹폰트 서비스의 사용 방법을 알아보도록 하겠습니다. 


  1. 회원가입 후, 로그인합니다.

  2. 이용 중인 플랜 중 ‘무료 플랜’을 선택합니다.

  3. 이용 범위를 확인합니다.

  4. 이용사이트를 등록합니다.

  5. 다시 위로 올라와 전용 태그를 복사하여 웹페이지에 추가합니다. 

  6. font-family 를 설정합니다.



이용 방법이 무료 서비스에 비해 다소 복잡합니다. 회원이 등록한 사이트에만 제한적으로 웹폰트를 서비스하기 때문입니다. 


마치며


웹폰트는 참 매력적인 도구입니다. 굴림과 바탕으로 밋밋하고 못난 웹페이지를 고급스러운 디자인으로 보이도록 해주기 때문입니다. 화면 밖의 타이포그래피는 참 화려합니다. 수많은 디자이너가 좋은 서체를 활용하여 더욱 아름답고 멋진 디자인을 위해 노력하고 있습니다. 하지만 웹에서는 아직 사용할 수 있는 자원이 많지 않습니다. 특히 한글 글꼴 지원은 아직 걸음마 수준입니다. 웹폰트에 대한 관심이 차츰 성장하고, 다양한 웹폰트 사용이 꾸준히 늘어나 웹페이지에서도 아름다운 타이포그래피를 볼 수 있길 바랍니다. 


작성자: 스티비 개발 문윤기

Posted by slowalk





아름다운 페이지를 위한 웹폰트


우리가 흔하게 보는 웹사이트는 대부분 글(text)로 이루어져 있습니다. 사진이나 동영상을 통해 정보를 전달 받기도 하지만 아직 대부분 글을 눈으로 읽는 과정을 통해 정보를 얻고 있습니다. 책이나 잡지같은 인쇄물에서도 글꼴(font)이 중요하듯이 웹사이트에서도 내용을 잘 전달하기 위해서, 매력적으로 보이기 위해서 글꼴은 매우 중요합니다. 


웹폰트란


왠지 웹사이트의 글꼴은 거의가 비슷해 보이지 않나요? 디자이너가 공들인 이미지 위의 글꼴에 비해 투박하게 보일 때도 많고, 대부분 같은 글꼴을 쓰고 있다고 생각되지 않나요? 이미 익숙해져서 눈치채지 못하고 있을 수도 있습니다. 


웹폰트란 문자 그대로 웹+폰트. 웹에서 쓰이는 폰트입니다. 웹에서 볼 수 있는 ‘맑은고딕’이나 ‘굴림’은 웹폰트라고 부르지 않고 아닌 다른 프로그램에서도 쓰고 있는데 왜 굳이 웹폰트라는 단어를 쓰는 걸까요? 웹폰트는 일반 폰트와 조금 다른 점이 있습니다. 


웹폰트 무엇이 다른가 1 : 온라인에서 다운로드


웹폰트는 온라인에서 다운로드 됩니다. 나는 폰트같은 걸 다운받은 적 없는데 폰트가 다운로드 된다니 더욱 혼란스럽습니다. 이를 이해하기 위해서는 웹페이지 구성 방식을 조금 살펴볼 필요가 있습니다.


웹페이지 안의 글은 단순해 보여도 여러가지 정보를 담고 있습니다. 크기, 색상, 굵기 등과 함께 font-family라는 글꼴의 정보도 가지고 있습니다. 웹브라우저가 이 정보를 만나면 크기, 색상, 굵기는 이미 정해진 방법대로 표현해주면 되는데, 글꼴 정보는 스스로 표현할 수가 없습니다. 그래서 사용자가 이미 윈도우즈나 맥에 설치해 놓은 글꼴 중 설정된 것과 같은 것을 찾아서 해당 글꼴로 보여주게 됩니다. 


여기서 이미 설치된 글꼴은 ‘시스템폰트’라고 합니다. 이미 가지고 있기 때문에 자연스럽게 보여줄 수 있습니다. 설정된 글꼴이 내 PC에 없다면? 유사한 것 중 적당한 것을 골라 보여주게 됩니다. 그러면 만든이가 디자인한대로 표현되지는 않습니다.


그래서 웹페이지 안의 글은 대부분 비슷하게 보이는 겁니다. 사용자 PC에 어떤 글꼴이 설치되어 있는지 알 수 없으니 가장 기본적인 글꼴들로 ‘안전하게’ 설정하는 것이죠. 윈도우는 맑은 고딕, 굴림, 돋움, 바탕, 궁서라는 기본 한글 글꼴을 가지고 있습니다. 



다양한 속성을 가지고 있는 텍스트



다시 웹폰트로 돌아가 봅시다. 사용자 PC에 없는 글꼴을 꼭 보여주고 싶을 때, 사용자에게 따로 어떤 폰트를 설치하라고 강요할 수 없을 때, 이 웹폰트를 사용합니다. 온라인의 어떤 공간에 폰트 파일을 올려두고서 사용자가 웹페이지를 볼 때, 브라우저에게 글꼴 정보를 전달해 줍니다. 그러면 PC에 글꼴이 없어도 볼 수 있는 것이죠. 


다만 글꼴은 용량이 클 수 있습니다. 특히 완성형 글꼴이 매우 많은 한글 글꼴은 더더욱 큽니다. 간혹 웹페이지가 번쩍 하면서 글꼴이 바뀌는 경험을 해보셨을텐데요. 이 시차가 바로 웹폰트가 다운로드되는 시간입니다. 






웹폰트 무엇이 다른가 2 : 가벼운 웹폰트

그래서 웹폰트는 가벼워야 합니다. 사용자가 기다리지 않고, 웹페이지를 아름답게 보여주려면 용량이 큰 웹폰트를 가볍게 해야 합니다. 보통 경량화는 완성형 글꼴 중 사용 빈도가 낮은 문자들을 지워버리는 방식으로 진행됩니다. 꼭 포함될 필요가 없는 한자나 일본어가 포함되어 있다면 삭제합니다. 한글 중 사용 빈도가 낮은 문자들도 삭제합니다.


KS X 1001이라는 표준이 있습니다. 많이 쓰이는 8,836자의 한글 문자 모음인데요. 이걸 기준으로 문자를 줄입니다. 이렇게 다이어트 시킨 폰트 파일을 웹에서 사용할 수 있도록 포맷을 변환하여 서버에 올리면 사용할 수 있습니다.




사용 빈도가 낮은 문자는 삭제한다.



웹폰트로 무얼 할 수 있을까 1 : 아름다운 텍스트


그럼 웹폰트로는 무얼 할 수 있을까요? 당연히 웹페이지를 매력적으로 만드는 데 사용합니다. 굴림체 일색이던 웹페이지에 생명을 불어 넣을 수 있습니다. 개성 있는 웹페이지를 만들 수 있고 사용자에게 정보가 잘 전달되도록 가독성을 높이는 역할도 합니다. 



가독성의 차이



웹폰트로 무얼 할 수 있을까 2 : 아이콘


웹폰트의 중요한 용도가 하나 더 있습니다. 바로 웹페이지의 아이콘을 표현하는 일입니다. 웹페이지에는 많은 아이콘이 사용됩니다. 사용자가 UI를 쉽게 조작할 수 있도록 안내하는 역할을 합니다. 이런 아이콘은 하나의 웹페이지에도 꽤 많이, 자주 사용되기 때문에 이를 모두 이미지로 만들고 하나하나 html 태그로 넣는 것은 효율적이지 않습니다.


그래서 웹폰트를 사용합니다. 아이콘 폰트는 ㄱ, ㄴ, ㄷ, a, b, c와 같은 문자 있던 자리에 기호와 그림을 배치하여 해당 문자가 웹페이지에 보일 때, 한글이나 영문이 아닌 그림으로 보이게 하는 겁니다. 

이미 만들어진 아이콘 모음이 많습니다. 그 중 Font awesome, Material icon이 유명하고 국내에는 Xeicon이라는 서비스도 있습니다. 


자기만의 아이콘 모음을 만들 수 있는 icomoon같은 서비스도 있습니다. 이런 아이콘 폰트를 사용하면 따로 아이콘을 그리거나 이미지로 만들지 않고도 쉽게 웹페이지에 원하는 아이콘을 넣을 수 있습니다. 





마치며


웹사이트를 만드는 기술은 나날이 발전하고 있습니다. 화려하고 멋진 웹사이트가 하루가 멀다하고 등장하고 있으며, 구글드라이브처럼 PC용 프로그램에 버금가는 복잡한 도구도 웹을 통해 서비스되고 있습니다. 그만큼 웹에서의 글꼴, 웹폰트도 발전하고 있습니다. 한글은 영문 알파벳에 비해 필요한 문자 수가 많아 그 발전 속도가 느리지만, 멋진 오픈소스 웹폰트들이 등장하고, 다양한 유료 서비스도 등장하고 있습니다. 아이콘 폰트를 사용하면 고품질의 웹사이트를 쉽게 만들 수도 있습니다. 웹폰트를 적극 활용해서 멋진 웹사이트를 만들어 보는 것은 어떨까요. 


- 참조: 한글 웹 폰트 경량화해 사용하기


by 북극곰 발자국


Posted by slowalk



들어가며


“코딩하는 디자이너”, “코딩 교육 열풍 등 코딩에 대한 열기가 뜨겁습니다. 디자이너부터 어린이까지 코딩에 대한 관심이 커지고 있고, 전문 프로그래머뿐 아니라 누구나 코딩을 할 수 있다는 “생활코딩”까지. 코딩이 대중화되고 있는 시대입니다. 텍스트 에디터에 사용되는 코딩 전용 폰트에 대해 알아보려고 합니다. 


* 이 글은 "코딩 폰트 디자인기, Monoid"와 함께 읽으면 더욱 좋습니다.


코딩 폰트는 왜 필요할까요?


코딩을 할 때는 우리가 자주 사용하는 MS워드나 한글과는 조금 다른 폰트가 사용됩니다. 우리가 작성하는 모든 것들을 문서라고 한다면, 워드프로세서로 작성하여 출력된 문서, 블로그 포스팅, SNS의 짧은 글과 같은 문서들은 사람이 사람에게 전하는 말입니다. 하지만 코딩은 사람이 컴퓨터에게 전하는 말과 같습니다. 그래서 복잡한 프로그래밍 언어를 통해서 전달하는 것이지요. 그리고 사람은 맥락과 상황을 통해 ‘이렇게’ 말해도 ‘저렇게’ 이해할 수 있지만, 컴퓨터에게는 반드시 자신이 알 수 있는 언어와 문법으로 말해줘야 합니다. 

이렇게 정확하고 엄격한 말(명령)을 전달하는데 코딩 폰트가 매우 중요합니다. 복잡한 문법 속에서 길을 잃지 않도록 가독성이 뛰어나야 합니다. 비슷한 문자끼리 혼동되지 않도록 각 문자는 명확히 구별되어야 합니다. 사람 사이의 문서에는 많이 사용되지 않는 기호들이 많이 사용되므로 기호들도 정확하게 표현되어야 합니다. 



코딩 폰트는 고정폭





뚜렷한 가독성을 위해 코딩 폰트들은 모두 고정폭입니다. 사실 고정폭 폰트은 과거 인쇄술 초창기의 타자기에서 유래되었습니다. 서로 다른 넓이를 가진 문자끼리 겹치지 않고 정확히 타이핑하기 위해 등장했습니다. 

위 그림에서 상단은 일반 폰트(맑은 고딕)이고 하단은 코딩폰트(D2 Coding)입니다. 글자 뒤에 있는 상자의 넓이를 보면 일반 폰트은 각 문자의 모양에 따라 가변적이지만 코딩 폰트은 문자에 상관없이 넓이가 같습니다. 공백이나 물음표(?) 같은 특수문자도 같으며 한글은 정확히 2배의 넓이입니다. 일반 폰트은 문자와 단어, 문장 사이의 조화와 아름다움을 위해 문자와 상황에 알맞은 넓이로 표현됩니다. 반면 코딩 폰트은 조화보다는 가독성과 정확성을 위해 고정된 폭으로 표현합니다. 

특히 코딩에 있어 일관성 있는 공백(space)와 탭(tab)은 매우 중요합니다. 작성하는 사람이 읽기 쉬울 뿐 아니라 공백이나 탭 자체가 문법인 경우도 있습니다. 코드를 작성했을 때, 일반 폰트처럼 가변적으로 폭이 적용된다면, 여러 줄의 코드를 읽기 어렵고, 정리도 쉽지 않을 것입니다. 

윈도우 기본 폰트인 굴림과 돋움을 잘 아실 겁니다. 그런데 폰트을 설정하다 보면 ‘굴림’과 ‘굴림체’, ‘돋움’과 ‘돋움체’를 각각 선택할 수 있습니다. 시스템 오류나 혼용이 아닙니다. 각각 문서에서 적용했을 때 미묘하게 다른 분위기를 가지는데, 이 이 둘은 엄연히 다른 폰트입니다. ~체가 붙은 폰트이 앞서 말한 고정폭 폰트입니다. 반대로 ~체가 붙지 않는 폰트은 가변폭입니다. 즉, 좋은 코딩 폰트이 없다면 ‘굴림체’나 ‘돋움체’를 사용하는 것도 좋은 방법입니다. 



코딩을 도와주는 코딩 폰트 





코딩 폰트의 가독성과 정확성은 무엇을 말하는 걸까요. 위 그림을 보면 상단은 일반 폰트(맑은 고딕)이고, 하단은 코딩 폰트(D2coding)입니다. 같은 문자를 차례대로 쓴 것인데, 순서대로 숫자 1, 소문자 l(엘), 대문자 I(아이), 특수기호 |(pipe), 한글 자음 ㅣ(이)입니다. 일반 폰트에서 숫자 1은 폰트의 특성상 구분이 되지만 나머지 문자는 서로 구분해내기 어렵습니다. 사람의 눈에는 비슷해 보이는 l과 I를 컴퓨터는 명확히 구분합니다. 실수로 잘 못 입력한 값을 서로 구별이 되지 않는다면? 컴퓨터는 명령을 거부하고 코딩하는 사람은 힘들어지겠지요. 하지만 하단과 같은 코딩 폰트을 쓴다면 사람의 눈으로도 명확히 구분되므로 실수를 줄일 수 있습니다. 코딩 상의 실수를 줄여주고, 실수를 쉽게 찾을 수 있게 만들어주는 것이 코딩 폰트의 역할입니다. 



코딩 폰트 사용기 


그럼 어떤 코딩 폰트을 사용해야 할까요? 고정폭이라 비슷해 보이는 폰트들도 각자의 특성이 있어 사용자의 취향에 따라 달라질 수 있습니다. ‘코딩 폰트’ 등으로 검색하면 꽤 많은 폰트이 등장합니다. 어떤 폰트을 사용해야 할까요? 어떤 기준으로 선택해야 할까요? 아래는 각 폰트을 실제 코딩에 사용해보고 느낀 점을 정리한 것입니다. 


Courier New




Courier New는 윈도우에 기본으로 설치된 폰트로 대표적인 고정폭 폰트입니다. 과거 DOS의 기본 폰트인 Courier를 개선한 폰트이며, 텍스트 에디터나 콘솔 프로그램들이 기본 폰트로 지정해 놓은 경우가 많습니다. 

하지만 한글을 포함하고 있지 않아 한글은 굴림체나 돋움체로 표현되는데, 이 둘 간의 높이와 획굵기 등이 많이 달라 서로 이질감이 느껴집니다. 특히 작은 크기로 볼 때는 이 둘간의 이질감이 커서 가독성이 떨어져 불편했습니다. 

더 알아보기>


Dejavu Sans Mono





Dejavu는 고정폭 폰트뿐만 아니라 다양한 폰트군을 가지고 있습니다. 그 중 Mono가 고정폭을 가진 폰트입니다. 기본 폰트에 비해 부드럽고 섬세하여 눈의 피로가 적었습니다. 또한 작은 크기로 볼 때도 각 문자의 특성이 충분히 나타나 추천할만한 폰트입니다. 다만 한글 서체는 포함하지 않아 각 시스템의 기본 서체로 출력되는데, 에디터마다 그 비율이 다르게 표현되어 불편한 점이 있었습니다. 

다운로드 하기 >



Bitstream Vera Sans Mono





Dejavu와 외관상 차이는 없습니다. 하지만 한글과의 조화가 좋아서 꽤 오래 사용한 폰트입니다. 특히 한글 자음을 홀로 사용할 경우에도 균형있게 표현되어 추천할만한 폰트입니다. 오랜 기간 함께 했던 폰트이기도 합니다.

다운로드 하기 >



Hack





Hack은 그 이름에서도 알 수 있듯이 오직 코딩을 위해서 개발된 폰트입니다.  (https://github.com/chrissimpkins/Hack) 폰트의 소개를 살펴보면 Dejavu와 Bitstream Vera을 기반으로 새롭게 디자인했다고 합니다. Hack의 특징은 특수 기호에서 잘 나타납니다. 특히 코딩에서 매우 자주 사용되는 콤마(,)와 세미콜론(;)의 표현이 개성있는데, Bitstream에 비해 콤마의 끝이 더 안쪽으로 구부러져 구두점(.)이나 콜론(:)과 더욱 뚜렷한 차이를 보입니다. 작은 크기의 폰트로 코딩하면 콤마 대신 구두점을 찍는 실수를 하는 적이 많은데 이를 방지해 주는 세심한 폰트입니다. 

설치형 뿐 아니라 웹페이지에서 쓰일 수 있도록 웹폰트 CDN(저장소)도 제공하고 있습니다. 

다운로드 하기 >


나눔고딕코딩





잘 알려진 오픈 소스 폰트인 나눔서체의 코딩 전용 폰트입니다. 위의 여러 폰트과는 달리 국내 기업에서 개발하여 한글을 기본으로 지원합니다. 에디터 적용해 보면 상대적으로 날씬한 느낌을 주며 분위기는 Courier와 비슷합니다. 한글과의 균형이 좋고, 표현의 문제가 없는 점은 매우 강점이지만, 폰트의 굵기가 가늘어 가독성이 다소 떨어지고 각 문자가 서로 달라붙어 있는 느낌이 들어 눈이 피로했습니다. 

다운로드 하기 >



D2 Coding





네이버에서 최근 출시한 코딩 폰트로 위의 나눔고딕코딩을 개선한 디자인입니다. 상대적으로 굵어진 획은 각 문자를 더욱 뚜렷하게 보여줍니다. 영문자, 특수기호의 스타일이 크게 변화하여 기존 나눔고딕코딩보다는 Hack에 가깝게 보입니다. 이미 우수했던 한글과의 조화도 더욱 좋아졌습니다. Hack과 나눔고딕의 장점을 두루 갖춘 폰트이라고 생각합니다. 

웹폰트나 CDN은 제공하지 않지만 설치형 폰트만으로도 충분히 써볼만한 가치가 있어 추천해 드릴만 한 폰트입니다. 

다운로드 하기 >



더 알고 싶다면 


앞서 소개한 폰트 외에 더 많은 폰트을 보고 싶다면? What are the best programming fonts?를 참고하시기 바랍니다. 현재 전 세계의 코더들이 사랑하는 코딩 폰트들을 모아두었습니다. 어도비(Adobe)에서 배포하는 Source Code Pro, 리눅스 우분투(Ubuntu)에 쓰이는 Ubuntu Mono, 맥용 폰트인 Monaco, Melo는 물론 안드로이드 기기에 쓰이는 Droid Sans Mono 등 다양한 폰트과 소개, 다운로드 링크를 제공합니다. 



마치며 


무에서 유를 창조하는 코딩은 매우 즐겁고 창의적인 활동입니다. 이런 코딩을 더욱 즐겁고 편하게 해주는 것이 바로 코딩 폰트이 아닐까요. 무엇을 만드느냐도 중요하지만, 무엇으로 만드느냐도 중요합니다. 읽기 어렵고 다루기 어려운 기본 서체보다는 무료로 배포되고 있는 코딩 전용 폰트을 설치해 보시고, 즐거운 코딩을 하기 바랍니다.



참고 


- What are the best programming fonts?

- 네이버 d2 coding

- "글꼴" by 나무위키



by 북극곰 발자국 



Posted by slowalk

보고서, 이력서, 기획서, 안내문, 초대장, 프레젠테이션…. 우리는 일상 속에서 수많은 문서를 만듭니다. 보기 좋은 문서와 그렇지 않은 문서의 차이를 만드는 데는 여러 요소가 있을 텐데요, 그 중 중요한 것이 바로 글꼴이라는 것을 아시나요?





김은영 디자이너의 책 '좋은 문서디자인 기본 원리 29'는 디자이너가 아닌 사람들도 보기 좋은 문서를 만들 수 있도록 문서디자인의 원리를 이해하기 쉽게 설명합니다. 그중 글꼴을 고르고 다루는 방법은 디자인을 전공한 저에게도 기본기를 확인하게 하는 유익한 내용이었는데요, 지금부터 몇 가지를 공유합니다.




첫째, 문서의 내용과 분위기를 고려하여 글꼴을 선택한다.



같은 내용, 같은 색상이지만 글꼴을 바꾼 것만으로 글의 인상이 바뀝니다. ①과 ②는 공식적이며 개인적 감정이 느껴지지 않는 중립적인 인상을, ③, ④, ⑤는 보다 더 개성적이며 친근하고 자유로운 인상을 줍니다.

글자의 생김새를 말하는 글꼴은 글의 첫인상을 결정하는 중요한 요소이므로 글의 내용과 작업자의 의도에 맞게 적절하게 선택하는 것이 중요합니다. 보고서와 이력서, 논문 등 공식적인 문서에는 ①, ②가, 친근하고 자유로운 인상이 필요한 초대장과 포스터 등에는 ③, ④, ⑤와 같은 글꼴이 더 잘 어울립니다.



여기서 한 걸음 더 나아가면 같은 고딕 계열이라도 다양한 종류의 글꼴이 있다는 것을 알 수 있습니다. 위의 다섯 가지 글꼴은 언뜻 보면 크게 다를 것이 없어 보이지만, 자세히 보면 글꼴의 끝 모양과 길이, 자음과 모음 사이의 간격 등 미세한 차이가 각각의 특징을 드러냅니다. 작은 부분으로도 글꼴의 표정을 읽을 수 있게 된다면 그때부터 문서디자인이 재미있어집니다.



글꼴 자체와 더불어 글꼴의 굵기와 크기에 변화를 주어 문서에 비언어적인 표현을 담을 수 있습니다.(내용의 강약 조절, 문단 정리 등)




둘째, 글자의 굵기와 기울기, 너비를 강제로 변형하지 않는다.



변형 기능은 우리가 자주 사용하는 프로그램(한글, 워드프로세서, 파워포인트, 일러스트레이터, 인디자인 등)에 기본으로 포함되어 있고, 적절하게 사용하면 내용 전달에 효과적입니다. 그러나 지나친 변형은 가독성을 떨어뜨리고 문단의 균형을 깨뜨립니다.

① 획을 변형할 때는 볼드(B)버튼으로 글자 주위에 강제로 획을 덧씌우기 보다 처음부터 글꼴 가족으로 개발된 본래의 굵은 서체를 사용하는 것이 바람직합니다. ② 낱자를 나열해서 쓰는 로마자와는 달리 모아쓰기를 하는 한글은 글자를 지나치게 기울일 경우 균형감이 쉽게 무너지므로 많은 양의 글을 한꺼번에 기울이는 것은 자제합니다. ③ 글자 너비를 조정하면 한정된 공간 안에 많은 양의 글을 넣을 수 있다는 장점이 있지만, 글꼴의 본래 인상이 훼손되므로 신중하게 적용해야 합니다.




셋째, 찬찬히 읽어야 하는 긴 글에는 고딕보다는 명조를 사용한다.



명조는 획의 시작과 끝에 부리와 맺음이 있어 글자 간 실루엣 차이가 크고, 이런 특징 덕분에 많은 글자가 나열되어 있더라도 글자를 쉽게 구분할 수 있어 고딕보다 가독성이 높습니다. 반면에 같은 크기에서 명조는 고딕보다 0.5-1pt 작아 보이므로, 크기 수치를 높일 수 없는 상황에서 더 또렷하게 보이길 원한다면 명조가 아닌 고딕을 사용합니다. 일반적으로 제목이나 소제목에는 굵은 획의 고딕을, 본문에는 명조를 사용하면 무난하게 잘 읽히는 문서가 됩니다.




넷째, 자간<어간<행간<단락 사이가 명확히 드러나야 한다. 자간을 조절하기 어렵다면 이렇게!



글자와 글자 간 여백은 자간(=글자 사이), 낱말과 낱말 간 여백은 어간(=낱말 사이, 띄어쓰기 공간), 글줄과 글줄 간 여백은 행간(=글줄 사이)이라고 말합니다. 문서 작업을 할 때는 자간<어간<행간<단락 사이 순으로 면적을 조정해야 보기 좋은 문서가 됩니다. 자간이 너무 붙어 있으면 글자를 알아보기 어렵고, 행간이 너무 떨어져 있으면 전체 내용을 파악하는 데 오랜 시간이 걸립니다. 이는 사람들이 글을 읽을 때 글자 자체뿐만 아니라 글자 사이의 공간을 인지하여 내용을 파악하기 때문입니다.



글자의 세밀한 조정이 낯설 때는 자간을 어느 선까지 줄여야 할지 모릅니다. 그럴 때는 글 끝에 '으으'를 적어보고 두 글자가 서로 붙지 않는 선에서 멈추면 됩니다.




다섯째, 복잡하거나 선명한 이미지 위에는 글자를 올리지 않는다.


언어정보를 배제하고 보면 글자는 여러 개의 가는 선으로 이루어진 복잡한 이미지와 같습니다. 이 때문에 이런 개체가 제대로 보이기 위해서는 개체와 배경 간에 대비가 있어야 합니다. 개체가 복잡하면 배경은 단순하게, 개체가 선명하면 배경은 흐리게, 개체가 밝다면 배경은 어둡게, 개체가 어둡다면 배경은 밝게 해야 가독성이 높아집니다.



기본에 충실한 문서디자인은 보는 사람에게 안정감과 신뢰감을 줍니다. 이 밖에도 글의 분량이 많다면 매 글줄의 시작점을 통일할 것, 단락의 첫 줄은 최소 한 글자 반을 들여쓰기할 것, 표와 가운데 맞추기를 습관적으로 사용하지 말 것 등의 원리가 있지만, 일단 오늘 소개된 몇 가지만 기억한다면 누구나 보기 좋은 문서를 만들 수 있을 것입니다.




참고도서 : 좋은 문서디자인 기본 원리 29, 김은영

by 두루미 발자국




Posted by slowalk

코딩할 때 어떤 폰트를 사용하시나요? 개인적으로 코딩의 시작은 에디터를 보기 좋게 세팅하는 일부터라고 생각하는데요, 장시간 에디터 화면을 봐야 하기 때문에 꽤 신중하게 폰트를 고르는 편입니다. 


코딩에는 일반적인 문서를 작성할 때와는 조금 다른 폰트를 사용하게 되는데요. 어떤 폰트를 선택하느냐의 기준은 저마다 다르겠지만, 코드 정렬을 위해 고정폭 폰트를, 작은 크기에서도 가독성이 좋고 문자들간의 구분이 잘 되는 폰트를 사용합니다. 마지막의 예를 들면, 숫자 0과 영문자 O, 대문자 I와 소문자 l 을 확실히 구별할 수 있는 것들 말이죠. Consolas, Monaco, Menlo, Source Code Pro 를 비롯하여, 프로그래머들이 애용하는 몇몇 '코딩용 폰트'들이 있습니다. 그 가운데, 새롭게 선보이는 Monoid를 소개합니다. 





Monoid는 이름의 mono에서도 알 수 있듯이 고정폭 폰트이며, 오픈소스 폰트라 누구나 사용이 가능합니다.이 폰트의 디자이너 Andreas Larsen는 일반적인 디자인의 생각과 조금 다른 접근으로 Monoid를 만들었다고 합니다. 그동안 라센은 다른 코딩용 폰트에 변형을 가하고 바꿔 사용하면서 자신만의 코딩용 폰트를 만들고 싶었습니다. 



타협

글꼴을 디자인 할 때, 한 번에 여러가지 문제를 해결하기도 하고, 한 가지 문제에 대한 답이 다른 문제와 충돌하기도 합니다. 그는 먼저, 디자인 프로세스 전반에서 일관성 있는 디자인을 선택하고, 명확한 초점을 유지할 수 있도록 목록을 작성하였습니다. 



우선순위

그는 자신만의 해석으로 Monoid와 함께 Fira Mono, Source Code와 Pragmata Pro 각각이 추구하는 최우선의 특징을 나열해보았습니다 . 이들은 서로 다른 특징을 가진 대표적인 글꼴입니다.




Fira Mono는 특히 큰 크기에서 예쁜 글자이며, Source Code Pro는 고정폭 폰트 계에서 팔방미인입니다. 어디에든 사용할 수 있지요. 또 다른 훌륭한 폰트인 Pragmata Pro는 가장 콤팩트하고 장평이 좁은 글꼴 중 하나입니다. 


그에 비해 Monoid는 어떤 폰트일까요? Monoid에는 다음과 같은 우선순위를 정했습니다. 

1. 읽기 쉬운 - 읽기 쉽고 문자를 구별하기 쉬워야 한다.

2. 조밀함 - 화면에 보다 많은 코드를 쓸 수 있어야 한다.

3. 예쁜 - 매일 몇 시간을 봐도 좋아야 한다.

 

다른 접근

그는 코딩에서 자신이 선호하는 줄 간격이 있다는 것으로 가독성에 우선순위를 두었습니다. 그 간격은 15px이었고, 특정한 크기의 그리드 안에서 Monoid가 매우 뚜렷하게 보이길 원했습니다. 


- Bitmap

비트맵 글꼴을 사용하면, 글리프를 만들기 위해서는 그리드에 적절히 픽셀을 채우면 됩니다. 특정 글자 크기에서 완벽하게 선명하다는 것이 장점이지만, 크기 조절의 단점이 있습니다. 



 



- 외곽선

벡터 방식의 외곽선 글자도 작게 축소할 때의 오차로 인한 부자연스러운 모양이 출력되기도 합니다. 힌팅은 외곽선 글자 정보인 힌트를 이용하여 가능한 그리드에 맞게 글꼴을 인위적으로 변형하는 것인데요. 이를 통해 글자의 출력 형태를 다듬어 보다 나은 결과물을 얻을 수 있습니다.  



Monoid의 방식

Monoid에는 위의 두가지 방식을 결합하여, 처음에 15px의 그리드에 맞게 외곽 글리프를 그렸습니다.





해상도를 제한하는 그리드에서 그리면,  M과 N처럼 동일한 폭이 되지만 결과적으로 비트맵에서의 선명도와 같이 15px에서 글자는 매우 분명해집니다.  



(위에서부터) Monoid, Fira Mono, Source Code Pro, Pragmata Pro








저는 가독성과 실용성, 심미성까지 갖춘 Monoid를 사용해보려고 에디터 설정을 바꿔보았습니다. 작은 글자에서부터 큰 글자까지 읽기에 무리가 없고, 무엇보다 몇 가지 줄간격 옵션이 있어 입맛에 맞게 다운로드할 수 있다는 점이 마음에 듭니다. 여러분도 한 번 사용해보세요!



출처 : Monoid, Medium


by 비숑 발자국


Posted by slowalk




에코 폰트라고 아시나요? 에코폰트는 잉크절감을 위한 폰트를 말합니다. 이미 국/내외 에코폰트가 개발되어 사용되어지고 있는데요. 지금도 에코폰트는 계속 진화하고 있습니다. 오늘은 기존의 에코폰트보다 좀 더 진화한 폰트를 소개하고자 합니다.



Ryman Eco(라이먼 에코)라는 이름의 폰트인데요. 이 폰트는 헬베티카, 푸트라 등의 일반적인 폰트에 비해 잉크의 사용량이 1/3밖에 안된다고 합니다. 뿐만아니라, 기존에 개발되었던 잘 알려진 에코폰트(알파벳)와 비교하여도 27% 더 적은 잉크를 사용한다고 하네요. 만약 모든 사람들이 프린트를 할 때 이 폰트를 사용한다면 매년 약 4억 9천개의 잉크 카트리지를 아낄 수 있다고 합니다. 


하지만 어떤 좋은 서체도 사용되지 않는다면 무용지물이 되겠죠. 특히, 다양한 서체를 사용하는 디자이너커뮤니티에 알려지지 않고 사용되지 않는다면 실패한 서체라고 볼 수 있을겁니다.  헬베티카, 푸트라, 유니버스 등 매일같이 사용되는 인기폰트도 널리 알려지기 전에 디자이너들에 의해서 개발되고 채택되었습니다.








라이먼 에코 폰트 는 모노타입(Monotype)의 Dan Rhatigan과 디자인 에이전시 그레이 런던(Grey London)이 문구 브랜드 라이먼(Ryman)을 위해 개발했는데요. 담당에이전시인 그레이 런던은 이 폰트가 성공적으로 사용되기 위해선 디자인커뮤니티 내에 잘 알려져야 생각했습니다. 


그레이런던은 이 서체를 알리기 위해 알파벳 포스터 프로젝트(The Alphabet Poster Project)를 기획했는데요. 인쇄기술자, 디자이너, 예술 감독 등 디자인관련 종사자 중 영국에서 가장 영향력 있는 26명을 섭외하여 알파벳마다 한 명의 작가를 지정하여 포스터를 만드는 프로젝트입니다.


26명의 디자이너들은 '아름답도록 지속가능한' 이란 주제를 갖고 각자의 생각을 알파벳과 함께 표현하여 포스터를 완성했는데요. 이 폰트 개발에 취지에 맞게 인쇄하지 않고 웹사이트에만 게재하였습니다. 


그 중 인상깊었던 작품들을 소개합니다.




Splash


알파벳'S'는 지속가능성과 디자이너가 사용하는 서체를 의미하며 연어와 물은 자연을 상징합니다. 이 둘의 조화를 통해 자연에 대한 디자이너의 책임과 역할을 표현하고, 연어의 활력있는 모습과 퍼져나가는 물을 통해 미래의 긍정을 표현한 작품입니다.




Iceburg


물에 잠긴 Ryman Eco 소문자 'O' 위에 홀로 있는 북극곰을 표현. 에코폰트의 사용으로 지구온난화와 그로인한 해수면 상승을 조금이나마 늦출 수 있다는 메시지입니다.



Rising C level


디자이너에게 알파벳 'C' 는 Cyan색상을 의미하며 Cyan색상은 곧 바다의 색을 연상시킨다. C의 터미널 부분과 Ryman Eco 형태적 특성을 이용해 기후변화와 해수면 상승, 물에의한 재해를 표현한 작품입니다.



One less cartridge


Ryman Eco 사용으로 잉크카트리지의 사용을 줄이자는 메시지입니다.






이 외에 다른 작품들도 웹사이트를 통해 볼 수 있는데요. 각 포스터마다 담당 작가와 인터뷰, 포스터파일과 폰트다운로드를 무료로 제공하고 있습니다. Rymaneco 웹사이트 바로가기


아무리 좋은 것도 어떤 마음을 갖고 어떻게 사용하느냐에 따라 좋은 결과를 낳을 수도, 무용지물이 될 수도 있습니다. 에코폰트의 사용으로 얼마나 많은 효과를 얻을 수 있을지 확실치 않지만 이런 지속적인 노력과 관심이 하나 둘 모여 더 좋은 세상을 만들 수 있는 것이 아닐까요?



출처: Rymaneco



고라니발자국

Posted by slowalk