웹 페이지 기본 서체에 관한 질문

[saysix]

아래는 야후 블로그 안에 위키 문법을 사용해서 만든 페이지입니다.

http://kr.blog.yahoo.com/saysix6/1460589.html

소스를 들여다보면 그 어디에도 바탕체라는 말이 없는데 본문은 바탕체로 나옵니다.

아래는 야후 블로그 안에 Html 편집기를 사용해서 만든 페이지입니다.

http://kr.blog.yahoo.com/saysix6/1460583.html

이번에는 본문이 굴림체로 나옵니다.


질문:

1. 이런 결과가 나온 이유는 무엇인가요?

2. 불여우 폰트 옵션의 serif 항목을 디폴트 옵션인 '바탕'에서 '굴림'으로 수정하면 본문이 굴림체로 나옵니다. 제가 보기에는 굴림체가 바탕체보다 가독성이 훨씬 좋은데 다음 버전에서는 불여우 디폴트 옵션을 '굴림'으로 두는 것은 어떨지요?

2. 만약 어떤 이유가 있어 디폴트 옵션을 수정하는 것이 여의치 않다면 웹 페이지 소스 자체를 수정하는 방법도 있겠지요. 바탕체 대신 본문이 굴림체로 나오게 하기 위해서는 위의 페이지 소스를 어떻게 수정하면 될까요?

아무래도 웹 페이지 소스 중 폰트 지정이 생략되어 있어 불여우가 임의로 바탕체로 본문을 보여주고 있다는 느낌이 듭니다. 그래서 야후에 건의하기에 앞서 확실한 것을 알고 싶어 먼저 이곳에 질문 드립니다. 위키 페이지는 원래 바탕체로 본문을 보여주도록 되어 있는 건지도 모르겠군요.

만약 제가 불여우, 혹은 웹 페이지의 폰트 체계를 제대로 이해하지 못해서 이런 의문을 갖게 된 것이라면 관련해서 참고할 수 있는 웹 페이지를 소개해 주시면 감사하겠습니다.

-------

야후 블로그에서 Html 편집기를 사용하려면 액티브엑스를 설치해야 하기 때문에, 불여우로 접속해서 글을 쓰려면 텍스트 에디터를 쓸 수밖에 없습니다. 이때 위키 문법을 사용하면 본문에 간단한 편집 효과를 줄 수도 있는데, 저렇게 서체가 바탕체로 나와 버리니 가독성은 물론 다른 날 올린 글과의 통일성도 떨어져 버려 좀 난삽한 느낌이 들더군요.

[hyeonseok]

폰트에 대해서 빛알갱이 님이 올려주셨던 글이 있었는데 잘 못찾겠군요 -o- 다른곳에서 본건가..

나름대로 정리를 해 보자면...

폰트는 OS, 로케일설정, 브라우져 등과 관련된 문제 입니다.
문제가 되는 페이지를 보니 폰트패밀리가 다 한글로 되어 있고 기본 폰트셋(?) 도 지정이 안되어 있더군요. (한글이 깨져 나와서 무슨 폰트인지는 확인 못했습니다.)

1.
폰트를 한글로면 적용할 경우 로케일이 한글로 지정이 안된 OS 에서는 폰트를 인식 할 수 없습니다. 그래서 영문 폰트 명도 같이 표기를 해 주어야 합니다.

지정한 폰트를 찾을 수가 없어서 기본 세팅인 바탕체가 나오는 것입니다.

2.
이것은 저는 잘 모르겠군요. 영문도 기본 서체가 serif 로 되어 있을 텐데, 한글만 sans-serif 로 바꾸는 것이 가능할지는....
그리고 영문도 기본 서체는 serif 로 되어 있는데 대부분의 웹페이지들은 sans-serif 를 사용하고 있습니다. 그런데 기본서체를 sans-serif 로 바꾸지 않는 것으로 보아서 서체의 가독성이 좋다거나 사용하는 사람들이 많다거나 해서 변경될지는 모르겠습니다.
(인쇄물의 경우는 serif 가 가독성이 더 높은데 웹페이지는 해상도의 제약으로...--;; )

그래서...windows os 에서 폰트가 잘 나오게 하려면...

font-family: Gulim, "굴림", sans-serif;

와 같이 지정을 해 주어야 브라우져, 로케일 상관 없이 브라우져가 해당 폰트를 찾을 수 있습니다.

[빛알갱이]

http://gregshin.pe.kr/bbs/view.php?id=u ... =asc&no=13

에 있다고 제가 링크만 드렸습니다.

