지난  ‘웹페이지에 굴림체만 보이는 이유, 웹폰트 이해하기’에서는 웹의 매체 특성 때문에 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



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

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





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




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



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

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



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



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




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



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

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




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



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




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



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



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




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


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



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




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

by 두루미 발자국




Posted by slowalk

모든 사람의 글씨는 특별합니다. 상대에게 간절하게 전하고 싶은 메시지가 있는 경우라면 더욱 그렇죠. 그런 의미에서 조금은 특별한 글씨가 있습니다. 바로 노숙인들의 글씨인데요. 어쩌면 많은 사람들이 외면하고 싶어하는 이 글씨의 특별함을 발견한 것은 에럴스(Arrels) 재단입니다. 에럴스 재단은 바로셀로나의 노숙인들을 위해 활동하고 있는 비영리 재단입니다.





에럴스 재단은 노숙인들의 글씨를 본떠 글꼴로 제작했습니다. 그리고 완성된 글꼴은 글꼴 제작에 참여한 노숙인들의 이름으로 Homeless Fonts 홈페이지를 통해 판매되고 있습니다. 글꼴 판매 수익금은 바로셀로나의 노숙인들의 지원하는 데 사용된다고 하네요. 그렇다면 각 글꼴의 작업에 참여한 노숙인들의 이야기를 들어볼까요?




젬마(Gemma)


마드리드에서 태어나 새로운 시작을 위해 바로셀로나로 온 젬마는 몇 번의 잘못된 선택으로 길거리의 삶을 시작하게 되었다고 합니다. 하지만 그녀는 길거리 생활을 통해 생각할 수 있는 시간과 여유를 얻었다고 말합니다. 그리고 아침 식사, 지하철 티켓, 수면 공간 등 당연하게 여기던 것들의 소중함을 알게 되었다고 합니다.




기예르모(Guillermo)


음악과 여행을 사랑한 기예르모는 아르헨티나에서 태어나 20개 이상의 국가를 여행했습니다. 바르셀로나에서 거리의 생활을 시작한 후에도 그만의 재치와 음악에 대한 열정을 잃지 않은 기예르모는 자신의 생각을 표현하는 것을 즐길 줄 아는 사람입니다.




로레인(Loraine)


로레인은 런던에서 태어났습니다. 매달 내는 월세나 전기세를 고민하던 평범한 주부였던 그녀는 2009년 바르셀로나에 휴가를 왔다가 여권을 도난당한 후 집으로 돌아가지 못하고 길거리의 삶을 시작하게 되었다고 합니다. 스페인어를 하지 못하는 그녀에서 길거리의 삶은 모험이었습니다. 




루이스(Luis)


루이스는 스페인 남부지역에서 태어났습니다. 그는 35세의 나이에 부인을 잃고 새로운 삶을 시작하기 위해 바르셀로나로 왔습니다. 하지만 새로운 도시에서 직업을 구하는 것이 쉽지 않았고 결국 거리의 생활을 하게 되었습니다. 4년동안 거리 생활을 한 루이스는 거리의 사람들이 점차 늘어나고 있어 잠자리를 찾거나 먹을 것을 구하는 일이 더욱 어려워지고 있다고 말합니다.





한순간의 실수로 삶의 희망을 잃어버린 이들에게 자신의 글꼴이 판매되고 사용되는 것을 지켜보는 경험은 다시 한 번 사회의 구성원으로서 자립할 수 있다는 희망이 되었을 것입니다. 또 글꼴과 함께 소개되는 노숙인들의 이야기는 글꼴 속에 담겨 있는 그들의 삶의 무게를 느낄 수 있는 기회가 됩니다. 이들의 활동을 응원해주세요. 



출처 : Homeless Fonts



by 사막여우 발자국




Posted by slowalk

굴림체는 한국의 컴퓨터 환경에서 가장 많이 사용되는 글꼴이라고 볼 수 있습니다. 윈도우95부터 한글 윈도우에 기본 글꼴로 탑재되었기 때문입니다. 최근 1주일 사이에 이 굴림체를 바탕으로 한 두 개의 프로젝트가 등장했는데요, 한번 보실까요?


1. 굴림계획 (링크)


"우리는 굴림체의 수호자입니다. 우리는 어떠한 폰트도 두려워 하지 않으며 세상을 굴림체로 만들 것입니다."라고 소개하는 굴림계획 웹사이트는 각종 이미지에 들어있는 글꼴을 굴림체로 바꿔서 보여주고 있습니다.



(좌) 스티브잡스 전기 오리지널 표지 / (우) 굴림계획이 수정한 표지


(좌) 대법원 오리지널 아이덴티티 / (우) 굴림계획이 수정한 아이덴티티

 

이것의 모태가 된 것은 'Comic Sans Project' 인데요, 2011년 11월에 시작된 이 프로젝트는 굴림계획과 마찬가지로 각종 이미지에 들어있는 글꼴을 Comic Sans로 바꿔서 보여주고 있습니다.



(좌) 샤넬 오리지널 아이덴티티 / (우) Comic Sans Project가 수정한 아이덴티티


(좌) NASA 오리지널 아이덴티티 / (우) Comic Sans Project가 수정한 아이덴티티



2. Gulimize (링크)


Gulimize는 웹사이트의 글자를 굴림체로 바꿔서 보여주는 크롬 확장프로그램입니다. 크롬 브라우저에서 Gulimize를 설치하면 됩니다.

"그동안 폰트 산업은 굉장히 많은 변화를 겪었습니다. 하지만 한글 폰트 산업의 중심에는 언제나 굴림이 있었습니다. 다른 폰트를 두려워 하지 말고, 간단한 플러그인 설치로 굴림체의 정신을 계승하세요." 라고 소개합니다.

(Gulimize를 제작한 Premist님의 소개 트윗)


비슷하게 웹사이트의 글자를 Comic Sans로 바꿔서 보여주는 크롬 확장프로그램을 구글에서 내놓기도 했었는데요, 2011년 만우절에 "앞으로 크롬의 공식 글꼴로 Comic Sans를 사용하겠다."는 만우절 농담을 발표하기도 했습니다. http://www.google.com/landing/csfe/


현재는 구글에서 제작한 Comic Sans for Everyone은 다운로드할 수 없는 상태이지만 같은 기능을 하는 확장프로그램이 크롬 웹스토어에 등록되어 있네요. 



2011년 만우절에 구글은 Comic Sans를 가지고 장난을 하나 더 쳤는데요, 구글에 'Helvetica'라고 검색하면 검색결과가 Comic Sans 글꼴로 보이게 한 것입니다.


(이미지 출처: Softpedia)




3. Comic Sans를 둘러싼 논란


여기서 왜 Comic Sans를 다루는 프로젝트가 여럿 있는지 그 이유를 살펴볼까요? 가장 최근에는 이런 일이 있었습니다.

2012년 7월, 유럽입자물리연구소(CERN)는 입자물리학 표준모형인 히그스 보손(Higgs boson) 또는 히그스(힉스) 입자와 거의 일치하는 새로운 입자를 발견했다고 발표했습니다.

그런데 이 발표를 본 과학자들이 충격에 빠졌다고 하는데요, 발표자료에 사용된 글꼴이 Comic Sans였기 때문입니다.

(이미지 출처: The Verge)


이것을 보고 Comic Sans를 개발한 디자이너인 Vincent Connare도 발표자인 Brian Coxx 교수에게 트위터 멘션을 작성하기도 했습니다.



Comic Sans 논란의 핵심은 이것입니다. 'Comic Sans는 이름 그대로 코믹한 용도에 사용하기 위해 만든 글꼴인데 왜 다른 용도로 사용하느냐.'

Comic Sans 반대운동을 벌이는 사람들은 중요하고 공식적인 문서에는 Times New Roman과 같은 글꼴을 사용하고, Comic Sans는 웃기거나 비공식적인 문서에 사용하자고 주장합니다.

Comic Sans Criminal이라는 웹사이트에서는 Comic Sans을 아래의 경우에만 사용하자고 주장합니다.



  • 독자가 11세 이하일 때
  • 만화를 그릴 때
  • 독자가 난독증이 있고 Comic Sans를 좋아한다고 정식으로 말했을 때


Comic Sans 또한 굴림체와 마찬가지로 윈도우95에 처음 탑재되어 세상에 알려졌습니다. (Comic Sans의 탄생에 관해서는 The Story Behind Comic Sans를 참고하세요.)



4. 굴림체를 둘러싼 논란

굴림체는 Comic Sans와는 다른 이유로 논란이 되었는데요, "우리가 무심코 쓰고 있는 굴림체는 일본서체입니다."라는 글이 그 시초가 되었습니다.


이 글에서는 굴림체가 일본 모리사와의 '나루체'를 바탕으로 제작된 것이라고 소개하고 있는데요, 세종대왕기념사업회가 발간한 '한글글꼴용어사전'을 보면 "흔히 나루체라 불리는 굴림체는 1970년 일본의 나까무라가 개발한 나루체의 글자 성격을 한글에 응용한 글자체로서 여기에 그대로 나루체 한자를 함께 사용하고 있다."라고 나와 있습니다. 또한 글꼴 디자인회사인 산돌커뮤니케이션의 웹사이트와 산돌커뮤니케이션 석금호 대표가 작성한 글을 보면 그것이 사실임을 알 수 있습니다.


물론 '굴림계획'과 'Gulimize'는 굴림체가 일본 글꼴에서 유래된 것이라는 사실과 관련이 있어 보이지는 않습니다.
'굴림계획'과 'Gulimize'의 제작 의도에 대해서는 다음에 더 자세히 소개할 기회를 만들 예정입니다.


by 펭도 

 

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


Posted by slowalk