최근 제 블로그의 CSS 설정에서 글꼴 하나를 삭제하고 몇 가지 작업을 더하였습니다. 그런데 그 뒤로 제목의 옛한글이 이상하게 나타나는 현상이 일어났습니다.
벌레의 유형
이 벌레는 모여야 할 때 흩어지는 벌레입니다.
개발자의 답변
2010년 1월 22일 버그 리포팅을 하였습니다.
벌레의 발견
파이어폭스에 나타난 이상한 옛한글
처음에는 파이어폭스에서 발견했습니다.
인터넷 익스플로러에 나타난 이상한 네모
인터넷 익스플로러에서도 확인했습니다.
어, 그런데, 분명히 저 제목에 쓰인 글꼴은 은 돋움 글꼴로서 옛한글을 지원하는 글꼴입니다.
글꼴 실험 1 - 보통 글씨
왜 저렇게 이상하게 보일까요? 이상하게 여겨져서 테스트를 하기로 했습니다. 이번에 실험한 글꼴은 은 돋움, 은 바탕, 은 자모 돋움, 은 자모 바탕입니다.
[code html] <div style="font-size: 1.4em; line-height: 100%;"> <p>font-weight:normal;</p> <p>한글 자모 영역(U+1100~U+11FF)을 이용한 합자 테스트</p> <p style="font-family: '은 돋움'; ">은 돋움 : ᄒᆞᆫ</p> <p style="font-family: '은 바탕'; ">은 바탕 : ᄒᆞᆫ</p> <p style="font-family: '은 자모 돋움'; ">은 자모 돋움 : ᄒᆞᆫ</p> <p style="font-family: '은 자모 바탕'; ">은 자모 바탕 : ᄒᆞᆫ</p> <p>호환용 한글 자모(U+3130~U+318F)를 이용한 합자 테스트</p> <p style="font-family: '은 돋움'; ">은 돋움 : ㅎㆍㄴ</p> <p style="font-family: '은 바탕'; ">은 바탕 : ㅎㆍㄴ</p> <p style="font-family: '은 자모 돋움'; ">은 자모 돋움 : ㅎㆍㄴ</p> <p style="font-family: '은 자모 바탕'; ">은 자모 바탕 : ㅎㆍㄴ</p> </div> [/code]위와 같은 코드를 넣은 HTML 파일을 만들어서 시험을 했습니다. ᄒᆞᆫ 및 ㅎㆍㄴ은 앞서 자주 나왔던 그 문자, 바로 ᄒᆞᆫ입니다. 자세한 사항은 스프링노트 : 문자 인코딩 관련 사항을 참조하기 바랍니다.
그 결과는 아래와 같습니다.
IE6에서 본 옛한글 보통 글씨
한편 위에서 호환용 한글 자모의 합자는 지원하지 않음을 알게 되었습니다. 그러므로 코드를 조금 고치겠습니다.
글꼴 실험 2 - 굵은 글씨
보통 글씨의 합자는 잘 나타내지만, 반대로 호환용 한글 자모의 합자는 지원하지 않아서 코드를 고쳤습니다.
[code html] <div style="font-size: 1.4em; font-height: 130%; font-weight:bold;"> <p>font-weight:bold;</p> <p>한글 자모 영역(U+1100~U+11FF)을 이용한 합자 테스트</p> <p style="font-family: '은 돋움';">은 돋움 : ᄒᆞᆫ</p> <p style="font-family: '은 바탕';">은 바탕 : ᄒᆞᆫ</p> <p style="font-family: '은 자모 돋움';">은 자모 돋움 : ᄒᆞᆫ</p> <p style="font-family: '은 자모 바탕';">은 자모 바탕 : ᄒᆞᆫ</p> </div> [/code]참고로 1.4em은 제 블로그의 기사 제목(title) 글자 크기입니다.
파이어폭스에서 본 옛한글 굵은 글씨
은 자모 돋움은 변함없이 옛한글을 보여주지 못하고 있습니다. 또한 보통 글씨에서 옛한글을 잘 보여주던 은 돋움도 옛한글을 보여주지 못하고 있습니다. 현재 은 돋움 글꼴이 아까보다는 확실히 굵게 보이고 있습니다.
글꼴 실험 3 - 볼드 글꼴 지우기
은 돋움 글꼴은 굵은 글씨에 해당하는 볼드 글꼴이 따로 있습니다. 은 돋움 글꼴은 UnDotum.ttf 파일이며, 은 돋움 글꼴의 굵은 글씨는 굵은 은 돋움 글꼴이 담당하는데, UnDotumBold.ttf 파일입니다. 이 파일이 있다면 은 돋움 글꼴에 볼드 속성을 요청하면, 이 파일에서 읽어오게 됩니다. 개인적으로 이 굵은 은 돋움 글꼴은 너무 굵어서 좋아하지 않습니다. 정확히 말하면, 너무 굵어서 읽기 힘든 면이 있기 때문에 싫어합니다.
하지만 이번에는 굵기 때문에 제목에 넣었는데 오히려 옛한글을 제대로 나타내지 못하니 환장할 노릇이지요.
아무튼 이번에 이 글꼴 파일을 제거한 뒤 다시 부팅하겠습니다. 뭐, 글꼴 캐시만 지우고 웹브라우저를 다시 시작하면 되지만, 확실히 하기 위해 다시 부팅했습니다.
파이어폭스에서 본 옛한글 굵은 글씨 (글꼴 파일 없음)
정확한 글꼴 파일 없이 자체적으로 볼드 속성을 구현한 경우에는 제대로 나타나고 있습니다. 그렇다면 범인은 굵은 은 돋움 글꼴인가 봅니다.
글꼴 실험 4 - 다른 은 글꼴
이번에는 은 바탕이나 은 돋움 이외의 글꼴도 포함하여 살펴보겠습니다. 편의상 편집하여 표시하겠습니다. 양해 바랍니다.
은 바탕 글꼴이 지원하는 유니코드 영역의 일부
위 그림은 은 바탕 글꼴이 지원하는 유니코드 영역(Supported Unicode Blocks)의 일부입니다. 위 그림에서 빨간 네모 테두리를 두른 곳을 살펴보면, 하나는 한글 자모 영역이며, 다른 하나는 호환용 한글 자모입니다. 이 가운데 한글 자모 영역이 있는 글꼴을 테스트하려고 했는데, 모든 은 글꼴에서 자모 영역을 발견하였고, 그에 따라 모든 은 글꼴을 대상으로 삼았습니다.
[code html] <div style="font-size: 1.4em; font-height: 100%; font-weight:normal;"> <p>font-weight:normal;</p> <p>한글 자모 영역(U+1100~U+11FF)을 이용한 합자 테스트</p> <p style="font-family: '은 바탕';">은 바탕 : ᄒᆞᆫ</p> <p style="font-family: '굵은 은 바탕';">굵은 은 바탕 : ᄒᆞᆫ</p> <p style="font-family: '은 봄';">은 봄 : ᄒᆞᆫ</p> <p style="font-family: '은 디나루';">은 디나루 : ᄒᆞᆫ</p> <p style="font-family: '굵은 은 디나루';">굵은 은 디나루 : ᄒᆞᆫ</p> <p style="font-family: '가는 은 디나루';">가는 은 디나루 : ᄒᆞᆫ</p> <p style="font-family: '은 돋움';">은 돋움 : ᄒᆞᆫ</p> <p style="font-family: '굵은 은 돋움';">굵은 은 돋움 : ᄒᆞᆫ</p> <p style="font-family: '은 그래픽';">은 그래픽 : ᄒᆞᆫ</p> <p style="font-family: '굵은 은 그래픽';">굵은 은 그래픽 : ᄒᆞᆫ</p> <p style="font-family: '은 궁서';">은 궁서 : ᄒᆞᆫ</p> <p style="font-family: '은 자모 바탕';">은 자모 바탕 : ᄒᆞᆫ</p> <p style="font-family: '은 자모 돋움';">은 자모 돋움 : ᄒᆞᆫ</p> <p style="font-family: '은 자모 노벨';">은 자모 노벨 : ᄒᆞᆫ</p> <p style="font-family: '은 자모 소라';">은 자모 소라 : ᄒᆞᆫ</p> <p style="font-family: '은 자모 펜';">은 자모 펜 : ᄒᆞᆫ</p> <p style="font-family: '은 자모 펜흘림';">은 자모 펜흘림 : ᄒᆞᆫ</p> <p style="font-family: '은 자모 필기';">은 자모 필기 : ᄒᆞᆫ</p> <p style="font-family: '은 자모 필기a';">은 자모 필기a : ᄒᆞᆫ</p> <p style="font-family: '굵은 은 자모 필기';">굵은 은 자모 필기 : ᄒᆞᆫ</p> <p style="font-family: '은 신문';">은 신문 : ᄒᆞᆫ</p> <p style="font-family: '은 타자';">은 타자 : ᄒᆞᆫ</p> <p style="font-family: '은 바다';">은 바다 : ᄒᆞᆫ</p> <p style="font-family: '은 옛글';">은 옛글 : ᄒᆞᆫ</p> </div> [/code]테스트 결과는 다음과 같습니다.
모든 은 글꼴의 옛한글 합자 지원 테스트 결과
옛한글 합자를 지원하는 글꼴만 따로 모으면 다음과 같습니다.
옛한글 합자를 지원하는 은 글꼴 모음
벌레의 원인
이 벌레에 대해서는 원인을 알지 못합니다. 저는 글꼴의 내부 구조에 대해 아는 바가 전혀 없기 때문입니다.
비슷한 벌레
글꼴 및 화면 표시와 관련한 버그는 다음과 같은 것이 있습니다.
관련 문서
내부 문서
- [벌레와 팁/버그] - 스프링노트 : 문자 인코딩 관련 사항
- [벌레와 팁/버그] - 네이버의 나눔고딕코딩 선문자 오류
- [벌레와 팁/버그] - 다음뷰, 옛한글도 한글이란다.
- [벌레와 팁/버그] - 닫는 괄호 표기 버그
외부 문서
이 글은 스프링노트에서 작성되었습니다.
trackback from: 글꼴의 전쟁, 새롭게 도전하는 '한초롬체'
답글삭제 책을 읽거나 웹사이트를 돌아다닐 때면, 어떤 글을 쉽게 읽혀지고, 어떤 글은 그렇지 않을 때가 있습니다. 물론 글을 어렵게 쓰는 분들의 문체나 단어 때문에 오는 난독증일 수도 있습니다. 그렇지만 쉬운 글인데도 눈에 들어오지 않는 경우도 있습니다. 왜 그럴까요? 우리의 눈이 글자를 인식할 때 영향을 주는 요소들이 있습니다. 자간, 줄간, 장평 같은 요소들입니다. 그것들은 임의로 조절할 수도 있습니다. 그러나 처음부터 조절되지 않는 것이 있습니다...
은바탕 글꼴에 GSUB가 포함되어 있어서 예쁘게 나오는 것이지만 은돋움체는 GSUB도 없고 첫가끝 자모도 최근에 그려서 넣어진 것입니다. 은글꼴중에 은돋움, 은바탕 등등에는 굵은 글꼴이 따로 준비되어 있는데,
답글삭제아마도 굵은 글꼴에는 첫가끝 자모를 넣지 않았을 겁니다. 그래서 굵은 글꼴에서는 안보이는 것 같군요.
(은바탕도 굵은 글꼴은 첫가끝 자모가 없습니다.)
아무튼 나왔다가 안나왔다가 하는 문제의 세부적인 부분이 왜 그러한지, 그 이유에 대해 맞고 안맞고를 얘기를 일단 접어두고라도, 완전하게 첫가끝 자모가 들어가고 GSUB를 제대로 지원하는 공개된 글꼴은 현재 은바탕밖에 없습니다. 다른 은글꼴 시리즈가 뭔가가 부족하고 이상하게 나오는 것도 이상할 것 없지요.
@wkpark - 2010/03/01 13:21
답글삭제오, 그런 이유가 있었군요. ^^ 답변 고맙습니다.