글꼴 지정할 때 주의할 점은 한글 글꼴 이름('바탕', '굴림')에 대응하는 로마자 글꼴 이름 ('Batang', 'Gulim')을 꼭 같이 써 주어야 한다. 또, 글꼴 일반명을 꼭 끝에 써 주어야 한다. 즉, 바탕에 대해서는 serif를 굴림에 대해서는 sans-serif를 맨 끝에 써 주어야 지정한 글꼴이 없다고 해도 비슷한 성격의 글꼴을 대신 골라서 쓸 수 있습니다.

앞으로 나올 ff 1.1에서는 각 언어(군)별로 글꼴 지정이 없는 웹 페이지에서(혹은 firefox에서 페이지 저자가 지정한 글꼴을 무시하라는 옵션을 켜 놓은 경우) serif에 지정한 글꼴을 쓸 것인지 sans-serif에 지정한 글꼴을 쓸 것인지 따로 지정할 수 있습니다. 현재는 그 선택이 전역 값이라서 모든 언어(군)에 대해서 같은 값이 쓰입니다. (1.0에서는 한국어 웹 페이지를 많이 방문하신다면 지금 그 값을 'sans-serif'로 바꾸 놓으시면 됩니다.) 언어(군)별로 따로 하게 되면 일반적으로 많은 이들이 sans-serif 계열 글꼴을 선호하는 언어(군) (엄밀히 얘기해서 문자군)에 대해서는 sans-serif를 쓰도록 지정하고, 그렇지 않은 경우에는 serif를 지정할 수 있습니다. 따라서, 글꼴 분류 체계를 어겨 가면서 'sans-serif'에 가까운 '굴림'을 억지로 'serif'에 가져다 놓을 필요는 없습니다.

UI에는 없지만, about:config를 통해서 'ko' langGroup에 대해서 쓸 글꼴 목록(글꼴 하나가 아니라)을 CSS 일반 글꼴에 대해 대응시킬 수도 있습니다. 이것은 한국어용 글꼴의 밉게 생긴 로마자 대신 서유럽 언어용 글꼴에 들어 있는 훨씬 멋있고 예쁜 글자를 쓰고자 하는 이들에게 유용합니다. 다음 버그질라 버그를 참고하세요.

https://bugzilla.mozilla.org/show_bug.cgi?id=95227
https://bugzilla.mozilla.org/show_bug.cgi?id=229394
https://bugzilla.mozilla.org/show_bug.cgi?id=227815

[빛알갱이]

아래는 야후 블로그 안에 위키 문법을 사용해서 만든 페이지입니다.

http://kr.blog.yahoo.com/saysix6/1460589.html

소스를 들여다보면 그 어디에도 바탕체라는 말이 없는데 본문은 바탕체로 나옵니다.

명시적으로 지정하지 않았지만, 간접적으로 했습니다.

Code: Select all

font-family: "Trebuchet MS", 굴림, "Georgia", "Times New Roman", "Times", "serif";

어떤 OS를 쓰시는지요? 한국어판 Windows 9x/ME나 로캘이 한국어인 Windows 2k/XP라면 굴림이 쓰여야 하는데요. 외부 CSS에서 다르게 지정했는지도 모르겠군요.

바탕이 쓰였다면 '굴림'을 인식하지 못 하는 OS를 쓰시나 보군요. 그 경우 맨 끝에 써 놓은 'serif'에 대응하는 '바탕'이 쓰인 것입니다. 야후 코리아의 글꼴 지정이 잘못 되었네요. 굴림은 serif가 아니라 sans-serif 계열인데, 일반 글꼴 이름인 serif와 같이 나열해 놓았을 뿐 아니라 Times New Roman, Times와 같은 serif 계열 글꼴과 같이 놓았네요. 한국 야후에 수정을 요구하셔야겠습니다. 굴림을 바탕으로 바꾸거나, 굴림을 계속 쓰려면 Times New Roman, Times 등을 sans-serif 계열인 Arial, Helvetica로 바꿔 달라고 하세요.

[saysix]

hyeonseok님과 빛알갱이님, 두 분 친절한 답변 고맙습니다.

관련 내용을 좀더 알아보고 생각해 본 뒤, 정리해서 제 블로그 트랙백을 통해 야후 측에 건의해 볼 생각입니다. 허락해 주신다면 나중에 글을 쓸 때 지금 이 글타래를 링크와 함께 언급하고 싶습니다. 그래도 될까요?

[hyeonseok]

네...
공개된 포럼이기 때문에 별 문제 없을듯 합니다. ^^

[빛알갱이]

