왕미친놈의 왕미친세상

며칠 전부터 블로그에 떠다니는 메뉴를 달려고 지랄발광을 했음에도 성공하지 못했습니다. 될듯 될듯 하면서도 끝끝내 실패했는데, 왠걸 소스 하나를 보자 맥이 탁 풀리더군요. 간단하면서도 잘 동작하는 메뉴를 만들 수 있게 되었습니다. 다만 티스토리의 버그 때문에 추천 배너에 대한 사항은 정확하게 잘 작동하지는 않습니다.

• 참고 1 : 이 글은 어디까지나 티스토리를 기준으로 설명하였습니다. 태터툴즈의 다른 형제들(텍스트큐브 및 태터툴즈)에서는 정상 동작을 보장하지 못합니다. 그러나 몇몇 설정만 바꾸면 적용할 수 있으리라 생각합니다.
• 참고 2 : 이 글에서 추가한 CSS 코드 및 (X)HTML 코드의 저작권은 도아 님께 있습니다. 또한 자바스크립트 추가 부분은 강팀장 님께 저작권이 있습니다. 따라서 그 두 부분은 GFDL 및 CCL의 적용을 받지 않으므로 주의하기 바랍니다.

이동 위치 및 메뉴 항목 정하기^#

가장 먼저 할 일은 이동 위치와 메뉴 항목을 정하는 일입니다.

스킨의 구조와 이동 위치^#

티스토리 스킨 제작 가이드에서 스킨의 구조를 살펴보면 스킨의 구조, 곧 태터툴즈로 만들어진 블로그의 구조는 다음과 같습니다.

티스토리 스킨의 구조 by 태터툴즈 스킨커뮤니티

대부분의 경우 header부터 footer까지 화면에 나타납니다. 이때 특별한 일이 없다면 sideinfo 영역(사이드바)은 이동 위치로 잡지 않도록 합니다. 왜냐고요? 위 그림에서 보듯이 본문에 해당하는 content 부분과 화면의 상하 위치가 겹치기 때문입니다. 대부분의 경우 화면의 좌우 이동을 고려하여 떠다니는 메뉴를 만들지는 않으므로 굳이 sideinfo 영역에 이동 위치를 잡을 필요가 없다는 말입니다.

대충 잡을 수 있는 이동 위치는 문서의 처음 또는 끝, 본문의 처음 또는 끝, 댓글의 처음 또는 끝(또는 댓글 보기 또는 댓글 쓰기) 등입니다. 거기에 더하여 블로그 홈이나 블로그 관리용 문서로 이동하게 만들 수도 있습니다.

이동 위치와 이동 메뉴^#

이 부분은 제 블로그를 기준으로 설명합니다. 각자 자신의 블로그에 넣는다고 상상하면서 글을 읽어 주십시오.

위 그림에서 빨간색으로 표시한 부분이 화면에 나타나는 부분이며, 자주색 줄이 이동 위치입니다. 맨 위에서부터 차례대로 글로 나타내면, 문서 처음(top), 글 관련 태그(tag) 또는 추천 배너(recommend)^[각주:1], 트랙백 / 댓글(comment1), 댓글 쓰기(comment2), 페이징(paging), 글끝(end) 등입니다.

그리고 위 그림에서 블로그 메뉴가 헤더와 꼬리에 모두 나타납니다. 그러나 여기에서는 원래 있던 블로그 메뉴는 그대로 두고 메뉴를 하나 더 추가하였습니다.

떠다니는 메뉴 구현 방법^#

이 글에서는 떠다니는 메뉴를 스타일(CSS)을 이용하여 구현해 보았습니다. 소스코드는 Fixed Layer Hack for IE6에 나오는 코드를 참고하였습니다. 또한 자바스크립트를 최소로 하는 것이 호환성에 더 좋고, 코드도 더 간단하다고 생각하여 그렇게 결정했습니다. 실제로 그와 비슷하게 적용된 블로그는 도아의 세상사는 이야기입니다. 특히 도아의 세상사는 이야기 블로그에서는 표(테이블)이 아닌 리스트를 활용하고 있으므로 따라해 보았습니다.

스킨에 넣을 이동 메뉴의 (X)HTML 코드는 다음과 같습니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><a href="#item1">항목1</a></li>         <li><a href="#item2">항목2</a></li>         <li><a href="#item3">항목3</a></li>         <li><a href="#item4">항목4</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code]

이동 메뉴만으로는 아무런 동작도 하지 못합니다.

[code html] <a name="top"></a> <a name="item1"></a> <a name="item2"></a> <a name="item3"></a> <a name="item4"></a> <a name="end"></a> [/code]

위의 코드를 스킨의 (X)HTML 코드에 추가해야 합니다.

item과 항목 대신 a 태그의 name(또는 id)과 이동 위치의 이름이 와야 합니다.

스킨에 넣을 CSS 코드는 다음과 같습니다. 이것을 CSS 부분(style.css)의 맨 끝에 넣으면 됩니다.

[code css] /* 떠다니는 메뉴 (Floating Menu) */ #floatdiv {     position:fixed; _position:absolute; _z-index:-1;     width:65px;     overflow:hidden;     right:0px;     top:30%;     border: #5D5D5D 1px solid;     background-color: transparent;     font-size: 14px;     margin:0;     padding:0; }
#floatdiv ul  { list-style: none; } #floatdiv li  { margin-bottom: 2px; text-align: center; } #floatdiv a   { color: #5D5D5D; border: 0; text-decoration: none; display: block; } #floatdiv a:hover, #floatdiv .menu  { background-color: #5D5D5D; color: #fff; } #floatdiv .menu, #floatdiv .last    { margin-bottom: 0px; } [/code]

기본적으로 위의 코드가 들어가며, 더 추가될 수도 있습니다.

블로그 화면과 이동 위치^#

실제 블로그에서 위치를 찾아 보겠습니다. 자주색 가로선은 떠다니는 메뉴에서 이동하게 될 이동 위치를 가리킵니다.

위에서 보면 대충 어느 위치인지 감이 오지 않습니까? 일단 글의 맨 처음 부분에 이동할 수 있게 하고, 그 다음으로 추천 배너의 위치^[각주:2], 트랙백/댓글 보기, 댓글 달기, 페이징, 문서의 맨 끝 등으로 구성할 수 있습니다.

이때 이동 위치 5 : 페이징 그림을 보면 사이드바에 파란색으로 이동 위치를 표시했습니다. 이것은 1단 스킨에서는 유용하지만, 2단 스킨이나, 3단 스킨에서는 조금 불합리한 점이 생깁니다. 여기에 이동 위치를 지정하면 페이지가 위아래로 왔다 갔다를 반복하게 될 수도 있으므로 꼭 필요하지 않다면, 그리고 1단 스킨이 아니라면, 이동 위치를 지정하지 않는 것이 좋습니다.

블로그 스킨 코드에서 이동 위치 찾기 및 코드 넣기^#

스킨 소스와 관련한 기본 사항은 티스토리 스킨 가이드를 참조하기 바랍니다.

실제로 넣을 코드는 다음과 같습니다. 각각의 위치에 <a name="이름"></a>와 같은 식으로 붙여 주면 됩니다. 구성할 메뉴와 이동 위치에 넣을 코드는 아래와 같습니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><a href="#recommend">추천배너</a></li>         <li><a href="#comment1">댓글보기</a></li>         <li><a href="#comment2">댓글달기</a></li>         <li><a href="#paging">이동메뉴</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code] [code html] <a name="top"></a> <a name="recommend"></a> <a name="comment1"></a> <a name="comment2"></a> <a name="paging"></a> <a name="end"></a> [/code]

이것을 스킨에 실제로 적용하면 다음과 같습니다. 빨간 네모는 기준이 되는 (X)HTML 코드 또는 티스토리 치환자입니다. 그것을 찾은 뒤 알맞은 위치에 이동위치를 표시하면 됩니다.

맨 위로 이동하게 만들려면 위 그림의 자주색 줄이 있는 부분, 곧 body 태그의 바로 다음에 a 태그(앵커 태그)를 넣어야 한다.

이때 추천 배너를 플러그인에서 추가했기 때문에 위 화면에는 나타나지 않고 있습니다. 저와 달리 추천 배너의 코드를 직접 입력했다면 위 스킨 화면에 나타나게 됩니다. 또한 위와 같이 추천 배너의 코드가 나타나지 않는다면,^[각주:3] 저 위치가 본문의 바로 다음인데, 블로그 소스 보기를 통해 정확한 위치를 찾아야 합니다.

다만 이 경우에는 임시로 저곳에 붙여 두겠습니다.

이동할 위치는 트랙백과 댓글의 내용이 나오기 바로 전입니다. 이동 위치 3 : 트랙백/댓글 보기 그림을 참조하십시오.

댓글 쓰기도 앞의 설명과 마찬가지입니다.

페이징은 보통 1~3줄로 나타납니다. 아무쪼록 페이징 영역의 맨 앞으로 이동 위치를 잡아야 합니다.

맨 아래는 </body>의 바로 앞에 이동 위치를 두면 됩니다.

각각의 위치에 앞서 설명했던 앵커 태그(a 태그)를 넣으면 됩니다. 이때 a 태그의 역할은 링크 걸기가 아닌 위치 지정입니다. 링크를 걸 때는 href 속성(href attribute)을 사용하며, 링크의 대상을 지정할 때는 name 속성(href attribute)을 이용합니다. 다만 링크 대상을 지정할 때 (X)HTML 공통 속성(Common attribute) 가운데 코어 속성(core attribute)에 속하는 id 속성을 사용할 수도 있습니다.

참고 1 : id 속성은 공통 속성이기 때문에 a 태그(a 엘리먼트) 이외에 다른 곳에도 쓰일 수 있습니다.

참고 2 : a 태그(a element / a 엘리먼트)는 앵커(anchor), 곧 닻을 가리킵니다.

위에서 추천배너에 대한 메뉴와 이동 위치 코드는, 앞서 설명했고 또한 보았듯이, 스킨에서는 넣을 수 있는 위치가 없습니다.^[각주:4] 그러나 블로그 소스 보기를 통해서 그 위치를 찾아낼 수는 있습니다.

일단 여기까지 마친 뒤에 저장합니다. 저장은 선택이 아닌 필수입니다.

이동 메뉴 적용^#

HTML 코드(skin.html) 적용^#

일단 앞에서 이동할 위치를 스킨에 지정해 넣었습니다. 이번에는 그 위치로 이동하게 만들 메뉴를 넣어 보겠습니다.

저 부분을 스킨에서 찾으면 다음과 같습니다.

기준이 되는 것은 위치로그, 미디어로그, 방명록 등입니다. 각자 자신의 블로그 스킨에서 알맞은 문자열을 찾기 바랍니다. 때로는 메뉴가 그래픽 이미지 및 플래시 배너로 되어 있는 경우도 있습니다.

다 마쳤으면 일단 저장합니다.

CSS 코드(style.css) 적용^#

제 경우는 맨 마지막 부분에 화면에 보이지 않을 부분이 자리 잡고 있습니다. 각자 자신의 CSS 설정의 맨 마지막 부분쯤에 코드를 넣으시면 됩니다.

넣은 뒤에는 저장하면 외형은 완성됩니다.

작동 확인 및 수정^#

떠다니는 메뉴의 작동 확인^#

하지만 저것이 정상 동작한다는 보장은 못합니다. 배경을 투명으로 했기 때문에 조금 이상하지만, 어쨌든 겉모양은 도아의 세상사는 이야기와 거의 같습니다. 왜? 그것을 베꼈으니까요.

추천배너를 클릭했으나 엉뚱한 곳으로 갔습니다. ^^a 다른 메뉴를 확인한 뒤 나중에 고치겠습니다. 아랫부분은 필요가 없어서 잘랐습니다.

이미 티스토리에 로그인했으므로 댓글 달기에서 이름이나 비밀번호 등을 묻지 않고 있습니다. 그러므로 다르게 나타날 수도 있습니다.

[맨끝으로]를 클릭했을 때는 반응이 조금 다릅니다. 이는 이동 메뉴는 화면에서 전체 높이의 30% 되는 곳에 둥둥 떠 있게 되지만, 이동 위치인 맨끝은 화면 전체 높이 100% 되는 곳입니다. 따라서 항상 떠다니는 메뉴보다 아래쪽에 위치하게 되므로 위의 그림은 정상입니다.

추천 배너 관련 수정 1^#

앞서 추천 배너는 스킨에서 나타나지 않았습니다. 이것을 제가 임의로 지정하였는데, 그 위치는 추천 배너의 위치가 아닌 글의 끝이었습니다. 따라서 옳게 작동하게 만들려면, 떠다니는 메뉴의 항목을 글끝으로라고 고치거나, 또는 추천 배너의 올바른 위치를 지정해야 합니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><a href="#ccl-icon-[\##_article_rep_id_##]-0">추천배너</a></li>         <li><a href="#comment1">댓글보기</a></li>         <li><a href="#comment2">댓글달기</a></li>         <li><a href="#paging">이동메뉴</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code]

