본문 바로가기

무언가 만들기 위한 지식/Design

티스토리 블로그 가독성 높이기. 손쉽게 나눔고딕, 글꼴 적용하기



한동안 요 블로그 손을 떼다가,

다시 기술관련 공부 및 스터디를 진행하면서 운영하기로 결심!


배움은 계속되야하고, 배운건 기록해 놓아야 찾기도 쉽게 기억하기 쉬우니 말입니다.

그래서 최근 요 블로그 스킨을 살짝살짝 수정하고 있습니다.


그중에서 먼저 한건 가독성을 위해 줄간격과 글씨체를 바꾸기로 했습니다.


원래 블로그인(Shinlucky.tistory.com)에서도 나눔고딕을 즐겨쓰고 있었는데, 이곳도 수정하려고 했었죠.

근데 처음에 생각처럼 잘 안되더군요 ㅠ.ㅜ;


그래서 바꾸는 방법들을 좀 찾아보다가 가장!!!! 간단하고 쉬운 방법을 소개시켜드립니다.


먼저 가장 간단한 개념부터 알고 넘어가자구요.


현재 가지고 있는 블로그의 폰트, 즉 글씨체를 원하는 것으로 바꾸기 위해서는,


1. 쓰이는 글마다 코드에 font를 일일이 적어준다.

2. CSS 한줄 수정한다.


당연히 2번을 하는게 훨씬 편하겠죠.

2번을 할줄안다고 해도, 문제는 있습니다. 어떤식으로 나눔고딕을 적용할꺼냐는 거죠. 이것도 두가지로 나뉩니다.


1. 자신의 블로그에 방문하는 컴퓨터에 깔려있는 글꼴을 이용한다.

   (http://hangeul.naver.com/index.nhn  << 이곳 이용)

2. 웹폰트를 설치하여, 자신의 블로그 또는 웹에 있는 글꼴을 그때마다 로딩한다.


요건 경우에 따라 장단점이 있습니다.

1번의 경우, 방문자의 컴퓨터에 글꼴이 없으면 적용이 되지 않고 Default 글꼴이 보여지게 됩니다.

2번의 경우, 항상 웹폰트를 보여주지만 페이지마다 항상 폰트를 로딩하여 적용하기 때문에 그만큼 느린 측면이 있습니다.


Trade Off 관계랄까요!

자신의 기준에 맞게 고르시면 됩니다.


요 블로그에는 2번을 택하였습니다.

위에서 언급한 바와 같이 먼저 글로 로딩이 된후, 나눔글꼴로 변환되는 과정이 눈에 보여서 조금 불편하지만, 나름 장점도 있으니 이를 이용해보겠습니다.



이때 또 선택할 수 있는 분기가 있습니다.


1. 자신의 블로그에 웹폰트를 올린 후 그때마다 로드. (자신이 직접 웹폰트 파일을 생성하여 올리고 URL을 알아내야함)

2. 다른곳에 있는 공용(?) 웹폰트 이용


1번의 경우, 조금 귀찮기도 하고, 확인할 것들이 있어서 개인적으로 2번을 추천합니다.

1번으로 하시려면 

http://jjondakim.tistory.com/56

요기를 참고하시면 되겠습니다.

(TTF를 EOT로 변환하는 과정입니다.)


그리고 제가 추천하는 간단한 방법인 2번은 다음 페이지에서 확인하시면 됩니다.




http://fontface.kr/

↑이곳을 방문하시면 위와 같은 모습을 볼 수 있는데요,

우측에 있는 2단계 설명대로 하시면 끝입니다. ㅎㅎ


1) 먼저 Script 코드를 블로그의 스킨 편집부분의 <header>에 삽입!

   (관리자 모드 > HTML/CSS 설정 > skin.html 수정)

2) style.css파일중 원하는 위치 수정!

.article  {padding-top:75px;

                                  font-size: 16px;

                                  line-height:26px;

                                  text-algn:justify;

                                  word-break:break-all;

                                  word-wrap:break-word;  

                                  font-family:나눔고딕,NanumGothic;               

}


저같은 경우는 본문만 가독성을 위해 나눔고딕을 적용하기 위해,

CSS영역중 .article 영역만 수정하였습니다.


제 경험상 딱 저정도의 크기와 줄간격이 읽기에 편하더군요 ㅎㅎ.

(저 위의 line-height 값만 바꾸시면 원하시는대로 줄간격도 수정가능)


요렇게만 하시면 완료! F5를 눌러서 확인해 보시면 됩니다.


참고로 혹시나 개인 블로그에 웹폰트를 넣고 사용하실분들은

1)번 과정의 Header파일에 넣는 Script파일중 urls 값 부분만 블로그내의 웹폰트 위치 경로 적어주시면 됩니다.



아무래도 제가 추천해드린 방법은 위 해당 싸이트가 없어진다면 적용이 안되겠죠;;;;;

그래도 전 저렇게 쓰다가 나중에 제 블로그에 놓고 로딩할까;; 생각중입니다.


제가 추천해준 방법은 가장 안귀찮고 빠르고 간편하기에 한번 추천해 봅니다.~!


고럼 수고하시길!

'무언가 만들기 위한 지식 > Design' 카테고리의 다른 글

쓸만한 버튼 모음(psd File)  (10) 2010.04.20
[UCC] Nefer Member Introduce  (0) 2010.04.19
[UCC] Nefer Concert 홍보영상  (0) 2010.04.19
Vista Button Design  (0) 2010.04.09
CSS1(Cascading Style Sheets)-속성관련  (0) 2010.02.24