문제가 된 CSS는 다음 파일에 있습니다. 처음에 inline CSS는 날짜 등에만 적용되는 것이었군요. 그리고, 님이 사용하는 OS는 한국어 로캘을 쓰고 있고요. 따라서, 제가 문제가 있다고 한 font-family 지정은 맨 처음 나오는 '굴림'을 모질라가 이해해서 날짜는 굴림으로 표시했을 것입니다. 문제는 본문인데.... 와 DOM inspector가 없었다면 죽었다 깨어나도 알아내지 못 했을 것입니다. 도대체, table을 몇 겹을 쓴 것인지... 한 10겹은 쓴 것 같더군요. 앙파처럼. ....

처음에 table을 끝까지 추적해 들어가지 않은 상태에서 computer style을 보니 '굴림'이라고 나오더군요. 어, 그렇다면 굴림으로 표시해야 하는데, 왜 안 그러지? 이런 버그가 있을 리가 없는데.... 제가 한국어 로캘에서 시험해 보아도 바탕으로 표시하고 있었거든요. '글꼴 설정 부분'에서 'Always use my fonts'를 선택하지 않았으니, 문서에서 지정한 글꼴을 우선 써야 하고요) 제가 테이블 '층'을 다 ㅤㄸㅜㄺ고 들어갔다고 생각했는데, 그게 아니었습니다. 그 안에도 몇 개의 층이 더 있더군요. 마지막 층에 갔을 때 보니 computed style이 'gulim, dotum, seoul, arial, veranda'였습니다. 앞에서 적었다시피 한국어 로캘 상태인 Windows 2k/XP나 한국어 Win 9x/ME에서는 로마자로 쓰여진 한국어 글꼴 이름을 인식하지 못 합니다(모질라는. 이 버그는 좀 고치기가 귀찮은데, 고칠 예정입니다. .MS IE도 Win 9x/ME에서는 못 할 확률이 상당히 높습니다. Win 2k/XP에서 MS IE는 인식합니다.) 따라서, 'gulim, dotum'을 인식하지 못 하고 사용자가 지정한 글꼴 (serif를 우선 쓰도록 해 두었으므로, 한국어 serif 글꼴인 바탕을 써서 보여 준 것입니다)

문제가 된 stylesheet는 http://img.yahoo.co.kr/blog/p2/css/wiki ... 040827.css입니다.

Code: Select all

div.wiki {
	font-family:gulim,dotum,seoul,arial,verdana;
	font-size:12px;
	line-height:18px;
/*	color:#4B4B4B; */
}

거기에 보면 위와 같은 font-family 지정이 여러 개 있습니다. 그 모두가 제가 지켜야 한다고 말한 두 가지 점을 다 어기고 있습니다.

1. 한국어 글꼴 이름은 로마자와 한글로 모두 표시한다.('굴림, gulim, 돋음, dotum') 한국어 로캘을 쓰는 이가 많을 것이므로 한글로 표기한 글꼴 이름을 더 앞에 둔다.
2. 맨 마지막에는 항상 CSS generic font family 이름을 써야 한다. 이 경우 나열한 글꼴들이 모두 sans-serif이므로 맨 끝에 'sans-serif'를 넣어 주어야 합니다.
3. 앞서 언급하지 않았지만, 제가 언급한 링크에 써 놓은 글에서 얘기한 바와 같이 다른 OS (f리눅스와 맥 OS)에서 흔히 쓰는 글꼴도 나열해 주면 더욱 좋다. Yahoo는 그래도 다른 운영 체계를 고려해서 Seoul을 써 놓았기는 했군요. Seoul은 과거 Mac OS에서 많이 쓰던 글꼴이기는 하지만, 그다지 품질이 좋지 않으므로 'Apple Gothic'을 적는 것이 더 나을 것입니다. 리눅스 글꼴은 제가 앞서 링크를 준 글에 자세히 나와 있습니다. ('UnBatang'과 'Baekmuk Batang'이 serif이고 'UnDotum'과 'Baekmuk Gulim'이 sans-serif입니다.)

참, 이 글타래에 대한 링크를 걸고 Yahoo 측에 문제를 제기하거나, 블로그에서 이 문제를 다루셔도 좋습니다. 이런 점을 알고 있는 사람이 그리 많지 않으니까 널리 이런 점을 알려 주시면 좋습니다.

여담으로 : 저는 링크를 걸거나 일부만 인용하지 않고, 글 전체를 통ㅤㅉㅒㅤ로 퍼나르는 것을 바람직하지 않다고 봅니다. 그런데, 국내 포탈 사이트들을 보니까 퍼나르기를 어떤 의미에서 조장하고 있더군요. 프레임을 쓰거나 GET 대신 POST를 써서 URL을 가져가기 힘들게 만들어 놓았더군요. 그런 상황에서 저작권에 대한 관념도 없는 이들이 퍼나르기를 하는 게 자연스러워 보입니다.