NSM 사이트 컨설팅 전략에 대한 스물 아홉 번째 이야기!

굿바이 굴림체, 헬로우 웹폰트

‘내 인생의 전환점은 타이포그래피 수업이었다.’ 애플의 창시자 스티브잡스가 살아생전 스탠퍼드 졸업식 연설에서 한 말입니다. 그는 대학 시절 우연히 듣게 된 타이포그래피 수업에서 서체 예술에 매료되었습니다. 이 수업을 통해서 영감을 받은 그는 10년 후 매킨토시를 설계할 때 그 기능을 추가하여 아름다운 폰트를 가진 최초의 컴퓨터를 출시하게 되었습니다.

[그림 1] 애플광고 카피 Think Different, 애플 게라몬드(Garamond) 서체 사용

오늘날 폰트들은 광고 카피, 책 표지, 영화 포스터 등 시각 디자인 영역을 중심으로 광범위하게 활용되고 있습니다. 우아한형제들의 한나체나 현대자동차의 현대 로고체와 같이 특정 기업의 브랜딩을 효과적으로 표현하는 데까지 기여하고 있기도 합니다. 이제는 글자가 메시지의 전달 기능을 넘어 아름다운 ‘예술’로 승화되고 있는 것입니다. 특히 최근에는 블로그, 쇼핑몰, 브랜드 사이트 등에 기본 폰트 대신 예쁘고 아름다운 폰트를 적용하려는 노력이 드러나고 있기도 합니다.

또한 사이트 운영자 입장에서는 모바일 디바이스의 대중화로 모든 콘텐츠가 다양한 디바이스에서 각각 동일한 모습을 보여줘야 하는 기술적인 측면 역시 고려할 사항이 되었으며, 이러한 점들을 보완하기 위해 ‘웹폰트’의 사용이 확대되고 있습니다. 이번 칼럼에서는 웹에서 심미성과 기능성에 해결책을 제시할 웹폰트에 대해 알아보도록 하겠습니다.

웹폰트에 한 발짝 다가가기 

웹폰트란 무엇인가요?

웹폰트란 웹 페이지를 보는 사람의 컴퓨터에 폰트가 설치되어 있지 않아도 임시로 폰트를 받아 웹 페이지에서 볼 수 있도록 하는 폰트의 한 종류입니다. 아직 웹폰트의 개념이 아리송하다면 시스템 폰트와 웹폰트의 차이를 구분하면 이해가 수월합니다.

시스템 폰트 vs 웹폰트 

시스템 폰트

시스템 폰트는 우리가 평소에 사용하는 컴퓨터 시스템에 설치된 폰트이며 돋음, 굴림, Arial, Verdana 같은 유니버설 폰트를 일컫습니다. 또한 폰트 파일을 다운로드 해 컴퓨터에 설치하여 사용할 수도 있습니다. 일반적으로 워드, 파워포인트, 엑셀, 메모장 등에서 기본으로 볼 수 있는 글꼴이 시스템 폰트로 사용됩니다.

웹폰트

웹폰트는 시스템 폰트와는 달리 PC에 폰트 파일이 설치되어 있지 않아도 웹 서버에서 폰트 데이터를 실시간으로 다운로드하여 깨짐 없이 원본 모습 그대로 볼 수 있는 폰트입니다. 해외 웹사이트를 방문하다 보면 디자인된 텍스트를 이용한 웹 페이지를 종종 볼 수가 있습니다. 아래 예시 이미지에서 BAUHAUS, ATLANTIS는 마치 디자인한 이미지를 보는 듯한 착각을 불러 일으키지만 웹폰트로 작성된 텍스트 입니다. 이미지가 아닌 웹폰트를 사이트에 적용할 경우 이처럼 미적 감각을 살려 사이트를 꾸밀 수 있는 장점이 있습니다.

[그림 2] 웹폰트를 활용하여 텍스트를 아름답게 표현한 웹사이트

(1번 그림 사이트 바로가기▶ / 2번 그림 사이트 바로가기▶)

​그렇다면 웹폰트는 왜 쓸까요?

​웹폰트의 특징은 사용성과 심미성에 있습니다. 기존 이미지 폰트의 기능적 약점과 시스템 폰트의 심미적 약점을 적절히 커버하고 웹에서의 활용성을 극대화한 것이 바로 웹폰트입니다.

