Upgrade to Wordpress 2.3 and some more

블로그 엔진을 Wordpress 2.3으로 업그레이드하고 테마를 좀 손 보았다. 이번 버전에서의 가장 큰 변화는 Plugin Update NotificationTags 라고 한다. Tag 기능이 기본 장착됨으로 인해 그동안 난립하던 태그 관련 플러그인들이 역사의 뒤안길로 사라지게 되었다. 이 블로그에 사용되던 UTW와 Tag Cloud widget for UTW 역시 deactivated 되었다. 개인적으로 가장 큰 변화에 한가지 더 추가하자면 관리자 모드의 속도를 꼽고 싶다. 클릭할 때마다 몇 초씩 뜸을 들이던 현상이 거의 사라진 듯 하다.

버전 올리는 작업 하는 김에 그동안 벼루고 있던 테마 작업 좀 하였다. 새 버전에 맞게 어차피 수정했어야 했다. 이번 테마의 가장 큰 특징은 라운드 코너와 제대로된 줌 브라우징이다.

디자인을 위해 의미론적으로 무의미한 태그를 사용하는 대신 자바스크립트를 이용하여 동적으로 처리하였다. 이번 버전에 기존으로 장착되어 있는 jquery 1.1.4의 마법을 빌어 어렵지 않게 구현할 수 있었다. 반경 10px짜리 라운드 코너를 구현하는데 다음과 같은 20×20 이미지 하나와 css 트릭 몇 가지면 충분하다. IE에서 1px씩 밀리는 현상으로 인해 골치까 좀 아팠지만, IE를 감지하여 그럭저럭 해결하였다.

Round Corner

또한 줌브라우징을 위해 고민을 많이 하였다. 1)일반적으로 레이어 폭은 고정시키고 폰트를 상대 크기로 지정하는데 이렇게 하면 줌 확대시 전체적이 레이아웃이 매우 부조화스럽게 된다 (가장 흔하게 접하는 방식임). 2)그렇다고 레이어를 상대 크기로 지정하면 줌 확대시 브라우저 창을 넘어가 켄텐츠의 일부가 보이지 않는 현상이 발생할 수 있다(http://mozilla.or.kr와 같은 웹표준이나 웹접근성을 선도하는 웹사이트들이 주로 채택하고 있음). 3)아예 폭을 창크기에 맞추어 놓은 경우는 여백이 없어 답답한 느낌을 준다(디자인적 요소보다는 접근성에 절대적 우위를 둔 몇몇 블로그에서 관찰됨).

제대로 된 줌 브라우징이라는 말은 기본적으로는 여백을 살린 일반적인 형태의 레이아웃(위 1번)에서 폰트와 레이어 폭 모두를 축소/확대 할 수 있지만(위 2번), 폰트가 계속 확대되더라도 레이아웃이 브라우저 창 크기 이상으로는 확대되지 않게 했다는 뜻이다(위 3번). 즉 위에 언급한 세가지 형태의 레이아웃의 장점을 모두 갖춘 방식이라 할 수 있다. 아직까지, 이런 개념을 설명한 글은 보았지만, 이런 것을 제대로 구현한 웹페이지를 본 기억이 없다. 특히 라운드 코너와 같은 디자인 요소까지 흐트러짐 없이 구현되는 홈페이지는 한번도 접한 적이 없다. 그런 의미에서 나름대로 신선한 도전이었고, 완벽하지는 않지만 이정도 수준에서 만족스럽다.

그외 블로그를 무겁게 하던 플러그인들을 제거하거나 가벼운 것으로 교체하였다. 특히 그동안 플러그인들에 많이 사용되는 prototype이나 mootoolsjquery로 교체하고 나니, 체감속도가 혁명에 가까울 정도로 빨라졌다. IE에서도 이미지의 폭에 max-width가 작동하도록 하기 위해 스타일시트에 expression 코드를 넣어 두었었는데 효과는 좋았지만 W3C 유효성검사를 통과하지 못하는 것이 내내 마음에 걸렸었는데, 이것 역시 jquery로 가볍게 헤치우고 나니, 한결 마음이 가볍고 정신건강에 좋은듯 하다.

그리고 보니, 내게도 zdnet 컬럼리스트 김국현님 글대로 기어헤드의 피가 흐르는 모양이다. 블로그에 글을 올리는 것보다 블로그를 튜닝하는 것을 더 즐기는 것 같다.(http://www.zdnet.co.kr/itbiz/column/anchor/goodhyun/0,39030292,39140684,00.htm)

RSS feed: http://makeittrue.net/wp/2007/10/18/98/feed/

TrackBack URI: http://makeittrue.net/wp/2007/10/18/98/trackback/

Top

Leave a Comment

Quote selected text in this page

:mrgreen::|:twisted::arrow:8O:):?8):evil::D:idea::oops::P:roll:;):cry::o:lol::x:(:!::?: