블로그 글꼴을 우리바탕으로

우리바탕체

우리바탕은 바탕체이지만 정사각형이 아닌 직사각형에 한글을 채우고 있다. '옥'과 '욱'을 쉽게 구분하기 위해서는 모음의 크기를 조금 더 키워야 하는데 이렇게 하면 자동으로 정사각형에서 직사각형으로 바뀐다. 우리바탕은 이런 우리 글의 특징을 살려 정사각형이 아닌 직사각형을 이용함으로서 우리 글을 읽기 더 쉽게 만들어 주고 있었다. 그래서 결국 블로그에 먼저 우리바탕체를 적용한 뒤 방문자의 반응을 알아 보기로 했다.

목차

우리바탕체

날짜는 정확히 기억나지 않지만 우리바탕체를 개발한

글꼴은 전자우편으로 보내준다. 내려받아 웹글꼴을 사용할 서버에 올린 뒤 사용하면 된다.

설치

설치하는 것은 그리 어렵지 않다. 웹글꼴을 사용하려고 하면 font-face를 이용해서 웹글꼴의 이름을 지정하면된다. 문제는 설치형 블로거는 웹글꼴로 인한 일일전송량의 낭비가 너무 크다는 점이다. 따라서 나는 블로그에 웹글꼴을 설치한 것이 아니라 웹글꼴은 티스토리에 올리고 블로그에서 불러와 사용하는 방법을 사용했다.

티스토리에 웹글꼴을 설치하는 방법도 내가 사용한 방법과 같으므로 내가 사용한 방법을 중심으로 웹글꼴을 설치하는 방법을 설명하겠다. 일단 설치형 블로그는 티스토리 블로그를 추가로 하나 더 가지고 있다는 것을 전제로 설명하겠다.

  1. 티스토리 블로그에 우리글닷컴의 웹글꼴(wooriBatang.eot)을 올린다. 올리는 방법은 간단하다. 글을 작성한 뒤 첨부 파일로 웹글꼴(wooriBatang.eot)을 첨부하면 된다. 제목은 나처럼 [우리바탕체]로 해도 되고 원하는 제목을 사용하면 된다. 글은 굳이 공개할 필요가 없으므로 비공개로 둔다.

  2. 블로그로 접속한 뒤 올리 웹글꼴의 주소를 확인한다. 첨부 파일에 마우스 오른쪽 단추를 클릭한 뒤 바로가기 복사 메뉴를 클릭한다.

    추출된 주소: http://offree.com/attachment/gk150000000000.eot

  3. 좋아하는 편집기로 블로그의 style.css 파일을 블로온 뒤 첫줄에 다음과 같은 줄을 추가한다. 텍스트 큐브라면 skin/skinname/style.css을 열면되며 skinname은 자신이 사용하고 있는 스킨의 이름이다.

    @font-face {font-family: 우리바탕; src:url(웹글꼴 주소);} 예: @font-face {font-family: 우리바탕; src:url(http://offree.com/attachment/gk150000000000.eot);}

  4. CSS 파일에서 웹글꼴을 항목에 전단계에서 정의한 웹글꼴 이름(우리바탕)을 추가한다. 당연한 얘기지만 가장 앞에 추가해야 한다. 보통 글꼴의 설정은 font, font-family에 하기 때문에 이 항목만 바꾸면 된다.

    font :10pt Gulim,Tahoma,Arial,sans-serif; font-family: Gulim,Tahoma,Arial,sans-serif; 예: font :10pt 우리바탕,Gulim,Tahoma,Arial,sans-serif; font-family: 우리바탕,Gulim,Tahoma,Arial,sans-serif;

사용

블로그에서 사용하고 있는 우리바탕체는 '10pt'에 최적화되어 있으면 '줄간은 18pt가 가장 좋다'고 한다. 일반적으로 CSS에서 글꼴의 크기를 표시할 때는 pt와 px가 가능하다. px는 픽셀 단위로 주로 화면글꼴을 표시할 때 많이 사용되며, pt는 포인트로 주로 인쇄글꼴을 표시할 때 많이 사용된다. 중요한 것은 10px에 비해 10pt가 조금 더 큰 글꼴이라는 점이다. 경우에 따라 다르지만 13px 정도가 되어야 10pt와 비슷해진다.

많은 블로그들이 줄간격을 적용하지 않거나 줄간격을 적용해도 또 논문처럼 200%를 사용하는 곳이 많다. 그러나 적당한 줄간격은 글꼴에 따라 다르지만 보통 160~180%를 사용한다. 우리바탕은 정사각형이 아니라 직사각형을 사용하기 때문 18pt, 180%를 사용한다. 따라서 이 기준에 맞추어 font-size나 font에서 글꼴의 크기를 바꾸면 된다.

마지막으로 사용하는 스킨에 따라 style.css를 바꿔도 댓글의 방문자 이름은 바뀌지 않을 수 있다. 만약 style.css를 모두 바꿔도 댓글의 방문자 이름이 바뀌지 않는다면 style.css 파일의 마지막에 다음처럼 댓글 방문자 이름에 대한 클래스 정의를 추가하면 된다.

#fn {} .nickname {font-size: 10pt}

아직까지 우리나라에서는 굴림이 기본 서체로 일반적으로 사용된다. 따라서 내 블로그처럼 기본 서체가 아닌 웹글꼴을 사용하는 것이 얼마나 효과적일지는 아직도 의문이다. 그러나 내가 지금까지 봐온 우리바탕체는 다른 글꼴 보다는 훨씬 가독성이 좋았다. 따라서 방문자의 반응을 본 뒤 블로그의 기본 서체를 우리바탕체로 할지 아니면 다시 굴림으로 바꿀지 결정할 생각이다.

가독성에 대한 의견 부탁드립니다.

관련 글타래

Powered by Textcube