사용성

​웹폰트는 글자가 그대로 살아 있기 때문에 방문자가 텍스트를 드래그하여 복사할 수 있습니다. 이는 지난 NSM 칼럼에서 소개해 드린 *SEO(검색엔진최적화)와 *웹접근성과도 관련이 있습니다.

이처럼 글자 그대로를 노출하는 웹폰트는 텍스트를 수정만 하면 되기 때문에 웹사이트 운영자가 이미지를 브라우저에 업로드할 때 매번 태그를 입력해야 하는 번거로운 작업들을 감소시켜 사용적인 면에서 용이합니다. 또한 웹폰트는 텍스트의 크기 변형이 쉬워 수정이 편리하며 확대, 축소를 하여도 뭉개짐이 없어 인쇄가 자유롭고 가독성이 높습니다.

[그림 3] 텍스트를 드래그하여 복사가 가능한 웹폰트 (사이트 바로가기▶)

심미성

최근 웹과 모바일웹의 트렌드는 플랫 디자인과 미니멀리즘입니다. 어필하고자 하는 의미에 초점을 맞춰 그 외의 부수적인 디자인은 자제하는 현상을 말합니다. 의미는 명확하되 중복되거나 불필요한 디자인은 자제하는 이러한 웹 트렌드는 웹폰트의 사용 목적과도 일맥상통합니다. 화려한 이미지를 넣지 않아도 텍스트만으로 멋스럽고 감성을 자극하는 웹폰트는 웹사이트를 꾸며주는 훌륭한 디자인적 요소라고 볼 수 있습니다.

[그림 4] 의미는 명확하되 중복되거나 불필요한 디자인은 자제하는 웹폰트

(1번 그림 사이트 바로가기▶ / 2번 그림 사이트 바로가기▶)

웹폰트 사용 시 고려 사항은?

​첫 번째, 국문 ‘웹폰트’ 제작의 어려움

한글은 글자의 결합이 복잡하여 영문 대비 제작에 몇 배의 시간과 노력이 들어가야 합니다. 예를 들면 ‘ㄱ,ㄴ,ㄷ,ㅏ,ㅑ,ㅓ’ 를 제작하는 것뿐만 아니라 ‘작’이라는 폰트를 나타내고 싶다면 ‘ㅈ,ㅏ,ㄱ’ 조합이 아닌 ‘작’ 한 글자를 제작해야 하기 때문입니다. 따라서 무수한 영문 웹폰트에 대비하여 국문 웹폰트는 선택의 범위가 너무 좁습니다. 대표적인 국문 웹폰트로는 네이버에서 배포한 ‘나눔고딕’이 있습니다.

​두 번째, ‘용량’의 크기

​웹폰트는 웹 페이지를 브라우저로 읽을 때 서버로부터 폰트 파일을 받아와 화면에 표시하는 방식으로 인터넷 속도나 컴퓨터의 사양에 영향을 받아 사이트가 열리는데 무게 감이 있고 부하가 일어날 수도 있습니다. 따라서 너무 많은 폰트를 지정하면 다운로드할 폰트 파일의 크기가 커지므로 가급적 두 개 이하 정도만 웹폰트를 지정하는 것을 권장 드립니다.

​세 번째, 라이선스(저작권) 확인

​웹폰트도 음악, 이미지처럼 저작권이 있습니다. 따라서 개인, 비영리 단체가 사용할 수 있는 무료 배포용 폰트의 활용 범위를 주의 깊게 확인하고, 사용하고자 하는 폰트가 완전 무료가 아니라면 웹 용으로 파일 포맷을 변환해서 사용해도 되는지 또는 유료인지에 대한 라이선스를 확인할 필요가 있습니다.

​네 번째, 브라우저 호환성 테스트 필요

​각 브라우저 별로 웹폰트의 확장자가 다를 경우를 대비하여 각각의 브라우저에 적용시켰을 때 보이는 모습이 다를 수 있다는 사실을 인지하고 미리 테스트를 해봐야 합니다. 예를 들어, ‘인터넷 익스플로러’에서는 제대로 보이는 웹폰트가 ‘크롬’이나 ‘파이어폭스’에서는 적용되지 않고 기본폰트(시스템 폰트)로 표현되는 경우도 발생할 수 있기 때문입니다.

