구글에서 제공하는 나눔고딕 웹폰트 사용하기

홈페이지 제작시나 워드 프레스 같은 CMS 툴을 사용하다보면 영문에 최적화된 테마를 미리보기로 보고 골랐을때와 실재 적용했을때 한글폰트로 인해 예쁘게 보이지 않아 폰트를 바꿀 수 있는 방법을 찾게 됩니다.

웹에서는 한글이나 MS워드 프로그램처럼 PC에 설치된 폰트를 마음대로 적용할수가 없는데 이때 사용할 수 있는 방법이 두가지가 있습니다.

하나, 폰트를 이미지로 작업해서 올린다.

둘, 원하는 폰트를 웹폰트로 만들어 CSS에서 적용하여 사용한다.

첫번째 방법은 원하는 모든 폰트를 웹에서 사용가능하지만 텍스트 대신 이미지 텍스트로 모두 도배할 수도 없고(성능이나 접근성 측면에서도 권장하지 않습니다) 또한 사용전에 저작권을 미리 확인 하여 사용해야 하는 이슈도 있습니다.

두번째 방법은 웹폰트를 만들거나 이미 만들어진 웹폰트 파일을 (woff / eot 폰트) 파일을 웹서버에 올리고 CSS를 통해 호출해서 사용하는 방법입니다.

웹 폰트란 웹 제작자가 의도한 글꼴을 사용자 브라우저 화면에 그대로 표시하기 위해 사용하는 웹용 글꼴을 말합니다. 로컬 PC에 미려한 글꼴이 없는 경우 브라우저는 웹 서버에서 즉시 제작자가 올려둔 글꼴을 내려받아 사용자에게 표시하게 됩니다. 예쁘지만 사용자도 모르는 사이에 웹 서버에 있는 글꼴을 내려받아야 하기 때문에 성능과 타협해야 합니다. 느린 웹 사이트에는 권장하지 않습니다.

예를 들어 나눔고딕 웹 폰트를 사용하려면 일단 나눔고딕 글꼴이 웹 서버에 올라가 있어야 합니다.
아래 파일 중에 최소 woff 포멧과 eot 포멧을 내려받아 서버에 올려놓으세요.

NanumGothic.woff(982KB)
NanumGothic.eot(745KB)
NanumGothic.ttf(2.23MB)   < ttf형태의 트루타입 폰트도 사용가능하지만 용량을 보시면 2메가가 넘는 크기죠 따라서 웹용으로 사용하기는 권장하진 않습니다.

woff(Web Open Font Format) 포멧은 W3C 권고 표준이고 파이어폭스, 사파리, 오페라, 크롬, IE 9 브라우저가 지원하고 있지만 IE 6~8 브라우저가 지원하지 않습니다.

그리고 eot(Embeded Open Type) 포멧은 IE 6~8 브라우저가 지원하지만 다른 브라우저들은 eot 포멧을 지원하지 않습니다. 따라서 모든 브라우저에서 동일한 글꼴을 보이게 하려면 브라우저 호환성을 확보하기위해 woff, eot 포멧의 파일 모두 웹서버에 올려서 사용할 필요성이 있습니다.

그럼 1) 저작권 문제가 없는 2) 웹폰트로 사용가능한 공개된 폰트 중에서 3) 구글에서 웹폰트로 사용할 수 있게 제공하고 있는 네이버 나눔폰트를 WP 워드 프래스에 적용하는 방법을 알아 보겠습니다.

2013-06-04_192449

보통은 방문자의 PC에 나눔고딕 폰트가 설치되어 있어야 웹페이지에도 해당 글꼴이 제대로 표시가 되는데 이런 문제점을 해결하기 위해서 웹폰트를 서버에 올려서 폰트가 없는 사용자의 브라우저가 자동으로 폰트를 받아 이용하게 하지만 여기서는 웹서버에 폰트를 올리는 것보다 더 유연한 방법으로 구글에서 더 빠른 속도의 서버에 올려놓은 웹폰트를 사용할 수 있는 방법을 안내하려고 합니다.

> 구글에서 제공하는 모든 폰트 목록은 구글웹폰트 사이트를 방문하면 확인할 수 있습니다.

Google Web Fonts API에서는 한글 글꼴 (나눔 고딕, 나눔 명조, 나눔 펜스크립트 등)이외에도 수백 종의 라틴/그리스/키릴 문자 글꼴과 수십 종의 크메르 글자 글꼴 이외에도 한글, 라오, 아랍, 버마, 타밀 등 여러 글꼴을 early access를 통해 제공하고있습니다. 웹 폰트이므로 웹 사이트 방문자가 자신의 컴퓨터에 글꼴을 설치했는지 여부와 관계없이 사용가능합니다.

구글 웹폰트 사이트를 방문해 보면 알겠지만 상당히 많은 웹폰트를 무료로 제공하는 것은 물론 사용법 또한 매우 간단합니다. 나눔고딕 폰트를 예를 들면 아래 코드를 자신의 홈페이지에서 사용하는 CSS에 아래와 같이 추가하면 나눔고딕 웹폰트 사용을 위한 준비는 끝입니다.

워드프래스 사용자라면 테마의 style.css 파일을 열어 상단에 아래와 같이 추가해주면 나눔고딕 웹폰트 사용을 위한 준비는 완료 됩니다.

그리고 테마의 폰트를 지정해주는 css 코드를 찾아서 나눔고딕을 추가해주면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
body,
button,
input,
select,
textarea {
    color: #666666;
    font-family: 'Open sans','Nanum Gothic','Malgun Gothic',Dotum,sans-serif;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.8;
}

