왕미친놈의 왕미친세상

최근 제 블로그의 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;은 앞서 자주 나왔던 그 문자, 바로 ᄒᆞᆫ입니다. 자세한 사항은 스프링노트 : 문자 인코딩 관련 사항을 참조하기 바랍니다.

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

한편 위에서 호환용 한글 자모의 합자는 지원하지 않음을 알게 되었습니다. 그러므로 코드를 조금 고치겠습니다.

글꼴 실험 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]

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

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

벌레의 원인

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

비슷한 벌레

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

• 네이버의 나눔고딕코딩 선문자 오류
• 다음뷰, 옛한글도 한글이란다.
• 닫는 괄호 표기 버그

관련 문서

내부 문서

• [벌레와 팁/버그] - 스프링노트 : 문자 인코딩 관련 사항
• [벌레와 팁/버그] - 네이버의 나눔고딕코딩 선문자 오류
• [벌레와 팁/버그] - 다음뷰, 옛한글도 한글이란다.
• [벌레와 팁/버그] - 닫는 괄호 표기 버그

외부 문서

• 은 글꼴 프로젝트
  • 버그 리포팅

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

ᄒᆞᆫ글

위의 검정 글씨가 자주색처럼 보여야 합니다. 빨간색처럼 보이면 글꼴이 없거나 설정이 잘못된 경우입니다.

어떤 텍스트 편집기에서 우연히 ᄒᆞᆫ글을 복사하여 붙였다가 빨간색처럼 보이는 현상을 접한 뒤로 옛한글을 입력하지도 복사해 붙이지도 않은 기억이 난다. 아무튼 지금 다시 도전해 보려고 합니다.

목적

옛한글 입력은 힘들므로 우선 옛한글을 화면에 잘 나타내는 텍스트 편집기를 찾아 보자.

평가 항목

1. 가변폭 글꼴이 가능한가? :
   • 대부분의 옛한글 글꼴이 가변폭 글꼴입니다. 따라서 텍스트 편집기에서 지원하는지를 먼저 살펴야 합니다.
   • 글꼴 목록에서 굴림체와 굴림이 함께 나타나면 됩니다.
2. 유니코드 붙이기가 가능한가?
   • 유니코드, 정확하게는 UTF-8 문자셋으로 붙여넣기를 할 수 있는가? (Copy & Paste)
   • 참고로 윈도에서는 유니코드라고 부르는 것은 유니코드 리틀 엔디언입니다. 유니코드 빅 엔디언은 그냥 유니코드 빅 엔디언으로 표기합니다.
   • 예문에서 데이터를 읽어오게 됩니다.
3. 유니코드로 저장할 수 있는가?
   • 2번에서 읽어온 예문을 UTF-8 문자셋으로 저장할 수 있는가를 평가합니다.
4. 3번에서 자신이 저장한 파일에서 유니코드 자료를 읽어 올 수 있는가?
   • 이것도 역시 정확하게는 UTF-8 문자셋으로 저장한 파일을 읽어 올 수 있는가를 평가합니다.
5. 3번에서 다른 프로그램에서 파일로 저장한 UTF-8 문자셋 자료를 읽어올 수 있는가?
6. 5번에서 불러온 것을 다시 유니코드로 저장할 수 있는가?
7. 4번에서 다른 텍스트 편집기에서 불러온 UTF-8 문자셋 자료를 복사하여 붙여넣기를 할 수 있는가? (Copy & Paste)
8. 7번에서 붙여넣기 한 것을 다시 유니코드로 저장할 수 있는가?
9. 위의 1~8번 과정을 가변폭 글꼴로 다시 시험합니다.

이때 당장은 유니코드의 여러 가지 형태를 모두 평가할 수는 없습니다. 따라서 달랑 두 가지만 따집니다. 하나는 유니코드 리틀 엔디언, 다른 하나는 UTF-8입니다. 특히 UTF-8에 중점을 두어 평가하게 됩니다.

저게 끝나면 오피스웨어도 점검을 해 봐야겠습니다.

평가 방법

위의 항목에 점수를 부여하게 됩니다. 그러나 항목 별로 약간의 차별을 두게 됩니다. 다만 1~8번을 따로 순위를 매기고, 9번은 따로 순위를 매깁니다. 9번을 따로 매기는 까닭은 설명하지 않아도 아시겠죠? 그리고 종합 순위는 9번 항목 때문에 매기지 않습니다. 사실상 텍스트 편집기의 성능 시험은 8번까지로 끝이라고 보시면 됩니다.

