블로그 꾸미기 - 폰트 설정

폰트의 선택

  나만의 블로그를 만들고 싶다면 커스터마이징을 통해서 개성 있는 블로그를 만들고 싶을 것은 누구나 당연한 것입니다. 일반적으로, 각종 블로그 서비스 업체에서 제공하는 기본 스킨 이외에도 내가 스킨을 만들어 보고 싶은 욕구가 있거나, 스킨을 만들 기술이 없으면 다른 사람이 만들어 배포한 스킨을 설치해서 나름대로 커스터마이징의 재미를 느낄 수 도 있습니다.

   그러나, 스킨 이외에도 블로그의 본문 폰트를 바꿔주는 것도 이미지 변환의 하나의 방법이 될 수 있습니다. 밑밑한 굴림체에서 벗어나, 아름다우며 가독성이 좋은 폰트들도 많이 있습니다. 물론, 무료 폰트를 사용하는 것이 저작권 문제에서 자유로우며, 여기에서는 설치형 폰트^[각주:1]를 사용할 것인데, 설치형 폰트의 가장 큰 특징은 상대방 또한 내가 설치한 폰트와 같은 폰트를 가지고 있어야만 본인이 설치한 폰트가 상대방에게도 보이기 때문입니다.

  기본적으로 구하기 쉬우며, 누구나 설치하는데 문제가 되지 않는 무료 폰트를 사용하는 것이 좋으며 가급적이면, 본인의 블로그에 설치한 폰트를 공지를 통해서 상대방에게 알리는 것이 좋으며 가급적이면 폰트 파일을 별도의 포스트에 올려두거나 다운로드 링크를 걸어놓는 것이 블로그를 운영하는 사람이 지녀야할 센스(!)입니다.

  그렇다면, 폰트의 선택에 대해서 알아보도록 하겠습니다. 일단 우리들은 글을 쓰고, 인터넷에 공개합니다. 공개하는 이유는... 당연히 다른 사람들도 읽을 수 있도록 하기 위해서이며, 대부분의 블로거들은 많은 사람들이 읽어주기를 원할 것입니다. 그렇다면 폰트의 선택의 기준은 어때야 할까요.

  바로, 읽기 편한 폰트의 선택이 선행되어야 많은 분들이 글을 “편하게” 읽어내려갈 수 있겠지요. 바로 눈에 편하고, 읽기 편한 것. 이것이 블로그 본문 폰트 선택의 기본중이며 기본인 것입니다.

<그림-1>

  <그림-1>은 한글 2005에서 20pt로 쓴 폰트입니다. 순서대로 조선일보명조, 한겨레결체, 송성훈 구형타자체, 가는공한, 중간공한, 굵은공한이 있습니다. 사람마다 다르겠지만, 위에서는 조선일보명조와 한겨레결체가 읽기에 가장 좋을 것입니다. 폰트의 아름다움으로는 사람마다 다르겠지만 타자체에 속하는 송성훈 구형타자체와 그 외 공한시리즈(?)가 눈에 보기에는 이쁘게 보일 수도 있을 수도 있을 것으로 생각됩니다. 그러나, 블로그 본문용 폰트로 사용하기에는 글자 폭과 간격이 너무 좁아서 읽기 힘든 경우에 속합니다. 더군다나 공한시리즈는 자유롭게 배포되는 폰트가 아닙니다.

<그림-2>

  이 외에도 네이버의 나눔 고딕, 나눔 명조, 나눔 손글씨가 있습니다. 특히나 나눔 고딕의 경우는 많은 사람들이 사용하고 있는 만큼 글을 읽기에도 좋은 편입니다. 그러나 나눔 손글씨의 경우는 글자체가 이쁘긴 하지만 글을 “편하게” 읽기에 힘든 부류에 속합니다.

  위의 간단한 예만으로도 알 수 있겠지만 글자폭이 좁으면 가독성이 떨어지는 것은 어떤 의미로는 당연합니다. 가급적이면 지나치게 글자폭이 좁지 않으며, 글자간격이 너무 붙어있지 않는 폰트가 가독성이 좋습니다.

  그렇다면, 위의 <그림-1>과<그림-2>에서 쓰인 폰트중, 블로그 본문 작성용으로는 어떤 것이 좋을까요. 개인적으로는 조선일보명조, 한겨레결체, 네이버의 나눔고딕, 나눔명조 정도가 좋지 않을 까 합니다.

