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


오늘(2010년 2월 28일)은 블로그를 개설한 지 만 1년이 되는 날입니다. 1주년을 맞아 앞으로 인터넷 익스플로러 6은 전혀 지원하지 않기로 했습니다. 뭐, 지금까지도 굳이 적용하려고 노력한 적은 없지만요. ^^a

IE6으로 접속하면...

왕미친놈의 왕미친세상 : 안전 기원 메시지

왕미친놈의 왕미친세상 : 안전 기원 메시지


BLUEnLIVE's ZockrWorld : 구닥다리 웹브라우저 메시지

BLUEnLIVE's ZockrWorld : 구닥다리 웹브라우저 메시지

제 블로그BLUEnLIVE 님의 블로그에서는 위와 같은 메시지를 볼 수 있습니다.

그리고 도아 님의 블로그에서는 아래와 같이 댓글을 달 수 없습니다.

도아의 세상사는 이야기 : 댓글을 달 수 없다.

도아의 세상사는 이야기 : 댓글을 달 수 없다.

너무하다? 아니다! 당연하다!

Internet Explorer 6은 이미 나온 지 8년이나 된 웹브라우저로서 지나치게 오래 사용된 프로그램입니다. 사람으로 치면 이미 100세를 넘긴 초고령 프로그램입니다. 이미 수없이 많은 보안 문제를 일으킨 프로그램이지만, 단지 사람들이 많이 쓴다는 이유로 그것을 써야 할 이유가 있을까요?

저는 아니라고 생각합니다. 그저 많이 쓴다는 이유로 써야 한다면, "사람은 언젠가는 모두 다 죽기 때문에 지금 당장 다 죽어야 한다."라는 논리도 성립하기 때문입니다.

그리고 이런 것도 있답니다.

브라우저 체크 위젯

브라우저 체크 위젯

IE6 No More 캠페인의 일환으로 만들어진 브라우저 체크 위젯이랍니다. ^^a

IE6 장례식

관리 화면 - 센터에서 우연히 장례식에 대한 정보를 얻게 되었습니다.

IE6 장례식 글

IE6 장례식 글

심지어 IE6Funeral.com(IE6 장례식 사이트)도 있다고 합니다.

ie6 장례식 사이트

ie6 장례식 사이트

2010년 3월 1일 캘리포니아 마운틴뷰(Mountain View, California)에서 사망했다고 하며, 장례식 날짜는 3월 4일이라고 합니다. 참석하지 못하는 사람은 꽃을 보내라고(send flowers) 하네요. 헐~!

흠... 사망 원인은 일종의 노동 재해라는데... a workplace injury sustained at the headquarters of Google, Inc 랍니다.

참 재미있는 사람들이지요. ^^a

아무튼 사람을 증겁게 만드는 재주가 있네요.

참고 문서

내부 문서

외부 문서

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


'일기' 카테고리의 다른 글

이름이 바뀌었습니다.  (0) 2010.03.12
블로그 이사했습니다.  (0) 2010.03.09
갑자기 왜 800명이나 방문했을까?  (0) 2010.02.18
블로그를 합쳐야 하나?  (2) 2010.02.14
내 블로그의 영문 이름은?  (0) 2010.02.08
글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

최근 블로그에 들어 있는 배너 등을 다시 배치하려고 스킨을 만지고 있습니다. 그런데 좀체 마음먹은 대로 고치지 못하고 있습니다. 그래서 일단 구글링 등으로 알아낸 사이트를 소개하는 데서 그치고자 합니다.

추천 배너 배치

비록 블로그 개선 및 개편에는 성공하지 못했지만 여러 가지를 시험할 수 있었습니다. 도움을 얻은 사이트는 다음과 같습니다.

떠다니는 메뉴

관련 문서

내부 문서

외부 문서

이 글에 쓰인 웹페이지를 정리하면 다음과 같습니다.

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


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

IE6 no more logo

BLUEnLIVE's ZocKrWorldBLUEnLIVE 님의 영향을 받아 동참한 IE6 no more 캠페인이다. 이번에 이것을 다시 한 번 고쳤습니다.

원래의 배너 등을 보고 싶은 사람은 IE6 No More 동참하기 문서를 보기 바랍니다.

원래의 코드

IE6 No More 홈페이지에 나타난 원본 코드는 다음과 같습니다.

[code css; html-script: false] <!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>     <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a> </div>     <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>         <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>         <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>             <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div>             <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>For a better experience using this site, please upgrade to a modern web browser.</div>         </div>         <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>         <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>         <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>         <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>     </div> </div> <![endif]--> [/code]

BLUEnLIVE 님이 한글로 고쳐준 코드

BLUEnLIVE 님 한글 메시지로 고쳐준 코드는 다음과 같습니다.

[code css; html-script: false] <!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>     <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>     <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>         <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>         <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>             <div style='font-size: 13px; font-weight: bold; margin-top: 12px;'>구닥다리 웹브라우저를 사용하시는군요!</div>             <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>본 사이트를 원활하게 보실 수 있도록 웹브라우저를 업데이트 하세요.</div>         </div>         <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>         <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>         <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>         <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>     </div> </div> <![endif]--> [/code]

한글 메시지를 다시 고친 코드

