'벌레와 팁'에 해당되는 글 124건

  1. 2011.01.01 KTF! 사람 놀리냐?
  2. 2010.06.17 SBS 뉴스 어플 - 3G 망으로는 동영상을 볼 수 없습니다 (2)
  3. 2010.05.26 이매진으로 스캔하기 (4)
  4. 2010.04.09 오류 메시지를 텍스트로 복사하기
  5. 2010.04.06 멀티 부팅 - GRUB 및 boot.ini 파일, 플로피 이미지 이용 (2)
  6. 2010.04.02 텍스트큐브 주석 달기 (1)
  7. 2010.03.25 태터툴즈의 스킨 이미지 주소 (5)
  8. 2010.03.25 파이어폭스 쿠키 오류
  9. 2010.03.22 오픈캡처 파일 열기 버그
  10. 2010.03.21 오픈캡처 업데이트
  11. 2010.03.04 오픈캡처 문서 닫기 버그 (2)
  12. 2010.02.22 아크로에디트, 파일 내용 변경 버그
  13. 2010.02.21 함초롬체의 글꼴 높이 문제
  14. 2010.02.16 미완성 떠다니는 메뉴 - 버그 때문에 (1)
  15. 2010.02.13 블로그 꾸미기에 유용한 웹사이트 (2)
  16. 2010.02.07 HTML 코드를 더듬거릴 때는 흔적을 남기라.
  17. 2010.02.06 ᄒᆞᆫ글 씨! 블로그는 XHTML을 따릅니다.
  18. 2010.02.05 ᄒᆞᆫ글에서 블로그로 올리기와 주석 표기 문제
  19. 2010.02.04 프로그램과 유니코드
  20. 2010.02.03 "Haansoft PDF"의 성능은? (2)
  21. 2010.02.01 한컴오피스2010 베타버전의 PDF 출력 버그
  22. 2010.01.31 한컴오피스 베타버전과 함초롬 글꼴의 모양 (2)
  23. 2010.01.30 ᄒᆞᆫ글2010 베타버전과 옛한글 표기 오류
  24. 2010.01.30 오피스 설치 파일에서 글꼴 파일만 빼내기 (2)
  25. 2010.01.29 파이어폭스 오류 코드 - ssl_error_rx_record_too_long
  26. 2010.01.28 ᄒᆞᆫ글2010 베타버전과 유니코드 3 - Unicode Full Set 지원?? (3)
  27. 2010.01.27 2010년 1월 27일자 Yslow 발표
  28. 2010.01.27 ᄒᆞᆫ글2010 베타버전과 유니코드 버그 2 및 문자표 버그 3
  29. 2010.01.26 2010년 1월 26일자 Yslow 문제
  30. 2010.01.25 유니코드 문자표는 없나요?

KTF! 사람 놀리냐?

15분 전까지 로그인까지 했는데...!?

21시부터 점검이라고?

21시부터 점검이라고?

사람을 병신으로 알아? 난 23시 50분 넘어서 로그인 했단 말야!

KTF! 고객을 데리고 장난 치냐?!

Trackback 0 Comment 0

SBS 뉴스 어플 - 3G 망으로는 동영상을 볼 수 없습니다

아이폰 어플 가운데 SBS 뉴스를 상당히 자주 보는 편이다. 뉴스도 SBS의 별명인 '시방새'라고 할 만큼 엽기적이지만, 가끔 황당한 보도를 하기 때문에 그걸 보는 재미가 나름대로 쏠쏠하기 때문이다.

황당한 보도란...

  • 애플 발표일(WWDC)에 S사의 스마트폰이 발표된 일을 두고, "S사 스마트폰 발표에 맞추어 발표된..." ?? 도대체 누가 누구를 따라했다는 말인지??
  • 같은 뉴스에서... 세계 제1의 스마트폰은 애플 아이폰이라고? 현재 세계 1위는 블랙베리이다. 아이폰은 2위.

뉴스에서조차 벌레 먹은 기사를 내보내는 SBS이지만, 그래서 더욱 재미있지만, 이번 벌레는 절대 재미있지 않았다.

벌레의 유형

굳이 유형을 정의한다면 다음과 같다.

너는 짖어라, 나는 내 갈 길을 가련다

개발자의 답변

SBS 뉴스 어플 웹페이지에 지난 6월 11일에 버그 리포팅을 하였지만, 개발진이 그것을 보는지 안 보는지 알 수 없다.

아무튼 7일째인 오늘까지 이 버그는 그대로 남아 있다. 결국 SBS 뉴스 웹페이지아이폰 어플 지원 기사에도 버그가 있다는 댓글을 남겼다.

벌레의 발견

발견이고 자시고, 6월 10일 업데이트를 하기 전까지 잘 보이던 뉴스 동영상이 그 업데이트 이후로 지금까지 보이지 않는다.

벌레의 원인

모릅니다. 제발 좀 누구 아는 사람은 좀 알려주기 바랍니다.

관련 벌레

이 벌레와 관련이 있는 벌레는 아직 없습니다.

관 련 문서

내부 문서

외부 문서

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

Trackback 0 Comment 2

이매진으로 스캔하기

자주 가는 블로그-아니다. 정정! 눌러 사는 블로그, 도아의 세상사는 이야기이매진에서 스캔하는 법을 물어오신 분이 있다.

역시! 모르면 갑갑하다.

역시! 모르면 갑갑하다.

준비

당연한 말이겠지만, 스캐너를 갖고 있어야 합니다. 그것을 컴퓨터에 설치하고, 장치 드라이버도 설치해 두어야 합니다.

내 경우는 지난 겨울에 옥션에서 1만 원에 사서 1만5천 원 주고 고친 스캐너다. 모델명은 이따가 나오니 지금은 비밀!

그리고 가장 중요한 이매진 프로그램을 받아서 설치합니다. 천세진 님 홈페이지에서 받자. 현재 안정버전은 1.0.7 버전이지만, 저는 1.0.8 버전을 사용 중입니다. 스캔 기능은 두 버전에서 차이가 없습니다.

스캔하기

그래픽 프로그램에서 스캐닝 또는 디지털 카메라와 관련이 있는 메뉴는 TWAIN 또는 WIA와 비슷한 이름을 갖습니다. 이때 스캐너뿐만 아니라 디지털 카메라에도 적용된다는 사실을 알아두면 나중에 쓸데가 있을 수도 있습니다.(없으면 말고!)

이매진의 스캔 관련 메뉴

이매진의 스캔 관련 메뉴 (빨간색 네모 부분)

장치 설정

일단 장치와 관련한 설정을 합니다.

이매진의 스캔 관련 메뉴 그림에서 TWAIN 원본 선택... 부분을 클릭하면 아래와 같은 대화상자가 나타납니다.

원본 선택 대화상자

원본 선택 대화상자

이 대화상자는 윈도API에서 일률적으로 불러오는 것 같습니다. 다른 프로그램에서도 원본 선택(또는 장치 선택) 메뉴를 선택하면 항상 이 대화상자를 불러옵니다. 대화상자 이름도 안 달라집니다. ㅡㅡ;;

게다가 위 대화상자에서 보이는 두 항목은 같은 장치입니다. 하나는 TWAIN, 다른 하나는 WIA일 뿐이죠.

볼 거 다 봤으면 선택 단추를 클릭합니다.

스캔하기

이제 진짜로 스캔을 합니다. 파일 메뉴를 호출합니다.

메뉴

TWAIN 원본 가져오기(Q)... 메뉴

TWAIN 원본 가져오기(Q)... 항목을 클릭합니다.

이러면 각자 알맞은 스캐닝 프로그램을 불러옵니다. 스캐너마다 방식이 다르니 여기에서는 생략합니다.

스캐닝

스캐닝한 저것은 무려 윈도98 업그레이드... ^^a

다만 스캐닝 프로그램은 대부분 스캐너 드라이버와 함께 설치됩니다. 그러므로 각자 익히는 수밖에 없습니다.

관련 문서

내부 문서

외부 문서

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

Trackback 0 Comment 4

오류 메시지를 텍스트로 복사하기

저는 버그 리포팅를 자주 올립니다. 뭐, 요즘에야 아주 뜸하지만, 블로그에는 현재 버그 리포팅 글이 가장 많습니다.
가끔 스크린 캡처가 힘들 때도 있는데, 그럴 때면 그 내용이 되는 텍스트라도 복사할 수 있었으면 할 때가 많답니다.
전에 본 기억이 있는데, 도대체 기억이 나지 않았는데, 오늘 새벽 다시 찾았습니다.
내용 복사(이른바 '펌') 금지이기 때문에 링크로 대신합니다.
Trackback 0 Comment 0

멀티 부팅 - GRUB 및 boot.ini 파일, 플로피 이미지 이용

  • 주의 : 이 작업에서 사용하는 boot.ini는 윈도에서 매우 중요한 파일이므로 작업하기 전에 백업을 해 두기 바랍니다.

아는 사람으로부터 GRUBboot.ini 파일을 이용하여 멀티 부팅을 구현해 달라는 요청을 받았습니다. 그런데 제가 리눅스를 쓸 때를 제외하고는 한 번도 GRUB를 쓴 적이 없었다는 점을 깨달을 수 있었습니다. 심지어 boot.ini 파일에 대해서도 정확히 알지 못하고 있었습니다.

그래서 이번에 GRUBboot.ini 파일 및 플로피 이미지 파일을 이용하여 멀티 부팅을 구현하기로 했습니다.

작업 파일 준비#

