아래는 웹 문서에서 많이 쓰이는 대표적인 활자들과 그들의 올바른 HTML entities 표기이다.

• “ 큰 시작 따옴표 “
• ” 큰 마침 따옴표 ”
• ‘ 작은 시작 따옴표 ‘
• ’ 작은 마침 따옴표 ’
• – 반각 대시 기호(en dash) –
• — 전각 대시 기호(em dash) —
• − 빼기 −
• × 곱하기 ×
• … 말 줄임표 …

웹에서의 활자 표시는 종이 인쇄 역사 보다 훨씬 짧은 이유로 제대로 된 활자를 표현하는 데는 비교적 더 많은 제약을 받지만, 그것이 불가능한 것도 아니고 단지 아직 잘 알려지지 않았을 뿐이다.
(여기서는 WordPress의 콩나물 따옴표 문제로 설치했던 Unfancy Quote Plugin 때문에 따옴표들이 밋밋하게 표시된다.)

참고 글:

• Web Typography Sucks | Slides and notes from SxSW 2007
• A List Apart: Articles: The Trouble With EM ’n EN (and Other Shady Characters)
• Character entity references in HTML 4
• Daring Fireball Projects: SmartyPants

WordPress에다 종종 프로그램 코드를 붙여두는 편이지만, 항상 자동 변환되는 이 콩나물 모양의 따옴표(curly quotes)가 골치거리였다. 특히나 특정 단어를 제대로 감싸주지 못하고 제멋대로 그 방향이 틀어지는 버그는 WordPress 2.2 버전에나 가서야 고쳐질 예정이지만, 이 문제가 심각한 것은 올려놓은 코드를 복사해서 그대로 프로그램 상에 적용했을 경우 제대로 작동하지 않거나 Internet Explorer에서는 쌍으로 된 꽁나물 따옴표가 제대로 표시되지도 않는 문제가 있기 때문에 차라리 자동 변환 기능을 없애주는 것이 상책이다.

결국 웹에서 찾은 Unfancy Quote Plugin를 설치해 주었다.
‘ ’ “ &#8221 놈들의 머리만 따서 밋밋한 ' "로 되돌려 준다.

아무 준비없이 그냥 뛰어든다면 그 코드는 물론 무참히 깨지고 말 것이다. 그렇기 때문에 항상 코드 속 HTML entities들과 겹치는 부분은 웹 상에서도 그대로 보여지도록 알맞게 고쳐주어야 한다. 악명 놓은 놈들로 >, &, <가 있지.

물론 간편하게 웹 상에서 준비 작업을 해줄 수도 있겠지만, 한글 사용에 약간 문제가 있고 서버와의 연결은 필수 조건이다.

단순한 작업이지만 매번 번거로워서 Dashboard 용 widget으로 만들게 되었다.

이름을, 약간 우습지만, 웹에 뛰어든 코드(Code Postable)로 지었는데, Dashcode Beta에서 탄생한 첫 위젯이지만 만드는 작업이 꽤 순조로웠기에 앞으로 발표될 정식 버전이 기대된다.

그나저나, 정작 위젯 1순위 후보에서 탈락한 온라인 문법/철자검사기가 utf-8를 지원해주면 좋으련만 아쉽군… 🙁