BLUEnLIVE 님이 한글 메시지로 고친 코드를 조금 다르게 바꾼 코드는 다음과 같습니다.

[code css; html-script: false] <!-- IE6 No More 배너 시작 --> <!--[if lt IE 7]><div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>     <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>     <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>         <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>         <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>             <div style='font-size: 13px; font-weight: bold; margin-top: 12px;'>저는 당신 컴퓨터의 안전을 기원합니다!</div>             <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>당신의 컴퓨터가 좀 더 안전하기를 바란다면 웹브라우저를 바꾸기 바랍니다.</div>         </div>         <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>         <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>         <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>         <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>     </div> </div> <![endif]--> <!-- IE6 No More 배너 끝 --> [/code]

링크 주소를 코친 코드

위 세 코드는 한 가지 문제가 있습니다. 바로 인터넷 익스플로러는 항상 영문으로 설치된다는 점입니다. 물론 설치 과정에서 약간의 작업을 거쳐서 한글 메시지를 출력할 수 있게 바뀝니다만, 처음부터 한글 인터넷 익스플로러가 설치되는 경우와는 조금 다릅니다. 더구나 설치하는 페이지도 영문 메시지를 보여 줍니다. 그것을 마이크로소프트의 웹페이지로 바꾸고, 다른 웹브라우저와 관련한 링크도 조금 손을 보았습니다. 아울러 alt 속성과 관련한 메시지도 한글로 바꾸었습니다.

[code css; html-script: false] <!-- IE6 No More 배너 시작 --> <!--[if lt IE 7]><div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>     <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>     <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>         <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>         <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>             <div style='font-size: 13px; font-weight: bold; margin-top: 12px;'>저는 당신 컴퓨터의 안전을 기원합니다!</div>             <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>당신의 컴퓨터가 좀 더 안전하기를 바란다면 웹브라우저를 바꾸기 바랍니다.</div>         </div>         <div style='width: 75px; float: left;'><a href='http://www.mozilla.or.kr/ko/firefox/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Firefox 3.5 또는 상위 버전 구하기'/></a></div>         <div style='width: 75px; float: left;'><a href='http://www.microsoft.com/korea/windows/internet-explorer/worldwide-sites.aspx' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Internet Explorer 8 또는 상위 버전 구하기'/></a></div>         <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Safari 4 또는 상위 버전 구하기'/></a></div>         <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Google Chrome 구하기'/></a></div>     </div> </div> <![endif]--> <!-- IE6 No More 배너 끝 --> [/code]

관련 문서

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


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

한컴오피스 베타버전과 함초롬 글꼴의 모양

한컴오피스2010 베타버전에서 추가된 글꼴인 함초롬체는 매우 예쁩니다. 그런데 진짜로 예쁜지, 아니면 ᄒᆞᆫ글에서 예쁘게 표현한 것인지 궁금하였습니다.

벌레의 유형

ᄒᆞᆫ글 씨! 이것이 버그인지 아닌지 알쏭달쏭합니다. 답변 좀 해 주세요.

개발자의 답변

2010년 1월 31일 버그 리포팅이 아닌 문의를 한 상태입니다.

벌레의 발견

여러 프로그램에서 함초롬 글꼴을 72포인트로 나타내 보았습니다.

한컴오피스 ᄒᆞᆫ글2010 베타버전에 나타난 함초롬 글꼴

한컴오피스 ᄒᆞᆫ글2010 베타버전에 나타난 함초롬 글꼴


한컴오피스 ᄒᆞᆫ셀2010 베타버전에 나타난 함초롬 글꼴

한컴오피스 ᄒᆞᆫ셀2010 베타버전에 나타난 함초롬 글꼴


한컴오피스 ᄒᆞᆫ쇼2010 베타버전에 나타난 함초롬 글꼴

한컴오피스 ᄒᆞᆫ쇼2010 베타버전에 나타난 함초롬 글꼴


오픈오피스 Writer 3.1.1 버전에 나타난 함초롬 글꼴

오픈오피스 Writer 3.1.1 버전에 나타난 함초롬 글꼴


Microsoft 엑셀 뷰어에 나타난 함초롬 글꼴

Microsoft 엑셀 뷰어에 나타난 함초롬 글꼴


메모장에 나타난 함초롬 글꼴

메모장에 나타난 함초롬 글꼴


파이어폭스에 나타난 함초롬 글꼴

파이어폭스에 나타난 함초롬 글꼴


인터넷 익스플로러 6에 나타난 함초롬 글꼴

인터넷 익스플로러 6에 나타난 함초롬 글꼴

벌레 분석 및 덧붙이는 말

함초롬 글꼴은 한컴오피스에서는 예쁘게 보였지만 다른 오피스나 응용 프로그램에서는 그다지 예쁘지 않습니다. 함초롬 글꼴을 웹페이지에 적용하려던 계획은 중단해야 할 듯싶습니다. 블로그에 함초롬 글꼴을 사용하기 힘들다는 사실이 슬플 뿐입니다.

관련 벌레

이 벌레와 관련이 있는 벌레는 다음과 같습니다.

관련 문서

어째 갈수록 내용보다는 관련 문서(참조 문서)가 더 많은 듯하네요. ^^;;

내부 문서

외부 문서

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


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

최근 제 블로그의 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로 공개한 글입니다.