<폰트 다운로드>
한겨레결체  : http://www.hanmalgal.org/bbs/zboard.php?id=morgue&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&select_arrange=headnum&desc=asc&no=19

조선일보명조체

ChosunM.zip

네이버 나눔 폰트 : http://hangeul.naver.com/download.nhn
네이버 사전체 : http://krdic.naver.com/font.nhn (한국어 외에도 일본어와 중국어를 자주 사용하시는 분이라면 네이버 사전체를 사용해보시는 것도 추천드립니다.)

송성훈 구형타자체

송성훈구형타자체.zip

   이 외의 폰트 정리는 Zet님께서 쓰신 ‘기업에서 배포하는 무료 한글 폰트 모음’(http://bloggertip.com/3890)에도 잘 정리되어있습니다.

   PC에 폰트를 설치하는 방법은 간단합니다. 시작 - 설정 - 제어판 에서 글꼴을 더블클릭해보면 많은 폰트가 있을 것입니다. 그 곳에 ttf파일을 끌어놓으면 자동으로 설치가 진행됩니다. 만약 한겨레결체를 설치하셨다면 제가 블로그에 올린 글들이 한겨레결체로 보이게 될 것입니다.

블로그에 폰트를 적용시키는 방법은...

  저는 티스토리를 사용하고 있기 때문에, 이 글은 티스토리의 기준이 될 것입니다. 이 외에도 설치형 블로그라면 크게 다를 것은 없을 것입니다. 그러나, 포털사이트에서 서비스하는 대부분의 블로그는 이 방법이 통용되지 않을 것을 사전에 알아두시기 바랍니다.

<그림-3>

  <그림-3>을 참조로 하여, 관리자 페이지에서 “스킨 - HTML/CSS 편집 - 파일 업로드”로 이동합니다. 여기에는 블로그 스킨을 구성하는 여러 가지 파일들이 있으므로 자칫 실수로 지우게 되면 블로그에 이변이 생길 수 있습니다.(...)

  이곳에 본인이 원하는 폰트를 업로드 하시면 됩니다. 제 경우는 “한겨레결체”를 업로드 하였습니다.

<그림-4>

  이 후, “HTML/CSS 편집” 페이지로 이동하여, 하단의 style.css 중 특정 위치에 폰트의 이름을 집어넣어야 합니다. 비 문가인 저는(...) 꼼수를 사용합니다.

<꼼수를 사용해보자!>
1. 컨트롤(Ctrl) + F 를 이용하여 “gulim” 또는 “굴림”을 찾아줍니다. 블로그 스킨에 따라서는 font-family 를 찾아보는 것이 더 빠를 수도 있습니다.
2. <그림-4>의 붉은 박스를 참조하면서, 앞 뒤의 코드를 잘 확인합니다. 일반적으로 “gulim” 또는 “굴림”의 앞부분에 "font"라는 단어가 선두로 따라붙어 있는 것이 일반적입니다.
3. 그 후, “gulim” 이나 “굴림”의 앞에 본인이 바꾸고자 하는 폰트의 이름을 정확하게 삽입해줍니다.

  그 후, 미리보기를 적극 활용하여 본문의 폰트가 바뀌어졌는지 확인을 해보고, 만약 안 된다면 다른 위치에 존재하는 폰트를 찾아가면서 삽입과 삭제를 반복해야 합니다.

  <그림-4>의 붉은 박스의 html을 나름 분석해보겠습니다. 그러나, 주의할 것이 하나 있습니다. 스킨의 제작자에 따라서 이 내용은 다를 수도 있고, 다른 경우가 많습니다. 모두가 동일하지 않다는 함정이 있으므로 주의해주시길 바랍니다.

 아래 내용을 읽기 전이나 읽은 후, 티스토리 초보팁 20편 - HTML/CSS 편집을 이용한 블로그 스킨 수정, font-family 설정시 주의해야 할 점. (CSS)을 읽어보시는 것을 추천해드립니다.

  일단 붉은 박스 안에는 font:13px 한겨레결체,gulim,굴림,tahoma;가 써져있습니다. font 는 말 그대로 폰트, 서체에 관한 설정이라는 것을 알려주는 단어입니다. 그 다음 따라오는 13px는 폰트의 크기입니다. px는 폰트의 크기를 나타내는 하나의 단위로, 대부분은 pt를 사용하고 있을 가능성이 큽니다.

  이후 따라오는 한겨레결체,gulim,굴림,tahoma 가 있는데. 이것은 폰트가 보여지는 우선순위를 나타냅니다. 상대방이 한겨레결체가 있을 경우 글자체가 한겨레결체로 보이게 하고, 한겨레결체가 없을 경우에 한해서, gulim체로 보여주게 하며, gulim이 없을 경우 굴림으로 보이게 하라는 것입니다. 한겨레결체,gulim,굴림 마저 없을 경우에는 tahoma로 보여지게 하라는 것입니다.

  이것을 응용하여, <그림-3>의 과정에서 다수의 폰트를 업로드 하여 사용할 수도 있습니다.
  만약, 추가로 나눔고딕을 업로드하고, font:13px 나눔고딕,한겨레결체,gulim,굴림,tahoma; 과 같이 수정한다고 하였을 때, A라는 독자가 나눔고딕과 한겨레결체를 가지고 있을 때는, 독자는 본문의 폰트를 나눔고딕으로 보고 있게 됩니다. 다른 경우로 font:13px 한겨레결체,나눔고딕,gulim,굴림,tahoma; 으로 수정하였을 경우 A 독자는 본문의 폰트를 한겨레결체로 봅니다.

  이번에 포스팅 하면서 알게 된 것이 있습니다. 일반적으로 폰트 이름을 html에 삽입할 경우, 한국어의 경우는 큰따옴표로 묶어줘야 합니다. font:13px 한겨레결체,gulim,굴림,tahoma; 로 쓰는 것이 아닌, 한국어의 경우 큰 따옴표로 묶어줘야 합니다. font:13px "한겨레결체",gulim,"굴림",tahoma;으로 쓰는 것이 정석이며 웹 표준을 지키는 것이 됩니다.

  이렇게 큰 따옴표로 묶어주기 이전에는 한겨레결체로 출력되지 않던 것이, 큰 따옴표로 묶어준 이후, 한겨레결체로 출력되는 것을 확인하였습니다.

  자신이 원하는 폰트로 바꾼 이후, 가독성을 높이기 위해서는 폰트의 사이즈를 설정를 해줘야 합니다. 폰트마다 어울리는 적정 사이즈가 있기 마련입니다. 그러나 일반적으로는 11pt~12pt 가 가장 읽기 좋기로 알려져 있으니 이를 참고로 폰트 사이즈를 설정해보는 것도 좋을 것으로 생각됩니다. 폰트 사이즈가 너무 크면 안좋습니다. 전반적인 내용이 한 눈에 안들어오고, 시야가 너무 퍼져서 집중하기 힘든 환경을 만들기 때문입니다. 그리고, 폰트 사이즈가 작으면 집중해서 읽게 되기 때문에 폰트 사이즈를 의도적으로 조정해주는 것 또한 필요하기도 합니다. 그렇다고 해서 너무 작으면 읽기 힘드니, 일반적으로 추천하는 폰트의 크기는 11pt~12pt가 되겠습니다.

  폰트 사이즈의 경우는 일반적으로 폰트의 종류를 바꾸는 부분 근처에 함께 있기 마련입니다. 제 경우는 <그림-4>에 이미 폰트의 크기가 나와있기 때문에 쉽게 고칠 수 있었습니다. 대게 폰트와 사이즈 변경은 한 곳에 뭉쳐있기 때문에 비교적 찾기 쉬운 편입니다. 저같이 한 줄로 폰트 크기와 폰트의 종류가 표기되어 있는 가 하면 가독성을 높여라, 내 블로그 글자 크기 변경하기에 올라와있는 스샷과 같이 대략 7줄정도에 걸쳐서 폰트의 종류와 크기 외에도 여러 정보들이 표기되어 있는 경우도 있습니다.

  폰트 크기를 변경했다면 그 이후, 줄간격을 변경해주셔야 합니다. 폰트 사이즈보다 중요한 것이 줄간격이라고 생각하는데요. 줄 간격을 변경해주기 위해서는 일반적으 line-height의 수치를 변경해주면 됩니다. 폰트를 변경한 방식과 비슷하게 컨트롤 + F 로 .article 또는 line-height를 찾아줍니다.

<그림-5>

  <그림-5>처럼 대부분은 line-height:2.0em 또는 다른 수치가 적혀져 있을 것입니다. <그림-5>를 보시는 분들은 주의하실 것이 있습니다. 스킨의 제작자에 따라서 이 내용은 다를 수도 있고, 다른 경우가 많습니다. 모두가 동일하지 않다는 함정이 있다는 것입니다.

  티스토리, 본문 줄 간격을 조절하자.를 보시면 단위에 대한 설명이 나와있습니다. 절대단위와 상대단위로 나뉘는 것을 알 수 있습니다. 절대적 단위로와 상대적 단위가 있습니다. 대부분은 상대적 단위인 em을 사용하며, 대다수의 분들은 초기 옵션이 line-height:1.6^[각주:2] 으로 되어있을 것입니다. 이 수치를 본인이 나름대로 보기에 편하다고 생각되는 수치로 변경해줘야 합니다. 저같은 경우는 2.0 으로 변경했습니다. 2.0em의 값은 200%와 같습니다.

  참고사항으로 티스토리 블로그 본문 글자 크기와 줄간격을 조정하여 가독성 높이는 방법과 티스토리, 본문 줄 간격을 조절하자.를 보시는 것도 좋을 것으로 생각합니다.

  단위에 대한 자세한 것들은 http://pxtoem.com/에 나와있으니 한번 들어가보시는 것도 나쁘진 않을 것입니다. 이렇게, 폰트변환과, 폰트 사이즈 변경, 줄 간격 변경만 하더라도 제법 가독성이 좋아질 것입니다. 이 외에도 지나치게 눈에 띄어 시선을 분산시키지 않는 스킨을 선택하는 것 또한 블로그 방문자가 글에 집중할 수 있는 조건을 만들어 주는 사항이기도 합니다. 블로그에 글을 쓰는 사람으로써는 누구나 내가 쓴 글을 읽어주기를 원할 것이 당연하다고 생각하기 때문에, 가독성의 상승과 함께 나름대로 심플하면서도 개성적인 블로그 스킨을 선택하는 것도 좋다고 봅니다.

1. 일반적으로 웹 폰트와 설치형 폰트로 나눠지며, 웹 폰트는 상대방에게 해당 폰트가 없더라도 동일한 폰트를 보여주지만, 웹 폰트를 만드는 프로그램의 잦은 오류와 IE를 제외한 모든 웹 브라우저에서는 설치한 폰트로 보여지지 않는 취약점을 가지고 있습니다. [본문으로]
2. 대부분은 뒤에 단위가 붙어있지 않은데, 명확한 단위를 붙여주는 것이 웹 표준을 지키는 것이며, 웹 표준을 지켜야만 모든 웹 브라우저에서 정상적으로 보입니다. [본문으로]