22. 티스토리 블로그 글꼴을 변경하여 가독성을 올려보자(맑은고딕, 나눔고딕)

 처음 시작하면서 블로그의 외적인 부분에서 많이 수정하려고 스킨도 적용해보고 반응형 웹을 만들 것이라고 HTML도 공부하였지만 일과 병행을 하고 포스팅까지 쓰려니 좀처럼 시간이 나지 않아 블로그 디자인을 그대로 둔 체 처음에 사용하던 돋움체를 계속 사용하며 1년이라는 시간이 흘렀습니다.

 그러다 얼마 전에 웹서핑을 하던 중에 다른 사용자의 티스토리 블로그를 방문했는데 눈에 너무나도 잘 들어오고 글씨체가 깔끔해 가독성이 좋아서 어떤 글꼴을 사용하고 있는지 확인하고 싶었습니다. 하지만 오른쪽 버튼을 사용 금지가 되어 있었고 그 글씨체를 찾기 위해서 검색을 시작하였습니다.

 찾아보니 가독성이 좋다고 알려진 글씨체가 몇 가지 있었습니다. 나눔 고딕, 윤고딕, 맑은 고딕 이 세 가지 글씨체를 가장 많이 선호하고 있었습니다. 그래서 하나하나 블로그에 적용해 보기로 하고 작업을 시작하였습니다.

 

 

나눔 고딕 글꼴 적용하는 방법

 

 

Tistory 관리에 들어가서 HTML/CSS 편집을 클릭하여 편집 에디트로 들어가 줍니다.

 

 

 티스토리가 이번에 새롭게 단장을 해서 새 창으로 왼쪽에서 저장과 동시에 미리 보기를 할 수 있고 오른쪽에는 코드를 수정할 수 있게 변경되었습니다. 변경된 인터페이스 후기들을 읽어 보니까 코드면에서 간편해지고 쉬워졌다는 의견들이 많았으나 개인적으로 HTML 코드가 초급 수준이기 때문에 버벅댔습니다.

 

 오른쪽의 편집기를 봤다면 파일 업로드에 가서 추가 버튼으로 나눔 고딕 글꼴을 추가해줘야 합니다. 꼭 저장 버튼 잊지 말고 눌러주시기 바랍니다.

 

 

 파일을 업로드했다면 CSS 편집기로 넘어와서 아래 코드를 CSS의 최상단에 입력합니다.

 

NanumFontSetting.txt

 아래의 코드가 오른쪽 버튼 사용 불가로 텍스트 파일 첨부합니다.

@font-face {font-family:NanumGothic; src:url(./images/NanumGothic.eot);}

body{font-family:NanumGothic; font-size: 12px;}

div{font-family:NanumGothic; font-size: 12px;}

 

 위에 보이는 이미지에서 일반적인 스킨 안에 있는 코드를 CSS 제일 상단에 넣어 줍니다. 일반적인 스킨은 위에서 보이는 위치에 코드만 넣어도 적용이 되지만 반응형 스킨은 따로 글꼴을 설정해 줘야 하기 때문에 아래 보이는 반응형 스킨 앞부분에 나눔 글꼴을 따로 추가를 해줘야 합니다.

 

 처음에 다른 블로그에서 봤던 가독성이 좋았던 글꼴이 네이버에서 무료로 배포하고 있는 나눔 고딕인 줄 알고 적용했지만 생각했던 것과는 거리가 멀어서 남은 두 가지 글꼴을 (윤고딕과 맑은 고딕) 적용하였는데 윤고딕이 내가 찾던 글꼴이었습니다. 하지만 윤고딕을 검색하던 중에 알게 된 사실이지만 개인이 만든 글씨체라 저작권 문제가 걸려있었고 가격도 상당했기 때문에 가장 비슷하고 윈도우 기본 글꼴인 맑은 고딕으로 적용하기로 결정했습니다.

 

 

맑은 고딕 글꼴 적용하는 방법

 

 맑은 고딕은 윈도우 비스타 이상이라면 기본적으로 내장되어 있는 글꼴이라 따로 업로드를 할 필요가 없었습니다. 윈도우 XP 이하 버전의 사용자라면 맑은 고딕 글꼴을 따로 구해서 위에서 설명한 나눔 글꼴을 적용한 방법대로 적용해야 합니다.

 

 

 맑은 고딕을 적용하는 방법은 간단합니다. 기본적으로 설치되어 있는 글꼴이기 때문에 font - family :  제일 앞부분에 Malgun Gothic, "맑은 고딕" 을 적어주고 저장 버튼을 누르면 적용이 됩니다.(font - family 뒷부분에 순서대로 적는 글꼴은 앞부분의 글꼴이 사용자 PC에 설치되어 있지 않을 경우 다음 글꼴로 표시한다는 뜻입니다. 위에 보이는 것을 설명하면 첫 번째 맑은 고딕, Arial, 돋움 순서대로 표시됩니다.)

 

 

 위에 이미지는 왼쪽부터 돋움 글꼴 나눔 고딕, 맑은 고딕 순서로 비교 한 사진입니다. 주관적인 시각으로 봤을 때 기본적인 글꼴인 돋움보다는 나눔 고딕이나 맑은 고딕이 가독성이 좋다는 것을 확인할 수 있을 것입니다.

 그리고 위의 방법을 사용할 경우 블로그의 전체적인 글꼴이 바뀌므로 일정 부분의 글씨체를 바꾸고 싶다면 다른 방법을 찾아야 할 것입니다.

 이제 티스토리 블로그에 자신만의 글꼴을 적용하여 가독성과 개성을 살려보는 것도 좋을 것 같습니다.