요즘 한컴오피스 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 팩키지 또는 확장 팩에 포함되어 있던 글꼴입니다. 아마도 그 파일에 어떤 벌레가 숨어 있었나 봅니다.

비슷한 벌레

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

관련 문서

내부 문서

외부 문서

(없음)

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

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

한컴오피스 베타버전 버그 9 - ᄒᆞᆫ글과 블로그 6 : ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요?

블로그로 올리기 기능을 사용하여 블로그에 글을 올리면 링크를 엉뚱하게 나타내는 현상을 발견하였습니다. 확인 결과 다른 이름으로 저장하기 > 인터넷 문서에서도 똑같은 현상이 일어났습니다. 링크에 글자 속성을 걸어서 블로그에 올리면 어쩌라는 말인지 도통 알 수가 없습니다.

1. 벌레의 유형

이보세요, ᄒᆞᆫ글 씨! 열어 본 링크의 색상을 span 태그를 써서 문서에 집어 넣으면 날더러 어쩌란 말입니까? 거기는 색상을 넣으면 안 된단 말입니다.

2. 개발자의 답변

2010년 1월 6일 버그 리포팅을 한 상태입니다.

3. 벌레의 발견

가. 어느 날 갑자기 깨달았습니다.

블로그 문서의 링크 색상이 이상하다는 점을 어느 날 갑자기 깨달았습니다. 처음에는 약간 특이한 것이라고 여겼을 뿐 벌레라고는 생각지 못했습니다.

일단 이 벌레에 대해 알려면 환경 설정을 살펴봐야 합니다.

위 그림에서 열어 본 링크(보라돌이 링크)와 열어 보지 않은 링크(푸르딩딩 링크)의 글자 색을 잘 살펴보시기 바랍니다.

일단 링크 테스트 문서를 보겠습니다.

좀 흐리게 보이지만 보는 데는 지장이 없습니다. 일단 보라돌이 링크는 3개이고, 푸르딩딩 링크는 7개입니다.

다른 이름으로 저장하기 > 인터넷 문서로 저장하고, IE 6으로 열어 보았습니다.

색상이 위 환경 설정에 나타난 그 색깔입니다. 지금까지 이 색상에 대해 전혀 신경 쓰지 않았습니다. 그도 그럴 것이 이 색상은 인터넷 링크의 기본 색상이기 때문입니다. 그래서 그냥 저 그림에서 서로 다르게 나타나는 색상도 이미 한 번 방문한 웹문서이기 때문에 나타나는 현상이라고 생각해 버렸습니다.

아무튼 별 의심 없이 블로그로 올리기 기능을 이용해서 올리려다가 무언가 꺼림칙함을 느꼈습니다. 바로 저 링크의 밑줄이 문제였습니다. 그래서 부랴부랴 시험용 블로그를 하나 개설하고,  그곳에 글을 올렸습니다.

주황색 링크 사이에 보이는 보라돌이 링크! 그렇습니다. ᄒᆞᆫ글2010 베타버전은 저 링크에서 글자색을 넣어서 블로그에 올려버리는 짓을 해 버렸습니다.

혹시 같은 컴퓨터이기에 나타나는 현상인가 싶어 다른 컴퓨터에서 시험했습니다.

인터넷 익스플로러 8에서도 위와 같이 주황색 링크보라돌이 링크를 보여주고 있습니다.

그런데 벌레는 벌레고, 함초롱돋움 글꼴이 웹페이지에서 상당히 예쁘게 보입니다. 그러나 옛한글은 여지없이 뭉개지고 있습니다.

나. 두 번째 테스트

혹시나 이건 내가 실수로 색상을 넣은 것일 수도 있다는 생각이 들었습니다. 그래서 링크 두어 개를 더 클릭한 뒤 살펴보았습니다.

일단 위와 같이 보라돌이 링크도 5개, 푸르딩딩 링크도 5개가 되게 만들었습니다. HTML 문서로 저장하고, 블로그에도 올렸습니다.


블로그로 올리기 작업에서 처음으로 본, 비지 않은 게시물 위치

위 그림은 블로그로 올리기 작업에서 비어 있지 않은 게시물 위치를 처음으로 본 기념으로 잡은 화면입니다. 지금까지 버그 화면만 보다가 버그가 아닌 화면을 보니 되게 신기했습니다.

IE 6에서는 보는 HTML 문서를 그저 그러네요. 아무튼 보라돌이 링크 5개, 푸르딩딩 링크 5개입니다.

제발 아니기를 빌었는데…. 주황색 링크 5개에 보라돌이 링크 5개입니다.

파이어폭스에 이어 IE 8도 역시 같은 결과를 나타냈습니다.

4. 벌레의 원인

원인 분석을 하는 과정에서 혹시나 하는 마음에 이름을 다르게 저장한 HTML 파일을 살펴보게 되었습니다. 그리고 블로그에 올린 내용을 메모장에 복사하여 하드디스크에 저장하였습니다. 물론 이름은 다릅니다.