웹폰트의 활용 알아보기

웹폰트 활용 방법

가독성과 심미성을 위한 사용법

​쇼핑몰 상세페이지에서 상품을 구경하다 보면 상품을 설명하는 많은 텍스트들을 보게 됩니다. 그런데 이러한 텍스트들은 이미지로 제작된 것들이 대부분 이어서 사용자들은 읽기를 포기하고 건너뛰는 경우가 많았으며, 이를 작은 화면의 디바이스에서 열어본다고 생각하면 더욱 읽기 불편할 것입니다. 이럴 경우를 대비하여 이미지 폰트를 시스템 폰트로 제작하는 노력이 필요하며 웹폰트를 활용하여 디자인적으로도 아름답고 시각적으로도 잘 읽힐 수 있도록 하는 것이 중요합니다.

[그림 5] (좌)디자인 요소로 활용되는 쇼핑몰 영문 텍스트, (우)가독성이 높고 수려한 웹폰트로 대체 사용 가능 (우) 사이트 바로가기 ▶

​상품의 사이즈 표나 착용감이 설명된 영역도 마찬가지입니다. 사용자가 필수적으로 확인해야 하는 요소임에도 이 영역이 이미지로 제작이 되어 있다면, PC에서는 잘 보일지라도 모바일 디바이스에서는 최대한 확대를 하여도 일정 크기에서는 텍스트가 깨지기 때문에 사용자에겐 불편한 요소일 것입니다.

[그림 6] (좌) 모바일 화면에서 이미지가 깨져 가독성이 낮은 상품 설명 (우) 깨지지 않는 웹폰트로 대체 가능

웹폰트를 사용할 수 있는 곳

구글에서는 웹폰트를 600개 이상을 제공하고 있습니다. 링크 http://www.google.com/fonts 에서 서비스를 확인하고 사용할 수 있습니다.

[그림 7] 다양한 무료 웹폰트를 제공하는 구글 서비스 (사이트 바로가기▶)

​구글 서비스에서​ 원하는 웹폰트 찾는 방법

쇼핑몰 구글 웹폰트 서비스에서 영문을 비롯한 국문, 각국의 나라들의 웹폰트를 보기 위해서는 링크

http://www.google.com/fonts/earlyaccess에 방문하여 확인이 가능합니다. 현재 한나체, 나눔고딕을 포함한 6개의 한글 폰트가 제공되고 있습니다. Ctrl+F 키를 활용하여 원하는 국가, 폰트를 찾을 수 있습니다. 한글을 찾는 방법은 아래 예시 이미지로 확인이 가능합니다.

[그림 8] Ctrl +F 찾기를 열고 Korean으로 검색하면 국문 웹폰트를 찾을 수 있습니다.(사이트 바로가기▶)

이렇게 찾은 웹폰트에는 코드가 제공되며 간단하게 코드를 붙여 스타일을 적용시키면 다양한 무료 웹폰트를 웹사이트 및 블로그 등에서 사용할 수 있습니다.

[그림 9] 구글에서 제공하는 웹폰트 무료 소스를 이용한 국문, 영문 활용 예시

웹폰트 서비스를 제공하는 사이트

무료 폰트 및 유료 클라우드 웹폰트 서비스를 제공하는 국내 업체로는 모빌리스, 타이포링크 등이 있으며 국외 업체로는 타입킷, 폰트닷컴 등이 있습니다.

[그림 10] 해외 웹폰트 제공 사이트 (좌) typekit.com (우) fonts.com

글을 마무리하며

100% 완성된 웹이란 없지만 필요한 요소를 적절하게 융합해 가는 방법은 있습니다. 심미성과 사용성을 겸비한 웹폰트는 운영면, 사용면에서 다소 부족한 웹 환경을 보완하기 위해 사용되고 있습니다. 기술이 진보함에 따라 사용성이 강조되면서 아름다움까지 두루 갖출 수 있도록 발전한 웹폰트는 사용해볼 만한 가치가 있습니다. 여러분의 웹사이트에서도 웹폰트를 활용해 보는 것은 어떨까요?

글 - 임우정 (웹사이트 컨설턴트)

woojung.im@nsm.co.kr