웹글꼴을 사용하는 이유는?

블로그 운영에 관심을 가지고 있고 컴퓨터에도 관심을 가지고 있는 사람이라면,

이 주제에 대해서 한 번쯤은 다들 생각해 보았을 것이다.

블로그를 운영하는 데 관심은 있지만,

컴퓨터에 대한 지식이 많이 없는 사람도 이해할 수 있도록 써 보려 한다.

이 글는 내가 블로그에 나눔글꼴을 적용하는 데 관심을 가지게 된 이유를 이야기하고,

왜 웹글꼴이 필요했는가에 대해서 이야기한다.

이 글을 쓰기전 포스팅 하였던 글이 울티마 6탄 공략글인데,

울티마 6탄의 공략은 처음에는 리눅스에서 그냥 텍스트 파일로 작성을 했다.

그런데 막상 작성해 놓고 블로그로 올리려고 보니,

기본적으로 고정폭 폰트가 적용되지 않아, 애써 그런 표가 다 깨지는 것이다.

폰트는 컴퓨터가 글자를 그려주는 데 사용하는 데 사용하는 데이터이다.

폰트에는 가변폭 폰트과 고정폭 폰트가 있는데,

그 차이를 간단히 설명해 보면,

가변폭 폰트는 'W'와 'I'의 폭이 서로 다르다.

고정폭 폰트는 'W'와 'I'의 폭이 서로 같다.

이게 텍스트로 그린 표에 적용하게 되면 다음과 같이 보이게 된다.

(나눔고딕 - 가변폭 폰트)

+----------------+---------+------+------------+---------+--------+
|                | Ruduyom | Xaio | Nickodemus | Horance | Zoltan |
+----------------+---------+------+------------+---------+--------+
| Black Pearl    |         |  4   |            |    3*   |        |
| Blood Moss     |    3    |      |     2*     |    3    |   3    |
| Garlic         |    1*   |  3   |     1      |         |   2    |
| Ginseng        |    2    |  3   |     1      |         |   1*   |
| Mandrake Root  |         |  6   |            |    5    |        |
| Nightshade     |    2    |  3   |            |    2    |   1*   |
| Spider's Silk  |    2    |  3   |     1      |    1*   |   2    |
| Sulfurous Ash  |    1*   |  3   |     2      |    2    |   3    |
+----------------+---------+------+------------+---------+--------+

(나눔고딕코딩 - 고정폭 폰트)

+----------------+---------+------+------------+---------+--------+
|                | Ruduyom | Xaio | Nickodemus | Horance | Zoltan |
+----------------+---------+------+------------+---------+--------+
| Black Pearl    |         |  4   |            |    3*   |        |
| Blood Moss     |    3    |      |     2*     |    3    |   3    |
| Garlic         |    1*   |  3   |     1      |         |   2    |
| Ginseng        |    2    |  3   |     1      |         |   1*   |
| Mandrake Root  |         |  6   |            |    5    |        |
| Nightshade     |    2    |  3   |            |    2    |   1*   |
| Spider's Silk  |    2    |  3   |     1      |    1*   |   2    |
| Sulfurous Ash  |    1*   |  3   |     2      |    2    |   3    |
+----------------+---------+------+------------+---------+--------+

(위 표를 보면 가변폭과 고정폭에 대한 차이에 대해 이해가 좀 되리라 생각한다.)

만약 고정폭 폰트를 적용하는 방법을 처음부터 제대로 알았더라면,

텍스트 포맷으로 된 공략을 굳이 LibreOffice로 새로 작성하진 않았을지도 모르겠다.

어쨌든 차선책으로 리눅스에서 사용할 수 있는 문서 작성 프로그램인 LibreOffice로 새로 표를 만들었다. 

(LibreOffice는 Microsoft Office 같은 프로그램으로 무료로 사용할 수 있는 프로그램이다.)

그렇게 하여 가변폭 폰트에서도 아래와 같이 깔끔하게 표를 보여줄 수가 있었다.

자, 이제 LibreOffice에서 작성한 내용을 블로그에 올리고 확인하는데... 뭔가 이상하다.