위 리스트에서 링크 테스트.htm 파일링크 테스트-1.htm 파일다른 이름으로 저장하기 > 인터넷 문서로 만든 파일입니다. 보다시피 내용은 전혀 바뀌지 않았는데 단지 클릭을 두 번 했다는 이유로 파일 내용이 바뀌어 있습니다. 그리고 링크 테스트-blog-3.htm 파일링크 테스트-blog-4.htm 파일은 블로그 내용을 HTML 편집 모드에서 클립보드로 복사한 뒤 하드디스크에 저장한 것입니다. 이것 역시 내용이 조금 달라져 있습니다. 이것이 블로그에 나타나는 결과에 영향을 주고 있지 않나 생각합니다.

그런데 현재 위의 상황으로 볼 때 하이퍼링크의 접근 기록이 문서 내용의 일부로서 문서 안에 기록되어 있음을 알 수 있습니다. 여기에서 주목할 점이 있습니다. 바로 왜 웹사이트 방문 기록을 HWP 문서의 내부에 따로 영역을 두어 HWP 구조의 일부로서 저장하지 않고 바로 문서의 내용의 일부로서 저장하고 있느냐는 점입니다. 다시 말해 하이퍼링크의 접근 기록 또는 방문 기록은 어디까지나 기록으로서 남아야지, 그것이 문서 내용의 일부가 되어서는 곤란하다는 말입니다. 위에서 보인 오류도 그러한 맥락에서 볼 수 있다고 생각합니다.

5. 비슷한 벌레

[벌레와 팁/버그] - 아크로에디트 : 문법 강조에서 문법 이름 표기 문제

[벌레와 팁/버그] - 티스토리에서 주석이 제대로 인식되지 않는 현상

[벌레와 팁/버그] - 티스토리 주석에서 \ 문자 표기 문제

6. 관련 문서

가. 내부 문서

[벌레와 팁/제안] - 한컴오피스 베타버전의 공백과 이동 기능

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그에는 글을 하나만 올리란 말입니다.

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! ‘ᄒᆞᆫ글’을 제대로 나타내면 안 되겠니? 2

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! ‘ᄒᆞᆫ글’을 제대로 나타내면 안 되겠니?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그 카테고리는 어디에?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그에는 게시판이 없거든요.

[벌레와 팁/버그] - HTML 태그 해석 오류 문제

[벌레와 팁/버그] - 도대체 무슨 짓을 하는 거냐, ᄒᆞᆫ글?

[프로그램/스크린샷] - 한컴오피스2010 베타버전 실행화면

[벌레와 팁/버그] - 한컴오피스2010 베타 설치 작업과 버그 몇 개

[프로그램/설치] - 한컴오피스2010 베타버전 설치기

나. 외부 문서 - 테스트 블로그

[테스트] - 링크 테스트 문서 - 4

[테스트] - 링크 테스트 문서 - 3

이 글은 ᄒᆞᆫ글 2010 베타버전에서 작성하였습니다.

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

난 판도라 상자를 열었을까?

요즘 저런 생각을 절로 하고 있습니다. 괜히 건드리면 안 될 물건을 건드리지 않았나 후회해 봅니다.

최근 두 개의 글을 올렸습니다. 최근이고 뭐고, 새해 첫날에 옛한글 관련 포스팅을 두 개나 올려 버렸죠.

그런데 갈수록 험난한 길이 보입니다. 오늘은 (X)HTML 코드를 텍스트 편집기에 복사해 붙여넣기를 했다가 그게 엉뚱하게 바뀌는 현상을 경험했습니다. 난감합니다. 이걸 버그 리포팅을 하자니, 특정 프로그램을 너무 때리는 것이 되지 않나 싶고, 버그 리포팅을 안 하자니 그래도 버그인데 안 할 수도 없고…. 더구나 그 편집기에서는 옛한글이 포함된 (X)HTML 문서를 읽어올 경우 경고 없이 허락도 받지 않고 마음대로 바꾸어 버립니다.

벌레가 줄줄이…

그 편집기만의 문제가 아니었습니다. 대부분의 편집기에서 옛한글을 입력하기 힘들다는 현실을 깨닫게 되었습니다. 아니, 진작에 알고 있었지만 지금까지 외면해 왔습니다. 양심이 가슴 한쪽을 쿡쿡 찌르는군요.

죄송합니다, 세종대왕님!

이 모자라고 모자란 후손은 세종어제 훈민정음조차 컴퓨터에 제대로 나타내지 못하고 있습니다.

아무튼 벌레가 줄줄이 나타나고 있습니다. 그래서 아예 옛한글을 잘 나타내는 텍스트 편집기(가칭)라는 글을 준비하고 있습니다. 입력까지는 바라지도 않습니다. 어차피 우리가 쓰는 키보드로는 입력이 불가능합니다. 입력하려면 반드시 특별한 입력 소프트웨어가 필요합니다. 웹에서 입력할 수 있게 해주는 웹사이트가 있는데, 아쉽게도 모질라 파이어폭스나 구글 크롭에서는 동작하지 않습니다. 오직 인터넷 익스플로러에서만 동작합니다. 오호 통재라, 오호 애재라! 그렇습니다. 한글을, 옛한글을 가장 못 나타내는 웹브라우저가 인터넷 익스플로러인데도 옛한글 관련 툴은 인터넷 익스플로러용이 가장 많습니다. 아마 그놈이 가장 못 나타내기 때문에 더 열성적으로 그놈만 지원하는 것일까요?

글꼴은 반드시 필요해!