위의 예는 구글에서제공하는 웹폰트들을 추가로 적용한 예이며  이렇게 원하는 곳의 폰트와 크기와 간격등을 수정하면 워드 프래스에서 아주 쉽게 웹폰트를 적용할 수 있습니다.

Advertisements

Google Webmaster Tools에 자신의 WordPress 인증 등록하기

Google-Webmaster-Tools

특정 검색엔진이나 소셜사이트중에 추가적인 기능을 제공하기위해 유저가 소유한 특정 URL에 대하여 소유자 확인과정을 요청합니다.

이러한 방법으로

1. 검색엔진이나 소셜 사이트에서 해당 유저에게 특정 Meta tag를 발급

2. 해당 URL에 Meta tag를 자신이 보유한 페이지에 등록

3. 인증하기 버튼을 클릭하여 해당 하면 이로서 이 페이지의 관리자임을 인증

구글 웹마스터의 경우 해당 페이지(사이트)의 관리자 임을 증명하기 위하여 <Body> 상단에 <Head></Head>에 특정 코드의 입력을 요청하는데 WordPress의 경우 Theme의 수정을 하는 것보다 어드민 툴을 통하여 해당 과정을 간소화한 편리한 인터페이스를 제공한다.

관리자 페이지의 Tool에 가면 사용가능한 툴이라는 메뉴가 있으며 페이지 아래쪽에 증명 코드를 넣는 입력박스가 보인다.

tools_menu

여기에 예제처럼 볼드처리되어 있는 Content=’     ‘ < 이 안의 내용을 넣고 구글 웹마스터 페이지에서 verify버튼을 누르면 된다.

screen-shot-2013-01-08-at-4-55-59-pm

전세계의 유적지와 명화를 손끝에서 감상하자 Google art project

Google Art Project?

구글의 실험적인 서비스들중 정말 마음에 드는 구글 아트 프로젝트라는 서비스가 있어서 소개를 해드립니다.
다음의 로드뷰나 구글의 스트리트 뷰는 지도서비스의 확장 형태로 실재의 세상을 360로 촬영하여 지도상에서 위치를 지정하여 해당 위치에 사람이 가지 않아도 가상으로 가서 보는 것과 최대한 유사한 형태로 보여주는 서비스 입니다.

직접 가보지 않고도 실재의 전경을 보고 싶을때 사용하기도 해서 지도에서 느낄수 없는 현장감을 확인할수 있는 제가 좋아하는 서비스 중에 한가지 인거죠 그런데 구글이 이러한 기술을 바탕으로 도로정보를 넘어서서 박물관 또는 역사적 가치가 있는 위치에 대해서 좀더 상세한 이미지를 가상현실처럼 제공을 하는 놀라운 전 세계적인 기획을 현실을 구현했습니다.

어떤 용도로 사용될까요?

여행을 좋아하는 사람들에게는 직접 가보지 않아도 PC브라우저 만으로도 다양한 지역을 짧은 시간내에 다닐수 있고, 전세계의 다양한 예술가의 작품을 통하여 영감을 얻고자 하는 사람에게는 역사적인 장소와 예술품을 상당히 고 퀄리티 사진으로 보실수도 있습니다.  물론 학생이나 연구를 하는 사람들에게도 유용한 서비스가 되겠지요

고대의 유적부터 현대의 기념비적인 장소까지 구글은 후대에 남겨야 할 유산에 대해서 디지털화한 거대한 예술관을 기획하고 제작하고 있는 것입니다.

활용 방법

초근접 촬영을 통하여 실제 박물관에서 보는 것보다 더 자세한 감상을 할수 있을뿐만 아니라 개인 구글 계정과 연동되어 마음에 드는 작품을 개인 갤러리에 담아 놓기도 할수 있고, SNS 와의 공유는 기본적으로 제공한다.

또한 작품을 보는 사용자가 지역별, 시대별, 작가별, 연관 작품별, 동일한 아티스트 작품 또는 동일한 시대의 작품, 또는 구글에서 묶어 놓은 테마별등 관심사에 따라 모아서 볼수 있는등 체계화된 DB로 제공하고 있다.

서비스 사용은 모두 무료

구글이 아니면 도저히 시도하기 어려운 기술과 자금력을 들여서 독보적인 컨텐츠를 수집하고 있을 뿐만 아니라 서비스 사이트가 매우 사용하기 쉬운 직관적인 UI를 제공하고 있어서 영어로 제공되는 서비스임에도 불구하고 내용을 보시는데 무리가 없을뿐만 아니라 모든 서비스가 완전히 무료로 제공되고 있습니다.

아쉬운 점은

이 엄청난 프로젝트를 알게되었을때 가장 먼저 확인하고 싶었던것은 세계에서 가장큰 박물관이였는데 구글의 공격적인 협상에도 불구하고 이 프로젝트에 참여하지 않은 박물관들이 있다는 점. 우리가 아는 몇몇 유명 박물관은 아직 내용이 들어와 있지 않다.


<구글 아트 프로젝트 소개 영상>

실재로 구글 스트리트 뷰에서 사용되었던 360도 촬영이 가능한 카메라를 예술품이나 유적지를 촬영하기위해 더 소형화하고 이동성이 좋게 개량하였으며 몇번의 시행착오를 겪으며 더 나은 퀄리티를 만들어 내었던 영상을 보실수 있습니다.

만약 이러한 기획이 국내에서 이루어졌다면 어떤 수순을 밟고 있을까요?
몇편의 작품을 맛보기로 보여주고 하이퀄리티로 더 많이 감상을 하려면 유료 결재를 요청하거나
수없이 많은 배너로 사용자들의 감상에 방해가 되는 디자인이 되지 않았을까요?

구글이 개발한 기술을 이러한 방식으로 활용해서 인류에게 돌려주는 프로젝트 응원하고 싶네요 ^^