처음에는 위와 같이 고쳤습니다. 그런데 작동을 안 했습니다. 태터툴즈에는 분명히 [##_article_rep_id_##]라는 치환자가 있지만, 티스토리에는 없기 때문입니다. 저렇게 할 수 있다면 매우 간단하게 이동 메뉴를 만들 수 있게 되지요.

추천 배너 관련 수정 2^#

해결책을 찾아서 검색하다가 강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능 #2라는 페이지는 발견했습니다. 그곳에서는 자바스크립트로 처리하였으며, 저도 그것을 따라했습니다. 이 방법의 단점은 항상 CCL 마크를 달아야 합니다. 실수로 안 달면 추천배너는 작동하지 않게 됩니다.

강팀장 님의 게시글을 참조하여 고친 코드는 다음과 같습니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><script type="text/javascript">             //<![CDATA[                var str1 = "[\##_article_rep_link_##]";                str2 = str1.slice(1,str1.length);                str2 = "ccl-icon-"+str2+"-0";                document.write("<a href='#"+str2+"'>추천배너</a>");             //]]>             //</script>         </li>         <li><a href="#comment1">댓글보기</a></li>         <li><a href="#comment2">댓글달기</a></li>         <li><a href="#paging">이동메뉴</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code]

그런데 안 되더군요. ㅡㅡ;; 분명히 강팀장 님의 게시글에서는 잘 작동하는데, 왜 제 블로그에서는 안 될까요?

여러 가지 실험을 반복하여 티스토리에 문제가 있음을 알게 되었습니다. 고유주소는 permanant link, 곧 permalink를 뜻하므로,고유주소는 항상 블로그주소/아라비아수의 꼴(예컨대, http;//xyz.tistory.com/12345)로 이루어져야 합니다. 그런데티스토리가 제 블로그의 고유주소를 정의하지를 않았습니다. 다시 말해 티스토리의 버그 때문에 제 블로그에는 저 코드가 작동하지 않았다는 뜻입니다.

그런데 분명히 정의된 경우도 있습니다. 글제목에는 정의되어 있는데, 막상 자바스크립트에 적용하려고 보니 정의되지 않았다고 나옵니다. 이런 현상은 트랙백에서도 나타납니다. 스킨에서 트랙백과 관련한 부분에서는 잘 작동하는데, 사용자가 임의로 설정하면 작동하지를 않습니다. 미치고 환장할 노릇이죠. 테스트 블로그를 보시면 이 버그가 나타남을 볼 수 있습니다.

결국 버그 때문에 적용할 수 없게 되었습니다. 당분간 저 부분을 적용하지 않기로 했습니다.

덧붙이는 말^#

팁을 적용하면서 발견한 버그는 티스토리에 정나미가 떨어지게 만들었습니다. 오죽하면 블로그를 (텍스트큐브닷컴으로) 합쳐야 하나?라는 생각을 했겠습니까?

다음과 통합된 뒤에 가입해서 그런지, 티스토리 버그 리포팅 등을 티스토리가 아닌 다음에서 처리한다는 것도 마음에 안 드는데, 버그 리포팅을 해도 답변이 없는 것은 진짜 열 받습니다. 제가 버그 리포팅을 한 것 가운데 맨 처음 한 번만 답변을 받았고, 나머지는 지금까지 수정이 안 되고 있고, 답변도 못 받았습니다.

그들은 사용자를 언제까지 기다리게 만들어야 직성이 풀리려는지 모르겠습니다.

관련 문서^#

내부 문서^#

• [벌레와 팁/팁] - HTML 코드를 더듬거릴 때는 흔적을 남기라.
• [일기] - 블로그를 합쳐야 하나?

외부 문서^#

• 강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능 #2
• 도아의 세상사는 이야기

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

블로그를 합쳐야 하는지 고민입니다.

티스토리 블로거가 딱히 마음에 안 드는 점은 없지만, 그렇다고 마음에 쏙 드는 점도 없습니다. 오늘처럼 불시에 블로그를 옮기고 싶어지면 정말 난감합니다. 티스토리에 정이 든 것도 없으니, 이런 느낌이 들면 그저 확 바꿔 버려야 직성이 풀리기 때문입니다. ㅡㅡ;;

 

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

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

추천 배너 배치

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

• 12가지 재주가 있으면 굶어 죽는다 :: 티스토리 디자인 변경 팁 정리 페이지
  

  12가지 재주가 있으면 굶어 죽는다 :: 티스토리 디자인 변경 팁 정리 페이지

  티스토리 디자인을 개선하는 데 도움이 되는 팁을 모아 놓은 페이지입니다.
• 12가지 재주가 있으면 굶어 죽는다 :: 내 본문에 있는 추천 버튼과 구독 버튼 소스
  

  12가지 재주가 있으면 굶어 죽는다 :: 내 본문에 있는 추천 버튼과 구독 버튼 소스

  12가지 재주가 있으면 굶어 죽는다 님이 적용하신 내용은 담은 페이지. 자세한 설명은 [팁] 티스토리에서 믹시&블로거뉴스 추천 위젯, 카테고리 글 더보기 위치 설정하기!!! 에서 확인할 수 있습니다.
• 즐거운하루블로그 :: 아무도 알려주지않는 티스토리블로그팁 11가지 모음집
  

  즐거운하루블로그 :: 아무도 알려주지않는 티스토리블로그팁 11가지 모음집

  매우매우 유용한 팁을 몽땅 모아 놓은 즐거운하루 님의 블로그 페이지입니다. 마음에 안 드는 것은 페이지 제목뿐? 응?
• 즐거운하루블로그 :: 나도 티스토리 유용한 기능으로 파워 블로그가 되어보자
  

  즐거운하루블로그 :: 나도 티스토리 유용한 기능으로 파워 블로그가 되어보자

  자질구레한 티스토리 팁이 모여 있습니다. 특히나 마음에 드는 것은 제목?? 응?
• Blogine :: 메타아이콘 이쁜것 찾아 이쁘게 달기 모음
  

  Blogine :: 메타아이콘 이쁜것 찾아 이쁘게 달기 모음

  메타블로그 아이콘을 예쁜 것으로 바꾸어 보세요.
• 팡상닷컴 :: 다음뷰&믹시 추천버튼 + 카테고리 더보기 합치기
  

  팡상닷컴 :: 다음뷰&믹시 추천버튼 + 카테고리 더보기 합치기

  다음뷰 배너와 믹시 배너를 버튼 형태로 바꾸어 정렬해 보고 싶은 사람은 이 페이지를 참조해 보세요. 이 페이지에서 표(테이블)를 이용했습니다.
• 쿠나의 삽질과 망상이 공존하는 블로그 :: 대통합 플러그인 버그 수정판 배포를 알립니다
  

  쿠나의 삽질과 망상이 공존하는 블로그 :: 대통합 플러그인 버그 수정판 배포를 알립니다

  삽질에도 품격이 있다?! 응, 삽질은 그저 삽질일 뿐이라고요? 그렇게 생각한다면 저도 어쩔 수 없구먼요. 아무튼 쿠나 님의 삽질에는 뭔가 특별한 것이 있습니다. 참고로 이 페이지의 팁은 텍스트큐브닷컴용입니다. 그러므로 약간의 삽질이 더 필요합니다.
• 위즈군의 라이프로그 :: CSS로 티스토리 추천버튼 정렬하기!
  

  위즈군의 라이프로그 :: CSS로 티스토리 추천버튼 정렬하기!

  다음뷰 배너와 믹시 배너 원하는 위치에 정렬해 보고 싶은 사람은 이 페이지를 참조해 보세요. 이 페이지에서 CSS를 이용했습니다.
• 위즈군의 라이프로그 :: CSS로 티스토리 추천버튼 정렬하는 방법
  

  위즈군의 라이프로그 :: CSS로 티스토리 추천버튼 정렬하는 방법

  CSS로 티스토리 추천버튼 정렬하기! 문서에 대한 예제 및 자세한 설명입니다.

떠다니는 메뉴

• 벗Media의 떠다니는 이미지 ~ (플로팅 광고) 소스입니다. 설명은 없지만 잘 뜯어보면 그럭저럭 쓸 만합니다.
  

  벗Media의 떠다니는 이미지 ~ (플로팅 광고) 소스

• 사람을 위한 작은 공간의 인터넷과 생활 강의실 스타일 시트의 개념 - Box모델 문서입니다.
  

  스타일 시트의 개념 - Box모델 문서

  박스 개체에 대한 설명이 자세하게 되어 있습니다. 떠다니는 메뉴는 CSS의 박스 개체를 이용하면 편한 점이 많으므로 알아두면 좋습니다.
• 제로보드4 사이트에서 발견한 Top# 페이지 맨 위로 가는 떠다니는 레이어... 소스입니다.
  

  Top# 페이지 맨 위로 가는 떠다니는 레이어... 소스

  보안상의 이유로 제로보드4는 더 이상 업데이트를 하지 않습니다. 반드시 XpressEngine으로 바꾸기 바랍니다.
• jwmx :: 스크롤 위치를 따라 다니는 레이어
  

  jwmx :: 스크롤 위치를 따라 다니는 레이어

  jwmx 님이 애써 만든 스크롤 위치를 따라다니는 레이어 소스 및 설명이 있습니다.
• 온유디자인 > 온유-웹스타디 > 떠다니는 플로터 배너,메뉴,이미지
  

  온유디자인 > 온유-웹스타디 > 떠다니는 플로터 배너,메뉴,이미지

  달랑 소스만 있습니다. 뭐 이거라도 참조할 수 있으니 다행이라면 다행이죠.
• 강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능
  

  강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능

  블로그 방문객에 대한 배려 가운데 하나인 떠다니는 메뉴에 대한 설명입니다. 소스도 있습니다.
• 강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능 #2
  

  강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능 #2

  간단한 Tip으로 내 블로그 이용자 배려하는 기능에서 소개한 코드를 실제로 적용하는 방법을 알려주고 있습니다.
• 떠다니는 레이어, 그 표준은?
  

  떠다니는 레이어, 그 표준은?

  떠다니는 레이어와 표준에 대한 논의를 하고 있는 포럼입니다.
• Fixed Layer Hack for IE6
  

  Fixed Layer Hack for IE6

  떠다니는 레이어를 인터넷 익스플로러 6에서 적용하는 CSS 소스 및 예제입니다.
• doxdesk.com > software > fixed.js
  

  doxdesk.com > software > fixed.js

  떠다니는 레이어를 자바스크립트로 처리하는 소스 및 예제입니다.
• 도아의 세상사는 이야기
  

  도아의 세상사는 이야기

  떠다니는 메뉴가 실제로 적용된 블로그입니다.

관련 문서

내부 문서

• [벌레와 팁/팁] - HTML 코드를 더듬거릴 때는 흔적을 남기라.

외부 문서

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

• 12가지 재주가 있으면 굶어 죽는다 :: 티스토리 디자인 변경 팁 정리 페이지
• 12가지 재주가 있으면 굶어 죽는다 :: 내 본문에 있는 추천 버튼과 구독 버튼 소스
• MissFlash - Digital Life :: [팁] 티스토리에서 믹시&블로거뉴스 추천 위젯, 카테고리 글 더보기 위치 설정하기!!!
• 즐거운하루블로그 :: 아무도 알려주지않는 티스토리블로그팁 11가지 모음집
• 즐거운하루블로그 :: 나도 티스토리 유용한 기능으로 파워 블로그가 되어보자
• Blogine :: 메타아이콘 이쁜것 찾아 이쁘게 달기 모음
• 팡상닷컴 :: 다음뷰&믹시 추천버튼 + 카테고리 더보기 합치기
• 쿠나의 삽질과 망상이 공존하는 블로그 :: 대통합 플러그인 버그 수정판 배포를 알립니다
• 위즈군의 라이프로그 :: CSS로 티스토리 추천버튼 정렬하기!
• 위즈군의 라이프로그 :: CSS로 티스토리 추천버튼 정렬하는 방법
• jwmx :: 스크롤 위치를 따라 다니는 레이어
• 벗Media > 떠다니는 이미지 ~ (플로팅 광고) 소스
• 사람을 위한 작은 공간 > 인터넷과 생활 > 스타일 시트의 개념 - Box모델 문서
• 제로보드4 사이트 > Top# 페이지 맨 위로 가는 떠다니는 레이어... 소스
• Standard Magazine - Forum > UI / UX Design > 떠다니는 레이어, 그 표준은?
• doxdesk.com > software > fixed.js
• 온유디자인 > 온유-웹스타디 > 떠다니는 플로터 배너,메뉴,이미지
• 강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능
• 강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능 #2
• 떠다니는 레이어, 그 표준은?

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

MozBackup을 사용하다 보면 한국어 언어 파일을 적용하더라도 한글로 나타나지 않는 부분이 많아서 아쉬움을 느낄 때가 있습니다. 이는 한국어 언어 파일이 MozBackup 1.4.6 버전에 맞추어 작성된, 상당히 오래된 버전이기 때문에 나타난 현상입니다. 그에 따라 기존 파일을 받아다가 새롭게 고쳤습니다.

한국어로 바꾸기 전

한국어화라는 말을 잘 쓰지 않습니다. 하지만 이것이 공식 용어입니다. 우리는 흔히 한글화라고 부르지요.^[각주:1]

각설하고, MozBackup의 번역 페이지에서 이미 한국어로 번역한 파일을 받아다가 수정하기로 했습니다.

MozBakcup 번역 페이지 화면에 보면, 이미 두 분(Jeong Wonho & Gabriel, Park)이 번역에 참여하셨습니다. 저는 저 두 분이 번역한 Default.lng 파일을 편집했습니다.

한국어로 바꾼 뒤

번역 및 편집 방법

Default.lng 파일은 압축 파일 안에 들어 있습니다. 텍스트 파일이므로 압축을 푼 뒤에 Default.lng 파일을 편집하면 됩니다.

다운로드

번역 페이지에서 받은 Default.lng 파일을 편집한 파일은 다음과 같습니다.

• .ZIP 압축 파일 (3,542 B)
• .LNG 파일 (13,449 B)

관련 문서

내부 문서

• [프로그램/소개] - MozBackup
• [태그] - 한글화

외부 문서

• 홈페이지 : http://MozBackup.JasnaPaka.com/
  • 번역 페이지 : http://mozbackup.jasnapaka.com/translations.php
• 블로그 : http://JasnaPaka.bloguje.cz/
• 위키백과 (체코어) :: Pavel Cvrc(ek

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

MozBackup은 모질라/게코 계열 웹브라우저 및 응용프로그램에서 환경설정 데이터 및 사용자 데이터인 프로필(profile)^[각주:1]을 쉽게 백업하고 복원할 수 있게 도와주는 유틸리티입니다.

프로그램 정보

• 프로그램 이름 : MozBackup (모즈백업)
• 저작권자/개발자 : Pavel Cvrc(ek (일명 JasnaPaka^[각주:2])
• 프로그램 아이콘 :
• 안정 버전 : v1.4.10 (2009년 12월 13일)
• 개발/테스트 버전 : v1.4.10 베타1 (2009년 11월 15일)
• 분류 : 프로그램 보조/헬퍼 유틸리티^[각주:3], 백업 유틸리티
• 지원 운영체제 : 윈도 98/ME/NT/2000/XP/2003/Vista/7
• 홈페이지 : http://MozBackup.JasnaPaka.com/
• 블로그 : http://JasnaPaka.bloguje.cz/
• 저작권 : 오픈소스 & 프리웨어
• 평가 : @@@@@@@@@@ ( 8 / 10 )
• 스크린 샷 : 홈페이지에는 다음과 같은 스크린샷이 공개되어 있습니다.

  • 실행 화면 : 처음

    

  • 실행 화면 : 2

    

  • 실행 화면 : 3

    

  • 실행 화면 : 4

    

• 설명 :
  • MozBackup 프로그램은 다음 프로그램과 호환성을 가집니다. 다음 프로그램은 웹브라우저가 아니더라도 웹브라우징이 가능한 프로그램이라는 점과 프로필 폴더에 사용자 데이터를 보관하고 있다는 점에서 공통점을 갖고 있습니다.
    • 웹브라우저 : Mozilla Suite 1.7 ~ 1.7.x, Netscape 7.x 및 9.x, Firefox 1.0 ~ 3.6, SeaMonkey 1.0a ~ 2.0, Flock 1.0 - 2.0, Wyzo
    • 메일 클라이언트 : Thunderbird 1.0 ~ 3.0, Sunbird 0.3 ~ 0.9. Postbox 1.0 ~ 1.1, Spicebird 0.4 ~ 0.8
    • 기타 : Songbird 1.0
  • 프로필 폴더를 복사 압축하는 방식으로 백업합니다.
  • 백업 파일의 확장자는 *.pcv입니다. 이것은 ZIP 파일의 이름만 바꾼 것입니다. 따라서 확장자만 zip으로 바꾼 뒤 압축 관리 프로그램으로 압축을 풀어 복사해도 복원이 가능합니다.
• 기타 :
  • MozBackup 프로그램을 포터블로 사용하려면 pad.xml (Portable Application Description)파일이 필요합니다.
  • 포터블 버전의 백업 및 복원도 지원합니다.
  • 지원 페이지 및 블로그에서 새로운 정보나 활용 팁을 얻을 수 있습니다.

다운로드

다운로드 페이지에서 받을 수 있습니다.

• 설치 파일 (JasnaPaka.com / 789.7 K)
• .ZIP 압축 파일 (JasnaPaka.com / 602.4 K)

관련 문서

내부 문서

• [프로그램/소개] - Universal Extractor
• [프로그램/소개] - 7-Zip

외부 문서

• 홈페이지 : http://MozBackup.JasnaPaka.com/
• 블로그 : http://JasnaPaka.bloguje.cz/
• 위키백과 (체코어) :: Pavel Cvrc(ek

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

한컴오피스2010 오픈베타 이벤트 당첨!! 이벤트 상품을 받았습니다. 참고로 물건은 지난 주 금요일(2월 5일)에 받아서 개봉했습니다. 조금 늦은 개봉기가 되겠네요. 제품명은 iRiver E-Book Story (아이리버 이북 스토리)입니다.

박스는 찌그러지고 후줄근합니다. 겉에 적혀 있기는 했습니다만 설마 E북이라고는 생각할 수 없었죠.

설마 저게?? 왠 다이어리?? 그런데 다이어리가 아니더군요. 그냥 홀더였습니다. 제품 설명서에는 없는 것으로 보아 별매품으로 보이는데, 함께 왔습니다. 그런데 저거 열었을 때는 몰랐지만, 나중에 생각해 보니 저거 없으면 E북을 쓰는 데 매우 힘들더군요.

발포 비닐을 벗기고 꺼냈습니다.

보조 라벨의 내용은 메모리 중 일부는 시스템에서 사용하고 있다나 뭐라나. 보조 라벨과 표지에 나오는 한글은, 설명서 부분을 제외한다면, 저게 전부다. 그런데 핸드폰 사진이라서 그런지 무지 흐립니다. 죄송.

앞서 나온 숫자는 1. 이번에는 2. 설마 쪽수?! 그런 거야? 그런데 저게 상자입니다. 처음에 봤을 때는 책인 줄로 알았습니다. 무진장 안 빠지더군요. 그거 빼면서 손가락이 아파서 구시렁구시렁 욕 많이 했습니다. 너무 철저하게 밀봉해서 탈이었죠.

그런데 저 박스에 설명서가 붙어 있습니다. 처음에는 몰랐는데, 저것을 넘겨 보니 설명서가 나오더군요. ^^a

솔직히 저런 모습이었는지 알 수 없습니다. 겨우 빼내자마자 떨어뜨렸기 때문이죠. ㅡㅡ;; 아무튼 다시 집어넣고 한 컷!

끝입니다. 뭐, 내용물 이야기도 하고 싶지만, 그만 두렵니다. 한 300메가 정도는 시스템이고, 200메가는 데이터(전자책)였습니다. 당연한 것인지, 황당한 것인지 모르겠으나, 브리태니커 백과사전이 수록되어 있더군요. 전자책 보다가 검색하라고 넣어놨다는데, 효용성은 약간 의문입니다.

관련 문서

• [일기] - 한컴오피스2010 오픈베타 이벤트 당첨!!

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

내 블로그의 이름은 왕미친놈의 왕미친세상입니다. 그런데 영문 이름을 정하려고 보니 너무 길어지고, 게다가 중복되는 부분이 생기더군요.

그래서 간단히 정하기로 했습니다.

영문 이름은?

내 블로그 영문 이름은 왕미친놈의 예를 따르기로 했습니다. 우선 왕미친놈은 영문으로 the King of the Crazy입니다(아이디 참조). 그렇다면 왕미친세상은 the World of the Crazy가 된다고 볼 수 있습니다. 조금 다르게 보면 the King of the Crazy World로도 됩니다.

그런데 이 경우에 왕미친세상이란 미친세상 또는 미친놈들의 세상이란 뜻이지, 절대 "왕"이라는 개념이 강조되는 말이 아닙니다. 그저 왕미친놈과 구색을 맞추려고 써넣은 말이라는 거죠.

그렇다면 결국 왕미친세상은 the World of the Crazy가 됩니다. 줄이면 WoC로서 와크 또는 워크라고 발음하게 됩니다.

영문 이름을 만든 이유?

몇몇 사이트에서 제공하는 티커(Ticker)를 달 때, 티커에 나타나는 글귀가 영문입니다. 그런데 사이트 이름만 달랑 한글로 쓰면 무언가 어색하게 됩니다. 그래서 영문 이름을 넣기로 정하고, 곰곰히 영문 이름을 생각해 왔습니다. 그리고 드디어 정하게 되었습니다.

관련 문서

• [일기] 아이디

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

초보 운전자가 가장 자주 하는 실수는 브레이크 페달을 밟아야 할 때 가속 페달을 밟는 것이라는 기사를 읽은 적이 있습니다. 저 역시 그와 비슷한 실수를 한 적이 있습니다. 운전 학원 안에서 일어난 일이라서 별다른 사고 없이 끝났습니다만, 순간 당황했던 기억이 나네요.

그렇다면 블로그를 편집할 때 (X)HTML 등에 익숙하지 않은 초보자가 자주 하는 실수는? 바로 남겨야 할 것을 지워 버린다는 것입니다. 물론 백업본이 있지만, 백업본보다는 수정본에도 무언가 남기는 편이 더 나음에도 그러지를 않는다는 점이 최대의 실수입니다.

원본을 남기라. 주석을 넣으라.

가장 좋지 않은 습관은 남기기보다 지우기를 생각한다는 점입니다. 운전에서 가장 중요한 것은 가속이 아니 정지라는 점을 자주 잊듯이^[각주:1] 초보 때는 흔적을 말끔히 지우려 드는 때가 많습니다. 하지만 고수가 될수록 뭔가 흔적을 더 남기려 합니다. 그 흔적은 언젠가 그 고수를 돕는 때가 생기기 때문이지요.

따라서 블로그를 편집할 때 가장 기본은 지우지 말라입니다. 절대 지워서는 안 됩니다. 어떻게든 원본을 남겨야 합니다. 원본을 남기는 방법에는 원본 내용을 복사하여 백업 파일로 만들어 두는 것이 가장 기본입니다. 그 다음으로 (X)HTML에서는 주석(comment)을 남기는 것이 중요합니다. 주석은 아무리 많아도 HTML 등에서는 처리가 되지 않고 무시합니다. 그저 아무것도 없는 무(無; blank)로 처리합니다. 이때 무(無)는 공백(space)과는 다릅니다. 공백의 경우 화면에서 띄어쓰기 1칸이라도 차지하지만, 무(無)는 아예 아무것도 보이지 않습니다. 따라서 주석으로 처리하면, 지우지 않고도 지운 것과 동일한 효과를 가집니다.

주석 예시 1

[code html; highlight: (5)] <div class="TD_album">     <div class="TD_thumbing">[#\#_item_thumbnail_##]</div>     <div class="TD_headline">         <a href="[#\#_item_link_##]">[#\#_item_title_##]</a>         <div class="TD_date">[#\#_item_date_##]</div>     </div> </div> [/code]

위의 코드는 되돌릴 수 없는 html 수공법- 블로그이력서8 문서에 나타난 그림의 코드를 나름대로 복원해 본 것입니다. 이때 날짜에 해당하는 부분은 아마도 date(날짜)라는 낱말이 있는 <div class="TD_date">[##_item_date_##]</div> 부분으로 여겨집니다. 대부분 날짜 부분을 삭제한다고 했을 때 아래와 같이 바꿉니다.

[code html] <div class="TD_album">     <div class="TD_thumbing">[#\#_item_thumbnail_##]</div>     <div class="TD_headline">         <a href="[#\#_item_link_##]">[#\#_item_title_##]</a>     </div> </div> [/code]

물론 이 방법이 가장 간단합니다. 하지만 장기적으로 볼 때는 좋지 않습니다. 무슨 소리인지 이해할 수 없다고요? 예, 저도 처음에는 이해할 수 없습니다.

아무튼 백문이 불여일견!! 주석으로 처리해 보겠습니다.

[code html; highlight: (5, 6)] <div class="TD_album">     <div class="TD_thumbing">[#\#_item_thumbnail_##]</div>     <div class="TD_headline">         <a href="[#\#_item_link_##]">[#\#_item_title_##]</a> <!-- 아이템 날짜 제거 : 2010년 2월 7일 --> <!--        <div class="TD_date">[#\#_item_date_##]</div> -->     </div> </div> [/code]

앞의 코드와 위의 코드는 화면에 같은 결과를 보여줍니다. 그러나 나중에 고쳐야 하거나 다시 되살려야 한다면 앞의 코드보다 위의 코드가 훨씬 낫습니다. 다만 보통 때는 <!-- 아이템 날짜 제거 : 2010년 2월 7일 -->라는 주석은 달지 않습니다. 그러나 달아 두면 편합니다.

주석 예시 2

꼭 화면에 나타내지 않을 내용만 주석으로 처리하는 것이 아닙니다. 무엇인가를 설명할 때도 사용합니다. 자세한 사항은 IE6 No More 수정 문서에서 처음 두 코드와 뒤의 두 코드를 비교해 보기 바랍니다.

그 코드에서 보면 새로 추가한 부분의 시작과 끝을 주석으로 나타내고 있습니다.

[code html; highlight: (1, 9)] <!-- 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> </div> <![endif]--> <!-- IE6 No More 배너 끝 --> [/code]

위와 같이 해 두면 나중에 코드를 고쳐야 할 때 코드 폴딩(코드 접기)를 지원하지 않는 편집기에서 그 시작과 끝을 찾기가 쉽습니다. 또한 기왕 주석을 다는 김에 그 코드의 쓰임새나 수정한 날짜 등을 함께 넣으면 좋습니다.

관련 문서

내부 문서

• [미쳐보자] - IE6 No More 수정

외부 문서

• 이웃집, 노을이네 :: 되돌릴 수 없는 html 수공법- 블로그이력서8

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

BLUEnLIVE's ZocKrWorld의 BLUEnLIVE 님의 영향을 받아 동참한 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]

관련 문서

• IE6 No More 홈페이지
• BLUEnLIVE's ZockrWorld :: IE6 No More에 동참!

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

한컴오피스2010 베타버전 버그 32 - ᄒᆞᆫ글 씨! 블로그는 XHTML을 따릅니다.

ᄒᆞᆫ글2010 베타버전에서블로그로 올리기를 통해 블로그에 올린 게시물을 살펴보다가 발견한 사실에 저는 놀랐습니다. 그것은 블로그에 올린 코드에 HTML 코드로 들어 있었기 때문입니다. 당연하다고요? 아닙니다. 블로그는 대부분 XHTML을 따릅니다.

벌레의 유형

ᄒᆞᆫ글 씨! HTML과 XHTML은 같지 않습니다. 블로그에 올릴 때에는 반드시 XHTML 코드를 사용해 주시기 바랍니다.

개발자의 답변

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

벌레의 발견

이 벌레는 우연히 테스트 블로그에서 예제 문서를 살피다가 발견했습니다.

다른 부분은 대부분 잘 지켜졌습니다. 그런데 제가 거의 쓰지 않는 hr 태그에서 XHTML 코드가 아닌 HTML 코드를 쓰고 있더군요. 저것을 옳게 고치면 다음과 같습니다.

[code html] <hr align="left" width="300px" /> [/code]

벌레 분석

이 부분만 틀린 것으로 보아 태그를 변환하는 과정에서 빠뜨린 듯싶습니다.

덧붙여 2월 6일 검토 과정에서 HTML에 닫는 태그가 없는 태그, 예컨대 img 등에서도 태그를 잘못 나타내고 있었습니다.

관련 벌레

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

• ᄒᆞᆫ글에서 블로그로 올리기와 주석 표기 문제
• 블로그 - (X)HTML 태그 표기 문제
• HTML 태그 해석 오류 문제
• 블로그 - 주석 사이의 간격

관련 문서

내부 문서

• [벌레와 팁/버그] - ᄒᆞᆫ글에서 블로그로 올리기와 주석 표기 문제
• [벌레와 팁/버그] - 블로그 - (X)HTML 태그 표기 문제
• [벌레와 팁/버그] - HTML 태그 해석 오류 문제
• [벌레와 팁/버그] - 블로그 - 주석 사이의 간격
• [태그] - 한컴오피스2010 베타버전

외부 문서

• 테스트 블로그

  • 예제 - 주석과 위치 이동

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

한컴오피스2010 베타버전 버그 31 - ᄒᆞᆫ에서 다른 이름으로 저장하기와 주석 표기 문제

ᄒᆞᆫ글2010 베타버전에서 다른 이름으로 저장하기를 통해 HTML 문서를 만들거나 블로그로 올리기를 통해 블로그에 올린 게시물에 나타나는 주석과 관련한 HTML 태그 표기 때문에 약간의 오류가 생기고 있음을 발견했습니다.

• 참고 : 본문에서는 블로그로 올리기 문제만 다루었으나, 다른 이름으로 저장 - 인터넷 문서도 같은 벌레가 나타나고 있습니다.

벌레의 유형

ᄒᆞᆫ글 씨! 이 버그는 반드시 고쳐 주셔야겠습니다. 이 버그가 고쳐지지 않으면 ᄒᆞᆫ글에서 작성한 주석은 HTML로 고쳤을 때 대부분 자리 표시에 불과하게 됩니다.

개발자의 답변

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

벌레의 발견

이 벌레는 우연히 블로그 - (X)HTML 태그 표기 문제 문서를 다시 살피다가 발견했습니다. 그 문서에서 주석의 링크를 클릭했음에도 이동하지 않아서 문제가 있음을 알게 되었습니다.

티스토리 및 텍스트큐브의 주석

티스토리와 텍스트큐브는 태터툴즈를 사용하는 블로그이므로 주석의 동작도 거의 비슷합니다.

일단 제 블로그의 7-Zip 소개 글을 살펴보겠습니다.

위 그림에서 빨간 동그라미 안쪽에 주석이 있습니다. 이 주석을 클릭하면 주석을 나타내는 부분으로 이동합니다.

주석 부분으로 이동하면 위와 같은 화면이 됩니다. 이때 [본문으로](파란 네모 부분)를 클릭하면 이 주석을 호출한 곳으로 이동합니다.

앞서 [본문으로]를 클릭하면 위와 같이 이동을 해 줍니다.

ᄒᆞᆫ글 2010 베타에서 출력한 주석의 동작

테스트 블로그의 예제 문서를 이용하여 테스트하겠습니다. 참고로 이 예제 문서는 IE6와 파이어폭스에서 서로 다른 결과를 보여줍니다. 여기에서는 파이어폭스 3.5 버전을 이용하겠습니다. 첨언하자면, 여기에 사용한 HTML 코드가 올바르지 않기 때문에 동작하지 않아야 정상입니다. 다시 말해 동작하는 IE6의 경우가 틀린 경우이지 파이어폭스가 틀린 것은 아닙니다.

위의 ᄒᆞᆫ글에서 블로그로 올린 주석이 있는 문서에서 주석을 클릭하면? 아래 그림처럼 됩니다.

위 그림처럼 이동은 하지 않았습니다. 그저 주소 표시줄만 바뀌었죠.

벌레 분석

코드 보기

앞서 발견한 두 경우의 HTML 코드를 분석해 보겠습니다.

티스토리 주석의 HTML 코드

티스토리 주석은 아래와 같습니다.

ᄒᆞᆫ글에서 블로그로 올린 문서의 HTML 코드

예제 문서의 HTML 코드는 다음과 같습니다.

앞서의 실험에서는 주석 내용 부분은 나타나지 않았지만, 여기에서는 주석 내용 부분도 HTML 코드를 나타내 보겠습니다.

코드 간략화 및 구조 분석

코드가 복잡하므로 간략하게 구조만 나타내 보겠습니다. 아울러 생략된 부분도 함께 나타내겠습니다.

먼저 티스토리 주석의 HTML 구조입니다.

[code html] <p>본문 내용 1<sup class="footnote"><a id="footnote_link_208_1" href="#footnote_208_1"><span style="display: none;">[각주:</span>1<span style="display: none;">]</span></a></sup>)</p> <p>본문 내용 2</p> <p>본문 내용 3</p> <div class="footnotes">     <ol class="footnotes">         <li id="footnote_208_1">주석 내용 1<a href="#footnote_link_208_1">[본문으로]</a></li>     </ol> </div> [/code]

다음은 블로그로 올린 문서의 HTML 구조입니다.

[code html] <p class="HStyle0">본문 내용 1<a href="#FOOTNOTE1">¹⁾</a></p> <p class="HStyle0">본문 내용 2</p> <p class="HStyle0">본문 내용 3</p> <hr align="left" width="300px"> <p class="HStyle11"><a name="#FOOTNOTE1">1)&nbsp;주석 내용 1</a></p> [/code]

위 두 코드에서 차이점은 (1) id와 name의 차이, (2) 링크를 이용한 왕복과 편도, (3) 링크 대상을 가리키는 이름의 차이(# 표시가 있느냐 없느냐)입니다. 일단 id와 name의 차이는 여러 문서를 함께 볼 경우에는 문제가 생기지만, 예제 문서는 오직 1개의 문서만을 화면에 표시하고 있으므로 이게 문제는 아닙니다. 그 다음으로 링크를 이용한 왕복이나 편도 이동이냐는 전혀 문젯거리가 아닙니다. 넘어가죠. 마지막으로 링크 대상을 가리킬 때 # 표시를 붙이느냐 마느냐는 상당히 차이가 큽니다.

일단 # 표시는 문서 내부의 이동 표시임을 나타내고 있습니다. 보통 # 표시 다음에는 id나 name로 표시하는 객체 이름(Object name)이 오게 됩니다. 그렇다면 # 자체가 객체 이름이냐? 그렇지는 않습니다. #은 문서와 문서 내부의 객체 이름과의 구분을 해 주는 표시일 뿐입니다. 다시 말해 #을 붙여서 id나 name을 표시하지는 않는다는 뜻입니다. 과거에는 #을 붙여서 표시하여도 호환성에 문제가 없었으나, 지금은 이 부분에 대해 엄격히 검사하고 있습니다. 현재 # 표시가 붙어 있어도 이동이 가능한 웹브라우저는 IE 계열뿐이며, 파이어폭스 등의 모질라/게코 계열이나 오페라 계열의 웹브라우저는 # 표시가 붙은 객체로의 이동을 지원하지 않습니다.

그러므로 위의 코드는 다음과 같이 고쳐야 합니다.

[code html] <p class="HStyle0">본문 내용 1<a href="#FOOTNOTE1">¹⁾</a></p> <p class="HStyle0">본문 내용 2</p> <p class="HStyle0">본문 내용 3</p> <hr align="left" width="300px"> <p class="HStyle11"><a name="FOOTNOTE1">1)&nbsp;주석 내용 1</a></p> [/code]

맨 마지막 줄에서 # 표시를 떼었습니다.

참고로 테스트 블로그에 이 부분에 대해 시험할 예제 문서(예제 - 주석과 위치 이동)를 올려 두었습니다. 직접 보시고 시험해 보시기 바랍니다. 참고로 주석 1은 정상적으로 이동이 가능하고, 주석 2는 IE 계열에서면 이동이 가능합니다.

결론

링크를 표시하면서 앵커(A 태그)에 name 속성에 # 문자가 들어간 이름을 넣었기 때문에 발생한 문제입니다. 그 문자를 떼면 정상적으로 이동이 가능합니다. 추가로 본문으로의 이동을 지원하도록 바꾸고, 아울러 앵커(A 태그) 때문에 밑줄이 생기는 현상도 제거하려면 다음과 같이 고치면 됩니다.

[code html] <p class="HStyle0">본문 내용 1<a id="FOOTNOTE_HWP_ARTICLE_[문서번호]_1" href="#FOOTNOTE_HWP_1">¹⁾</a></p> <p class="HStyle0">본문 내용 2</p> <p class="HStyle0">본문 내용 3</p> <div class="HStyle11">     <hr align="left" width="300px">     <ol start="1">         <li id="FOOTNOTE_HWP_1">주석 내용 1<a href="#FOOTNOTE_HWP_ARTICLE_[문서번호]_1">[본문으로]</a></li>     </ol> </div> [/code]

위와 같이 바꾸면 좀 더 구조적이고 효율적인 코드가 됩니다. 참고로 [문서번호]에 해당하는 값으로 치환해야 합니다. 그밖에 <ol start="1">의 경우는 시작하는 주석 번호가 1이라는 뜻입니다. 주석 번호를 하나하나 지정할 필요가 없다는 뜻입니다. 아무튼 이것을 적용하는 문제는 ᄒᆞᆫ글 개발자가 해결할 일이겠지요.

관련 벌레

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

• 블로그 - (X)HTML 태그 표기 문제
• HTML 태그 해석 오류 문제
• 블로그 - 주석 사이의 간격

관련 문서

내부 문서

• [벌레와 팁/버그] - 블로그 - (X)HTML 태그 표기 문제
• [벌레와 팁/버그] - HTML 태그 해석 오류 문제
• [벌레와 팁/버그] - 블로그 - 주석 사이의 간격
• [태그] - 한컴오피스2010 베타버전

외부 문서

• 테스트 블로그
  • 예제 5 - 줄간격 BR 수정 후
  • 예제 - 주석과 위치 이동

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

유니코드 지원이란?

우리가 흔히 "프로그램이 유니코드를 지원한다"라고 말할 때는 그 프로그램이 유니코드를 나타낼 수 있느냐가 아니라, 그 프로그램의 메뉴나 오류 메시지를 표현하는 코드 페이지가 유니코드이냐를 뜻합니다. 당연한 말이겠지만, 그 프로그램에서 유니코드 문자를 입력할 수 있는지는 전혀 고려하지 않습니다.

이때 프로그램 메뉴나 오류 메시지를 유니코드로 나타내는 경우에 네이티브로 유니코드를 지원한다는 표현을 사용하기도 합니다.

유니코드 출력

그렇다면 유니코드를 지원하는 프로그램만 유니코드를 올바르게 나타낼 수 있을까요? 유니코드를 지원하지 않는 프로그램은 유니코드를 올바르게 나타낼 수 없을까요? 그렇지는 않습니다. 유니코드 지원과 유니코드 표현은 아무런 관련도 없습니다. 아, 관련이 있기는 합니다. 특정 코드 페이지를 지원하는 프로그램은 그 코드 페이지에 해당하는 문자를 나타내기가 좀 더 쉽습니다.

그렇지만 그 둘 사이의 관계가 절대적이지는 않습니다. 화면 표시는 그저 화면 표시일 뿐 그 이상의 것이 아니기 때문입니다. 물론 텍스트 편집 프로그램의 경우에는 화면 표시가 매우 중요한 요소이지만, 실제 프로그램의 실행과는 별로 관련이 없습니다.

좀 더 전문적인 용어를 써서 말한다면, 유니코드 출력은 문자 인코딩(Character encoding)의 문제이고, 유니코드 지원은 문자 집합(Character set)의 문제입니다.

유니코드를 지원하지 않는 프로그램의 유니코드 출력 예시

CLCL

멀티 클립보드 프로그램인 CLCL은 유니코드를 지원하지 않는 프로그램, 곧 지원하는 문자 집합이 유니코드가 아닙니다. 그러나 클립보드 지원 프로그램이기 때문에 클립보드에 복사한 내용 가운데 유니코드가 있을 경우 그것을 잘 출력해 줍니다. 물론 이 경우 폰트가 잘 지원되어야 하지만, 그에 대해서는 논외로 합니다. 한편 CLCL도 유니코드 출력이 기본 기능은 아닙니다. 추가적인 DLL 파일이 필요하지만, 그것만 설치한다면 아무 문제 없이 유니코드 출력이 가능합니다. 더구나 그 DLL 파일이 유니코드를 네이티브로 지원하지도 않습니다.

위 두 화면은 유니코드를 CLCL이 어떻게 나타내는지를 보여주고 있습니다. 예시 1은 기본 출력인데, 현재 유니코드로 설정한 상태입니다. 기본값은 TEXT입니다. 예시 2는 TEXT일 때의 화면 출력을 보여 주고 있습니다. 게다가 예시 1과 예시 2는 현재 화면에 보이는 상태 그대로 붙여넣기가 가능합니다. 다시 말해 화면 출력과 프로그램의 유니코드 지원이 별 상관이 없다는 뜻이지요.

Notepad++

좀 더 확실하게 보여줄 필요가 있다면, 텍스트 편집기 가운데 유니코드 버전과 ANSI 버전을 함께 제공하는 프로그램을 선택하면 됩니다. 대표적인 프로그램이 바로 Notepad++입니다.

위의 세 그림은 유니코드 버전이냐는 사실과 유니코드를 출력할 수 있느냐는 사실과는 관련이 적음을 보여주고 있습니다. 유니코드를 출력할 수 있느냐는 오로지 프로그램이 유니코드 폰트 및 유니코드 합자를 지원하는 알고리듬을 가지고 있느냐에 좌우됩니다.

관련 문서

 

• 아크로에디트 :: 한글 깨짐 현상이 있습니다.

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

Giveaway of the Day - Paragon Hard Disk Manager 2009 Special Edition

하루에 하나씩 정품 소프트웨어를 주는 Giveaway of the Day(기브어웨이 오프 더 데이) 홈페이지에서 2010년 2월 3일에 Paragon Hard Disk Manager 2009 Special Edition(파라곤 하드 디스크 매니저 2009 스페셜 에디션)을 준다고 합니다.

이미 64비트 버전은 다운로드가 시작되었습니다. 150메가 넘는 용량이다 보니 다운로드를 먼저 하나 봅니다.

한국 시간으로는 2010년 2월 3일 오후 5시 정각부터 2010년 2월 4일 오후 5시 정각까지입니다. 다운로드하여 만 하루동안만 정품 인증이 가능한 방식으로 여겨지므로 필요하신 분은 다운로드 받은 뒤 설치하고 인증까지 마치기 바랍니다.
다운로드 주소는 다음과 같습니다.

• 32비트 버전 : http://files.giveawayoftheday.com/ParagonHDM2009_x32.zip (제 추측이지만 다운로드는 잘 되었습니다.)
• 64비트 버전 : http://files.giveawayoftheday.com/ParagonHDM2009_x64.zip

다운로드 받은 뒤 압축을 풀어 두고, 오후 5시에 설치한 다음 인증을 받으면 됩니다. 제 경우는 1월에 Paragon Partition Manager™ 10.0 Personal 을 받아서 설치했습니다. 그런데 오늘 버전은 좀 더 좋은 거네요. ^^a

주요 특징은 다음과 같습니다.

• Save your entire PC, including the operating system, applications, your settings, and all data files with easy-to-use backup tools.
• Continue working on your computer while making backups.
• Restore the entire disk contents in minutes – no reinstallations required!
• Start the recovery process when booting your computer, even if your operating system has failed.
• Easily partition your hard drives and keep them optimally sized.
• Keep your system performing like it was when first installed.
• Manage multiple operating systems (up to 16) on a hard drive.
• Easily move data and system information between drives and partitions.
• Tune your system for maximum performance with a powerful defragmentation utility.
• Easily clone an existing drive or partition to a new one – with Windows Vista even to different hardware!
• Expand your PCs storage capabilities with additional hard disks.
• Maintain the confidentiality of your deleted data forever with a disk wiping utility.
• All available Paragon Hard Disk Management technologies are available in one suite.
• Flexible and reliable overall system control at a low cost.

제한 사항 : WinPE RCD를 제공하지 않습니다. HDM2009 Suite로의 무료 업그레이드를 포함하지 않습니다. 그 대신에 Hard Disk Manager 2009 Special Edition 등록 사용자는 특별 할인가(30% 할인)를 적용합니다.

기술 지원 : Giveaway 기간 동안(한국 시간으로 3일 호우 5시 정각부터 4일 오후 5시 정각까지) Paragon Software는 기술 지원을 http://twitter.com/paragonsoftware 에서 제공합니다. 설치 및 사용, 등록 과정에서 발생한 오류는 그곳에 올려 주세요. Paragon Software의 지원 팀이 최대한 빠르게 답변할 것입니다.

위 기술 지원에 대한 사항은 한마디로 트위터 사용자에게만 가능하다는 말입니다. 뭐, 프로그램이 무료이니 기술 지원은 제한을 둔다는 것이죠.

아, 이 프로그램은 현재 한글 메뉴를 지원되지 않고 있습니다. 그러나 하드 디스크에 한글 이름을 가진 파일이 있더라도 잘 작동합니다. 대신 약간의 설정이 필요합니다.

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

한컴오피스 베타버전 버그 30 - "Haansoft PDF"의 성능은?

ᄒᆞᆫ글2010 베타버전에서 출력한 PDF 파일을 살펴보다가 이상한 점을 발견하여 한컴오피스2010 베타버전의 PDF 출력 버그 라는 글을 올렸습니다. 이 글은 그 글의 후속편입니다.

• 참고 1 : 이 글은 매우 많은 그림을 포함하고 있어서 읽어오는 데 시간이 오래 걸릴 수도 있습니다. 느긋하게 기다려 주십시오.
• 참고 2 : 이 글에서 사용한 PDF 파일 및 문서 파일을 압축 파일로 제공합니다. PDF-Output.zip 파일(1.31 MB)을 받으세요.

벌레의 유형

ᄒᆞᆫ글 씨! Haansoft PDF 가상 프린터는 그저 겉모양만 만들면 되는 게 아니랍니다.

개발자의 답변

이 글은 버그 리포팅을 하지 않았습니다. 지난 번 버그 리포팅으로 충분하다고 여겼기 때문입니다.

벌레의 발견

벌레는 한컴오피스2010 베타버전의 PDF 출력 버그 글을 작성하면서 발견했습니다. 그 글을 작성하면서 복사&붙여넣기도 시험했는데, 처음에는 모두 실패했습니다. 그래서 옛한글이 들어 있는 PDF 파일의 내용을 복사할 수 없는 벌레라는 글을 준비하였습니다. 그런데 그게 아니라는 사실이 밝혀져서 실험을 중심으로 바꾸었습니다.

사용할 프로그램 : PDF 보기 프로그램

• Adobe Reader v9.3
• Foxit Reader v3.1.4.1125
• UNIDOCS ezPDF Reader 2.0
• ePapyrus PDF-Pro 4 Free v4.0.0.433 (2009년 2월 12일)

참고로 이 실험에 쓰인 PDF 파일은 모두 PDF-Output.zip 파일(1.31 MB)에 들어 있습니다.

배점 기준 및 평가 방법

본의 아니게 PDF 보기 프로그램의 성능 테스트를 하게 되었습니다. 하는 김에 확실하게 점수도 매기기로 했습니다.

• 항목별 최하점은 0점이고, 최고점은 5점입니다.
• 우선 4글자로 모두 정상 출력하면, 5점을 줍니다.
  • 출력한 글자가 1글자 비정상 출력하면 감점 1점하는 방식입니다.
  • 출력한 글자가 1글자 이상이라도 일치하는 글자가 없으면 0점입니다.

이 배점 기준 및 평가는 지극히 주관적이며, 다른 사람이 하면 다른 점수가 나올 수 있습니다.

복사한 뒤에 메모장에 붙여넣기를 합니다. 메모장의 글꼴 서식은 함초롬바탕 12포인트 보통 형태입니다.

검증 1 : Adobe Reader

파일명	복사 전	복사 & 붙여넣기	점수
HWP2010-to-PDF-CutePDF.pdf			3
HWP2010-to-PDF-ezPDF.pdf			3
HWP2010-to-PDF-Foxit.pdf			3
HWP2010-to-PDF-Haansoft-PDF.pdf			3
HWP2010-to-PDF-PDF로_저장.pdf			3
HWP2010-to-PDF-PDFCreator.pdf			0
HWP2010-to-PDF-PDF-Pro.pdf			3
OpenOffice-to-PDF-CutePDF.pdf			5
OpenOffice-to-PDF-ezPDF.pdf			5
OpenOffice-to-PDF-Foxit.pdf			5
OpenOffice-to-PDF-Haansoft-PDF.pdf			5
OpenOffice-to-PDF-PDF로_내보내기.pdf			5
OpenOffice-to-PDF-PDFCreator.pdf			3
OpenOffice-to-PDF-PDF-Pro.pdf			5
HCell-to-PDF-Haansoft-PDF.pdf			3
HCell-to-PDF-PDF로_저장.pdf			3
HShow-to-PDF-Haansoft-PDF.pdf		(없음)	0
HShow-to-PDF-PDF로_저장.pdf		(없음)	0
계	-	-	57

검증 2 : Foxit Reader

아울러 이제부터는 복사 전 그림은 뺍니다. 똑같은 거 또 넣어봐야 시간 낭비라고 생각해서리...

파일명	복사 & 붙여넣기	점수
HWP2010-to-PDF-CutePDF.pdf		3
HWP2010-to-PDF-ezPDF.pdf		3
HWP2010-to-PDF-Foxit.pdf		3
HWP2010-to-PDF-Haansoft-PDF.pdf		3
HWP2010-to-PDF-PDF로_저장.pdf		3
HWP2010-to-PDF-PDFCreator.pdf		0
HWP2010-to-PDF-PDF-Pro.pdf		3
OpenOffice-to-PDF-CutePDF.pdf		3
OpenOffice-to-PDF-ezPDF.pdf		5
OpenOffice-to-PDF-Foxit.pdf		3
OpenOffice-to-PDF-Haansoft-PDF.pdf		3
OpenOffice-to-PDF-PDF로_내보내기.pdf		3
OpenOffice-to-PDF-PDFCreator.pdf		0
OpenOffice-to-PDF-PDF-Pro.pdf		3
HCell-to-PDF-Haansoft-PDF.pdf		3
HCell-to-PDF-PDF로_저장.pdf		3
HShow-to-PDF-Haansoft-PDF.pdf	(없음)	0
HShow-to-PDF-PDF로_저장.pdf	(없음)	0
계	-	44

검증 3 : UNIDOCS ezPDF Reader

파일명	복사 & 붙여넣기	점수
HWP2010-to-PDF-CutePDF.pdf		3
HWP2010-to-PDF-ezPDF.pdf		3
HWP2010-to-PDF-Foxit.pdf		3
HWP2010-to-PDF-Haansoft-PDF.pdf		3
HWP2010-to-PDF-PDF로_저장.pdf		3
HWP2010-to-PDF-PDFCreator.pdf	(없음)	0
HWP2010-to-PDF-PDF-Pro.pdf	(없음)	0
OpenOffice-to-PDF-CutePDF.pdf		5
OpenOffice-to-PDF-ezPDF.pdf		5
OpenOffice-to-PDF-Foxit.pdf		5
OpenOffice-to-PDF-Haansoft-PDF.pdf		5
OpenOffice-to-PDF-PDF로_내보내기.pdf		5
OpenOffice-to-PDF-PDFCreator.pdf		3
OpenOffice-to-PDF-PDF-Pro.pdf		3
HCell-to-PDF-Haansoft-PDF.pdf		3
HCell-to-PDF-PDF로_저장.pdf		3
HShow-to-PDF-Haansoft-PDF.pdf	(없음)	0
HShow-to-PDF-PDF로_저장.pdf	(없음)	0
계	-	52

검증 4 : ePapyrus PDF-Pro 4 Free

파일명	복사 & 붙여넣기	점수
HWP2010-to-PDF-CutePDF.pdf		3
HWP2010-to-PDF-ezPDF.pdf		3
HWP2010-to-PDF-Foxit.pdf	(없음)	0
HWP2010-to-PDF-Haansoft-PDF.pdf		3
HWP2010-to-PDF-PDF로_저장.pdf		3
HWP2010-to-PDF-PDFCreator.pdf		0
HWP2010-to-PDF-PDF-Pro.pdf	(없음)	0
OpenOffice-to-PDF-CutePDF.pdf		3
OpenOffice-to-PDF-ezPDF.pdf		3
OpenOffice-to-PDF-Foxit.pdf		3
OpenOffice-to-PDF-Haansoft-PDF.pdf		3
OpenOffice-to-PDF-PDF로_내보내기.pdf		3
OpenOffice-to-PDF-PDFCreator.pdf		0
OpenOffice-to-PDF-PDF-Pro.pdf		3
HCell-to-PDF-Haansoft-PDF.pdf		3
HCell-to-PDF-PDF로_저장.pdf		0
HShow-to-PDF-Haansoft-PDF.pdf	(없음)	0
HShow-to-PDF-PDF로_저장.pdf	(없음)	0
계	-	33

PDF 보기 프로그램별 결과 및 분석

일단 분석에 들어가기에 앞서 위의 표에서 (없음)으로 표시된 부분은 복사할 수 없거나 복사 결과 공백만 복사된 경우, 또는 처음부터 선택이 되지 않는 경우입니다.

프로그램	옛한글 복사 성공 횟수	점수
Adobe Reader	6	57
Foxit Reader	1	44
UNIDOCS ezPDF Reader	5	52
ePapyrus PDF-Pro 4 Free	0	33

개인적으로 이 결과는 매우 마음에 들지 않습니다. 지금까지 너무 무거워서 사용하지 않았던 Adobe Reader는 성능 면에서 최고의 결과를 보이며, 옛한글 복사 성공 횟수와 배점에서 최고점을 기록하였고, 가볍고 빨라서 자주 쓰던 ePapyrus PDF-Pro 4 Free는 단 하나의 옛한글도 제대로 복사하지 못하는 최악의 결과를 보여주었습니다. 게다가 Foxit Reader의 경우는 매우 이해하기 힘든 결과였습니다. 나름대로 유니코드 지원 등을 내세운 새 버전의 제품임에도 옛한글과 관련하여 이런 결과를 보였다는 말은 다른 유니코드도 별로 다르지 않으리라는 예상이 가능하기 때문입니다. 특히 Foxit Reader 및 ePapyrus PDF-Pro 4 Free는 옛한글이 제대로 복사되지 않았고, 심지어 영역 설정도 되지 않은 때가 있어서 한 글자 한 글자 따로 영역을 지정하여 복사해야 하는 경우도 있었습니다. 옛한글과 유니코드를 자주 다룬다면 절대로 Foxit Reader 및 ePapyrus PDF-Pro 4 Free, 이 두 제품을 사용하지 않기를 바랍니다.

한편 PDF 가상 프린터 가운데 최고 점수를 받은 제품은 UNIDOCS ezPDF Builder 2006 Free입니다. 솔직히 이 실험을 하기 전에는 그런 회사 및 제품이 있다는 사실조차 몰랐습니다. 아무튼 좋은 점수를 받은 그 제품을 알게 되어 다행입니다.

제가 Adobe Acrobat을 구하지 못해서 시험하지 못했습니다. 혹시나 구할 수 있다면 대신 시험을 해 주실 분은 실험하신 뒤에 댓글을 좀 남겨 주십시오.

벌레 분석 및 덧붙이는 말

원래 이 실험을 하게 된 까닭은, 앞서 밝혔듯이, 우연히 복사&붙여넣기를 했는데, 아주 엉뚱하게 되었기 때문입니다. 그래서 PDF 보기 프로그램의 성능 테스트 겸 가상 프린터의 성능 테스트를 하게 되었습니다.

옛한글 및 유니코드와 관련하여, PDF 가상 프린터 가운데 가장 성능이 좋은 것은 UNIDOCS ezPDF Builder 2006 Free이며, Haansoft PDF도 그다지 나쁘지 않은 성능을 보였습니다. 8개 제품 가운데 공동 2위를 하였으니까요. 다만 기이하게도 ᄒᆞᆫ글과 함께 쓰면 오히려 결과가 좋지 않습니다.

또한 옛한글과 유니코드를 자주 쓴다면 Foxit Reader 및 ePapyrus PDF-Pro 4 Free는 쓰지 않는 것이 좋을 듯싶습니다.

관련 벌레

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

• ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• ᄒᆞᆫ글2010 베타버전의 문자표 버그 2
• ᄒᆞᆫ글2010 베타버전과 유니코드 버그 2 및 문자표 버그 3
• ᄒᆞᆫ글2010 베타버전과 유니코드 3 - Unicode Full Set 지원??
• ᄒᆞᆫ글2010 베타버전과 옛한글 표기 오류
• 한컴오피스2010 베타버전의 PDF 출력 버그

관련 문서

내부 문서

• [벌레와 팁/버그] - 한컴오피스2010 베타버전의 PDF 출력 버그
• [벌레와 팁/팁] - 유니코드 문자표는 없나요?
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전의 문자표 버그 2
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 2 및 문자표 버그 3
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 3 - Unicode Full Set 지원??
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 옛한글 표기 오류
• [일기] - 난 판도라 상자를 열었을까?
• [태그] - 글꼴
• [태그] - 옛한글

외부 문서

PDF 보기 프로그램

• Adobe Reader v9.3
• ePapyrus PDF-Pro 4 Free (v4.0.0.433 2009년 2월 12일)
• Foxit Reader v3.1.4.1125
• UNIDOCS ezPDF Reader 2.0

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

이번 달 27일이면 1년입니다. 고로 2010년 1월은 11개월째입니다.

2010년 1월은 여러 가지 의미를 가지고 있네요. 저에게...

우선 1개월 31일 동안 하루도 빠짐없이 글을 올렸습니다. 대부분 버그 리포팅이기에 더욱 의미가 있습니다. 1월에 올라온 버그 리포팅은 모두 36개이므로 평균으로 따지면 하루에 1개 이상 올라온 셈입니다. 참고로 버그 리포팅은 다른 글보다 시간이 많이 걸립니다. 작성에 걸리는 시간은 팁이나 버그 리포팅이나 같지만, 실제로 소모하는 시간은 버그 리포팅이 몇 배나 더 걸립니다.

월 방문객 수가 1만 명을 넘겼습니다. 대충 9천 명 정도를 예상했는데, 1만 3천 명을 넘겼더군요. ^^a 올해 목표가 7만 5천 명인데, 출발이 매우 순조롭습니다. 그런데 다시 생각해 보니 목표치가 너무 낮았습니다. 2009년의 5만 명 달성은 12개월에 5만 명이 아니라, 10개월에 5만 명이었습니다. 그런데 12개월에 7만 5천 명은 너무 적은 방문객 수였더군요. 10개월과 12개월의 차이를 생각하지 않은 너무 낮은 목표치였습니다. 그래서 조심스럽게 목표치를 10만 명으로 상향해 봅니다. 1개월에 8천 명 정도 오시면 가능하리라 생각합니다.

옛한글과 관련하여 좀 더 진지하게 다가갈 필요가 있어 보입니다. 지금까지는 그저 버그를 찾는 데 주력했다면 앞으로는 코드에 대해서도 알아볼 필요가 있어 보입니다.

안타깝게도 벌써 나이가 서른 후반입니다. 백수 탈출을 하려면 어찌해야 할는지가 걱정입니다. 그 전에는 아르바이트라도 했는데, 벌써 2년째(올해로 3년째) 놀고 있습니다. 영원히 취직을 하지 못할까 걱정이 앞섭니다.

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

한컴오피스 베타버전 버그 29 - 옛한글이 포함된 파일의 PDF 출력 버그

ᄒᆞᆫ글2010 베타버전에서 출력한 PDF 파일을 살펴보다가 이상한 점을 발견했습니다. 그래서 PDF 파일 출력에 대한 사항을 살펴보게 되었습니다. 매번 느끼지만 옛한글과 얽히면 판도라 상자처럼 온갖 악(벌레)이 튀어나옵니다. 특별히 이번 포스팅은 놈팡이 백수가 드리는 일요스페셜 또는 월요일 선물이라고 생각하시면 됩니다.

• 참고 1 : 이 글은 매우 많은 그림을 포함하고 있어서 읽어오는 데 시간이 오래 걸릴 수도 있습니다. 느긋하게 기다려 주십시오.
• 참고 2 : 이 글에서 사용한 그림과 출력한 PDF 파일 및 문서 파일을 압축 파일로 제공합니다. PDF-Output.zip 파일(1.31 MB)을 받으세요.

벌레의 유형

ᄒᆞᆫ글 씨! 옛한글을 화면에 잘 나타내면 끝이 아닙니다. 화면 출력뿐만 아니라 프린트 출력이나 PDF 출력도 잘 나타내 주어야 합니다.

개발자의 답변

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

벌레의 발견

사용할 프로그램

오피스웨어 프로그램

• 한컴오피스2010 베타버전 : 처음에는 ᄒᆞᆫ글만 시험
• OpenOffice Writer v3.1.1 : Writer만 시험

PDF 제작 프로그램

• Foxit PDF Creator v3.0.1.1217 (30일 시험판)
• CutePDF Writer v2.8.0.2
• PDFCreator v0.9.9 / PDF v1.5 / PostScript v8.70
• ePapyrus PDF-Pro 4 Free (v4.0.0.433 2009년 2월 12일) / PostScript? (gsdll32.dll)
• UNIDOCS ezPDF Builder 2006 Free
• ᄒᆞᆫ글2010 베타 - Haansoft PDF v1.3.0.310 / PostScript? (gsdll32.dll) : ᄒᆞᆫ글 자체 프로그램
• ᄒᆞᆫ글2010 베타 - PDF로 저장하기 / PostScript? (gsdll32.dll) : ᄒᆞᆫ글 자체 프로그램

위에서 PostScript?라는 부분은 gsdll32.dll 파일을 발견하였기 때문에 표시하였습니다.

PDF 보기 프로그램

• Adobe Reader v9.3
• ePapyrus PDF-Pro 4 Free (v4.0.0.433 2009년 2월 12일)
• Foxit Reader v3.1.4.1125
• UNIDOCS ezPDF Reader 2.0

검증 1 : ᄒᆞᆫ글에서 출력하기

위와 같이 인쇄 화면을 불러 PDF로 출력하는 가상 프린터를 선택하여 [인쇄] 단추를 클릭하면 만들 수 있습니다.

위의 그림 가운데 Microsoft XPS 부분과 PC-000의 Samsung ML-1610 부분은 PDF 출력 가상 프린터가 아닙니다.

혹시 시험해 보고 싶은 사람은 프로그램마다 파일로 출력하는 방식이 다르므로 각자 프로그램 설명서를 참조하여 출력하기 바랍니다. 이 글에서는 다루지 않습니다.

각각의 PDF 출력 프로그램을 이용하여 PDF 파일을 만들었습니다. 이것을 PDF 보기 프로그램을 살펴보겠습니다.

• 알파벳 순서로 시험했으므로 첫 번째 파일 또는 이상이 있는 파일만 나타내겠습니다.
• 출력 품질 자체는 비교하지 않습니다.
• 복사 작업은 평가하지 않습니다. PDF 출력의 경우 옛한글을 정상적으로 복사할 수 없었습니다.

Adobe Reader

이전다음

012

ePapyrus PDF-Pro 4 Free

이전다음

012

Foxit Reader

이미 결론이 난 듯하죠? 하지만 ᄒᆞᆫ글만큼은 끝까지 해보겠습니다.

이전다음

012

UNIDOCS ezPDF Reader

이전다음

012

결론 1

한컴오피스2010 베타버전에서 제공하는 Haansoft PDF 가상 프린터의 출력과 PDF로 저장하기 기능으로 저장한 PDF 파일에서는 옛한글이 제대로 나타나지 않았습니다.

검증 2 : 오픈오피스에서 출력하기

오픈오피스에서도 한컴오피스2010 베타버전에서 제공하는 Haansoft PDF 가상 프린터의 출력 기능이 작동합니다. 또한 오픈오피스에도 PDF로 내보내기 기능이 존재합니다.

앞서 올린 글에서 밝혔듯이 함초롬 글꼴은 ᄒᆞᆫ글에서만 예쁘게 나옵니다.

이전다음

0123456

결론 2

위 그림과 같이 오픈오피스에서 출력한 PDF 파일은, 비록 그 겉모습은 예쁘지 않았지만, 단 하나의 오류도 나타내지 않았습니다. 심지어 한글과컴퓨터사에서 제공하는 Haansoft PDF 가상 프린터에서도 정상 출력하였습니다.

검증 3 : ᄒᆞᆫ셀과 ᄒᆞᆫ쇼에서 출력하기

지금까지 PDF 보기 프로그램에 따라 화면 출력 결과가 다르지 않았기 때문에 이제부터는 어도비 리더만 보이겠습니다. 또한 다른 PDF 가상 프린터는 제외하고, 한글과컴퓨터에서 제공하는 두 기능만 사용하겠습니다.

벌레 분석 및 덧붙이는 말

처음 이 벌레를 발견했을 때 Haansoft PDF 또는 PDF로 저장하기 기능에서 오류가 있다고 생각했습니다. 그런데 실험을 해 본 결과 그 두 기능보다는 한컴오피스의 출력 기능에 벌레가 사는 듯싶습니다.

이번 글을 작성하면서 발견한 벌레입니다. 벌레에도 급과 격이 있음을 보여주는 엄청난 놈입니다. ᄒᆞᆫ글2010 베타버전과 옛한글 표기 오류에서 발견한 벌레는 애송이였습니다. 이 벌레야말로 압권입니다.

위의 벌레는 ᄒᆞᆫ글 ᄒᆞᆫ글이라는 글귀를 입력한 뒤에 실수로 스페이스바를 계속 누르고 있어서 발견한 벌레입니다. 본문 작성하면서 단순노동^[각주:1]에 짜증도 나고 했는데, 이걸 발견한 순간 헛웃음이 나오면서 짜증이 사라지더군요. 저는 별수없이 남의 불행을 먹고 사는 버그 리포터인가 봅니다. "혹시 나 변태?"라는 걱정도 들더군요.

본문에서 사용한 PDF 파일의 섬네일 이미지도 첨부해 봅니다.

장장 이틀간(준비까지 사흘간) 작성한 포스팅을 마치겠습니다. 2월에도 기운 내서 힘 차게 잘 지내시기 바랍니다. ^.^b

관련 벌레

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

• ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• ᄒᆞᆫ글2010 베타버전의 문자표 버그 2
• ᄒᆞᆫ글2010 베타버전과 유니코드 버그 2 및 문자표 버그 3
• ᄒᆞᆫ글2010 베타버전과 유니코드 3 - Unicode Full Set 지원??
• ᄒᆞᆫ글2010 베타버전과 옛한글 표기 오류

관련 문서

내부 문서

• [벌레와 팁/팁] - 유니코드 문자표는 없나요?
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전의 문자표 버그 2
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 2 및 문자표 버그 3
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 3 - Unicode Full Set 지원??
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 옛한글 표기 오류
• [일기] - 난 판도라 상자를 열었을까?
• [태그] - 글꼴
• [태그] - 옛한글

외부 문서

PDF 제작 프로그램

• Foxit PDF Creator v3.0.1.1217 (30일 시험판)
• CutePDF Writer v2.8.0.2
• PDFCreator v0.9.9 / PDF v1.5 / PostScript v8.70
• ePapyrus PDF-Pro 4 Free (v4.0.0.433 2009년 2월 12일)
• UNIDOCS ezPDF Builder 2006 Free

PDF 보기 프로그램

• Adobe Reader v9.3
• ePapyrus PDF-Pro 4 Free (v4.0.0.433 2009년 2월 12일)
• Foxit Reader v3.1.4.1125
• UNIDOCS ezPDF Reader 2.0

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

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

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

벌레의 유형

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

개발자의 답변

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

벌레의 발견

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

벌레 분석 및 덧붙이는 말

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

관련 벌레

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

• ᄒᆞᆫ글2010 베타버전과 유니코드 3 - Unicode Full Set 지원??
• 다음뷰, 옛한글도 한글이란다.

관련 문서

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

내부 문서

• [벌레와 팁/팁] - 유니코드 문자표는 없나요?
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전의 문자표 버그 2
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 2 및 문자표 버그 3
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 3 - Unicode Full Set 지원??
• [일기] - 난 판도라 상자를 열었을까?
• [태그] - 글꼴
• [태그] - 옛한글

외부 문서

• 한국어 위키백과
  • 옛한글
  • 유니코드
• 영어 위키백과
  • Unicode
  • Unicode font

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

한컴오피스 베타버전 버그 28 - 유니코드 버그 4 및 글꼴 (표기) 버그 2
- 옛한글 합자와 일반 글자는 다른가요?
- 왜 옛한글은 무조건 함초롬체로 표시하나요?

ᄒᆞᆫ글2010 베타버전에서 옛한글을 한양PUA가 아닌 유니코드 한글 자모 영역을 이용하여 나타내 주고 있습니다. 이는 대단히 좋은 현상입니다. 그런데 조금 이상한 현상을 발견했습니다. 이런 이상한 현상을 접하면 접할수록 옛한글과 얽힌 녀석은 판도라 상자라는 생각이 새록새록 솟아납니다.

벌레의 유형

ᄒᆞᆫ글 씨! 옛한글의 자모 합자는 일반 글자로 취급해야 합니다. 절대 일반 글자처럼 취급하면 안 됩니다. 그리고 왜 옛한글은 무조건 함초롬체로 표시해 버리나요? 함초롬체가 아닌 다른 글꼴을 사용할 수 있는 옵션을 추가해 주면 좋겠습니다.

개발자의 답변

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

벌레의 발견

ᄒᆞᆫ글2010 베타버전에서 은 글꼴을 적용하다가 발견했습니다.

위 예시 그림 두 개를 살펴보면 여러 가지가 다릅니다.

1. 맨 먼저 옛한글의 모양이 확연하게 다릅니다. 한쪽으로 기울어져 있는데, 굳이 검증이 필요 없어 보입니다.
2. 옛한글의 글자 외형이 현대 한글의 글자 외형과 달라 보입니다. 서로 다른 글꼴처럼 보입니다.
3. 글자의 자간이 다릅니다. 그러나 이것은 문단 배열과 관련한 워드프로세서의 기능이므로 논외로 합니다.

일단 위 세 가지 다른 점을 발견했습니다. 3번은 벌레가 아니므로 논하지 않겠습니다.

검증 1 : 기울어진 옛한글

기울어진 옛한글 문제는 근본적으로 옛한글이 화면에 보이는 모양과는 달리 한글 1자가 아니라 한글 낱자 3개이기 때문에 발생한 문제입니다. 다만 그 합자 처리가 매끄럽지 못하기 때문에 발생한 벌레이지요.

그런데 저것이 한글 낱자 3개라는 사실이 이해가 안 된다면 다음 메모장 화면을 보시기 바랍니다.

위의 예시 3과 예시 4는 단지 글꼴을 바꾸었을 뿐인데, 화면에 보이는 모양이 달라졌습니다. 이는 한글 낱자 3개를 하나로 합쳐서 보여주는 기능을 가진 글꼴인지, 아니면 그저 이미 완성된 글자만을 보여주는 글꼴인지에 따라 이처럼 다른 결과를 보여줍니다.

그런데 문제는 이러한 낱자를 합자 처리한 그 결과물은 1문자처럼 처리하는 게 아니라 1문자로서 처리해야 한다는 점입니다. ᄒᆞᆫ글2010 베타버전에서 예시 1의 경우에 옛한글의 자모 합자를 1문자로서 처리했다면 문단 정렬에 따른 자간이 변하더라도 그 장폭이 그대로 유지되었을 것입니다. 그러나 그저 겉보기에만 1문자처럼 처리했기 때문에 문단 정렬에 따른 자간 변화에 대응하여 각각의 낱자가 각각 1글자로써 작용하여 각각 자간을 넓혔기 때문에 예시 2와 같이 왼쪽 위에서 오른쪽 아래로 기울어진 형태를 가지게 되었으리라 여겨집니다.

재미있는 점은 키보드 방향키로 커서를 옮겨 보면 옛한글의 한글 낱자 사이를 이동하지 않고, 옛한글을 1글자로서 인식합니다.

검증 2 : 옛한글의 글꼴

먼저 은 바탕 글꼴로 ᄒᆞᆫ글을 나타내면 다음과 같습니다.

이 모양은 확실히 예시 1의 모양과 다릅니다.

위 그림 두 개를 살펴보면 첫 번째 그림에 나타난 글꼴은 순서대로 함초롬바탕, 함초롬돋움 각각 1글자, 은 바탕 2글자이며, 두번째 그림은 달랑 1글자로 은 바탕 글꼴입니다. 이때 두 그림 모두 빨간 동그라미와 연두 동그라미로 표시한 부분이 차이가 납니다. 게다가 예시 1의 글자는 함초롬바탕의 글자와 매우 비슷합니다.

아마도 ᄒᆞᆫ글2010 베타버전에서는 옛한글을 무조건 함초롬 글꼴로 나타내도록 했나 봅니다. 한글과컴퓨터사에서 옛한글을 잘 나타내도록 열심히 노력했음을 보여주는 대목입니다. 그런데 그게 반드시 좋을까요? 아니라고 생각합니다. 예시 4의 굴림 옛한글 글꼴은 새굴림 글꼴을 바탕으로 만들었기 때문에 상당히 좋은 품질을 보여줍니다. 이런 글꼴의 경우에도 함초롬 글꼴로 나타낸다? 저는 그것을 바라지 않는데요. 적어도 환경 설정이나 사용자 설정에서 사용자가 결정할 수 있는 기회를 주었어야 한다고 생각합니다. 또한 글자 모양에서 경우에 따라서 옛한글을 강제로 함초롬으로 나타내거나 강제로 함초롬을 적용하지 않는 옵션이 주어져야 함은 당연하고요.

벌레 분석 및 덧붙이는 말

벌레에 대한 분석은 이미 했으므로 간단히 요약하겠습니다.

1. 문단 정렬과 관련하여 옛한글의 한글 자모 합자를 1글자로서 처리해야 글자가 기울어지는 버그가 안 생긴다고 생각합니다.
2. 옛한글을 표시할 글꼴을 사용자가 선택할 수 있어야 합니다. 또한 때에 따라서는 기본 글꼴(함초롬 글꼴)을 적용할 수도 있어야 하고요.

제가 버그 2를 보면서 문득 생각난 것이 표현의 자유입니다. 옛한글을 나타내는 것은 표현의 자유에 관한 사항입니다. 그런데 그 때문에 함초롬 글꼴만 사용해야 한다면, 그것은 표현의 자유를 위해 표현의 자유를 억압하는 꼴입니다. 저는 그런 반쪽짜리 표현의 자유보다 진정한 표현의 자유가 더 좋답니다.

1월 31일에 오후에 궁극의 벌레를 다시 발견했습니다. 스크린샷을 첨부합니다.

관련 벌레

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

• ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• ᄒᆞᆫ글2010 베타버전의 문자표 버그 2
• ᄒᆞᆫ글2010 베타버전과 유니코드 버그 2 및 문자표 버그 3
• ᄒᆞᆫ글2010 베타버전과 유니코드 3 - Unicode Full Set 지원??

관련 문서

내부 문서

• [벌레와 팁/팁] - 유니코드 문자표는 없나요?
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전의 문자표 버그 2
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 2 및 문자표 버그 3
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 3 - Unicode Full Set 지원??
• [일기] - 난 판도라 상자를 열었을까?
• [태그] - 글꼴
• [태그] - 옛한글

외부 문서

• 한국어 위키백과
  • 옛한글
  • 유니코드
• 영어 위키백과
  • Unicode
  • Unicode font

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

최근 오피스슈트를 만드는 두 회사에서 새 버전의 베타버전을 발표하여 오피스웨어 사용자를 즐겁게 만들고 있습니다. 그런데 여기에 포함된 오피스 프로그램에 포함된 글꼴을 따로 이용할 수 없는지 그게 더 궁금하신 분도 있더군요. 하긴 제가 봐도 함초롬 글꼴 등은 매우 예쁩니다.

필요한 파일

일단 오피스 설치 파일이 필요합니다. 그리고 그것을 설치하지 않고 압축을 풀어줄 프로그램이 필요하지요. 일단 오피스 설치 파일은 각자 구하기 바랍니다.

• 한컴오피스2010 베타버전 : http://obt.haansoft.com/obt/download/download.html
• MS오피스2010 베타버전 : http://technet.microsoft.com/ko-kr/evalcenter/ee390818.aspx 페이지에서 지시사항에 따라 다운로드

그리고 이 파일들의 압축을 푸는 데에는 7-Zip이 제격입니다.

• 7-Zip : http://www.7-zip.org/

압축 풀기

위 그림에서 HOffice2010.exe 파일은 한컴오피스2010 베타버전 설치파일이며, ProfessionalPlus.exe 파일은 MS오피스2010 베타버전 설치 파일입니다.

7-Zip을 이용하여 위와 같이 압축을 풀면 됩니다. 압축을 풀려는 파일 위에 마우스 커서를 두고 마우스 오른쪽 단추를 클릭합니다. 지금 PC방이라서 알집이 있네요. ^^a

위에서 압축을 푼 파일은 한컴오피스2010 베타버전의 설치 파일입니다. 압축을 풀어낸 하위 폴더로 이동합니다. 이때 글꼴은 함초롬 글꼴입니다. 필요하다면 그밖에 다른 글꼴도 압축을 풀려고 합니다. 아무튼 함초롬 글꼴의 파일 이름은 hanbatang.ttf, hanbatang-bold.ttf 및 handotum.ttf, handotum-bold.ttf입니다. 원래는 이 파일을 찾으려면 캐비닛 파일(.CAB)을 하나씩 뒤져야 합니다. 하지만 한컴오피스의 경우는 매우 쉽게 찾을 수 있기에 연습용으로 닥 좋습니다.

보기 > 자세히로 보기 옵션을 바꿉니다. 파일 수가 적어서 굳이 그럴 필요는 없지만, 파일이 많은 경우에는 자세히로 바꾼 뒤에 작업하면 편합니다.

일단 위와 같이 보기 옵션을 '자세히'로 바꿉니다. 그 뒤에 종류(빨간 동그라미)를 클릭하여 종류별로 정렬시킵니다.

위 그림처럼 찾기 쉬운 경우도 있지만, 뒤섞인 경우가 많습니다.

글꼴 찾기

위 그림에서 찾은 fonts.cab 파일의 압축을 풉니다.

일단 위 그림처럼 찾고자 하는 바가 바로 나타나는 경우도 있지만, 그렇지 않을 수도 있습니다. 그럴 경우 FontView라는 프로그램을 이용하면 됩니다. 대부분의 경우 위와 같은 화면에서 글꼴 파일의 아이콘을 두 번 클릭하면 FontView 창이 나타납니다.

위와 같이 파일을 하나하나 살피어 찾으면 됩니다.

찾아낸 글꼴 파일을 글꼴 폴더에 복사해 넣으면 사용할 수 있습니다. 단순히 복사했을 경우에는 시스템 재시작이 필요할 수도 있습니다. 또한 찾아낸 글꼴 파일을 백업할 수도 있습니다.

관련 문서

내부 문서

• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 3 - Unicode Full Set 지원??
• [일기] - 난 판도라 상자를 열었을까?
• [유틸리티/소개] - 7-Zip

외부 문서

• 유니코드
• Free software Unicode typefaces

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

파이어폭스(영문)에서 부가 기능을 이용하다 보면 간혹 ssl 관련 오류가 나는 때가 있습니다. 저도 여러 번 보았고요. 게시글도 하나 올렸습니다. 아무튼 그 벌레를 발견하는 분은 반드시 그 팁을 적용하기 바랍니다.

오류 내용

이번에 몇 가지 특이한 경우를 발견했습니다. 그러므로 반드시 이 팁을 적용할 필요가 있습니다. 증상은 다음과 같습니다.

1. 부가 기능 가운데 확장 기능을 설치할 때 나타나서 귀찮게 한다.
2. 부가 기능 가운데 플러그인을 설치할 때 나타나서 귀찮게 한다.
3. 보안 인증서와 관련하여 오류가 발생한다.
4. 부가 기능 가운데 보안 인증서가 필요한 항목은 설치에 실패하는 경우가 생긴다. 지금까지 구글 툴바 확장 기능과 어도비 플래시 플러그인에서 발견된 현상입니다.
5. 간혹 온라인 업데이트 기능을 이용할 때 확장 기능을 찾기 못한다.
6. 2010년 1월 29일까지 영문 전용 버전에서는 발견하지 못했습니다.^[각주:1] 영문 버전이라도 인터내셔널 버전에서는 발견하였습니다.

특히 4번 사항은 보안상 문제가 생길 수 있으므로 반드시 파이어폭스 부가기능 오류 코드 : ssl_error_rx_record_too_long 팁을 적용하기 바랍니다.

참고로 저는 아직 모질라 파이어폭스 v3.6을 사용하지 않고 있습니다. 파폭 3.6에서도 발생하는 현상인지 확인하신 분은 글을 좀 남겨 주십시오.

관련 문서

내부 문서

• 태그 '파이어폭스'
• 파이어폭스 부가기능 오류 코드 : ssl_error_rx_record_too_long

외부 문서

• 모질라 파이어폭스 (영어)
• 파이어폭스 부가기능 (영어)
• 웹메일 알림이 홈페이지

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

한컴오피스 베타버전 버그 27 - 유니코드 버그 3 및 글꼴 버그 1 - Unicode Full Set 지원??

ᄒᆞᆫ글2010 베타버전에서는 Unicode Full Set을 지원한다고 밝히고 있습니다. 자세한 사항은 한컴오피스2010 오픈베타 홈페이지에 있는 기능 설명서를 다운로드하여 읽어보기 바랍니다. 그런데 이때 Unicode Full Set은 무엇을 뜻할까요? 2009년 10월 1일 발표한 최신 유니코드 5.2일까요? 그게 아니라면 2008년에 발표한 유니코드 5.1? 2006년 발표한 5.0? 그게 아니면…? 저는 적어도 유니코드 5.0은 지원하리라 생각했습니다. 왜냐하면 한컴오피스2007이라는 제품이 있었기 때문입니다. 그런데 아니더군요. ᄒᆞᆫ글2010 베타버전은 유니코드 4.1도 제대로 지원하지 않았습니다.

벌레의 유형

ᄒᆞᆫ글 씨! ᄒᆞᆫ글에서 지원한다는 유니코드 버전 좀 알려주면 덧납니까? 사용자가 ᄒᆞᆫ글 프로그램에서 지원하는 유니코드 버전을 알기 위해 그 고생을 하도록 합니까?

개발자의 답변

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

벌레의 발견

일단 나는 한글 자모 영역만을 살펴보고는 ᄒᆞᆫ글2010 및 한컴오피스2010 베타에서 유니코드 5.2 또는 유니코드 5.1을 지원한다고 믿고 말았다. 조금만 더 신경을 썼더라면 전혀 그렇지 않음을 알았을 텐데, 지금 생각하면 참 어리석었습니다.

유니코드 지원이란?

유니코드 지원은 크게 두 가지로 나뉩니다. 하나는 유니코드 코드표를 지원한다는 뜻입니다. 다른 하나는 유니코드를 화면에 나타낼 수 있게 한다는 뜻이지요. 워드프로세서를 제외한 오피스 프로그램이라면 당연히 코드표만 지원하면 완벽한 지원으로 볼 수 있습니다. 그러나 워드프로세서는 사정이 다릅니다. 코드표로는 아무런 의미도 없기 때문입니다. 워드프로세서란 문서를 실제로 출력해 주어야만 그 기능이 완성된다는 점에서 보면 ᄒᆞᆫ글2010은 유니코드를 제대로 지원하지 못하고 있습니다.

'한컴오피스의 유니코드 지원'을 말한 사람은?

이런 헛소문을 퍼뜨린 사람이 누구인지를 검색해 보았습니다. 검색하다가 보니 제 블로그가 상당히 많이 눈에 띄더군요. 헛!

각설하고 우선 한글과컴퓨터 한컴오피스2010 오픈베타 홈페이지에서 그 헛소리를 발견했습니다. 오호 애재라!

함초롬돋움과 함초롬바탕 글꼴이 가독성과 미려함이 좋습니다. 하지만 Unicode Full Set을 지원하지는 않습니다. 검증은 아래에서 하기로 하고 다른 웹페이지도 살펴보죠.

베타뉴스의 한컴오피스 2010 Beta 설명에서도 Unicode Full Set을 지원한다고 그러네요.

조금 다른 기사도 있습니다. 이투데이의 한컴, 오피스시장 점유율 20%에 도전한다라는 기사인데, 여기에 유니코드 글꼴에 대한 내용이 나옵니다.

이렇게까지 언론에서 말할 정도라면… 애초에 Unicode Full Set 지원을 말한 사람은 한글과컴퓨터사라는 뜻이겠죠? 더구나 유니코드를 지원하는 글꼴은 한컴오피스2010 베타에서 새롭게 제공하는 함초롬체라는 뜻이고요. 그렇지 않습니까?

'한컴오피스의 유니코드 지원'은 Unicode Full Set일까?

'한컴오피스의 유니코드 지원'은 Unicode Full Set일까요? 유감스럽게도 최신 버전은 아닙니다. 다시 말해 유니코드 5.2를 Full Set으로 지원하지는 않는다는 뜻입니다.

이것은 위키백과의 한컴 2바이트 코드 문서에 나타난 사항을 검증하면서 발견하였습니다(ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1 참조). 그 글에서 밝혔듯이, 이 문자표와 관련한 사항은 또 다른 판도라 상자였습니다.

위키백과의 한컴 2바이트 코드 문서에서 틀린 점을 발견했는데, 그 부분 덕분에 이 버그를 발견하게 되었습니다.

위 화면에서 빨간색 네모로 묶은 부분은 틀린 내용입니다. 그래서 [출처 필요]라는 출처를 요구하는 태그가 붙어 있습니다(제가 붙였습니다. ^.^v). U+470C의 한자는 䜌이며, 이것은 유니코드 5.2에서 옳은 표기입니다. 여기에서 중요한 부분은 또 다른 유니코드 번호인 U+9FBB와 그 아래에 파란 밑줄 부분입니다. U+9FBB에 해당하는 한자가 나타나지 않았는데, 이는 화면 글꼴인 굴림 글꼴에 저 번호에 해당하는 글자가 없기 때문입니다. 다르게 말하면, 아니 조금 심하게 말하면, 굴림 글꼴은 유니코드를 제대로 지원하지 못하는 글꼴이라는 말이 됩니다. 그렇다면 ᄒᆞᆫ글은 저것을 잘 나타낼까요? 파란 밑줄 부분이 사실이라면 저 한자는 나타낼 수 없습니다.

일단 유니코드 문자표는 없나요? 문서에서 부수별 한자 색인 목록이 있는 PDF 파일(RSIndex.pdf 파일)을 아도비 리더에서 불러오겠습니다.

그런데 U+470C 문자와 U+9FBB 문자가 서로 모양이 같습니다. 다만 U+9FBB가 지나치게 위로 치우쳐 있습니다. 이런 경우는 저 문자가 실제로 문자로 쓰이는 게 아니라, 다른 문자의 일부로써 쓰일 때 주로 나타나는 현상입니다.

실제 문자표 파일(CodeCharts-MulticolHan.pdf 파일)에서는 어떻게 나타나는지 살펴봅시다.

U+9FBB가 지나치게 위로 배치되어 있습니다. 그런데 그 앞에 나온 문자들도 만만치 않습니다. 위로 치우치거나 왼쪽으로 치우쳐 있습니다. 이 말은 이 문자들이 정상적인 글자로 쓰이지 않고 다른 용도로 쓰인다는 추측을 가능하게 합니다. 이는 곧 위키백과의 한컴 2바이트 코드 문서의 마지막 부분 그림에 나타난 빨간 네모 안의 내용이 틀렸다는 근거이기도 하지요.

이제 앞서 언급한 ᄒᆞᆫ글이 저 문자를 잘 나타내는지를 살펴보겠습니다. 위키백과의 한컴 2바이트 코드 문서의 마지막 부분 그림의 파란 밑줄 부분이 사실이라면 저 한자는 나타낼 수 없고, 그것이 거짓이라면 나타낼 수 있어야 합니다.

문자표를 불러 유니코드 문자표 탭에서 9FBB를 찾습니다.

ᄒᆞᆫ글2010의 문자표는 코드 포인트 U+9FBB에 해당하는 글자를 나타내지 못하고 있습니다.
이때 코드 포인트는 흔히 코드 값으로 부르는 것의 정식 명칭인데, 유니코드에서 다른 글자와 겹치지 않는 그 글자만의 고유값을 가리킵니다. 현재까지 유니코드에 배정된 코드 포인트는 모두 111만4112개입니다.

단순히 글꼴에서 표시해 주지 못할 뿐이라는 생각도 할 수 있습니다. 하지만 저 문자표의 글꼴은 현재 커서가 놓인 곳의 글꼴을 따르게 되어 있습니다. 그리고 지금 커서가 놓인 곳은 글꼴은 함초롬돋움 글꼴입니다.

아, 함초롬돋움과 함초롬바탕은 다를 수 있다고요? 그럼 바꿔 보겠습니다.

그렇다면 다른 글꼴도 시험해 보겠습니다. 유명한 셰어웨어 유니코드 글꼴인 Code2000로 바꾸겠습니다. 물론 함초롬체도 유니코드 글꼴입니다.

참고로 저는 아직 Code2000 라이선스를 갖고 있지 않습니다. 다시 말해 비등록 사용자인 셈이지요. 이 글을 쓰기 위해 다운로드해서 설치했습니다.

위 그림에서 자주색 테두리를 친 부분은 유니코드 4.1에서 추가된 부분입니다. 다시 말해 2005년 3월 31일에 이미 유니코드 표준이 된 글자입니다. 그렇다면 이투데이 기사의 내용대로 함초롬체 개발에 2년이 소요되었더라도 이미 추가했어야 할 글자라는 뜻입니다. 참고로 파란색 테두리를 두른 부분은 유니코드 5.1에서 추가된 부분입니다.

한자의 모양을 화면에 나타내지 못한다고 해서 유니코드를 지원하지 않는다는 말은 잘못되었다는 의견도 있을 수 있습니다. 그러나 저 글자 가운데 어떤 글자도 ᄒᆞᆫ글의 한자 사전에서 음과 훈, 한어병음 가운데 어느 하나도 나타나 있지 않습니다. 물론 음과 훈은 정해져 있지 않고, 한어병음도 정해져 있지 않을 수 있습니다. 그러나 단 하나, 정해져 있는 것이 있습니다. 바로 획수입니다.^[각주:1]

도대체 무엇을 근거로 Unicode Full Set을 지원한다는 말을 했을까요?

벌레 분석

Unicode Full Set을 지원한다는 말은 그저 광고 문구로만 볼 수 없습니다. 상당히 많이 기대한 ᄒᆞᆫ글의 유니코드 지원이지만, 결과적으로 한글 자모만의 지원이라는 생각이 듭니다. 물론 한국에서 개발한 프로그램이므로 한글 자모만 지원되어도 충분할 수 있습니다. 그러나 그것이 Unicode Full Set 지원을 뜻하지는 않는다고 생각합니다.

관련 벌레

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

• ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• ᄒᆞᆫ글2010 베타버전의 문자표 버그 2
• ᄒᆞᆫ글2010 베타버전과 유니코드 버그 2 및 문자표 버그 3

관련 문서

내부 문서

• [벌레와 팁/팁] - 유니코드 문자표는 없나요?
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전의 문자표 버그 2
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 2 및 문자표 버그 3
• [일기] - 난 판도라 상자를 열었을까?

외부 문서

• 한글과컴퓨터사 홈페이지
• 한컴오피스2010 오픈베타 홈페이지
• 한국어 위키백과
  • 옛한글
  • 유니코드
  • 한컴 2바이트 코드
  • 유니코드 9000~9FFF
• 영어 위키백과
  • Unicode
  • Unicode font
  • Code point
• Code2000 홈페이지
• Unicode 5.2
• Ohyecloudy's S2 블로그 :: Unicode - (1) 개념
• 자유설계: 나베르 블로그의 2차지점 :: 로마자 확장 (제어 문자 1) (U+0080~U+00FF)
• 나모의 노트 - 유니코드

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

한컴오피스 베타버전 버그 26 - 유니코드 버그 2 및 문자표 버그 3

ᄒᆞᆫ글2010 베타버전을 사용하다 보니 문자표와 관련하여 이해하기 힘든 동작을 발견했습니다. 뭐, 문자표와 관련한 벌레 가운데 이해할 수 있는 벌레가 하나도 없었지만요.
게다가 이 벌레는 가장 먼저 발견(2009년 12월 30~31일경 발견)했음에도 그 벌레 발생의 규칙성을 알지 못해서 버그 리포팅을 하지 못하고 있었습니다.

벌레의 유형

ᄒᆞᆫ글 씨! 똑같은 글자이건만, 앞서 불러온 문자에 따라, 다르게 취급할 필요가 있나요? 그리고 유니코드 4자리에게서 안 나타나는 벌레가 왜 유니코드 5자리에서 나타나서 사람을 괴롭히게 만들어요?

개발자의 답변

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

벌레의 발견

이 벌레의 증명에는 동영상을 사용하지 않기로 했습니다. 글쇠 하나만 잘못 눌러도 ᄒᆞᆫ글에서 이 벌레를 만날 수 없습니다. 결국 ᄒᆞᆫ글 프로그램을 다시 실행해야 했습니다. 뭐 지금은 정확하게 이 벌레를 나타나게 만들 수 있지만 조금 귀찮습니다. 또한 동영상이 없어도 설명하는 데는 지장이 없습니다.

그리고 이 벌레는 앞서 설명했듯이 4자리의 유니코드에서는 나타나지 않습니다. 또한 이전에 사용했던 유니코드 문자가 5자리 이상이라면 이 벌레는 나타나지 않습니다.

준비 : 이전에 사용한 문자표의 문자 영역 재설정

아무 문자, 특히 영문자(로마자; 라틴 문자)나 숫자를 골라서 영역을 설정한 뒤에 문자표를 부릅니다. 이때 영역(블럭)을 설정의 방향은 상관이 없습니다. 이전에 사용한 문자표의 문자 영역 재설정하는 작업이 이 벌레를 발견하는 데에 매우 중요합니다.

위와 같은 화면에서 화면에 보이는 숫자 가운데 하나를 블럭 지정하여 문자표를 불렀습니다(단축키는 Ctrl+F10). 참고로 예제 문서는 Unicode-Test-2.hwp입니다.

앞서 입력한 문자가 유니코드 4자리일 때

이번 테스트에 이용할 문자는 준비 화면에서 보이는 한자들입니다.

위 그림처럼 한자 앞에 커서를 두고 블럭을 설정합니다. 이미 앞서 문자표로 불러왔던 문자의 유니코드 번호가 4자리였습니다.^[각주:1]

위 그림처럼 블럭을 설정한 뒤 문자표를 불러옵니다. 단축키 사용해 주십시오. 지난번 그 벌레가 나오면 감당 못합니다. 단축키는 Ctrl+F10입니다.

저 번호가 맞다고 생각하지는 않겠죠? 참고로 U+0208의 문자는 다음과 같습니다.

어이, ᄒᆞᆫ글 씨! U+0208는 한자가 아니라 라틴 확장-B라는데요.

앞서 입력한 문자가 유니코드 5자리 이상일 때

앞서 입력한 문자가 유니코드 5자리 이상인 상황은 만들기 쉽습니다. 그냥 한자에 커서를 두고 블럭 설정 화면에 보이는 한자를 골라 문자표를 두 번 연속으로 불러 내면 됩니다.

거참, 처음부터 이렇게 제대로 나오면 좀 좋습니까?

벌레 분석

무슨 까닭에서인지 맨 처음에 유니코드 번호 다섯 자리 이상인 문자를 제대로 인식하지 못한 듯싶습니다.

관련 벌레

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

• ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• ᄒᆞᆫ글2010 베타버전의 문자표 버그 2

관련 문서

내부 문서

• [벌레와 팁/팁] - 유니코드 문자표는 없나요?
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전의 문자표 버그 2
• [일기] - 난 판도라 상자를 열었을까?

외부 문서

• 한글과컴퓨터사 홈페이지
• 한컴오피스2010 오픈베타 홈페이지
• 한국어 위키백과
  • 옛한글
  • 한컴 2바이트 코드
  • 유니코드
  • 유니코드 9000~9FFF
• 영어 위키백과
  • Unicode
  • Unicode font
  • Code point
• Code2000 홈페이지
• Unicode 5.2
• Ohyecloudy's S2 블로그 :: Unicode - (1) 개념
• 자유설계: 나베르 블로그의 2차지점 :: 로마자 확장 (제어 문자 1) (U+0080~U+00FF)
• 나모의 노트 - 유니코드

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

대나무 키보드 이벤트에 참가하면서 겸사겸사 참가했습니다. ^^a

역시 밑져야 본전! 하나만 걸려라! 이런 생각으로 했습니다. 키보드는 새거를 갖고 있지만, 마우스는 조금 오래된 물건이거든요. 게다가 집에 컴퓨터는 3대이지만, 역시 마우스는 2개뿐이라서.

흠흠 공짜라면 양잿물도 마신다는 거지근성으로 똘똘 뭉쳐 있기에 염치 불구하고 마우스에도 눈독을 들여 봅니다.

관련 페이지 : http://usb.brando.com/usb-bamboo-keyboard-mouse_p01179c034d15.html

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

흠흠, 대나무 키보드가 탐이 나서 이벤트에 응모했습니다. 사실 집에 컴퓨터는 3대인데, 키보드가 2개뿐이거든요. ^^a 뭐, 겸사겸사 응모한 거죠. 당첨되면 다행, 안 되어도 본전! 게다가 지금 있는 키보드도 새것임에도 불구하고 키감이 영 안 좋습니다. 삼보(TG, Trigem)라는 이름에 속았다는 생각이 절로 드는 그런 키보드죠. 그래서 키감이 부드럽다는 이 키보드가 더욱 갖고 싶네요.

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

나는 ᄒᆞᆫ글을 자주 쓰는데, 가끔 ᄒᆞᆫ글에 없는 한자를 볼 때면 난감하기 그지 없습니다. 또 가끔이지만 유니코드의 코드 목록을 알고 싶어하는 사람이 있는데, 그럴 때도 참 난감합니다. 뭐, 난감한 이유는 그 답이 어려워서가 아니라 한글 자료가 부족하기 때문입니다. 그런데 실상 그 자료를 보면 한국어를 꼭 알 필요는 없음을 알게 됩니다. 코드표 또는 문자표라는 것은 그저 글자만 죽 나열한 것이기 때문입니다.

유니코드의 코드표 - 한 글자 찾기

유니코드의 문자 목록은 당연한 말이겠지만, 유니코드 컨소시엄 홈페이지(http://www.unicode.org/)에서 구하면 됩니다. 그런데 그걸 알려주면 영어라고 싫어하거나 화를 내는 사람이 있습니다. 앞서 말한 "난감한 이유"가 이것입니다.

각설하고 유니코드 문자 목록이 기록된 문서를 찾아가 봅시다.

홈페이지에 접속한 뒤에는 목적을 정확히 정해야 합니다. 이 사이트에는 매우 많은 정보가 있어서 정확한 목적에 맞는 자료를 찾기가 오히려 쉽지 않기 때문이죠. 일단 문자 목록 또는 코드표(문자표)만을 찾아봅시다.

코드표를 찾는 이유가 그저 한두 글자를 찾을 생각이라면 그냥 코드표(Code Charts) 페이지를 찾으면 됩니다.

유니코드 컨소시엄 홈페이지에서 The Unicode Standard를 클릭, Code Charts를 클릭합니다.

위와 같이 언어별로 코드 영역별로 구분이 되어 있습니다. 오른족에 보이는 CJK로 시작하는 부분이 바로 한자에 대한 유니코드입니다. CJK는 Chinese, Japanese, Korean을 합쳐서 부르는 명칭인데, 세 나라 언어에서 공통된 부분이 바로 한자입니다. 친절하게 괄호로 묶어서 Han이라고 표기해 주었죠.

만약 코드 번호를 알고 있다면 맨 위에 보이는 Look up by character code: 라는 부분에 입력하면 됩니다. 시험삼아 004B를 찾아 보았습니다. 004B는 영문자 K 입니다. 유니코드에서는 Latin(라틴 문자)으로 표기되어 있습니다.

위의 화면은 정상적으로 찾아준 화면입니다. http로 시작하는 곳을 살펴보면, 우선 http://www.unicode.org/charts/PDF/U<입력한 코드 번호가 들어 있는 영역>.pdf 라는 형식을 가지고 있습니다. 그리고 그 뒤에 (0.4 MB)라는 형태로 pdf 파일의 용량을 표시하고 있지요.

• 참고 : PDF를 볼 수 있는 프로그램이 필요합니다. 위 화면에 나타난 Adobe Acrobat Reader 프로그램 등을 사용하면 됩니다.

그렇다면 존재하지 않은 유니코드 번호를 입력하면 어떻게 될까요? ᄒᆞᆫ글에서 가끔 나타나는 F로 시작하는 유니코드 주소를 입력해 보겠습니다. F0704를 입력하기로 하죠.

위 화면은 얼핏 보면 정상적으로 찾아주었다고 여겨집니다. 하지만 결정적으로 용량 부분이 특이합니다. 바로 (0.0 MB)이라고 되어 있지요. 펄 스크립트가 자동으로 생성해 주는 웹페이지이기 때문에 나타나는 현상으로 여겨집니다. 아무튼 저렇게 용량이 0.0 MB이면 파일이 없는 것이고, 따라서 그 번호를 가진 유니코드는 현재 존재하지 않습니다.

유니코드의 코드표 - 언어별 찾기

유니코드 문자표 페이지에서 자신이 자주 쓰는 언어의 코드표만 받아서 보면 됩니다. 클릭하면 다운로드가 되거나 웹브라우저에서 바로 볼 수 있습니다.

하나하나 받기 귀찮은 사람은 http://www.unicode.org/charts/PDF/ 라는 주소에서 플래시겟 등의 다운로드 관리자를 사용하여 몽땅 내려받을 수도 있습니다.

유니코드의 코드표 전체 찾기

유니코드 전체의 코드 번호 및 코드표를 찾고 싶다면 The Unicode Standart를 클릭한 뒤, 이어서 Latest Version을 클릭합니다. 그러면 현재 존재하는 가장 최신 버전의 웹페이지로 이동합니다.

여기에서 우리가 찾으려는 자료는 유니코드 코드표 전체입니다. 앞서 유니코드 문자표 페이지에서도 유니코드 코드표 전체를 보았습니다만, 여기에서 찾는 것은 그렇게 나뉜 자료가 아니라 한데 묶인 자료입니다. 그렇게 유니코드 문자가 한데 묶인 자료를 유니코드 캐릭터 데이터베이스(the Unicode Character Database (UCD))라고 부릅니다.

왼쪽에 있는 사항을 설명하자면 다음과 같습니다.

• (files) : 유니코드 표준 5.2.0의 최종 데이터 파일을 모아두었습니다. 우리가 찾으려는 파일도 여기에 있습니다. 세 개의 하위 디렉터리가 있는데, "ucd" 디렉터리는 UCD의 데이터 파일이 들어 있고, "charts" 디렉터리에는 유니코드 5.2.0 표준에 정확히 대응하는 코드표가 PDF 파일 형태로 들어 있습니다(The "charts" subdirectory contains an archival set of pdf code charts corresponding exactly to Version 5.2.0.). 마지막으로 "ucdxml" 디렉터리에는 UCD의 XML 버전이 들어 있습니다.
• (about) : UCD에 대한 대략적인 설명이 들어 있습니다.
• 5.2.0 Zipped files (for bulk download) : 유니코드 5.2.0 표준의 주요 부분으로 이루어진 Zip 파일을 다운로드합니다.

(files)을 클릭하여 디렉터리에 들어갑시다.

위 그림에서 charts를 클릭합니다. 이 모습은 웹브라우저마다 달라지므로 대충 비슷한 형태나 낱말을 찾아야 합니다.

위의 화면에 나타난 PDF 파일 3개가 전부입니다. 그런데 용량이 장난 아니게 큽니다. 이제까지 멀티미디어 파일이 아닌 일반 문서 파일이 저렇게 큰 것은 처음 봤습니다.

다운로드할 때 속도는 그리 빠른 편이 아니므로 느긋하게 기다려야 합니다. 실제 코드표에 해당하는 파일은 CodeCharts-MulticolHan.pdf 파일(71M, 한자 영역 데이터), CodeCharts-noHan.pdf 파일(15M, 한자 영역을 제외한 데이터)입니다. 이 두 파일은 무려 1천 쪽이 넘는 방대한 분량이므로 그냥 그러려니 하십시오. 그리고 RSIndex.pdf 파일(24M, 완벽한 유니한 부수별 한자 색인(Unihan Radical Stroke Index)) 파일입니다. 이것도 나름대로 쓸모가 있습니다.

이 파일을 모두 다 받아서 적당한 곳에 둔 뒤 PDF 파일 뷰어로 살펴보면 됩니다. 사용은 각자 알아서 하기 바랍니다. 저는 물가에 데려갈 수는 있어도 물을 떠먹일 재주는 없는 사람입니다.

덧붙이는 말

앞으로 이 코드표 파일을 참조하는 일이 생길 수도 있습니다. 그러므로 받아 두면 게시글을 읽는 데도 도움이 되리라 생각합니다. 그리고 PDF 뷰어 프로그램은 어도비 어크로뱃 리더가 가장 좋습니다. 물론 유니코드 컨소시엄에서 받은 자료만 본다면 다른 뷰어도 좋다. 하지만 현재까지 옛한글 등을 보기에는 가장 좋은 PDF 뷰어입니다. 단점은 지나치게 무거워서 자주 쓰기에는 여러 모로 부담이 되는 프로그램입니다.

관련 문서

내부 문서

• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전의 문자표 버그 2
• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• [벌레와 팁/버그] - 스프링노트 : 문자 인코딩 관련 사항

외부 문서

• 유니코드 컨소시엄 홈페이지
  • 코드표 페이지
  • 유니코드 5.2.0
• Adobe Acrobat Reader 프로그램

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

한컴오피스 베타버전 버그 25 - 문자표 버그 2

ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1 문서를 작성하며 ᄒᆞᆫ글2010 베타버전에서 검증하는 과정에서 문자표와 관련한 황당한 동작을 발견했습니다.

벌레의 유형

ᄒᆞᆫ글 씨! 똑같은 문자표 아이콘이건만, 왜 때와 장소에 따라 역할이 달라지나요? 언제나 변치 않는 녀석이 더 좋답니다.

개발자의 답변

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

벌레의 발견

일단 동영상 두 개를 보고 나서 설명하겠습니다.^[각주:1]

위 동영상(사례 1)은 ᄒᆞᆫ글 아래에 다른 프로그램이 없는 경우입니다.

위 동영상(사례 2)은 ᄒᆞᆫ글 밑에 다른 프로그램이 있는 경우입니다.

아무튼 두 경우 모두 리본 메뉴가 완전히 나타난 상태에서만 정상 작동하고, 리본 메뉴가 접힌 상태에서 메뉴를 클릭하여 임시로 펼쳤을 때에는 약간 이상한 동작을 하였습니다.

사례 1 살펴보기

일단 ᄒᆞᆫ글에서 한 글자를 선택하여 범위를 지정하고 문자표 보기(단축키는 Ctrl+F10)를 합니다. 그러면 범위를 지정한 글자를 문자표에서 찾아줍니다. 그런데 이 작업을 마우스로 아이콘을 클릭하거나 메뉴의 항목을 클릭함으로써 작동시켜 보았더니 위의 동영상에 나타난 벌레가 나타나더군요.

일단 앞서 다운로드한 그 문서(Unicode-Test-1.hwp)를 이용하여 봅시다. 아니면 직접 만들어서 시험해도 됩니다.

위 그림처럼 ᄒᆞᆫ글이 최상위에 위치한 경우의 반응을 먼저 보겠습니다.

위와 같이 한 글자를 블럭 지정합니다. 그 뒤에 입력 메뉴로 마우스를 가져갑니다.

위의 확대 그림에서 1번 쪽(글자 부분)을 클릭하면 리본 메뉴가 임시로 나타나고, 2번 쪽(▼ 표시 부분)을 클릭하면 풀다운 메뉴가 나타납니다.

위 그림에 나타난 바와 같이, (1) 1번 쪽(글자 부분)을 클릭하여 리본 메뉴를 임시로 불러오고, (2) 문자표 아이콘의 아랫부분에 있는 문자표라는 글자를 클릭합니다. 아래 그림에서는 2번의 화살표가 가리키는 곳입니다. 실수로 1번의 아이콘을 클릭하면 문자표를 이용하여 입력했던 맨 마지막 문자(그림에서는 네모로 표시된 j자 비슷한 모양인데, 이는 U+01D457 ^[각주:2]에 해당한다.)를 입력하게 되므로 조심해야 합니다.

(3) 마지막으로 맨 아래에 보이는 문자표...라는 부분을 클릭합니다.

위와 같은 과정을 거쳐서 정확히 실행했다면 문자표가 한 번 나타났다가 번개처럼 사라지는 희한한 현상을 목격할 수 있습니다.

그밖에 다른 점이 하나 더 있습니다.

제목 표시줄의 글자가 문자표를 실행하기 전에는 진하고 밝은 색이었습니다. 그런데 문자표를 실행한 뒤에는 연하고 어두운 색으로 바뀌었습니다.

이는 ᄒᆞᆫ글2010 프로그램 창이 마우스 포커스를 잃어버렸음을 뜻합니다. 다르게 말하면, 활성 상태의 ᄒᆞᆫ글2010 창이 비활성화되었음을 뜻합니다. 쉽게 말하면, ᄒᆞᆫ글 프로그램 창의 상태가 작업 중에서 작업 중이 아닌 상태로 바뀌었다는 뜻이지요.

• 참고 : 위의 과정에서 한 문자를 블럭으로 지정할 필요는 없습니다. 위의 과정은 이 벌레를 발견한 과정을 재현하기 위해 블럭을 지정했으며, 블럭 지정을 하지 않아도 이 벌레는 나타납니다.

사례 2 살펴보기

사례 2에서는 ᄒᆞᆫ글 프로그램 창 아래에 다른 프로그램 창이 존재할 경우입니다. 이 경우도 앞서 말한 대로 굳이 글자에 블럭을 지정할 필요는 없습니다.

잠시 그대로 놔두자 포커스를 완전히 잃어버리고, ᄒᆞᆫ글 창 아래에 있던 메모장2(Notepad2) 프로그램이 마우스 포커스를 가져갑니다.

벌레 분석

무슨 이유에서인지 모르겠으나, 리본 메뉴가 활성 상태가 아닌, 임시로 리본 메뉴를 불러온 상태에서는 문자표를 정상적으로 호출하지 못한다고 여겨집니다. 아울러 문자표를 정상적으로 불러오지 못한 경우에는 문자표의 포커스 상태(또는 Z인덱스 상태)가 아닌 ᄒᆞᆫ글 프로그램 창의 포커스 상태(또는 Z인덱스 상태)를 수정해 버린다고 여겨집니다.

관련 벌레

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

• ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1

관련 문서

내부 문서

• [벌레와 팁/버그] - ᄒᆞᆫ글2010 베타버전과 유니코드 버그 1 및 문자표 버그 1
• [일기] - 난 판도라 상자를 열었을까?

외부 문서

• 한글과컴퓨터사 홈페이지
• 한컴오피스2010 오픈베타 홈페이지
• 한국어 위키백과
  • 옛한글
  • 한컴 2바이트 코드
  • 유니코드
  • 유니코드 9000~9FFF
• 영어 위키백과
  • Unicode
  • Unicode font
  • Code point
• Code2000 홈페이지
• Unicode 5.2
• Ohyecloudy's S2 블로그 :: Unicode - (1) 개념
• 자유설계: 나베르 블로그의 2차지점 :: 로마자 확장 (제어 문자 1) (U+0080~U+00FF)
• 나모의 노트 - 유니코드

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

흠... 다시는 볼 일이 없으리라 생각했던 버그가 발견되어 하루 종일 동영상 인코딩만 하다가 끝났습니다.

XviD 코덱을 이용하여 동영상을 인코딩하다가 보면 간혹 지정한 용량과 만들어진 동영상의 용량이 달라지는 일이 있지요. 그럴 때는 참 난감합니다.

아무튼 그 버그 때문에 하루 종일 인코딩만 하고 말았습니다. ^^a

지금부터 오늘 올리려 했던 버그 리포팅 문서를 작성해야 하는데, 오늘 안에 끝나려는지 모르겠습니다. 이미 외우다시피하고 있으니 내용만 작성하면 되지만, 앞으로의 일은 아무도 모르지요. ^^a

유니코드에 이어 오픈 동영상까지 제 속을 박박 긁고 있습니다. 아무튼 잘 되어야 할 텐데 말입니다.

덧붙이는 말

이 글은 일종의 짤방입니다.

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