글꼴이 갖춰져야 위와 같이 볼 수 있습니다.

글꼴이 갖춰져야 위와 같이 볼 수 있습니다.

다음뷰, 옛한글도 한글이란다.라는 글에 나온 내용을 볼 수 없는 사람도 있습니다. 다시 말해 그 글에 나타난 예시에서 맨 윗줄의 내용이 맨 아랫줄의 내용처럼 보일 수도 있습니다. 하지만 다음뷰에 나타난 ??? (물음표 세 개)처럼 보이는 사람은 없으리라 생각합니다. 만약 ???로 보이는 사람이 있다면 웹브라우저를 바꾸는 게 문제가 아니라 당장 운영체제를 바꾸는 게 낫습니다.

옛한글을 보려면 윈도XP 이상의 윈도 운영체제, 맥 OS X 이상, 리눅스 커널 2.4 이상이 필요하지요. 더구나 리눅스의 경우 X윈도의 버전과 거기에 쓰이는 데스크탑(윈도의 Explorer. ←이게 데스크탑을 작동하는 인 동시에 윈도 탐색기입니다.)인 GNOME(그놈) 및 KDE의 버전도 따져 봐야 합니다.

한글 입력과 표현에 대한 자세한 정보는 다음과 같은 사이트에서 구할 수 있습니다. 다만 한양 사용자 정의 영역 코드(Hanyang private use area code; 한양 PUA 코드)는 표준 문제로 도태되고 있습니다. 표준 방식은 한글자모 코드(Jamo-Composed code; 일명 첫가끝 코드)입니다.

제가 윈도를 쓰므로 윈도용 입력기를 소개합니다.

위의 여러 글을 읽으면 글꼴도 소개하고 있지만 여기에서 따로 소개합니다. 참고로 MS에서 배포한 글꼴은 윈도에서만 써야 합니다. 리눅스나 맥 OS에서는 사용하면 안 됩니다. 이것을 어기고 다들 리눅스나 맥 OS X에서 쓰시는데, 라이선스 위반입니다. 특히 문화재청(국가기록유산 홈페이지 등), 디지털 한글박물관, 국립국어원 등에서 배포하는 글꼴은 윈도 전용 라이선스 글꼴로서, 한양 UPA 방식을 따릅니다. 그러므로 해당 사이트를 사용하지 않는다면 그 글꼴을 설치하지 않는 것이 좋습니다.

  • 은 글꼴 :: 다운로드 - 압축을 푼 뒤 %SystemRoot%\Fonts 폴더에 복사하면 됩니다.
  • Microsoft 옛한글 글꼴 (링크 삭제) - 기이하고 신기하고 이상하게도 Microsoft Internet Explorer에서는 옛한글을 제대로 보여주지 못하는 때가 있습니다. 그리고 반드시 윈도에서만 사용해야 라이선스를 가집니다. 이것은 한양 PUA 지원하는 비표준 글꼴입니다. 익스플로러에서 잘 나타내지 못하는 이유도, 처음에는 MS가 사용자 영역(UPA)를 지원했으나 나중에 유니코드 사용자 영역에 대한 공식적인 지원을 하지 않고 있기 때문입니다. 따라서 보이면 다행, 안 보여도 어쩔 수 없습니다.
  • Code 2000 - 셰어웨어 글꼴(유료). 한글이 예쁘지는 않지만, 모든 자소가 포함되어 못 나타내는 글자는 없습니다.

어?! 그래도 안 나오네!

이렇게까지 했는데도 안 나오는 경우가 있다.

USP10.DLL 파일이 문제였다.

이게 뭐냐고? Uniscribe Unicode script processor (줄여서 유니스크라이브(Uniscribe))라는 것인데, 이게 겨우 버전 1밖에 안 되는데도, 빌드넘버에 따라 성능 차이가 심합니다. 참고로 내가 가진 파일의 버전은 1.626.5756.0, 날짜는 2006년 10월 13일이며, 파일 크기는 503296 바이트입니다. 이 파일의 최신 버전은 윈도 7에 포함된 1.626.7600.16385로서, 날짜는 2009년 7월 14일이며, 파일 크기는 612 KiB입니다. 최근 나온 Microsoft® Office 2010 베타버전에는 1.626.7600.16385 버전의 파일이 들어 있는데, 날짜는 2009년 8월 4일이며, 파일 크기는 639824 바이트입니다. 다시 말해 버전은 윈도 7에 포함된 파일과 같으나 날짜와 파일 크기는 다릅니다.

아무튼 이 파일을 복사하여 교체하면 되는데, 작업이 좀 복잡합니다. 그래서 그런지 MS오피스 2010 베타버전도 설치 과정에서 시스템 폴더를 쓰지 않고 자신의 공유 폴더에 넣어 두고 있습니다.

이렇게 고생고생해서 겨우 옛한글을 보게 되었습니다. 저는 판도라 상자를 열었을까요? 그 판도라 상자는 희망의 판도라 상자일까요? 절망의 판도라 상자일까요?

남은 이야기

그리고 제 블로그는 읽기가 좀 불편함을 알게 되었습니다.

한글이나 한자는 1글자, 영문이나 숫자는 0.5글자로 계산한다는 가정하고, 보통 한 줄에 글자는 25자 정도 되어야 읽기 좋습니다. 그보다 적으면 읽기는 편할 수 있으나 빨리 지루해진다고 하며, 그보다 많으면 너무 행이 길어서 빨리 지친다고 합니다. 그런데 제 블로그는 무려 50글자를 넘겼습니다. 무려 두 배나 많습니다.

물론 지금도 제 블로그의 글꼴 크기는 꽤 큰 편입니다. 그런데도 글자가 많은 것은 본문의 폭이 720 픽셀이기 때문입니다.

그래서 글꼴 크기가 작으면 글자가 뭉개져서 보기 흉해지는 옛한글 문제도 생기고 해서 겸사겸사 글자 크기를 좀 더 크게 하기로 했습니다. 어차피 제 자신이 보려고 블로그에 글을 올리고 있으니, 눈 나쁜 저에게는 더 좋은 일이지요.

그리고 바꾸는 김에 지금까지 미뤄 왔던 CSS 글꼴 설정도 손을 보았습니다. 글꼴 적용 순서는 은 돋움, 은 자모 돋움, 은 바탕, 은 자모 바탕, 돋움, 돋움 옛한글, 굴림 옛한글, Code2002, Code2001, Code2000의 순서입니다.

그리고 위의 은 글꼴을 받아서 설치하고 나서도 제 블로그의 글자가 이상하게 보인다면 댓글 남겨 주십시오.

마지막으로 스크린샷 몇 개!

글꼴이 달라지기는 했지만, 옛 한글은 잘 나옵니다.

글꼴이 달라지기는 했지만, 옛 한글은 잘 나옵니다.




참고 자료

내부 자료

외부 자료

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


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

HTML 태그 해석 오류 문제

1. 벌레의 유형

저 잘난 맛에 엉뚱한 짓을 하는 벌레입니다.

2. 개발자의 답변

2009년 12월 31일 버그 리포팅을 한 상태입니다.

3. 벌레의 발견

가. 왜 문단 모양이 흩트려지지?

HTML 문서를 ᄒᆞᆫ글에서 읽어오는 기능을 시험하고 있다. 뭐 내가 얼마나 시험할 수 있겠느냐마는, 그래도 안 하는 것보다야 낫기 때문이다.

그런데 ᄒᆞᆫ글에서 HTML을 읽어오면 이상하게 문단 모양이 흩트려졌다. 흩트려지려면 글 전체가 흩트려지면 좋겠지만, 이것은 간혹 어쩌다 흩트려졌다.

나. 어떤 공통점이 있나?

이상하게 여기게 되자 자꾸 눈이 가고, 그러다 보니 한 가지 공통점을 찾게 되었다.

 

그림이 지워져 있기는 하지만 인터넷 익스플로러와 ᄒᆞᆫ글 화면의 글이 같다. 그런데 인터넷 익스플로러에서는 왼쪽 정렬이 된 부분이 ᄒᆞᆫ글에서는 가운데 정렬이 되어 있다. HTML 코드를 살펴보면 다음과 같다.

 

이번에도 위와 같은 현상이다. IE에서는 왼쪽 정렬인데, ᄒᆞᆫ글에서는 가운데 정렬이다.

 

무슨 까닭인지 <p style="text-align: center;"><img … /></p>의 구조일 때 그 다음에 오는 <p> … </p> 태그로 이루어진 문단은 가운데 정렬이 되고 있습니다.

왜 이렇게 엉뚱하게 태그를 해석하는지 알 수 없으나, 상당히 짜증나는 일이 아닐 수 없습니다. 더구나 이것은 하나하나 찾아서 직접 고치는 수밖에 없는 문제입니다.

4. 벌레의 원인

무슨 까닭인지 <p style="text-align: center;"><img … /></p>의 구조일 때 그 다음에 오는 <p> … </p> 태그로 이루어진 문단은 가운데 정렬이 되고 있습니다. 왜 이런 경우에 정렬이 흩트려지는지 알 수 없었습니다.

5. 비슷한 벌레

티스토리 BBCode 오류가 비슷하다고 여겨집니다. 끼지 말아야 할 때 끼어서 엉뚱한 짓을 하는 것이 비슷합니다.

6. 관련 문서

가. 내부 문서

[벌레와 팁] - 도대체 무슨 짓을 하는 거냐, ᄒᆞᆫ글?

[프로그램/스크린샷] - 한컴오피스2010 베타버전 실행화면

[벌레와 팁/버그] - 한컴오피스2010 베타 설치 작업과 버그 몇 개

[프로그램/설치] - 한컴오피스2010 베타버전 설치기

 

이글은 한컴오피스2010 베타버전에 포함된 ᄒᆞᆫ글로 작성한 글입니다.
글자가 깨진 부분은 다른 팁을 위해 남긴 부분입니다.


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

1. 도대체 무슨 짓을 하는 거냐, ᄒᆞᆫ글?

한컴오피스2010 베타버전에 포함된 ᄒᆞᆫ글이 가진, 버그라고 하기에는 조금 그렇지만, 아무튼 미흡한 점을 지적하고자 합니다.

1.1. HTML은 구조적 문서이거든요.

ᄒᆞᆫ글 씨! 여보세요! HTML은 구조적 문서이거든요. 내가 만든 구조는 어디에다 팔아먹으셨나요?

