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

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

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

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

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

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

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

벌레의 원인

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

비슷한 벌레

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

관련 문서

내부 문서

외부 문서

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


Posted by koc/SALM 트랙백 0 : 댓글 2

최근 아크로에디트에 여러 가지 문법 강조(Syntax Highlight) 파일을 추가하였습니다. 그런데 일부 문법 강조에서 그 표시가 정확하지 않은 현상을 발견하였습니다.

벌레의 유형

  • 다른 놈에게 이름이 없다고 자기 이름을 강요하는 난폭한 벌레이다.

벌레의 발견

2009년 12월 16일경에 아크로에디트 최신 버전(0.9.20.92)을 실행하여 문법 강조 파일을 추가하다가 발견하였습니다.

문법 강조의 문법 이름에서 오류가 나타난 화면

문법 강조의 문법 이름에서 오류가 나타난 화면

위 그림을 보면 같은 문법 이름으로 나타나 있지만, 실제로는 전혀 다른 문법 강조 파일입니다. 이는 확장자만 확인해도 알 수 있습니다.

벌레의 원인

이 벌레가 나타난 부분을 살펴보다가 모두 세 부분임을 알게 되었습니다. 화면에 보이는 두 가지(C#, MS SQL2000), 그리고 나머지 하나는 VB.NET 입니다. 확장자로 볼 때 *.cs 는 C#, *.sql은 MS SQL2000, *.vbs는 VB.NET로 여겨졌습니다. 이것은 모두 아크로에디트 홈페이지 사용자 자료실에서 받은 파일에 포함되어 있었습니다. 직접 파일을 받아서 확인해 보고 싶은 사람은 C#, MSSQL2000, VB.NET문법강조파일 문서에서 첨부 파일을 받아서 Syntax 폴더에 복사해 넣고 확인해 보기 바랍니다.

아무튼 이 벌레가 나타나는 원인문법 이름을 지정해 주지 않았기 때문으로 여겨집니다. 그러므로 직접 문법 이름을 수정해 주면 됩니다. 다만 개발자가 이 벌레가 전혀 나타나지 않도록 고치는 일도 병행되어야 한다고 생각합니다.

이번 버그의 원인

이번 버그의 원인

벌레 잡기

아크로에디트 프로그램이 수정될 때까지는 사용자가 직접 이름을 지정하여 이 벌레를 없애야 합니다. 여기에서는 이미 아크로에디트를 설치하고, 문법 강조 파일을 다운로드 하였다고 가정하고 설명하겠습니다.

다운로드 한 문법 강조 파일

다운로드 한 문법 강조 파일

압축 파일을 풀면 세 파일이 나타난다. cs.stx, mssql2000.stx, vbnet.stx 파일이다. 참고로 위 화면은 다른 컴퓨터에서도 나타나는 현상인지를 알기 위해 PC방에 와서 잡은 화면입니다. 제 컴퓨터에는 알집이 없습니다. ^^a

AcroEdit 폴더에서 문법 강조 폴더(Syntax)를 찾아서 복사해 넣는다.

AcroEdit 폴더에서 문법 강조 폴더(Syntax)를 찾아서 복사해 넣는다.

문법 강조 파일을 <아크로에디트 폴더>\Syntax 폴더로 복사한다.

아크로에디트 옵션 >> 문법 강조

아크로에디트 옵션 >> 문법 강조

아크로에디트를 실행하여 환경 설정 대화상자를 불러와서 문법 강조 설정 화면을 봅니다. 위와 같은 화면에서 추가를 눌러 하나씩 추가하거나, 자동 검색을 눌러 새로운 문법 강조 파일을 자동으로 추가할 수 있습니다. 다만 작업이 끝나면 반드시 적용 또는 확인을 클릭하여야 합니다.

문법 강조 파일 목록이 잘못 나타난 예시 1

예시 1 - 문법 강조 파일 목록이 잘못 나타난 화면

예시 화면 1에서는 문법 강조가 세 부분에서 틀려 있다. 직접 찾아 보면 프로그램 오류를 찾는 눈이 밝아질 수도... (아니면 말고.)

문법 강조 파일 목록이 잘못 나타난 예시 2

예시 2 - 문법 강조 파일 목록이 잘못 나타난 화면

예시 화면 2에서는 틀린 문법 강조 표시가 마지막 부분에 몰려 있다.

위와 같이 두 가지 형태로 버그가 나타날 수 있으므로 다르다고 해서 이 기사 내용이 틀리다고 생각하지는 말아주기 바랍니다. 이때 예시 1은 문법 강조를 많이 추가했을 때 그 가운데 섞여서 나타납니다. 그때 파일명의 자모순으로 정렬해 주는데, 파일 사이에 정렬되면서 바로 앞의 문법 이름을 그대로 쓰게 됩니다. 예시 2에서는 이미 문법 강조를 적용한 상태에서 해당 문법 강조만을 추가하면, 앞서 적용한 문법 강조는 그 앞에까지 정렬되어 있고, 새로 추가한 파일만 따로 정렬해 줍니다. 그러면서 문법 이름은 바로 앞의 문법 이름을 가져오게 됩니다.
이 글에서는 예시 1을 기준으로 설명합니다.

엉뚱하게 나타난 문법 이름

엉뚱하게 나타난 문법 이름

편집할 문법 강조 부분에 커서를 두고 편집을 클릭합니다. 여기에서는 확장자가 *.cs인 부분을 클릭한 뒤, 편집 단추를 클릭합니다.

문법 이름이 비어 있다.

비어 있는 문법 이름

위와 같이 문법 이름 부분이 비어 있습니다. 이것이 바로 버그의 원인으로, 이것에 대한 처리 과정에서 엉뚱한 결과가 나타났습니다.
문법 이름 부분에 알맞은 값을 넣어 주면 됩니다. 이 경우에는 C#을 넣어 줍니다.

올바르게 나타난 문법 이름

올바르게 나타난 문법 이름

이제 C# 언어에 대한 문법 강조 이름이 올바르게 나타납니다. 이때 적용 단추를 클릭하면 방금 한 작업이 환경 설정적용됩니다.

다른 문법 이름을 편집하려면 원하는 부분을 클릭하여 선택한 뒤에 편집 단추를 클릭하고, 그냥 끝내려면 확인 단추를 클릭합니다. 이 과정에 대한 설명은 생략합니다.

참고 사항

팝업 메뉴

이때 환경 설정문법 강조 항목만 엉뚱하게 나타나느냐? 아닙니다. 팝업 메뉴도 엉뚱하게 나타납니다.

엉뚱하게 나타난 팝업 메뉴

엉뚱하게 나타난 팝업 메뉴

아마도 팝업 메뉴의 내용은 환경설정 > 문법 강조 항목의 내용을 읽어서 표시해 주기 때문으로 여겨집니다.

올바르게 나타나는 팝업 메뉴

올바르게 나타나는 팝업 메뉴

환경설정 > 문법 강조 항목에서 올바르게 고쳐주면 팝업 메뉴의 내용도 올바르게 나타납니다.

숫자와 URL/URI 표시

위의 올바르게 나타나는 팝업 메뉴 그림에서 숫자 1숫자 2로 표시한 부분에서 조금 엉뚱한 현상이 보입니다. 이는 버그인지 아닌지 확인할 수 없었습니다.

  • 숫자 1에서 보면, 문법 강조 Text File은 아무런 기능도 없이 빈 문법 강조입니다. 그런데 이처럼 숫자만 다른 색깔(밝은 자주색)로 문법강조가 되어 있습니다.
  • 숫자 2에서 보면, URL/URI를 파란 색으로 표현해 주고 있습니다. 이것은 아크로에디트의 기능으로 보입니다.

제작자/제공자의 답변

2009년 12월 22일 오류를 보고한 상태이다.

관련 문서

내부 문서

외부 문서

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


Posted by koc/SALM 트랙백 0 : 댓글 0

스프링노트에서 작성한 글을 블로그에 게시하고 나면 가끔 물음표(?)로 바뀌는 일이 있다. 처음에는 내가 유니코드KS X 1001(흔히 KS C 5601로 불린다.) 코드에 들어 있지 않은 코드를 게시한 것으로 여겼다. UTF-8 표기법으로 나타낼 수 없는 문자를 U+003F(?, 물음표)나 U+FFFD(�, 유니코드 대치 문자)로 치환하는 것은 UTF-8에서의 오류 처리이기 때문이다. 그러다가 스프링노트 측에서 또는 티스토리 측에서 잘못 게시했을 수도 있다는 생각을 갖게 되었다.

벌레의 유형

  • 벌레인지 아닌지 알 수 없었다. 이 사례는 보는 관점에 따라서는 버그일 수도 있고 아닐 수도 있다.

벌레의 발견

지난 11월 18일 알까기 1 - 알툴즈 까기 문서를 작성하다가 뮤토런트의 로마자 이름(μTorrent)이 화면에 잘못 나타나고 있음을 보고 혹시나 하는 생각을 갖게 되었다. 그에 앞서 11월 2일 한/글/ 2007에서 나타난 구결 표기 오류 2 문서에 엄(厂)과 엄(广)을 입력하다가 발견하였다. 현재 그 문서는 글자가 깨진 상태로 놔두었다.

Character-Encoding-00.png
자료 화면. 문자 인코딩이 제대로 되지 않았다.

문제가 발생하는 경우

지금까지 문제가 발생한 경우는 다음과 같다.

  • 자주 쓰지 않는 한자 : 한중일 통합 영역의 한자 가운데 (1) 특정 언어 윈도에서만 정확하게 보이는 한자, (2) 기본 다국어 평면(BMP)의 U+4E00부터 U+9FA5까지의 영역에 포함되지 않는 한자는 제대로 보이지 않는 경우가 있다.
  • 자주 쓰지 않는 로마자 : 영문자는 잘 나타내 준다. 숫자도 잘 나타내 준다. 꺽쇠(< >)도 잘 나타내 준다.[각주:1] 다만 그리스 문자나 키릴 문자 등은 가끔 정확히 표현하지 못한다. 뮤토런트에서 깨진 문자도 그리스 문자이다.
  • 특별한 구문부호가 붙은 로마자 및 기호 : 움라우트 등이 붙은 문자나 기호 등에서 가끔 깨진다.

문제 해결책

크게 두 가지 해결책이 있다. 우선 특별한 구문부호가 붙은 로마자나 기호는 글자 엔티티(character entity)로 나타내면 된다는 점이다. 그 다음으로 자주 쓰이지 않는 한자는 HTML 참조 코드를 이용하는 쪽이 낫다는 점이다.

  • 글자 엔티티 이용 : © 기호를 나타내고 싶다면 &copy; 라고 표현하면 된다.
  • HTML 참조 코드 : © 기호를 나타내고 싶다면 &#x00A9; 라고 16진수로 표현하거나, &#169; 라고 십진수로 표현하면 된다.

관련 문서

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


  1. 이것은 글자 엔티티(character entity)로써 나타내 주고 있다. [본문으로]
Posted by koc/SALM 트랙백 0 : 댓글 0

티스토리 툴바