여기에서 미리 밝힐 사항은 윈도의 메모장은 읽기 쓰기가 모두 가능하며, 붙여넣기가 가능했습니다. 다른 프로그램이 저장한 자료도 거의 대부분 완벽하게 읽어왔습니다.

• 1번 항목은 점수가 없습니다. 이것은 9번 항목을 위한 옵션이기 때문입니다.
• 2번 항목은 10점입니다. 예문에 나타난 대로 보여주어야 합니다.
• 3번 항목은 10점입니다. 단, 2번에서 정상적으로 붙여넣기를 하지 못한 경우에는 메모장의 파일 데이터로 대체하며, 그것을 불러와서 받은 점수에서 3점 감점합니다.
• 4번 항목은 10점입니다. 저장한 뒤 그것을 불러온 뒤 복사하여 위키백과에 붙여넣기를 함으로써 정상적으로 보이는지를 검사합니다. 이는 데이터가 변형되더라도, 실제로 그 내용은 그대로 유지되는지를 알아보기 위한 것입니다.
• 5번 항목은 제대로 불러온 것의 갯수에 3을 곱합니다. 다시 말해 5개의 프로그램에서 저장한 것을 불러오면 5 x 3 = 15점이 됩니다. 불러오더라도 이상이 있으면 감점 처리합니다.
• 6번 항목은 저장한 뒤 메모장에서 불러오고, 그것을 다시 위키백과에 붙여넣기를 함으로써 정상적으로 보이는지를 검사합니다. 이는 데이터가 변형되더라도, 실제로 그 내용은 그대로 유지되는지를 알아보기 위한 것입니다. 역시 제대로 완료하면 편집기 하나당 3점을 배정합니다.
• 7번 항목은, 화면에 잘 나타내 주면, 편집기 하나당 3점입니다.
• 8번 항목은 6번 항목을 참조하여 점수를 매깁니다.

예문

위키백과의 옛한글 문서에 나타난 예문을 조금 고쳐서 사용합니다. 일부러 돋움 글꼴을 써서 옛한글을 깨지도록 했습니다.

<span class="jamocomposed_block" style="font-family: '돋움 옛한글','Dotum Old Hangul','바탕 옛한글','Batang Old Hangul','궁서 옛한글','Gungsuh Old Hangul','굴림 옛한글','NewGulim Old Hangul','은 자모 바탕 확장','Un Jamo Batang Ex','UnJamoBatangEx','은 자모 바탕','Un Jamo Batang','UnJamoBatang','은 바탕','Un Batang','UnBatang',Code2002,Code2001,Code2000,serif; font-size: 105%;">나랏말ᄊᆞ미 듀ᇰ귁에 달아 문ᄍᆞᆼ와로 서르 ᄉᆞᄆᆞᆺ디 아니ᄒᆞᆯᄊᆡ</span>

원문은 위와 같으나 실제로 사용하는 코드는 다음과 같습니다.

{{첫가끝|

나랏말ᄊᆞ미 듕귁에 달아 문ᄍᆞᆼ와로 서르 ᄉᆞᄆᆞᆺ디 아니ᄒᆞᆯᄊᆡ

}}

이는 듀ᇰ귁이라는 코드가 윈도 시스템 또는 글꼴에서 약간의 버그를 보이고 있어서 듀ᇰ라고 바뀌는 경우도 있기 때문입니다.

이것은 위키백과의 사용자 페이지에서 확인할 수 있습니다. 결국 아래 두 그림 가운데 한 가지의 형태를 따르면 됩니다.

텍스트 편집기 목록

간혹 이건 IDE 아니냐고 할 만한 놈이 있기는 하지만, 다음과 같은 텍스트 편집기를 대상으로 작업을 하게 됩니다.

• 메모장
• 데이지에디트
• 아크로에디트
• gedit
• jEdit
• Komodo Edit 5
• Xin Editor
• Notepad2
• Notepad++ (유니코드 버전)
• Notepad++ (안시 버전)
• PSPAD
• metapad LE
• metapad (풀버전)
• 울트라에디트
• 에디트플러스

마치며

현재까지 예상으로는 편집 능력에서는 거의 최하를 다투는 메모장이 압도적인 1위를 하지 않을까 생각합니다. 이게 단순히 텍스트를 붙여넣고 저장하고, 클립보드로 복사하고, 클립보드에서 붙여넣는 능력이 매우 탁월하다는 사실을 이번에 알게 되었기 때문입니다. 아무튼 기대가 됩니다.

관련 문서

내부 문서

• [일기] - 난 판도라 상자를 열었을까?

외부 문서

• 위키백과 :: 옛한글

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