노무현 대통령 배너
BLOG main image
왕미친놈의 왕미친세상입니다. 미친 소리는 써도 되지만, 근거 없는 소리는 쓰면 안 됩니다.


최근 제 블로그의 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: '은 돋움'; ">은 돋움 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 바탕'; ">은 바탕 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 자모 돋움'; ">은 자모 돋움 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 자모 바탕'; ">은 자모 바탕 : &#x1112;&#x119E;&#x11AB;</p> <p>호환용 한글 자모(U+3130~U+318F)를 이용한 합자 테스트</p> <p style="font-family: '은 돋움'; ">은 돋움 : &#x314E;&#x318D;&#x3134;</p> <p style="font-family: '은 바탕'; ">은 바탕 : &#x314E;&#x318D;&#x3134;</p> <p style="font-family: '은 자모 돋움'; ">은 자모 돋움 : &#x314E;&#x318D;&#x3134;</p> <p style="font-family: '은 자모 바탕'; ">은 자모 바탕 : &#x314E;&#x318D;&#x3134;</p> </div> [/code]

위와 같은 코드를 넣은 HTML 파일을 만들어서 시험을 했습니다. &#x1112;&#x119E;&#x11AB;&#x314E;&#x318D;&#x3134;은 앞서 자주 나왔던 그 문자, 바로 ᄒᆞᆫ입니다. 자세한 사항은 스프링노트 : 문자 인코딩 관련 사항을 참조하기 바랍니다.

그 결과는 아래와 같습니다.

IE6에서 본 옛한글 보통 글씨

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: '은 돋움';">은 돋움 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 바탕';">은 바탕 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 자모 돋움';">은 자모 돋움 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 자모 바탕';">은 자모 바탕 : &#x1112;&#x119E;&#x11AB;</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: '은 바탕';">은 바탕 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '굵은 은 바탕';">굵은 은 바탕 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 봄';">은 봄 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 디나루';">은 디나루 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '굵은 은 디나루';">굵은 은 디나루 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '가는 은 디나루';">가는 은 디나루 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 돋움';">은 돋움 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '굵은 은 돋움';">굵은 은 돋움 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 그래픽';">은 그래픽 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '굵은 은 그래픽';">굵은 은 그래픽 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 궁서';">은 궁서 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 자모 바탕';">은 자모 바탕 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 자모 돋움';">은 자모 돋움 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 자모 노벨';">은 자모 노벨 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 자모 소라';">은 자모 소라 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 자모 펜';">은 자모 펜 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 자모 펜흘림';">은 자모 펜흘림 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 자모 필기';">은 자모 필기 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 자모 필기a';">은 자모 필기a : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '굵은 은 자모 필기';">굵은 은 자모 필기 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 신문';">은 신문 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 타자';">은 타자 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 바다';">은 바다 : &#x1112;&#x119E;&#x11AB;</p> <p style="font-family: '은 옛글';">은 옛글 : &#x1112;&#x119E;&#x11AB;</p> </div> [/code]

테스트 결과는 다음과 같습니다.

모든 은 글꼴의 옛한글 합자 지원 테스트 결과

모든 은 글꼴의 옛한글 합자 지원 테스트 결과

옛한글 합자를 지원하는 글꼴만 따로 모으면 다음과 같습니다.

옛한글 합자를 지원하는 은 글꼴 모음

옛한글 합자를 지원하는 은 글꼴 모음

벌레의 원인

이 벌레에 대해서는 원인을 알지 못합니다. 저는 글꼴의 내부 구조에 대해 아는 바가 전혀 없기 때문입니다.

비슷한 벌레

글꼴 및 화면 표시와 관련한 버그는 다음과 같은 것이 있습니다.

관련 문서

내부 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.


글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

지난 5월 10일 스프링노트에서 글을 작성하다가 우연히 발견한 벌레이다. 그런데 이 벌레를 무릅쓰고 정상 작동한 것과 같은 결과를 보였더니 사라져 버렸다. 현재 재현은 불가능한 상태이며, 그 원인도 파악하지 못했다.

벌레의 유형

자기가 있어야 할 영역을 구분하지 못하는 벌레이다. 혹시 개념이 출장하지는 않았을까 염려스로운 벌레이기도 하다.

벌레의 발견

5월 10일 새벽에 윈도7을 버추얼박스에 설치하면서 그 설명문을 작성하였다. 그때 발견한 이 벌레를 보는 순간 내가 밤샘을 하느라 착각했다고 생각했다. 하지만 자꾸 반복되었기 때문에 스크린샷을 잡을 수 있었다.

위의 그림에서 Use recommended settings라는 부분을 잘 살펴보자.
그 부분이 가진 특징은 (1) 영문(로마자)이며, (2) 내용 중간에서 줄바꿈이 되어 있고, (3) 숫자 목록을 사용하여 나타내고 있다.

먼저 위와 같이 블럭 설정을 하였다.

<Ctrl+B>를 눌러 강한 강조를 하였으나, 위 그림처럼 윗줄(Use recommended)은 바뀌고 아랫줄(settings)은 바뀌지 않았다.
이 그림처럼 강한 강조 아이콘을 클릭했음에도 결과는 마찬가지였다.

결국 다음과 같이 줄바꿈이 아닌 문단 나누기를 하여 블럭 지정하기로 했다.

일단 문단을 나누고

일단 문단을 나누고

블록을 지정하여 강한 강조를 하였다.

블록을 지정하여 강한 강조를 하였다.

이번에는 내가 원하는 결과가 나타났다.

제작자/제공자의 답변

2009년 5월 14일 오류를 보고한 상태이다. 재현이 불가능하기 때문에 어찌 처리될는지는 알 수 없다. 역시나 재현이 불가능하기 때문에 오류 수정이 어렵다고 한다.

그때가 새벽이라 한창 잠이 올 때였다. 스크린샷을 잡은 것도 지금 생각해보면 비몽사몽간에 했던 일이다. 미처 HTML 코드를 확보하지 못했고, 위의 방법으로 강한 강조를 성공한 뒤에는 재현되지 않았다.

관련 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.


글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

카테고리

분류 전체보기 (1005)
스크립트 (22)
벌레와 팁 (126)
소프트웨어 (240)
하드웨어 (6)
이야기 (24)
말의 나무 (506)
미쳐보자 (22)
일기 (48)
아이폰 (10)

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

달력

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

글 보관함