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


우리가 흔하게 보는 웹사이트는 대부분 글(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

지난 10월 4일에 소개한 '굴림계획'과 'Gulimize'의 제작자와 이메일로 인터뷰를 진행했습니다. 그 내용을 소개합니다.

슬로우워크 블로그에 소개된 이후 '굴림계획'은 누구나 이미지를 업로드할 수 있는 '다 함께 굴림' 기능을 추가했고, 'Gulimize' 또한 설치한 사용자 수가 21명으로 증가했습니다. 


'다 함께 굴림' 기능을 통해 'Gulimize'의 제작자 Premist님이 '굴림계획'에 업로드한 이미지



굴림계획은 따로 제작자가 명시되어있지 않아서 Tumblr의 'Fan Mail'기능을 이용해 연락했고, 이후 이메일주소를 전달받아 인터뷰를 진행했습니다.

Gulimize는 제작자가 Premist님으로 명시되어 있어서 Premist님의 github 페이지에 적힌 이메일주소로 질문을 보냈습니다. 

인터뷰에 응해주신 굴림계획 멤버와 Premist님께 감사드립니다.



1. 굴림계획 제작자와의 인터뷰


- 간단히 본인 소개를 부탁드립니다.

디자이너들로 구성되어 있습니다.


- 어떤 의도로 굴림계획을 시작하게 되었나요?

"'Comic Sans Project'를 보고 즉흥적으로 만들게 되었습니다. Comic Sans와 같은 서체가 한글에는 무엇이 있을까 고민하던 중 엽서체와 굴림체를 떠올렸고, 그 중에서도 파급력이 크고 '특별한 의미가 있는' 굴림체를 선택하게 되었습니다. 'Comic Sans Project'의 카피이기 때문에, 최대한 똑같이 만들기 위해 노력했습니다. 타이틀에 걸려 있는 슬로건 "우리는 굴림체의 수호자입니다..." 역시 'Comic sans project'의 슬로건을 굴림계획에 맞게 번역한 것일 뿐 특별한 의미는 없습니다."


- 작업하는 디자이너는 모두 몇 명인가요?

"처음에 6명의 멤버로 시작했으며, 추가로 멤버 요청을 하신 두 분을 더 받아 등록된 멤버는 8명입니다. 최근에는 텀블러의 submit 기능을 이용해 추가로 작업을 받기도 합니다."


- 다양한 분야의 작품이 올라오고 있는데, 굴림체로 바꿀 이미지는 어떻게 선정하시나요?

"텍스트 위주로 구성된 대상을 선정하여 Gulimize하고 있습니다.처음에는 로고 위주로 접근하였으나, 최근에는 다양한 대상들 혹은 본래 굴림체로 만들어진 pre-gulimize 이미지도 업로드하고 있습니다."


- 'Comic Sans Project'에 대해서는 어떻게 생각하시나요? 

"재미있는 프로젝트라고 생각합니다.Comic sans project에서는 굴림계획을 모르시겠지만, 감사드립니다."




2. Gulimize 제작자와의 인터뷰


- Gulimize를 만드신 의도가 궁금합니다.

"굴림을 흔히 디자인에 재앙을 가져다주는 폰트라고 하죠. 기본 글꼴을 굴림으로 해 놓은 사이트들을 자주 볼 수 있는데, '이 세상의 모든 사이트가 굴림을 사용한다면 과연 어떻게 보일까'라는 단순한 호기심에서 제작해 보았습니다. 마침 '굴림계획' 이라는 텀블러를 보고 감동(?) 받기도 했고요."


- 제작시간은 얼마나 걸렸나요?

"처음에는 굴림에 맞게 레이아웃을 다듬어주는 기능까지 추가하여 꽤 그럴듯하게 만드려고 했지만, 우선 빨리 올리는 것이 좋겠다는 생각이 들어 10분 정도의 시간을 들여 제작하였습니다. 지금은 기능이라고 해도 CSS font-family 속성을 오버라이드 하는 기능밖에 없습니다. 호응이 좋으면 여러 기능을 추가한 업데이트 버전을 만들 계획도 있어요."


- Comic Sans for Everyone의 굴림체판이라고 봐도 될까요?

"구글의 만우절 장난인 Comic Sans for Everyone을 말씀하시는 것이라면, 정답입니다. :)"


- 굴림체에 대한 Premist님의 생각을 듣고 싶습니다. 

"굴림은 최정호 선생님께서 만드신 것으로 알고 있습니다. 당시에 제작하셨던 굴림은 일본의 모 폰트 제작회사에서 만든 '나루' 에 어울리는 둥글둥글한 모양으로 제작되었다고 전해지는데요, 그 당시에 쓰기에는 괜찮았던 폰트였다고 생각합니다. 지금까지도 굴림은 많은 웹 사이트들에서 사용되고 있지만, 한글의 멋을 더 잘 살릴 수 있는 여러 폰트가 개발되었으니 보다 많은 폰트를 웹 상에서 볼 수 있었으면 하는 바람입니다. 한국의 폰트 시장이 안타까운 상황이긴 하지만요. :/"



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