일단 작업에 필요한 파일은 따로 준비할 것이 거의 없습니다. 다만 멀티부팅을 구성할 때 쓰일 플로피 이미지 파일은 따로 준비해야 합니다. 없다면 직접 만들거나 인터넷의 부트 플로피 이미지 웹사이트(http://www.bootdisk.info/)에서 구할 수도 있습니다. 제 경우는 PC 방에 있던 파일을 구할 수 있었습니다.

그림 1. PC방에서 구한 고스트 도구

그림 1. PC방에서 구한 고스트 도구

위 그림과 같은 유틸리티에서 플로피디스크 부트 이미지 파일을 빼낼 수 있었습니다. 빼낸 파일은 각각 용도에 따라 이름을 지정해 주었습니다. 참고로 이 프로그램은 code_R1 님의 작품으로 여겨집니다.

위의 그림 1에서 나온 6개의 메뉴는 각각 플로피 이미지 파일 한 개를 가리키며, 그 목록과 쓰임은 다음과 같습니다.

[code shell; tab-size:12; smart-tabs: true]back1H2P.ima    - 첫 번째 하드의 첫 번째 파티션을 첫 번째 하드의 두 번째 파티션의 루트 디렉터리에 GHOST.GHO라는 이름으로 저장합니다. back2H1P.ima    - 첫 번째 하드의 첫 번째 파티션을 두 번째 하드의 첫 번째 파티션의 루트 디렉터리에 GHOST.GHO라는 이름으로 저장합니다. rest1H2P.ima    - 첫 번째 하드의 두 번째 파티션의 루트 디렉터리에 있는 GHOST.GHO 파일에서 첫 번째 하드의 첫 번째 파티션으로 복구합니다. rest2H1P.ima     - 두 번째 하드의 첫 번째 파티션의 루트 디렉터리에 있는 GHOST.GHO 파일에서 첫 번째 하드의 첫 번째 파티션으로 복구합니다. ghostx.ima     - 단순히 고스트 프로그램을 실행해 주는 역할만 합니다. pqmagic.ima     - 파티션 매직 프로그램을 실행해 줍니다.[/code]

이 플로피 이미지를 이용하여 GRUB 메뉴를 구성하겠습니다. 작업에 앞서 위의 플로피디스크 이미지 파일을 c:\windows 폴더에 복사합니다.

boot.ini 파일에 대하여#

boot.ini 파일에 대한 전반적인 내용은 Microsoft 고객지원 웹페이지(http://support.microsoft.com/)에서 다음 두 페이지를 살펴보기 바랍니다.

그밖에 QAOS.com 사이트에서 다음과 같은 여러 페이지에서도 정보를 구할 수 있습니다.

boot.ini 속성 바꾸기#

boot.ini 파일을 찾을 수 없을 때에는 DOS에서 숨김 파일 보기 글을 참조하여 찾습니다. 다만 여기에서는 그 문서를 편집해야 하므로 명령 프롬프트를 열어야 합니다.

boot.ini 파일을 건드린 적이 없다면 이 파일은 읽기전용/숨김/시스템 속성을 가지고 있습니다. 이 세 속성이 없어야만 편집하여 저장할 수 있습니다. 명령 프롬프트를 연 뒤에 다음과 같이 입력하면 됩니다.

[code shell]attrib -r -h -s c:\boot.ini[/code]

대부분 위와 같이 하면 boot.ini 파일을 편집하여 저장할 수 있는 상태가 됩니다. 이것을 그림으로 나타내면 다음과 같습니다.

그림 2. boot.ini 파일의 속성을 바꾸는 명령 프롬프트 화면

그림 2. boot.ini 파일의 속성을 바꾸는 명령 프롬프트 화면

boot.ini 설명#

[code shell][boot loader] timeout=30 default=multi(0)disk(0)rdisk(0)partition(1)\WINDOWS [operating systems] multi(0)disk(0)rdisk(0)partition(1)\WINDOWS="Microsoft Windows XP Professional" /noexecute=optin /fastdetect[/code]

위의 코드에서 [boot loader] 구역의 default 항목의 값이 [operating systems] 구역의 항목과 비슷함을 알 수 있습니다. 바로 multi(0)disk(0)rdisk(0)partition(1)\WINDOWS라는 부분이 완전히 동일한데, 그것은 이른바 ARC 경로입니다. 그 설정에 대해서는 ARC 경로 이해하기 글을 참고하기 바랍니다. 확실한 것은 그 ARC 경로가 가리키는 위치에서 윈도의 시동 파일을 불러와서 부팅을 해준다는 점입니다.

[boot loader] 구역의 값에서 timeout은 멀티 부팅을 구성했을 때 부트 메뉴를 보여주는 시간을 정합니다. 윈도를 설치하고 만지지 않았다면 30(곧 30초를 가리킵니다)이라고 되어 있습니다.

그 아래 default 항목은 [operating systems] 구역에서 기본으로 불러올 부트 메뉴를 지정합니다.

[operating systems] 구역은 실제로 부팅에 이용할 부트 메뉴를 구성합니다. 현재는 하나뿐이기 때문에 30초라고 부트 메뉴를 보여주는 시간을 지정했음에도 아무것도 보여주지 않고 그냥 부팅합니다. 여기에 부트 메뉴를 추가하면 멀티 부트가 이루어집니다.

또한 [operating systems] 구역의 항목은 한 줄에 하나의 메뉴를 구성합니다. 엔터를 치면 다른 줄로 인식하므로 주의해야 합니다.

GRUB 설치#

GRUB 프로그램 파일 구하기#

윈도XP에서 GRUB을 설치하려면 우선 프로그램 파일이 필요합니다. GRUB for DOS의 다운로드 페이지(http://download.gna.org/grub4dos/)에서 grub4dos-0.4.4-2009-06-20.zip 파일을 받아서 적당한 폴더에 압축을 풉니다.

그림 3. grub4dos-0.4.4-2009-06-20.zip의 압축을 푼 폴더의 내용

그림 3. grub4dos-0.4.4-2009-06-20.zip의 압축을 푼 폴더의 내용

위 그림에서 이번에 사용할 파일은 grldr 파일과 menu.lst 파일입니다. 빨간 네모 표시를 하였습니다. 그 두 파일은 C 드라이브 루트 디렉터리(c:\)로 복사합니다.

menu.lst 파일에 대하여#

이제 menu.lst 파일을 편집합니다. 그런데 복사한 menu.lst를 메모장에서 열어 보면 조금 엉뚱한 형태로 되어 있습니다.

그림 4. 유닉스 텍스트 파일로 저장된 menu.lst 파일

그림 4. 유닉스 텍스트 파일로 저장된 menu.lst 파일

이것은 유닉스 텍스트 형식으로 저장되어 있어서 윈도에서 조금 이상하게 보이게 됩니다. 이것을 도스/윈도용 텍스트 형식으로 바꾼 파일을 다운로드하여 이용하기 바랍니다.

menu.zip

앞서 나온 플로피 이미지 파일을 적용한 파일 다운로드

menu_org.zip

원본 -> 도스/윈도 텍스트 형식으로 바꾼 파일 다운로드

menu.lst 파일 편집#

위의 2번 항목의 파일을 분석해 보겠습니다.

[code shell]# =======================Maid by lds718 color black/cyan yellow/cyan timeout 50 default 0[/code]

1행은 주석입니다. 맨 앞에 #(샤프) 기호가 있으면 그 행은 주석으로 해석하지 않습니다.

2행의 color 옵션은 색상을 지정하고 있습니다. 이 옵션에 대해서는 Color Matrix 문서를 참조하십시오.

3행의 timeout 옵션은 GRUB 메뉴를 보여줄 시간을 지정합니다. 여기에는 정수(십진수)만 넣을 수 있고, 현재 50초로 지정되어 있습니다. 지정하지 않을 경우 5초로 지정됩니다.

4행의 default 명령은 앞의 timeout 옵션에서 지정한 시간이 지나도 사용자가 선택하지 않았을 때 불러올 부트 설정의 항목입니다. 여기에서 첫 번째 부트 항목의 번호는 0 번입니다. default 명령 다음에 부트 파일을 직접 지정할 수도 있습니다.

첫 번째 부트 항목#

[code shell; first-line:6]# 부트 0 : 윈도의 NTLDR 파일을 찾아 읽어옵니다. title Find and load NTLDR of Windows NT/2K/XP fallback 1 find --set-root /ntldr chainloader /ntldr[/code]

6행은 주석입니다.

7행의 title 명령은 부팅 항목의 이름을 지정합니다. 이것은 부트 메뉴를 만들 때 보여주는 이름이기도 합니다.

8행의 fallback 명령은 부팅에 실패했을 때 이용할 부트 항목의 번호입니다. 현재는 첫 번째 부트 항목으로 번호는 0번입니다. 그러므로 1번은 두 번째 부트 항목을 가리킵니다.

9행의 find 명령은 장치를 찾습니다. 이때 장치는 디스크에 있는 파일도 가리킵니다. 한편 뒤에 --set-root 옵션이 왔는데, 이때는 부트 장치(부트 파일 포함)를 찾는 역할을 하고, 끝에 /ntldr이라는 파일명이 왔습니다. 이것은 윈도xp에서 c:\ntldr 파일을 가리킵니다.

10행의 chainloader 명령에서는 파일을 체인 로더로서 읽어옵니다. 체인 로더는 컴퓨터 프로그램 실행법 가운데 하나로서, 현재 실행하는 프로그램을 새로운 프로그램으로 교체하는 방법입니다. 컴퓨터 부팅에서 체인 로더는, 앞서 프로그램이 교체되듯, 부트 영역(또는 부트 로더)이 다른 부트 정보(또는 부트 파일, 또는 부트 로더)로 교체되는 방식을 가리킵니다. 일단 여기에서는 뒤에 /ntldr 파일이 왔으므로, 현재 사용하는 부트 로더를 /ntldr 파일로 교체하게 된다. 쉽게 말해 c:\ntldr 파일을 불러서 부팅한다고 생각하면 됩니다.

윈도 계열의 boot.ini 파일을 이용할 때는 반드시 9행과 10행의 내용을 포함시키기 바랍니다.

두 번째 이하 부트 항목#

[code shell; first-line:12; tab-size:8; smart-tabs: true]# 부트 1 : 첫 번째 하드의 첫 번째 파티션을 #        첫 번째 하드의 두 번째 파티션의 루트 디렉터리에 GHOST.GHO라는 이름으로 저장합니다. title Ghost Backup - 1:2 map --mem /WINDOWS/back1H2P.ima (fd0) map --hook chainloader (fd0)+1 rootnoverify (fd0)[/code]

12행과 13행은 주석이며, 13행은 메뉴 타이틀입니다. 실행과는 별로 관련이 없지만 코드를 읽기 편하게 만드는 역할을 합니다.

14행의 map 명령은 매핑 기능을 합니다. 매핑은 컴퓨터 메모리(또는 장치)를 다른 메모리(또는 장치)로 연결해 주거나 연결 순서를 바꾸는 작업을 가리킵니다. 이 map 명령의 사용법은 다음과 같습니다.

[code shell]map  대상  원본[/code]

대부분 대상을 원본으로 덮어쓰기를 한다고 보면 됩니다.

이때 map --mem 옵션은 윈도 운영체제에서 좀 더 안전하게 작업할 수 있게 해주는 옵션입니다. --mem=-2880 처럼 사용할 메모리 용량을 지정할 수도 있습니다. 대부분 이 크기는 읽어올 플로피 이미지의 크기에 맞춥니다. 결국 map --mem /WINDOWS/back1H2P.ima (fd0) 구문은 /WINDOWS/back1H2P.ima 파일을 0번 플로피(fd0, 흔히 A 드라이브)로 만들어 줍니다. 이 경우 map 명령은 가상 플로피 드라이브를 만드는 명령이 되지요.

15행의 map --hook 옵션은 처음 map 명령이 실행되었을 때 지정한 효과를 즉시 반영합니다. 다시 말해 14행에서 가상 플로피 드라이브를 만들도록 설정했는데, 아직 적용이 되지 않았습니다. 이것을 실제로 적용시키는 명령입니다.

16행에서는 chainloader 명령이 나왔는데, 옵션이 바뀌어 있습니다. 10행에서는 파일이 왔는데, 이번에는 장치가 왔습니다. 어떻게 구분하느냐고요? 괄호(())로 묶인 것은 장치이고, 그냥 나타난 것은 파일입니다. chainloader (fd0)+1 구문은 현재 부트 로더를 플로피의 첫 번째 섹터로 교체하라는 뜻입니다. 쉽게 말해 플로피로 부팅하라는 말이죠. 장치명 뒤에 오는 '+1'은 장치의 첫 번째 섹터를 가리키며, 디스크 장치는 첫 번째 섹터를 0번 섹터라 부르는데, 대부분 부트 섹터로 불립니다. 이름 그대로 부팅할 때 그 부분을 읽어서 부팅합니다.

17행에서 rootnoverify 명령이 나왔습니다. rootnoverify 명령은 파티션을 마운트하지 않는다는 뜻입니다. 기본적으로 GRUB는 리눅스 및 유닉스 계열의 부트 로더입니다. 그 때문에 윈도/도스의 파티션을 완벽히 지원하지 않습니다. 그래서 읽어와서 부팅한 뒤에는 부팅한 운영체제에 제어권을 완전히 넘겨주어 작업하는 편이 더 안전합니다. rootnoverify 명령에는 장치명이 뒤따라 와야 합니다.

반대로 마운트하여 작업하는 명령어는 root 명령입니다.

세 번째 부트 항목부터는 두 번째 부트 항목과 같은 형식으로 이루어져 있으므로 설명을 생략합니다.

아래는 지금까지 설정한 menu.lst 파일이 부트과정에서 나타나는 모습입니다.

그림 5. GRUB4DOS로 구성한 시동 메뉴

그림 5. GRUB4DOS로 구성한 시동 메뉴

참고로 위 그림에서 오른쪽 위의 숫자 0은 현재 선택된 메뉴(노란색 글자)의 메뉴 번호입니다.

boot.ini 파일 편집#

boot.ini 설명#에 나타난 내용을 편집하겠습니다. 편집은 매우 간단하여 마지막 줄에 한 줄을 추가하기만 하면 됩니다.

[code shell; highlight: (6)][boot loader] timeout=30 default=multi(0)disk(0)rdisk(0)partition(1)\WINDOWS [operating systems] multi(0)disk(0)rdisk(0)partition(1)\WINDOWS="Microsoft Windows XP Professional" /noexecute=optin /fastdetect C:\GRLDR="PC Repair System"[/code]

C:\GRLDR 부분은 부트로더를 지정하는 부분이고, 등호(=) 뒤에 나오는 내용은 윈도 시동 메뉴에서 보여줄 메시지입니다.

하지만 위와 같이 30초 동안 시동 메뉴가 보이게 되면 자칫 시스템 해킹의 위험 요소가 남게 됩니다. 그러므로 PC방 등 공개 장소에서는 매우 짧게 설정하여, 아는 사람만 사용할 수 있도록 해야 합니다. 보통은 3 이하의 작은 정수를 지정합니다.

[code shell; highlight: (6)][boot loader] timeout=1 default=multi(0)disk(0)rdisk(0)partition(1)\WINDOWS [operating systems] multi(0)disk(0)rdisk(0)partition(1)\WINDOWS="Microsoft Windows XP Professional" /noexecute=optin /fastdetect C:\GRLDR="PC Repair System"[/code]

최종적으로 위와 같이 바뀝니다.

GRUB을 이용한 시동 메뉴 스크린 샷#

관련 문서#

내부 문서#

외부 문서#

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

Trackback 0 Comment 2

텍스트큐브 주석 달기

텍스트큐브 알림판박쥐의 변신이라는 글이 나타났기에 단지 제목이 재미있어서 클릭했습니다.

왕미친놈이 본 추천 포스트

왕미친놈이 본 추천 포스트

그런데 주석(각주)을 달 수 없다는 푸념(?)이 있습니다.

얼마나 답답하셨을까?

얼마나 답답하셨을까?

태터툴즈 주석 달기

제 기억이 맞다면 태터툴즈의 형제들은 주석 다는 방법이 모두 같습니다. 바로 [footnote]내용[/footnote]과 같은 꼴로 나타내면 주석으로 바꾸어 줍니다.

텍스트큐브 편집 화면 1 - 주석이 달려 있습니다.

텍스트큐브 편집 화면 1 - 주석이 달려 있습니다.

참고로 예제로 보인 문서는 제 블로그의 GotD - Wondershare Photo Collage Studio 4.2.12 문서입니다.

텍스트큐브 편집 화면 2 - 위지위그 편집 모드

텍스트큐브 편집 화면 2 - 위지위그 편집 모드

역시 주석을 달린 부분만 잘라내어 빨간색으로 표시했습니다.

텍스트큐브 편집 화면 3 - HTML 편집 모드

텍스트큐브 편집 화면 3 - HTML 편집 모드

앞의 텍스트큐브 편집 화면 2 그림과 마찬가지로 주석이 달린 부분만 잘라내어 자주색으로 표시했습니다. 굳이 설명이 필요 없어 보입니다.

실제 적용

위와 같이 작업을 한 뒤에 저장을 하고 블로그 문서를 웹브라우저로 열면 됩니다.

웹브라우저에서 본 본문의 주석 위치

웹브라우저에서 본 본문의 주석 위치

위첨자로 처리된 숫자 2(2)에 주석이 링크되어 있다. 그 숫자를 클릭하면 주석 위치로 이동한다.

웹브라우저에서 본 문서 끝의 주석 내용

웹브라우저에서 본 문서 끝의 주석 내용

원래는 위의 그림과는 조금 다릅니다. 스크롤 바를 움직여서 위치를 약간 조절하였습니다.

좀 더 세련되게

BLUEnLIVE님이 블로그에 아주 좋은 방법을 제시해 놓으셨습니다. 각주(footnote) 풍선말 도우미라는 글입니다. 직접 가서 보시기 바랍니다. 참고로 보이는 모습은 아래와 같습니다.

풍선 도움말 예시

풍선 도움말 예시

관련 문서

내부 문서

외부 문서

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

Trackback 0 Comment 1

태터툴즈의 스킨 이미지 주소

  • 참고 : 소스 복사 버그가 고쳐졌다고 생각해서 글을 올렸는데, 오늘(3월 30일) 보니 다시 나타났습니다. 아마도 제가 무엇인가를 착각했나 봅니다. 죄송합니다.

최근 텍스트큐브닷컴(http://www.textcube.com/)에서 소리소문 없이 패치된 기능이 있다. 문법 강조 기능의 버튼 중에 "copy to clipboard"가 있는데, 처음에는  가 잔뜩 달라붙는 문제(텍큐닷컴은 Syntax Highlighter을 개선하라! by BLUEnLIVE)가 있었으나 최근 고쳐졌다. 그 버그가 고쳐졌음을 확인하는 과정에서 스킨의 images 디렉터리를 나타내는 주소에 대해 생각해 볼 기회를 갖게 되었습니다.

[code html]<p>예제</p> <p>오른쪽에는 공백이 있습니다.→               .</p> <p>.                  ←왼쪽에는 공백이 있습니다.</p>[/code]
더 이상 &nbsp;를 볼 수 없다.

더 이상 &nbsp;를 볼 수 없다.

그런데 버전은 v2.0.320 그대로입니다. 그래서 공지를 안 했나?

BLUEnLIVE 님의 패치

물론 느려터진 텍스트큐브닷컴 개발자 분들이 패치하기 전에 BLUEnLIVE 님이 패치를 멋지게 해주셨다(텍큐닷컴 용 Syntax Highlighter 2.0 버그 패치 by BLUEnLIVE 참조). 사실 이번에 티스토리에서 옮겨온 뒤로 문법강조가 적용된 부분이 있어서 BLUEnLIVE 님의 패치를 적용하려고 했는데, 벌써 패치가 되었더라고요.

태터툴즈의 스킨 이미지 주소

한편 BLUEnLIVE 님의 패치에 대한 글과 다른 글을 보았습니다.

그런데 텍스트큐브닷컴스킨 이미지 주소를 아주 정확하게 나타내려고 노력하셨습니다. 그러나 그것은 결론만 말하자면, 엄청난 삽질임을 깨닫게 되었습니다. 왜? 스킨이기 때문입니다. 무슨 뜻인지 이해가 안 된다고요?

스킨(skin)은 컴퓨팅에서 저마다 다른 사용자의 취향에 맞추기 위해 어떠한 소프트웨어웹사이트에 적용할 수 있는 사용자 그래픽 배색 (GUI)으로서의 테마와 연결된다. from 위키백과 :: 스킨 (컴퓨터)

스킨이란 기본적으로 테마 기능을 갖게 됩니다. 다시 말해 태터툴즈 시스템을 사용한 블로그에서 사용하는 스킨은 다른 블로그에 그대로 적용 가능하다는 점입니다. 물론 텍스트큐브닷컴에서 사용하는 스킨은 티스토리에서 그대로 사용할 수 없는 경우도 있지만, 적어도 스킨 이미지 주소 또는 스킨 이미지 디렉터리 주소는 동일하게 적용된다는 뜻입니다.

티스토리 스킨 이미지 주소 표현

티스토리 스킨에서 이미지 주소를 어떻게 표현했는지를 알아보겠습니다. 이것은 제 테스트 블로그를 이용했습니다. 태터툴즈 시스템에 거의 대부분 공통으로 존재하는 rss.gif 파일의 경로를 찾겠습니다.

티스토리 테스트 블로그 스킨 편집 화면

티스토리 테스트 블로그 스킨 편집 화면

티스토리 테스트 블로그 스킨 rss.gif 파일 나타내기

티스토리 테스트 블로그 스킨 rss.gif 파일 나타내기

위에서 보면 스킨 이미지 주소는 "./images/rss.gif"라고 표현했습니다. 이때 중요한 부분은 맨 앞에 보이는 ( . )과 images 라는 디렉터리 이름입니다. 이때 ( . )은 현재 디렉터리를 가리키는 축약 표현입니다. 도스/윈도/유닉스 공통입니다. 매킨토시의 OS X 에서도 적용 가능합니다.

티스토리 테스트 블로그의 rss.gif 파일의 실제 위치

티스토리 테스트 블로그의 rss.gif 파일의 실제 위치

위의 티스토리 테스트 블로그의 rss.gif 파일의 실제 위치 그림에서 보듯이 스킨에서 "./images/rss.gif"라고 나타난 부분이 "http://cfs.tistory.com/custom/blog/48/488983/skin/images/rss.gif"라고 바뀌어 있습니다.

이 파일은 제 티스토리 블로그인 왕미친놈의 왕미친세상에도 있습니다. 거기에서는 "http://cfs.tistory.com/custom/blog/35/354861/skin/images/rss.gif"라고 나타나 있네요.

맨 끝에 나타나는 /images/rss.gif 부분이 공통으로 보입니다.

텍스트큐브닷컴 스킨 이미지 주소 표현

한편 rss.gif 파일텍스트큐브닷컴의 스킨에도 존재합니다.

텍스트큐브닷컴 블로그 스킨 편집 화면

텍스트큐브닷컴 블로그 스킨 편집 화면 (아랫부분 생략)

텍스트큐브닷컴 블로그 스킨 rss.gif 파일 나타내기

텍스트큐브닷컴 블로그 스킨 rss.gif 파일 나타내기

위에서 보면 스킨 이미지 주소는 "./images/rss.gif"라고 티스토리의 경우와 똑같이 표현했습니다.

텍스트큐브닷컴 블로그의 rss.gif 파일의 실제 위치

텍스트큐브닷컴 블로그의 rss.gif 파일의 실제 위치

위의 텍스트큐브닷컴 블로그의 rss.gif 파일의 실제 위치 그림에서 보듯이 스킨에서 "./images/rss.gif"라고 나타난 부분이 "http://fs.textcube.com/blog/0/6512/skin/1/images/rss.gif"라고 바뀌어 있습니다.

이 파일은 아무리 스킨을 바꾸더라도 항상 "./images/rss.gif"라는 꼴을 유지하게 됩니다. 결국 BLUEnLIVE 님이 찾아내신 다음과 같은 표현은 모두 삽질이 되어 버립니다. 정말 애써 작성하셨을 텐데 뭐라 위로의 말을 드려야 할지... T,T

[code html]<script type="text/javascript" src="http://(블로그 이미지 주소)/j_shCore.gif"></script> <script type="text/javascript" src="http://(블로그 이미지 주소)/j_shBrushMsx.gif"></script> </body>[/code]

위의 코드에서 굳이 "http://(블로그 이미지 주소)/j_shCore.gif"라고 표현할 필요가 없습니다. (텍큐닷컴 용 Syntax Highlighter 2.0 버그 패치 by BLUEnLIVE 참조) 앞서 밝힌 코드를 응용하여 "./images/j_shCore.gif"라고 바꾸면 됩니다.

BBCode for 텍큐닷컴 3.2 대공개 문서와 BBCode for 텍큐닷컴 3.3 업데이트 문서에 보이는 그림도 별로 쓸모는 없습니다. 오히려 스킨이 가진 장점, 곧 어디에도 그대로 적용할 수 있다는 점을 없애 버리는 삽질이 됩니다.

BBCode for 텍큐닷컴 3.2 대공개 문서의 그림 일부

BBCode for 텍큐닷컴 3.2 대공개 문서의 그림 일부

BBCode for 텍큐닷컴 3.3 업데이트문서의 그림 일부

BBCode for 텍큐닷컴 3.3 업데이트문서의 그림 일부

관련 문서

내부 문서

외부 문서

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

Trackback 0 Comment 5

파이어폭스 쿠키 오류

파이어폭스 3.6으로 업그레이드 한 뒤에 겪은 오류가 하나 있다. 얼마나 자주 겪었느냐면 실행할 때 한 번 걸러 나타날 정도였다. 최근 패치되었다고 하는데, 정확히는 알 수 없다. 다만 파이어폭스 3.6.2로 업데이트 하기를 강력히 권장합니다.

각설하고 파이어폭스를 사용하다가 간혹 쿠키와 관련한 오류가 생기면 다음과 같이 하면 일시적 또는 영구적으로 해결할 수 있습니다.[각주:1]

쿠키 오류 증상 화면

salm.pe.kr 페이지와 관련한 쿠키 오류

salm.pe.kr 페이지와 관련한 쿠키 오류

위의 사이트 주소는 제 블로그 주소입니다. 설마 제 블로그 사이트에서 요구하는 쿠키를 제가 차단시켰다? 그런 일은 없지요.

해결 방법

쿠키 삭제

문제의 원인을 알 수 없었기 때문에 일시적으로 제 블로그에 접속할 수 있게 만들어야 했습니다. 방법은 아주 간단한데, 그저 지금까지 저장한 쿠키를 지우면 됩니다.

설정 메뉴를 불러와야 합니다.

설정 메뉴를 불러와야 합니다.

[설정] 메뉴를 불러옵니다. 단축키는 Alt+O.

설정 - 개인 정보 탭 화면

설정 - 개인 정보 탭 화면

[개인 정보] 탭은 개인 정보를 기록할 것인가를 정하는 항목입니다. 여기에서 쿠키 삭제를 클릭합니다.

쿠키 관리자 화면

쿠키 관리자 화면

그냥 간단하게 모두 삭제를 클릭하여 전부 지워도 됩니다. 쿠키와 접속한 웹사이트에 대해 안다면 꼭 지워야 할 부분만 지워도 되지요.

쿠키 관리자 - 검색 화면

쿠키 관리자 - 검색 화면

특정 웹사이트와 관련한 쿠키를 지우려면 위와 같이 검색할 수 있습니다. 위의 쿠키 관리자 - 검색 화면은 이미 검색이 끝난 화면입니다. 삭제하려는 쿠키를 선택한 뒤에 [삭제] 단추를 클릭하면 묻지 않고 지워 버립니다. 뭐, 지운다고 해서 파이어폭스가 오동작을 한다거나 하는 일은 없으니 경고도 질문도 없는 것이라 여겨집니다. 혹시나 해서 말씀드리는데, 쿠키는 사이트에 접속하면 (쿠키를 차단하지 않았다면) 자동으로 다시 만들어 줍니다.

관련 문서

내부 문서

외부 문서

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

  1. 쿠키(cookie) 관련 오류가 반드시 쿠키 때문이거나 또는 파이어폭스 때문에 생긴다고 말할 수는 없기 때문에 영구적 해결 방법이라고 단언할 수는 없습니다. [본문으로]
Trackback 0 Comment 0

오픈캡처 파일 열기 버그

  • 참고 : 이 글에 나타난 사항에 대해서는 어떠한 보증도 하지 않습니다. 이 글에 나타난 오류의 원인은 어디까지나 추측입니다.

오늘(3월 21일) 업데이트한 오픈 캡처 ver 1.4.2에서 약간의 오류가 발견되었습니다.

벌레의 유형

새것만 바라는 약간 과소비형 벌레입니다. ^^a

개발자의 답변

2010년 3월 21일 버그 리포팅을 한 상태입니다. 환경설정 파일(OpenSetup.INI)과 관련한 오류는 아니라는 의견을 밝혀 주셨습니다. 현재 이와 유사한 벌레로는 http://simples.kr/bbs/board.php?bo_table=11_2&wr_id=907 페이지에 나타난 "" is not a valid integer value. 오류가 있다고 알려주셨습니다. 불편하시더라도 이 벌레가 나타나면 OpenSetup.INI 파일을 삭제하면 당분간 나타나지 않습니다.

벌레의 발견

오픈캡처 업데이트라는 글을 쓰고 나서 파일을 열다가 발견했습니다.

지도를 편집하다가 방금 이전 버전에서 작업한 파일을 열지 못하는 현상 발생!

지도를 편집하다가 방금 이전 버전에서 작업한 파일을 열지 못하는 현상 발생!

새 파일을 만들어서 시험해 보았습니다.

아주 간단한 경로임에도 열지 못했습니다.

아주 간단한 경로임에도 열지 못했습니다.

위의 그림처럼 경로와 관련한 문제는 아닙니다.

벌레의 분석

일단 혹시나 하는 마음에 환경설정 파일(OpenSetup.INI)을 삭제하였더니 잘 읽어옵니다. 도대체 원인은 무엇?

환경설정 파일(OpenSetup.INI)을 삭제했더니 파일을 잘 읽어오는 오픈캡처

환경설정 파일(OpenSetup.INI)을 삭제했더니 파일을 잘 읽어오는 오픈캡처

관련 벌레

오픈캡처와 관련이 있는 오류는 다음과 같습니다.

관련 문서

내부 문서

외부 문서

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

Trackback 0 Comment 0

오픈캡처 업데이트

오늘(3월 21일) 저녁에 글을 쓰면서 화면을 갈무리할 일이 생겼는데, 오픈캡처에 못 보던 메뉴가 하나 보였다. 그것은 일종의 업데이트 기능이었습니다.

업데이트(새 버전 체크) 기능이 활성화되어 새 버전을 찾았을 때의 메뉴

업데이트(새 버전 체크) 기능이 활성화되어 새 버전을 찾았을 때의 메뉴

메뉴 설정

사실 이 기능은 메뉴를 따로 설정할 필요가 없습니다. 왜냐하면 기본 기능이기 때문입니다. 그러나 혹시라도 이 기능을 실수로 꺼 버린 사람은 다음 메뉴를 살펴보기 바랍니다.

부가 기능  탭의 업데이트 항목

부가 기능 탭의 업데이트 항목

위와 같이 [부가 기능] 탭의 업데이트 항목에 체크 표시가 되어 있으면, 홈페이지 새 버전이 있을 경우 찾아서 새 버전 받기 메뉴를 표시해 줍니다. 그렇게 나타나는 새 버전 받기 메뉴를 클릭하면 아래와 같이 홈페이지로 접속할 수 있습니다.

홈페이지 접속 - 아래로 스크롤하면 다운로드 링크가 있습니다.

홈페이지 접속 - 아래로 스크롤하면 다운로드 링크가 있습니다.

다운로드하여 실행한 화면

다운로드하여 실행한 화면

추가 정보

방금 받은 새 버전(v1.4.2)에 약간의 오류가 있었습니다.

관련 문서

내부 문서

외부 문서

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

Trackback 0 Comment 0

오픈캡처 문서 닫기 버그

나는 오픈캡처를 사용할 때 파일을 하나 갈무리(캡처)하고 저장하고 또 갈무리하는 방식이 아니라, 갈무리만 줄창 한 뒤에 한꺼번에 저장한다. 그런데 파일이 닫힐 때 약간 이상한 동작을 하는 것이 발견되었다.

벌레의 유형

파일 탭에 숨어 살면서 왼쪽으로 조금씩 더 당기는 벌레이다.

개발자의 답변

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

벌레의 발견

일단 발견했을 당시의 그림을 보기로 하죠.

화면 1 : 시험 작업을 하려고 계속 캡처를 했습니다.

화면 1 : 시험 작업을 하려고 계속 캡처를 했습니다.

위와 같이 수십 개를 갈무리한 뒤에 마지막 영역 18의 앞부분은 모두 닫았습니다. 위 화면을 잘 보면, 파일 탭이 꽉차서 오른쪽으로 넘치고 있습니다(오른쪽 빨간 원 부분 참조). 이 벌레는 위와 같이 오른쪽으로 넘치는 상황에서만 발생합니다.

화면 2 : [현재 창 닫기]를 실행한 화면

화면 2 : [현재 창 닫기]를 실행한 화면

위와 같이 [현재 창 닫기]를 실행하면 저장하겠느냐고 묻습니다. 이때 [예(Y)] 또는 [아니오(N)]를 클릭하면 현재 창이 닫힙니다.

화면 3 : 왼쪽 부분이 말린 화면

화면 3 : 왼쪽 부분이 말린 화면

위 그림에서 왼쪽 첫째 창이 왼쪽으로 말려 있습니다. 그래서 빨간 원 부분처럼 [마지막 영역 19]의 창은 화면에는 거의 나타나지를 않고 있죠. 그 옆에 보이는 자주색 원과는 그 모습이 많이 다릅니다.

화면 4 : [현재 창 닫기]를 두 번째 실행한 화면

화면 4 : [현재 창 닫기]를 두 번째 실행한 화면

화면 5 : 아예 파일 탭에서 사라져 버린 [마지막 영역 20]과 [마지막 영역 21]의 창

화면 5 : 아예 파일 탭에서 사라져 버린 [마지막 영역 20]과 [마지막 영역 21]의 창

앞의 화면 4를 보면, 분명히 [마지막 영역 20][마지막 영역 21]의 창은 있는데, 위의 파일 탭에는 나타나지 않습니다. 왼쪽으로 완전히 말려 버렸기 때문으로 여겨집니다.

화면 6 : 파일 탭에서 보이지 않는 [마지막 영역 21]의 창

화면 6 : 파일 탭에서 보이지 않는 [마지막 영역 21]의 창

외려 [마지막 영역 20]을 저장하자 [마지막 영역 21]의 창이 살짝 나타납니다.

벌레의 분석

일단 이 벌레는 화면 1에서 설명했듯이 파일 탭이 오른쪽으로 넘치는 상황에서만 발생합니다. 두 번째로 맨 왼쪽 탭을 닫았을 때 발생하는 문제이지요. 맨 왼쪽 창이 아닌 다른 창을 닫았을 때는 발생하지 않는 벌레입니다.

관련 벌레

이 벌레와 관련이 있는 벌레는 없습니다.

관련 문서

내부 문서

외부 문서

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


Trackback 0 Comment 2

아크로에디트, 파일 내용 변경 버그

AcroEdit는 가끔 옛한글이 포함된 문서를 사용자의 동의 없이 수정하는 버그를 갖고 있습니다. 오래전에 발견했지만 줄곧 다른 버그 리포팅에 밀려 있던 벌레를 다시 발견했습니다. 나중에 올려야지 하다 보니 깜빡 잊고 있었죠.

  • 참고 : 이 문서는 많은 그림을 포함하고 있어서 읽어오는 데 오래 걸릴 수도 있습니다. 느긋하게 기다려 주십시오.

벌레의 유형

불러온 파일의 원형을 유지하지 못하게 만드는 벌레입니다. 이 벌레는 추가적인 다른 벌레를 발생시키고 있습니다.

아크로에디트에서 편집한 뒤에 뭉개진 글자 - ᄒᆞᆫ

아크로에디트에서 편집한 뒤에 뭉개진 글자 - ᄒᆞᆫ

개발자의 답변

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

벌레의 발견

옛한글을 텍스트 편집기에서 시험하다가 발견했습니다.(옛한글과 텍스트 편집기 참고) 그런데 그때 올리지 않았더니 오랫동안 기억 속에 묻혀 버렸습니다.

이 벌레는 파일 내용을 제멋대로 바꾸어서 사람을 화딱지 나게 만드는 벌레입니다. 크게 두 경우가 있습니다. 한 경우는 클립보드로 붙이기, 다른 한 경우는 파일을 불러왔다가 저장하기입니다.

클립보드에서 붙이기

예제 코드는 다음 문장입니다.

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

위 내용을 텍스트 파일로 저장하면 536바이트가 됩니다. 이 htm 파일은 utf-8로 인코딩되어 있습니다.

시험용 파일 Test-1.htm : 536바이트

시험용 파일 Test-1.htm : 536바이트

위 파일을 메모장에서 열면 아래와 같습니다.

메모장에서 본 내용

메모장에서 본 내용

이상태에서 그대로 복사하여 티스토리에 편집창의 HTML 모드에서 붙여넣기를 하였습니다. 테스트 블로그에 있는 문서입니다.

옛한글이 잘 나타난 화면

옛한글이 잘 나타난 화면

그냥 Test-1.htm 파일을 파이어폭스에서 보면 다음과 같습니다.

잘 보이는 옛한글

잘 보이는 옛한글

위 그림에서 보이는 내용을 소스 보기 하면 다음과 같습니다.

소스 보기 : Test-1.htm

소스 보기 : Test-1.htm

위 소스 보기 화면에서 내용을 복사하여 아크로에디트에 붙여넣기를 하였습니다.

처참하게 깨져 버린 옛한글

처참하게 깨져 버린 옛한글

참고로 저 상태에서 utf-8로 저장하면 491바이트가 됩니다.

시험용 파일 Test-2.htm : 491바이트

시험용 파일 Test-2.htm : 491바이트

원인은 알 수 없지만 용량이 줄어 버렸습니다. 물론 파일 내용도 바뀌었습니다.

메모장에서 본 내용 그림에 나타난 소스를 복사하여 아크로에디트에 복사하였습니다.

메모장의 내용을 아크로에디트로 복사하여 붙여넣기를 한 다음 저장한 화면

메모장의 내용을 아크로에디트로 복사하여 붙여넣기를 한 다음 저장한 화면

그런데 겉보기에는 아무런 이상이 없지만, 아무튼 이번에도 이상한 점이 발견되었습니다.

시험용 파일 Test-3.htm : 533바이트

시험용 파일 Test-3.htm : 533바이트

원본은 분명히 536바이트였는데, 지금은 533바이트입니다. 겨우 3바이트이지만, 내용이 바뀌었습니다.

옛한글을 제대로 나타내지 못하는 화면

옛한글을 제대로 나타내지 못하는 화면

어찌된 일인지 아크로에디트로 저장한 Test-3.htm 파일은 옛한글을 제대로 나타내지 못하고 있습니다. 앞서 나타난 옛한글이 깨지는 결과는 파이어폭스의 문제라고 생각할 수도 있으나, 지금 이 결과는 아크로에디트의 문제로 봐야 할 듯싶습니다.

파일을 불러왔다가 저장하기

클립보드는 복사되는 과정에서 변형이 일어날 수 있다는 의혹도 제기할 수 있습니다. 그래서 아예 파일을 직접 읽어오기로 했습니다.

메모장에서 본 내용 : 536바이트

메모장에서 본 내용 : 536바이트

위 내용을 아크로에디트에서 직접 불러오겠습니다. 불러오기에 앞서 메모장을 닫습니다. 이것은 혹시나 메모장에서 간섭이 생길 수도 있기 때문입니다.

아크로에디트에서 Test-1.htm 파일 불러오기

아크로에디트에서 Test-1.htm 파일 불러오기


아크로에디트에서 Test-1.htm 파일을 불러온 화면

아크로에디트에서 Test-1.htm 파일을 불러온 화면

위 그림은 앞서 나온 메모장의 내용을 아크로에디트로 복사하여 붙여넣기를 한 다음 저장한 화면 그림과 매우 비슷합니다. 이것을 Test-4.htm 파일로 저장했습니다.

아크로에디트에서 Test-1.htm 파일을 Test-4.htm 파일로 저장

아크로에디트에서 Test-1.htm 파일을 Test-4.htm 파일로 저장

Test-1.htm 파일과 Test-4.htm 파일은 모두 536바이트입니다. 그러면 이것을 파이어폭스에서 보면 어떻게 될까요?

Test-4.htm 파일은 미스테리를 담은 파일??

Test-4.htm 파일은 미스테리를 담은 파일??

편집도 않고 그냥 불러들였다가 다른 이름으로 저장만 했을 뿐인데 왜 이런 일이 생기는지 알 수 없었습니다.

아크로디프 프로그램에서 파일 비교

Test-1.htm 파일과 Test-4.htm 파일을 비교해 보겠습니다.

HxD 프로그램에서 비교한 Test-1.htm 파일과 Test-4.htm 파일

HxD 프로그램에서 비교한 Test-1.htm 파일과 Test-4.htm 파일

Test-1.htm 파일과 Test-4.htm 파일은 확실하게 다른 점이 있습니다. 원본인 Test-1.htm 파일을 아크로에디트에서 불러와서 아무런 수정도 없이 Test-4.htm 파일로 저장하기만 했을 뿐인데, 1바이트가 변형되어 있습니다.

이 두 파일을 아크로에디트에서 비교하면 어떻게 될까요? 정확하게는 AcroDiff(아크로디프)에서 비교하면 어떻게 될까요? AcroDiff 프로그램은는 파일 비교를 해 주는 유틸리티로서 아크로에디트에 포함되어 있습니다. 일종의 헬퍼 프로그램이죠.

AcroDiff(아크로디프) 프로그램 실행 화면

AcroDiff(아크로디프) 프로그램 실행 화면

여기에서 빨간 네모 표시를 클릭하여 파일을 왼쪽 창에 불러올 수 있습니다.

AcroDiff 프로그램에서 파일 불러오기

AcroDiff 프로그램에서 왼쪽 창에 파일 불러오기


AcroDiff 프로그램에서 왼쪽 창에 파일을 불러온 화면.

AcroDiff 프로그램에서 왼쪽 창에 파일을 불러온 화면. 이 상태에서는 내용은 나타내 주지 않습니다.

위 그림에서 파일 내용은 나타내 주지 않습니다. 파일 내용이 안 나타난다고 당황하지 마시기 바랍니다. 위 화면에서 빨간 네모 부분을 클릭하여 오른쪽 창에도 파일을 불러옵니다.

AcroDiff 프로그램에서 오른쪽 창에도 파일을 불러온 화면.

AcroDiff 프로그램에서 오른쪽 창에도 파일을 불러온 화면. 이 상태에서는 내용은 나타내 주지 않습니다.

오른쪽 창도 내용이 나타나지 않습니다. 이 화면에서 비교 실행(빨간 네모)을 클릭하여 파일 비교를 합니다.

두 창의 내용을 비교한 화면

두 창의 내용을 비교한 화면

놀랍게도 AcroDiff는 두 파일의 다른 점을 찾아내지 못하고 있습니다. 이로써 아크로에디트의 저장 과정이 아니라 불러오기에서 문제가 생김을 추측해 볼 수 있습니다.

벌레의 원인

벌레의 원인은 알 수 없었습니다. 다만 한글 깨짐 현상이 있습니다 문서와 관련이 있으리라 추측해 봅니다. 또한 아크로디프 프로그램에서 파일 비교 항목에서 보이듯이, 저장 과정에서 문제가 생긴 것이 아니라 파일을 불러왔을 때 파일 내용이 이미 변형되었으리라 추측할 수 있습니다.

관련 벌레

이 벌레와 관련이 있는 벌레는 다음과 같습니다. 다음 두 벌레는 ᄒᆞᆫ자의 화면 표시와 관련한 버그를 소개하고 있습니다.

관련 문서

내부 문서

외부 문서

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


Trackback 1 Comment 0

함초롬체의 글꼴 높이 문제

벌레의 유형

솔직히 이 현상이 벌레인지 확신할 수 없습니다. 다만 일반적으로 "올바른 화면 표시"라고 보기에는 무리가 있습니다.

개발자의 답변

이 사항에 대한 버그 리포팅은 하지 않았습니다.

벌레의 발견

우연히 친구네 컴퓨터를 살펴보다가 내 블로그가 함초롬체로 나타남을 알게 되었습니다. 물론 대부분 다른 글꼴도 설치된 상태이므로 함초롬체로 나타나는 일은 그다지 없는데 말입니다. 아무튼 글꼴을 처음 봤을 때는 몰랐으나 나중에야 글꼴의 높이가 상당히 높음을 알게 되었습니다.

글꼴 정보

옛굴림 글꼴의 높이 : 32픽셀(pixel)

옛굴림 글꼴의 높이 : 32픽셀(pixel)


함초롬바탕 글꼴의 높이 : 41픽셀(pixel)

함초롬바탕 글꼴의 높이 : 41픽셀(pixel)

위 두 그림을 보면 옛굴림 글꼴의 높이32픽셀이며, 함초롬바탕 글꼴의 높이41픽셀입니다. 참고로 함초롬돋움 글꼴의 높이41픽셀입니다.

???글에 나타난 글꼴 높이

함초롬돋움 글꼴과 굴림 글꼴의 높이 비교

함초롬돋움 글꼴과 굴림 글꼴의 높이 비교

위 그림을 보면 함초롬 돋움의 높이가 굴림보다 더 높음을 알 수 있습니다. "움"자는 아래까지 꽉 차고 있는데, 굴림의 아랫부분은 비어 있습니다.

(X)HTML에 나타난 글꼴 높이 및 여백

익스플로러에 나타난 굴림 글꼴

익스플로러에 나타난 굴림 글꼴

위 그림을 보면 확연히 함초롬 글꼴과 높이가 다릅니다.

벌레의 원인 및 분석

단순히 글꼴의 높이가 문제로 여겨집니다.

관련 벌레

이 벌레와 관련이 있는 벌레는 없습니다.

관련 문서

내부 문서

외부 문서

(없음)

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


Trackback 0 Comment 0

미완성 떠다니는 메뉴 - 버그 때문에

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

  • 참고 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]

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

블로그 화면과 이동 위치#

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

이동 위치 1 : 맨 위

이동 위치 1 : 맨 위


이동 위치 2 : 글 끝 또는 추천 배너

이동 위치 2 : 글 끝 또는 추천 배너


이동 위치 3 : 트랙백/댓글 보기

이동 위치 3 : 트랙백/댓글 보기


이동 위치 4 : 댓글 쓰기(위) 및 페이징(아래)

이동 위치 4 : 댓글 쓰기(위) 및 페이징(아래)


이동 위치 5 : 페이징(자주색) 및 사이드바(파란색)

이동 위치 5 : 페이징(자주색) 및 사이드바(파란색)


이동 위치 6 : 맨 아래

이동 위치 6 : 맨 아래

위에서 보면 대충 어느 위치인지 감이 오지 않습니까? 일단 글의 맨 처음 부분에 이동할 수 있게 하고, 그 다음으로 추천 배너의 위치[각주: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 코드 또는 티스토리 치환자입니다. 그것을 찾은 뒤 알맞은 위치에 이동위치를 표시하면 됩니다.

이동 위치 (스킨) 1 : 맨 위

이동 위치 (스킨) 1 : 맨 위

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

이동 위치 (스킨) 2 : 글 끝 또는 추천 배너

이동 위치 (스킨) 2 : 글 끝 또는 추천 배너

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

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

이동 위치 (스킨) 3 : 트랙백/댓글 보기

이동 위치 (스킨) 3 : 트랙백/댓글 보기

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

이동 위치 (스킨) 4 : 댓글 쓰기

이동 위치 (스킨) 4 : 댓글 쓰기

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

이동 위치 (스킨) 5 : 페이징

이동 위치 (스킨) 5 : 페이징

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

이동 위치 (스킨) 6 : 맨 아래

이동 위치 (스킨) 6 : 맨 아래

맨 아래는 </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) 적용#

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

빨간 네모 부분이 메뉴입니다.

빨간 네모 부분이 메뉴입니다.

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

스킨(skin.html)에서 찾은 메뉴

스킨(skin.html)에서 찾은 메뉴

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

skin.html 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

skin.html 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

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

CSS 코드(style.css) 적용#

style.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)로 이루어져야 합니다. 그런데티스토리가 제 블로그의 고유주소를 정의하지를 않았습니다. 다시 말해 티스토리의 버그 때문에 제 블로그에는 저 코드가 작동하지 않았다는 뜻입니다.

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

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

덧붙이는 말#

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

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

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

관련 문서#

내부 문서#

외부 문서#

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


  1. 왕미친세상 블로그에서는 추천 배너를 글 끝과 태그 사이에 넣고 있습니다. [본문으로]
  2. 내가 생각하기에는, 추천 배너 위치로 이동하기는 블로그 방문자보다는 블로그 주인(블로거)의 입장을 고려한 위치 선정으로 보입니다. 하지만 대부분 추천 배너 위치로 이동하도록 메뉴를 구성하고 있으므로 저도 추가했습니다. [본문으로]
  3. 추천 배너를 티스토리의 플러그인 메뉴에서 추가하였다면 스킨에는 나타나지 않습니다. [본문으로]
  4. 다시 강조하건대, 추천 배너를 티스토리의 플러그인 메뉴에서 추가하였다면 스킨에는 나타나지 않고, 그러므로 스킨만 참조해서는 넣을 방법이 없습니다. [본문으로]
Trackback 0 Comment 1

블로그 꾸미기에 유용한 웹사이트

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

추천 배너 배치

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

떠다니는 메뉴

관련 문서

내부 문서

외부 문서

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

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


Trackback 0 Comment 2

HTML 코드를 더듬거릴 때는 흔적을 남기라.

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

그렇다면 블로그를 편집할 때 (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]

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

관련 문서

내부 문서

외부 문서

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


  1. 오토매틱 시스템의 자동차를 운전할 때 자동차는 브레이크 페달에서 발 떼면 움직입니다. 다시 말해 기어가 중립 상태만 아니라면 어떻게든 움직이게 된다는 뜻이지요. 그러나 정지는 항상 사용자가 브레이크를 밟거나 기어를 중립 상태로 놓아야만 가능합니다. 또한 가속은 운전자의 생명을 위협하는 요소가 커지지만, 정지는 운전자의 생명을 위협하는 요소가 줄어듭니다. 이런 점에서 가속보다 정지가 더 중요하다고 생각합니다. [본문으로]
Trackback 0 Comment 0

ᄒᆞᆫ글 씨! 블로그는 XHTML을 따릅니다.

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

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

벌레의 유형

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

개발자의 답변

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

벌레의 발견

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

HTML 코드로 되어 있는 부분 (빨간 네모 표시 부분)

HTML 코드로 되어 있는 부분 (빨간 네모 표시 부분)

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

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

벌레 분석

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

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

관련 벌레

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

관련 문서

내부 문서

외부 문서

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


Trackback 0 Comment 0

ᄒᆞᆫ글에서 블로그로 올리기와 주석 표기 문제

한컴오피스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 코드

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

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

블로그로 올린 문서의 주석 표시 부분의 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"><sup>1)</sup></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"><sup>1)</sup></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"><sup>1)</sup></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이라는 뜻입니다. 주석 번호를 하나하나 지정할 필요가 없다는 뜻입니다. 아무튼 이것을 적용하는 문제는 ᄒᆞᆫ글 개발자가 해결할 일이겠지요.

관련 벌레

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

관련 문서

내부 문서

외부 문서

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


Trackback 0 Comment 0

프로그램과 유니코드

유니코드 지원이란?

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

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

유니코드 출력

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

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

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

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

CLCL

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

예시 1 : 유니코드를 잘 나타내는 CLCL

예시 1 : 유니코드를 잘 나타내는 CLCL


예시 2 : 유니코드를 뭉개져 버린 CLCL

예시 2 : 유니코드를 뭉개져 버린 CLCL


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

Notepad++

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

메모장의 유니코드 출력 - 옛한글은 한국어 영역이 아닌 유니코드 영역에 있다.

예시 3 : 메모장의 유니코드 출력 - 옛한글은 한국어 영역이 아닌 유니코드 영역에 있다.


Notepad++ ANSI 버전의 유니코드 출력

예시 4 : Notepad++ ANSI 버전의 유니코드 출력


Notepad++ 유니코드 버전의 유니코드 출력

예시 5 : Notepad++ 유니코드 버전의 유니코드 출력


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

관련 문서

 

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


Trackback 0 Comment 0

"Haansoft PDF"의 성능은?

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

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

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

벌레의 유형

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

개발자의 답변

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

벌레의 발견

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

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

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

배점 기준 및 평가 방법

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

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

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

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

메모장에 붙여넣기를 한 뒤의 모습

메모장에 붙여넣기를 한 뒤의 모습

검증 1 : Adobe Reader

Adobe Reader에서의 복사 화면

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

Foxit Reader에서의 복사 화면

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

UNIDOCS ezPDF Reader에서의 복사 화면

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

ePapyrus PDF-Pro 4 Free에서의 복사 화면

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는 쓰지 않는 것이 좋을 듯싶습니다.

관련 벌레

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

관련 문서

내부 문서

외부 문서

PDF 보기 프로그램

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


Trackback 0 Comment 2

한컴오피스2010 베타버전의 PDF 출력 버그

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

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

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

벌레의 유형

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

개발자의 답변

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

벌레의 발견

ᄒᆞᆫ글에서 올바르게 나타나는 옛한글

ᄒᆞᆫ글에서 올바르게 나타나는 옛한글


PDF 파일에서 해괴하게 바뀐 옛한글 - 이건 어느 프로그램에서 출력했을까요?

PDF 파일에서 해괴하게 바뀐 옛한글 - 이건 어느 프로그램에서 출력했을까요?

사용할 프로그램

오피스웨어 프로그램

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

PDF 제작 프로그램

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

PDF 보기 프로그램

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

ᄒᆞᆫ글에서 프린트 - PDF 출력

ᄒᆞᆫ글에서 프린트 - PDF 출력

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

PDF를 지원하는 가상 프린터 1

PDF를 지원하는 가상 프린터 1


PDF를 지원하는 가상 프린터 2

PDF를 지원하는 가상 프린터 2

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

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

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

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

Adobe Reader

ePapyrus PDF-Pro 4 Free

Foxit Reader

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

UNIDOCS ezPDF Reader

결론 1

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

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

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

오픈오피스의 예제 글귀

오픈오피스의 예제 글귀

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

결론 2

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

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

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

ᄒᆞᆫ셀은 흉칙한 모양을 보여줍니다.

ᄒᆞᆫ셀은 흉칙한 모양을 보여줍니다.


ᄒᆞᆫ셀은 흉칙한 모양을 보여줍니다.

ᄒᆞᆫ셀은 또다시 흉칙한 모양을 보여줍니다.


ᄒᆞᆫ쇼는 예쁜 모양을 보여줍니다.

ᄒᆞᆫ쇼는 예쁜 모양을 보여줍니다.


ᄒᆞᆫ쇼는 예쁜 모양을 보여줍니다.

ᄒᆞᆫ쇼는 예쁜 모양을 보여줍니다.

벌레 분석 및 덧붙이는 말

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

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

모가지가 떨어진

모가지가 떨어진

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

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

모두 18개의 섬네일 이미지

모두 18개의 섬네일 이미지

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

관련 벌레

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

관련 문서

내부 문서

외부 문서

PDF 제작 프로그램

PDF 보기 프로그램

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


  1. 프린트를 수십 번 하고, 그것을 다시 문서 보기 프로그램으로 열었습니다. 그 작업을 하다 보면 그게 왜 단순노동인지 뼈저리게 느끼게 됩니다. 거기에 더하여 스크린샷도 그만큼 찍어서 편집하고 웹에 올리는 작업을 해 보면, 못 느끼면 목석이지 사람이 아닙니다. [본문으로]
Trackback 0 Comment 0

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

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

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

벌레의 유형

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

개발자의 답변

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

벌레의 발견

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

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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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

벌레 분석 및 덧붙이는 말

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

관련 벌레

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

관련 문서

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

내부 문서

외부 문서

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


Trackback 0 Comment 2

ᄒᆞᆫ글2010 베타버전과 옛한글 표기 오류

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

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

벌레의 유형

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

개발자의 답변

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

벌레의 발견

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

예시 1 : 깨끗하게 나타난 옛한글과 글귀

예시 1 : 깨끗하게 나타난 옛한글과 글귀


예시 2 : 무언가 어긋난 옛한글

예시 2 : 무언가 어긋난 옛한글

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

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

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

검증 1 : 기울어진 옛한글

예제 1 잘라내기예제 2 잘라내기

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

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

예시 3 : 메모장에서 72포인트 굴림 글꼴로 나타낸 ᄒᆞᆫ글

예시 3 : 메모장에서 72포인트 굴림 글꼴로 나타낸 ᄒᆞᆫ글


예시 4 : 메모장에서 72포인트 굴림 옛한글 글꼴로 나타낸 ᄒᆞᆫ글

예시 4 : 메모장에서 72포인트 굴림 옛한글 글꼴로 나타낸 ᄒᆞᆫ글

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

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

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

검증 2 : 옛한글의 글꼴

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

예시 5 : 메모장에서 72포인트 은 바탕 글꼴로 나타낸 ᄒᆞᆫ글

예시 5 : 메모장에서 72포인트 은 바탕 글꼴로 나타낸 ᄒᆞᆫ글

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

글꼴 외양 비교 1글꼴 외양 비교 2

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

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

벌레 분석 및 덧붙이는 말

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

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

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

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

환골탈태급 벌레! 누가 저것을 한 글자라고 여길까요?

궁극의 환골탈태급 벌레!

관련 벌레

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

관련 문서

내부 문서

외부 문서

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


Trackback 0 Comment 0

오피스 설치 파일에서 글꼴 파일만 빼내기

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

필요한 파일

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

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

압축 풀기

다운로드 받은 설치 파일

다운로드 받은 설치 파일

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

7-Zip으로 압축 풀기

7-Zip으로 압축 풀기

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

압축이 풀린 상태

압축이 풀린 상태

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

방금 압축을 푼 폴더

방금 압축을 푼 폴더

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

보기 > 자세히로 바꾼 화면에서 종류별로 정렬하기

보기 > 자세히로 바꾼 화면에서 종류별로 정렬하기

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

.Cab 파일 가운데 글꼴이 들어 있는 것 찾기

.Cab 파일 가운데 글꼴이 들어 있는 것 찾기

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

글꼴 찾기

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

글꼴 압축 파일의 압축을 푼 상태

글꼴 압축 파일의 압축을 푼 상태


하위 폴더의 목록 화면

하위 폴더의 목록 화면

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

FontView로 본 글꼴 정보

FontView로 본 글꼴 정보

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

함초롬바탕의 글꼴 정보

함초롬바탕의 글꼴 정보

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

관련 문서

내부 문서

외부 문서

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


Trackback 0 Comment 2

파이어폭스 오류 코드 - ssl_error_rx_record_too_long

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

오류 내용

ssl_error_rx_record_too_long 오류 화면

ssl_error_rx_record_too_long 오류 화면

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

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

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

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

관련 문서

내부 문서

외부 문서

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


  1. 이 버그를 제가 발견하지 못했다는 뜻입니다. 오해 없기를 바랍니다. [본문으로]
Trackback 0 Comment 0

ᄒᆞᆫ글2010 베타버전과 유니코드 3 - Unicode Full Set 지원??

한컴오피스 베타버전 버그 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 지원? 정말??

Unicode Full Set 지원? 정말??

저처럼 눈 나쁜 사람을 위해 그 부분만 잘랐습니다.

저처럼 눈 나쁜 사람을 위해 그 부분만 잘랐습니다.

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

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

베타뉴스에 나타난 Unicode Full Set을 지원 글귀

베타뉴스에 나타난 Unicode Full Set을 지원 글귀

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

함초롬체를 직접 언급한 이투데이 기사

함초롬체를 직접 언급한 이투데이 기사

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

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

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

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

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

위키백과의 한컴 2바이트 코드 문서의 마지막 부분

위키백과의 한컴 2바이트 코드 문서의 마지막 부분

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

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

어도비 리더에서 불러온 부수 색인 파일 136쪽의 400% 확대 화면

어도비 리더에서 불러온 부수 색인 파일 136쪽의 400% 확대 화면

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

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

어도비 리더에서 불러온 한자 파일 747쪽 제1단의 200% 확대 화면

어도비 리더에서 불러온 한자 파일 747쪽 제1단의 200% 확대 화면

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

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

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

ᄒᆞᆫ글2010의 문자표에서 나타나지 않은 U+9FBB 코드 포인트

ᄒᆞᆫ글2010의 문자표에서 나타나지 않은 U+9FBB 코드 포인트

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

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

현재 글꼴은 함초롬돋움

현재 글꼴은 함초롬돋움

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

현재 글꼴은 함초롬바탕

현재 글꼴은 함초롬바탕


글꼴은 바뀌어도 U+9FBB 코드 포인트의 글자는 나타나지 않습니다.

글꼴은 바뀌어도 U+9FBB 코드 포인트의 글자는 나타나지 않습니다.

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

한글이 밉게 나와서 자주 쓰지 않는 Code2000 글꼴

한글이 밉게 나와서 자주 쓰지 않는 Code2000 글꼴

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

Code2000 글꼴로 바꾼 뒤 잘 나타나는 코드 포인트 U+9FBB의 글자

Code2000 글꼴로 바꾼 뒤 잘 나타나는 코드 포인트 U+9FBB의 글자

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

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

획수조차 나타나지 않는 한자 사전

획수조차 나타나지 않는 한자 사전

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

벌레 분석

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

관련 벌레

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

관련 문서

내부 문서

외부 문서

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


  1. 정해진 것이 하나 더 있습니다. 바로 글자의 외형(glyph)입니다. 다만 글자의 외형은 글꼴에서 지원하지 않으면 나타낼 수 없으므로, 실제로 정해진 것은 바로 획수입니다. [본문으로]
Trackback 0 Comment 3

2010년 1월 27일자 Yslow 발표

2010년 1월 26일자 Yslow 문제를 게시한 지 22시간 만에 Yslow v2.0.6 발표되었습니다. 몇몇 자잘한 버그를 수정했다고 합니다.

방금 설치해서 [사용함]으로 바꾸어도 파이어폭스가 죽지 않고 잘 동작합니다.

상태 표시줄의 Yslow

상태 표시줄의 Yslow



Trackback 1 Comment 0

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

한컴오피스 베타버전 버그 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입니다.

유니코드 번호가 0208?? 설마?

유니코드 번호가 0208?? 설마?

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

라틴 확장-B 문자 영역에 나타난 U+0208

라틴 확장-B 문자 영역에 나타난 U+0208

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

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

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

정상적으로 출력된 유니코드 번호

정상적으로 출력된 유니코드 번호

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

벌레 분석

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

관련 벌레

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

관련 문서

내부 문서

외부 문서

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


  1. 이때 <strong>유니코드 번호가 4자리</strong>라는 말의 뜻은 <span style="color: red;"><strong>어떤 문자의 유니코드 번호를 16진수 4자리 이내로 표현할 수 있다</strong></span>는 뜻입니다. [본문으로]
Trackback 0 Comment 0

2010년 1월 26일자 Yslow 문제

2010년 1월 26일자 Yslow 부가기능을 업데이트할 경우 파이어폭스를 다시 시작하지 못하고 죽는 현상이 있습니다.

아직 설치하지 마시고 며칠 기다려 주십시오.

만약 이미 설치하였는데, 파이어폭스를 다시 시작하지 못하고 종료되어 버린다면, 파이어폭스를 안전모드로 시작하여 제거하거나 사용 중지하기 바랍니다.


Trackback 0 Comment 0

유니코드 문자표는 없나요?

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

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

유니코드의 문자 목록은 당연한 말이겠지만, 유니코드 컨소시엄 홈페이지(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(라틴 문자)으로 표기되어 있습니다.

찾을 코드 번호를 입력하고 [Go]를 클릭!

찾을 코드 번호를 입력하고 [Go]를 클릭!


정상적으로 찾아준 화면

정상적으로 찾아준 화면

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

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

존재하지 않으리라 여겨지는 코드 번호를 입력하고 [Go]를 클릭!

존재하지 않으리라 여겨지는 코드 번호를 입력하고 [Go]를 클릭!


얼핏 보면 정상적으로 찾아준 듯싶은 화면

얼핏 보면 정상적으로 찾아준 듯싶은 화면

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

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

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

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

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

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

유니코드 최신 버전 페이지 찾아 가기

유니코드 최신 버전 페이지 찾아 가기


Unicode 5.2.0 웹페이지 - 현재 최신 버전입니다.

Unicode 5.2.0 웹페이지 - 현재 최신 버전입니다.

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

왼쪽에 보이는 5.2.0 UCD 부분이 우리가 찾는 그것입니다.

왼쪽에 보이는 5.2.0 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)을 클릭하여 디렉터리에 들어갑시다.

유니코드 표준 5.2.0의 최종 데이터 파일이 있는 디렉터리

유니코드 표준 5.2.0의 최종 데이터 파일이 있는 디렉터리

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

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

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

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

덧붙이는 말

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

관련 문서

내부 문서

외부 문서

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

Trackback 0 Comment 0
prev 1 2 3 4 next


티스토리 툴바