리눅스의 LibreOffice에서 나눔고딕과 나눔명조를 이용해서 작성한 문서를 그대로 블로그로 올렸는데,

다른 컴퓨터에서 보니 표가 좀 어긋나 보인다. 분명 문서에서는 표 내용에 딱 맞춰서 이쁘게 작성했는데...

왜 이런 현상이 나타나는 걸까?

그 이유는 나눔글꼴이 설치되어 있지 않은 컴퓨터에서는 나눔글꼴을 제대로 보여줄 수 없기 때문에,

다른 폰트로 바꿔서 보여주게 되는 것이다. 같은 가변폭 폰트라도 문자마다 폭이 다 다르다.

예를 들어 표의 각 셀의 폭을 나눔명조에 딱 맞게 맞춰놨는데,

그것을 다른 폰트로 보여주게 되면 단어가 셀의 폭보다 길어지므로

표가 이상하게 보이게 되는 것이다.

바로 여기에서 웹글꼴이 필요한 것이다.

내 블로그를 보는 사람에게 나눔글꼴이 설치되어 있지 않아도,

웹글꼴을 통해서 내가 글을 작성했을 때의 글꼴로 보여 줄 수 있는 것이다.

(다만, 인터넷 익스플로러 버전8 이하는 지원하지 않는다.)

P.S

그런데 왜 나눔글꼴인가?

나눔글꼴은 품질도 상당히 괜찮고, 누구나 자유롭게 수정/재배포가 가능하기에

많은 사람들이 애용하는 글꼴이다.

실제 블로그에 적용하는 방법까지 다루는 것은 이 글의 범위를 벗어난다.

실제 적용하는 방법은 검색을 하면 많이 찾을 수 있다.

단, 블로그에 적용하고자 한다면 개인이 폰트를 업로드해서 만들는 방법은 피하라.

아무 글꼴이나 사용했다가는 저작권 문제도 걸릴 것이며 (그래서 나눔글꼴을 많이 사용한다.)

티스토리의 경우 스킨에 사용할 수 있는 용량도 제한이 있다.

구글 웹폰트에서 css 를 import 하는 방법을 사용하는게 좋다.

단, 이 방법도 약간의 문제가 있는데...

첫 번째는 티스토리 블로그 글쓰기의 웹에디터 폰트 목록에는 나눔글꼴이 없다는 것이다.

다만, 폰트 설정을 전혀하지 않고 글을 작성 한다면 나눔글꼴로 글이 작성될 것이다.

폰트를 이리저리 적용하다가 다시 원래대로 나눔글꼴로 돌리기 위해서는,

직접 html 코드를 수정해야 하는 불편함이 있다.

(나눔글꼴을 배포하는 네이버 블로그조차도 나눔명조밖에 없고,

 게다가 구글 웹폰트 사용 시, font-family이름이 다르다.  여기에 대한 건 두 번째 문제점에서...)

두 번째 문제는, 구글 웹폰트에서 제공하는 웹폰트 중 나눔고딕의 이름이

'Nanum Gothic'으로 되어 있는 것이다.

리눅스에서 나눔고딕을 설치하면 폰트 이름이 'NanumGothic'이라고 나오는데,

왜 저렇게 사이에 공백을 넣은 건지 모르겠다.

어쨌뜬 이런 이유로,  리눅스에서 나눔글꼴을 설치해서 LibreOffice로 수정을 하면,

나눔고딕의 이름은 'NanumGothic'으로 설정이 된다.

그래서 그대로 블로그에 올리면 인식을 못한다.

임시적인 해결방법으로는  블로그 스킨의 css에 구글 웹폰트에서 제공하는 css의 내용을 그대로

한 번 더 복사해서 붙이고, font-family 이름을 'NanumGothic'으로 바꿔 주는 것이다.

아니면... 구글 웹폰트에서 추가 css나 수정된 css를 제공해주길 기다리는 수 밖에...

(구글그룹스 가입해서 어설픈 영어로나마... 왜 'NanumGothic'이 아니고

 'Nanum Gothic'으로 했냐고 글을 남기고 오긴 했다.)