최근 제 블로그의 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]테스트 결과는 다음과 같습니다.
모든 은 글꼴의 옛한글 합자 지원 테스트 결과
옛한글 합자를 지원하는 글꼴만 따로 모으면 다음과 같습니다.
옛한글 합자를 지원하는 은 글꼴 모음
벌레의 원인
이 벌레에 대해서는 원인을 알지 못합니다. 저는 글꼴의 내부 구조에 대해 아는 바가 전혀 없기 때문입니다.
비슷한 벌레
글꼴 및 화면 표시와 관련한 버그는 다음과 같은 것이 있습니다.
관련 문서
내부 문서
- [벌레와 팁/버그] - 스프링노트 : 문자 인코딩 관련 사항
- [벌레와 팁/버그] - 네이버의 나눔고딕코딩 선문자 오류
- [벌레와 팁/버그] - 다음뷰, 옛한글도 한글이란다.
- [벌레와 팁/버그] - 닫는 괄호 표기 버그
외부 문서
이 글은 스프링노트에서 작성되었습니다.
'벌레와 팁 > 버그' 카테고리의 다른 글
| ᄒᆞᆫ글2010 베타버전의 문자표 버그 2 (0) | 2010.01.24 |
|---|---|
| ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1 (0) | 2010.01.23 |
| 한컴사전에 나타난 이상한 하이픈 (0) | 2010.01.18 |
| 아크로에디트 URL 강조 오류 2 (0) | 2010.01.17 |
| 닫는 괄호 표기 버그 (0) | 2010.01.16 |