그림 1 index.html 파일을 읽어온다.

그림 2 인터넷 익스플로러에서 불러온 모습

그림 3 ???글2010에서 불러온 모습

언뜻 보면 ᄒᆞᆫ글2010은 HTML을 잘 불러왔다고 여겨집니다. 하지만 인터넷 익스플로러에서 불러온 모습과는 많이 다릅니다. 그래서 혹시나 하는 마음에 스타일을 불렀습니다.

그림 4 깡그리 무시된 문단 관련 태그

HTML 문서를 읽어 올 때 문단 관련 태그를 모두 바탕글 스타일로 읽어오고 있습니다. 원래 HTML은 스타일이 없지 않느냐고요? 아니요. HTML은 스타일이 없더라도 존재합니다. 그 자체로 구조적 문서를 이루기 때문이죠. 그리고 문단 관련 태그가 각각의 기능을 가지고 있는 기능성 구조를 이루고 있습니다. 예컨대 P 태그는 당연히 문단 태그입니다. 그것만 있느냐? H1, H2, …, H6 태그도 문단 기능이 있어서 P 태그 없이도 문단을 구성할 수 있습니다. 그밖에 인용문을 가리키는 blockquote 태그, 입력 내용을 그대로 보여주는 PRE 태그 등도 P 태그 없이 문단을 구성할 수 있습니다. 제가 아는 태그만 주워섬겨도 이 정도네요.

그런데 지금 ᄒᆞᆫ글 씨께서는 모조리 뭉개버리고 바탕글이라는 스타일 하나만 남겼습니다. 구조적인 문서를 읽어다가 비구조적인 문서를 만들어 버린 셈이 되었네요.

1.2. CSS도 좀 챙겨!

ᄒᆞᆫ글 씨! 여보세요! CSS는 HTML의 스타일이거든. 그건 도대체 어디에다 팔아먹은 거냐고? 도대체 알 수가 없는 일입니다.

게다가 HTML 문서를 읽어 올 때나 저장할 때 CSS 파일을 전혀 인식하지 않습니다. 저장할 때야 HTML 문서 안에 스타일을 포함시키기 때문이라지만, 읽어올 때는 CSS 내용을 읽어 와야 옳다고 생각하는데요.

요(要)는 HTML은 구조와 내용이 분리된 언어입니다. 그것을 ᄒᆞᆫ에서 읽어왔는데, 그 구조를 모두 없애버리면(문단 태그와 DIV 태그를 모두 없애 버리면) 굳이 읽어 들여야 할 이유가 없지 않을까요? 그것을 다시 저장하면 “구조적 문서”가 “비구조적 문서”로 바뀌므로 오히려 손해가 되는 측면도 있습니다.

더구나 다른 이름으로 저장에서 HTML 문서로 저장하거나, 웹브라우저로 보내기를 하거나, 웹서버로 올리기를 하거나, 모두 HTML 문서의 형태가 중시되는데, 아예 CSS는 전혀 고려하지 않는 모습을 보이고 있습니다. 특히 ᄒᆞᆫ글2010에서 새로 추가된 블로그로 올리기 기능도 실제로는 HTML 형식으로 보내게 되어 있으니 더욱 문제는 심각하다고 할 수 있습니다.

1.3. 결론

ᄒᆞᆫ글 씨! 여보세요! HTML 문서 읽어오기나 HTML 저장하기 등의 기능은 빛 좋은 개살구거든. 그냥 읽어오기에 앞서 “이 기능은 그저 내용만 확인할 수 있습니다.”라고 안내문이나 넣지 그래.

그게 아니라면 좀 더 확실히 지원하라고. CSS도 읽어서 ᄒᆞᆫ글 스타일로 변환하고. HTML로 저장할 때도 CSS 이용할 수 있는 옵션을 좀 만들어 달라고.

이 글은 한컴오피스2010에 포함된 ᄒᆞᆫ글에서 작성한 문서입니다.
일부 깨져 보이는 글자는 일부러 수정하지 않고 두었습니다. 그에 대한 팁은 나중에 올리겠습니다.

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

앞서 기본 사용법에 대해 설명했습니다. 이번에는 좀 더 고급스러운 사용법에 대해 알아보기로 합니다.

환경 설정

리사이즈 브라우저는 그 사용법이 무척 간단합니다. 하지만 설정에서 몇 가지 난감한 점이 있어서 이렇게 글을 작성하게 되었습니다.

옵션 설정 화면

옵션 설정 화면

위 화면에서 옵션 설정은 옵션브라우저 설정으로 나뉩니다. 옵션 설정을 마친 뒤에는 오른쪽 위의 Save를 클릭하여 옵션을 저장해야만 적용됩니다.

옵션 (Options)

