'돋움'에 해당되는 글 2건

  1. 2010.01.22 굵은 은 돋움 글꼴의 옛한글 조합 버그 (2)
  2. 2010.01.16 닫는 괄호 표기 버그

굵은 은 돋움 글꼴의 옛한글 조합 버그

최근 제 블로그의 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]

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

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

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

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

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

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

벌레의 원인

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

비슷한 벌레

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

관련 문서

내부 문서

외부 문서

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


Trackback 0 Comment 2

닫는 괄호 표기 버그

요즘 한컴오피스 2010 베타버전을 사용하다 보니 조금 이상한 현상을 발견했습니다. 한/글에서는 제대로 보이는 괄호가 웹페이지에서는 약간 다르게 보이는 현상입니다.

  • 참고 : 이 글에 나타난 사항을 바탕으로 블로그의 글꼴 설정을 바꾸었습니다.

벌레의 유형

남들은 다 날씬해 보이기를 바라는데, 이 벌레는 홀로 뚱뚱해 보이기를 바라고 있습니다.

개발자의 답변

버그 리포팅을 하지 않았습니다. 이 글을 쓰기 시작할 때까지는 적용되어 있던 글꼴 가운데 돋움 옛한글 글꼴(ODOTUM.TTF)은 MS 오피스2000 팩키지 또는 확장 팩에 포함되어 있던 글꼴입니다. 현재 이 파일에 대한 지원을 MS에서 중단한 상태입니다. 그래서 그 글꼴을 삭제하였습니다. 생각 같아서는 굴림 옛한글 글꼴도 삭제하고 싶지만, 그것이 기본 글꼴에 대한 확장이라서 그냥 두었습니다.

벌레의 발견

파이어폭스에 나타난 이상한 괄호

파이어폭스에 나타난 이상한 괄호

처음에는 파이어폭스에서 발견했습니다.

인터넷 익스플로러에 나타난 이상한 괄호

인터넷 익스플로러에 나타난 이상한 괄호

인터넷 익스플로러에서도 확인했습니다. 제 컴퓨터에 있는 IE6은 대개 이런 용도로만 쓰입니다.

글꼴 실험 시작

왜 저렇게 이상하게 보일까요? 어떤 글꼴인지 알 수 없어서 하나하나 살펴보기로 했습니다. 대상은 제 블로그에 설정한 글꼴과 몇몇 다른 글꼴입니다.

[code html] <div style="font-size:10pt;"> <p style="font-family: '굴림';">굴림 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '굴림체';">굴림체 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '돋움 옛한글';">돋움 옛한글 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '바탕 옛한글';">바탕 옛한글 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '굴림 옛한글';">굴림 옛한글 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '굴림 옛한글 자모';">굴림 옛한글 자모 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '궁서 옛한글';">궁서 옛한글 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '은 돋움';">은 돋움 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '은 바탕';">은 바탕 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '은 자모 돋움';">은 자모 돋움 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '은 자모 바탕';">은 자모 바탕 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '은 자모 노벨';">은 자모 노벨 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '은 자모 소라';">은 자모 소라 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '함초롬바탕';">함초롬바탕 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: '함초롬돋움';">함초롬돋움 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: 'Code2002';">Code2002 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: 'Code2001';">Code2001 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: 'Code2000';">Code2000 : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> <p style="font-family: 'serif';">serif : &#x1112;&#x119E;&#x11AB;을 지우기(Del 키)를 할 때</p> </div> [/code]

위와 같은 코드를 넣은 HTML 파일을 만들어서 시험을 했습니다. &#x1112;&#x119E;&#x11AB;은 앞서 자주 나왔던 그 문자, 바로 ᄒᆞᆫ입니다. & 문자HTML 참조 코드 또는 글자 엔티티(character entity)임을 나타내고 있습니다. 뒤에 수치가 따라왔으므로 HTML 참조 코드입니다(스프링노트 : 문자 인코딩 관련 사항 참조). 이 코드는 옛한글 지원 여부를 알아보려고 넣었습니다.

다만 위에서 <div style="font-size:10pt";>라고 나타난 부분은 앞으로 바뀌게 됩니다. 이때 이 실험은 처음 시작할 때와 코드가 조금 바뀌었으며, 여기에 밝힌 사항은 이미 실험에 성공하였기에 나타난 사항임을 염두에 두기 바랍니다.

10포인트 글꼴 테스트

10포인트 글꼴에서는 이상을 발견할 수 없었습니다. 처음에는 이것 때문에 조금 헤맸습니다. 하지만 구글링 결과 글꼴 버그가 특정 크기에서만 나타나는 경우도 있다고 했기 때문에 급히 코드를 약간 고쳤습니다.

10포인트 글꼴 테스트

10포인트 글꼴 테스트

10포인트보다 큰 글꼴의 크기별 테스트

편의상 편집하여 표시합니다. 양해 바랍니다.

11포인트 글꼴 테스트 : 모든 글꼴에서 이상 없음

11포인트 글꼴 테스트 : 모든 글꼴에서 이상 없음

12포인트 글꼴 테스트 : 모든 글꼴에서 이상 없음

12포인트 글꼴 테스트 : 모든 글꼴에서 이상 없음


13포인트 글꼴 테스트 : 모든 글꼴에서 이상 없음

13포인트 글꼴 테스트 : 모든 글꼴에서 이상 없음


14포인트 글꼴 테스트 : 돋움 옛한글 글꼴에서 이상 발생

14포인트 글꼴 테스트 : 돋움 옛한글 글꼴에서 이상 발생


16포인트 글꼴 테스트 : 돋움 옛한글 글꼴에서 이상 발생

16포인트 글꼴 테스트 : 돋움 옛한글 글꼴에서 이상 발생


18포인트 글꼴 테스트 : 돋움 옛한글 글꼴에서 이상 발생

18포인트 글꼴 테스트 : 돋움 옛한글 글꼴에서 이상 발생


20포인트 글꼴 테스트 : 모든 글꼴에서 이상 없음

20포인트 글꼴 테스트 : 모든 글꼴에서 이상 없음

이보다 더 큰 글꼴에서의 테스트는 저에게 필요가 없기에 여기에서 멈추었습니다. 마지막 20포인트 글꼴에 빨간 네모로 표시한 부분이 옛한글을 잘 나타내고 있는 글꼴입니다.

  • 참고로 저는 Code2000 계열 글꼴을 가지고 있지 않기에 위 그림들에서 Code2000 계열 글꼴에서 옛한글이 모두 깨지고 있습니다. 그리고 MS 오피스 확장 팩 글꼴은 제가 가진 MS Word 2000과 함께 딸려왔습니다.

벌레의 원인

이 글을 쓰기 시작할 때까지는 적용되어 있던 글꼴 가운데 돋움 옛한글 글꼴(ODOTUM.TTF)은 MS 오피스2000 팩키지 또는 확장 팩에 포함되어 있던 글꼴입니다. 아마도 그 파일에 어떤 벌레가 숨어 있었나 봅니다.

비슷한 벌레

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

관련 문서

내부 문서

외부 문서

(없음)

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

Trackback 0 Comment 0
prev 1 next