옵션은 위와 같이 4 항목으로 이루어져 있습니다.

  • Center browser on screen after resize : 브라우저 창의 크기를 변경한 뒤 화면 가운데로 배치
    • 기본 값으로는 왼쪽 상단, 곧 좌표값으로는 (0, 0) 위치로 창을 옮깁니다. 이 옵션을 체크하면, 화면 왼쪽 상단이 아닌 화면 중앙으로 배치합니다.
  • Include Start Menu height in resize : 리사이즈에 시작 메뉴의 높이도 포함
    • 이 옵션을 체크하면, 말 그대로 시작 메뉴의 높이도 이 프로그램에서 조절할 수 있다는 뜻입니다.
  • Automatically refresh for new browsers : 새로운 웹브라우저를 위해 자동으로 다시 읽기
    • Refresh 아이콘을 클릭하지 않아도 자동으로 웹브라우저 목록을 다시 읽는다는 뜻입니다.
  • Stay on top of all other windows : 모든 윈도우보다 위에 보입니다.
    • 이 옵션을 설정하면, 이 프로그램의 윈도를 다른 윈도가 가릴 수 없습니다. 어차피 트레이 아이콘을 사용하면 별로 쓸모는 없지만, 가끔은 필요한 사람이 있으리라 생각합니다.

브라우저 설정

브라우저 설정에서는 리사이즈 브라우저 프로그램의 작동 원리를 설명하고 있습니다.
작동 원리에 따르면, 리사이즈 브라우저 프로그램은 특별히 웹브라우저를 지정하여 창 크기를 변경하는 프로그램이 아닙니다. 그저 기본 값으로 지정된 프로그램이 가장 널리 알려지고 보급된 두 프로그램, 곧 인터넷 익스플로러넷스케이프일 뿐입니다. 리사이즈 브라우저는 단지 제목 표시줄캡션 텍스트를 읽어와서 작동합니다.

여러 가지 웹브라우저 화면

여러 가지 웹브라우저 화면

위 여러 가지 웹브라우저 화면을 보면 제목 표시줄캡션 텍스트가 무엇인지 아시겠습니까?

여러 가지 웹브라우저의 제목 표시줄 캡션

여러 가지 웹브라우저의 제목 표시줄 캡션

위 그림에 나타난 연두색 테두리 부분파란색 테두리 부분제목 표시줄캡션 텍스트입니다. 그리고 자주색 네모브라우저 이름입니다. 다만 맨 아래에 보이는 Google 부분정확하지 않기 때문에 ? (물음표)를 해 두었습니다.

설정하기 전까지 찾은 브라우저 창은 다음과 같이 두 개입니다.

설정하기 전까지 찾은 브라우저 창 목록

설정하기 전까지 찾은 브라우저 창 목록

위 여러 가지 웹브라우저의 제목 표시줄 캡션 화면을 바탕으로 브라우저 설정을 해 봅시다.

브라우저 설정을 실제로 구성하는 곳

브라우저 설정을 실제로 구성하는 곳

현재 설정된 값은 위와 같이 세 개입니다. Microsoft Internet Explorer, Netscape, Mozilla는 유명한 웹브라우저이기는 하지요. 왜 파이어폭스는 없냐는 의문이 생길 수 있습니다. 파이어폭스의 정확한 이름은 Mozilla Firefox 입니다. 다시 말해 위의 Mozilla라는 이름을 찾으면 당연히 파이어폭스도 찾게 됩니다.

위 그림에서 찾아낸 브라우저 이름을 열거하면 다음과 같습니다. 편의상 이름 앞의 줄표(하이픈)은 생략합니다. 다만 나중에 설정에서는 하이픈을 넣는 쪽이 낫습니다.

일단 파이어폭스익스플로러는 이미 찾았으니 추가할 필요가 없지요. 그럼 더 월드 브라우저구글 크롬을 추가하겠습니다.

옵션에서 위의 브라우저 설정을 실제로 구성하는 곳을 클릭한 뒤에 인서트 키(Insert)를 누르면 항목 추가 모드로 바뀝니다. 추가할 내용은 더 월드Google입니다. Mozilla Firefox의 경우처럼 문자열 일부만 입력해도 되므로 일단 그렇게 합니다. 다만 입력할 때 대문자와 소문자를 구별합니다.

Remember, they are case sensitive.

인서트 키(Insert) 눌렀을 때

인서트 키(Insert) 눌렀을 때

넣고자 하는 문자열(제목 표시줄의 브라우저 이름)을 입력한 뒤 엔터(Enter)를 입력하면 항목이 추가됩니다.

항목 추가

항목

추가된 항목

추가된 항목

다시 한 번 입력을 반복하여 구글 크롬을 위한 문자열도 추가합니다.

작업을 마친 뒤에는 옵션 화면의 오른쪽 위의 Save를 클릭하여 저장합니다.

Save를 클릭하여 저장

Save를 클릭하여 저장

처음 화면에서 Refresh를 클릭하여 브라우저 목록을 다시 읽어 옵니다.

일단 Refresh

일단 Refresh

목록 확인

목록 확인

목록을 확인하면 올바르게 추가되었는지를 알 수 있습니다. 이때 방금 추가한 문자열을 더 정확하게 고칠 수도 있습니다.

주의 사항

창 크기를 바꾸려고 선택한 창이 리사이즈 브라우저가 아닌 다른 창에 가려지면 창의 크기가 바뀌지 않으므로 주의하기 바랍니다.

관련 문서

내부 문서

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


  1. 정확한 이름은 더 월드 브라우저이나 여기에서는 보이는 대로만 표시합니다. 그런데 영 거시기한 이름이네요. [본문으로]
  2. 앞서 밝혔듯이 정확하지 않습니다 [본문으로]
글쓴이는 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

글 보관함