진보 음악의 대중화를 표방하면서 활동 중인 노래패 우리나라의 팀블로그가 지난 4월에 오픈했네요 . Tattertools를 이용하여 만들어진 블로그인데, 스킨이 무척 맘에 맘에 듭니다. 블로그 스킨만 보고 기분이 좋아지긴 오랫만이네요. 성민장군님 스킨 만드시느라 수고하셨습니다!

스킨을 만든 성민장군님은 제가 진행하는 웹디자이너를 위한 CSS 강의를 수강하셨죠. 그 때 인연으로 사석에서 술도 마실 정도로 친분이 쌓였답니다. 사실 제 사무실과 성민장군님의 댁이 가까운 인연이 크게 작용한 거죠. 다음 약속도 잡아야 하는데, 제가 바쁘다는 핑계로 자꾸 미루고 있습니다. 조만간 함 뵙죠~

저는 노래패를 무척 좋아합니다. 모교인 전남대학교에 횃소리라는 노래패가 있었는데, 통기타 배운다고 자주 찾아가다 보니, 그곳의 동기와 선/후배들과 꽤나 돈돈한 관계로 발전했기 때문입니다. 그곳 선배들이 무대에 나가 노래를 부를 때는 열심히 앵콜을 부르던 떄가 있었죠~ ^^;

시대를 바로 보며, 거짓에 타협하지 않는 목소리로 대중과 호흡하는 멋진 노래패 우리나라가 되길 바랍니다.

웹브라우저는 문서형식(Doctype)에 따라 CSS나 DOM(Javascript)을 다르게 해석하고 있다. 즉, Strict 문서형식에서는 CSS나 DOM을 W3C의 권고안에 맞게 웹페이지를 랜더링하지만, Transitional 문서형식에서는 각 브라우저마다 제각각 랜더링하고 있다.

Transitional 문서형식이라도 파이어폭스나 오페라 또는 네스케이프 네비게이터처럼 최근에 출시된 웹브라우저는 가급적 W3C의 웹표준 권고안에 맞게 웹페이지를 랜더링하는 편이지만, 오래전에 출시된 인터넷 익스플러는 독특(IE정신?=박지호정신?)하게 랜더링하고 있다.

전세계적으로 IE의 웹브라우저 시장점유율이 높기 때문에(물론 국내처럼 IE 광신도 국가도 없지만), 이러한 IE의 랜더링 버그는 많은 웹디자이너들이 CSS의 사용을 어렵게 했다. 특히 박스모델의 padding과 border 값을 width 값으로 포함하는 IE의 독특한 랜더링이 버그가 골칫거리였다. 이 버그 때문에 웹디자이너들은 불필요한 (x)HTML 마크업을 사용해야 하거나(예:중첩 div 사용) IE 전용 CSS hack을 공부해야만 했다.

관련 이미지 : (출처 – MSDN)

이러한 문제를 해결하는 방법은 MSDN에도 설명되어 있듯이 Strict 문서형식을 사용하는 것이다. 링크의 타겟을 줄 수 없는 문제는 자바스크립트를 이용해서 해결할 수 있다. 가장 큰 문제는 바로 DOM의 랜더링도 W3C의 웹표준 권고안을 따르기 때문에, 재작성해야 하는 것이다.

국내에 대표적인 무료 웹어플리케이션은 게시판에 제로보드와 블로그에 테터툴이 있다. 이 어플리케이션들은 Transitional 문서형식을 취하고 있다(문서 형식이 지정되지 않으면 대부분의 브라우저는 Transitional로 인식한다). 이러한 점 때문에 국내 무료 웹어플리케이션과 CSS를 이용해서는 웹페이지를 만들기가 쉽지 않다.

내가 워드프레스로 블로그툴을 옮긴 이유도 이때문이다. CSS를 이용하면 웹페이지를 간단하게 만들고 꾸밀 수 있지만, 국내에서 제작된 어플리케이션으로는 이러한 CSS를 사용하는 것이 너무너무 복잡하기 때문이다.

테터툴 1.0에 대해서 기대하는 블로거들이 많은 것으로 알고 있다. 나 역시 블로그툴을 바꿀 생각은 없지만, 많은 기대를 하고 있다. 특히 웹표준에 맞게 프로그램을 만들었으면 좋겠다. 더이상 웹표준이냐 아니냐의 논쟁은 의미 없다. 가장 쉽고 빠르게 웹페이지를 제작하는 방법이 바로 웹표준을 따르는 것이기 때문이다.

제작자님이 얼마전에 일본으로 갔다고 하던데, 최근 일본에서는 웹표준에 맞게 웹사이트를 제작한다고 알고 있다. 테터툴 1.0이 국내에서 웹표준을 선도하는 어플리케이션이 되길 바란다. 워드프레스와 경쟁하는 세계 만인의 블로그 툴이 되었으면 좋겠다.

워드프레스 한글언어팩에 기본 테마는 이미 곰님의 수정으로 사용하는데 무리가 없지만, 해외에서 제작된 250여개가 넘는 워드프레스 테마를 만끽하기 위해선 테마 파일의 수정이 반드시 필요하다. 코덱스에 워드프레스의 테마를 구성하는 파일들을 간단하게 설명하고 있지만, 내 나름대로, 테터툴의 스킨과 비교하여 조금은 구체적으로 파헤처 볼 생각이다.

기본적으로 워드프레스에서 반드시 필요한 파일은 기본 템플릿 파일인 index.php 이다. 테터툴과 마찬가지로 index.php 파일 하나만으로도 블로그를 구성할 수는 있다. 테마 만드는 사람 마음일 것이다. 다만, 답글까지 한꺼번에 보여준다면, 아니 보여주지 않고 숨겨놓더라도 파일을 읽는데 소요되는 시간은 상당할 것이다. 즉, 파일의 크기나 트래픽량의 증가는 감수할 수 있다면, index.php 파일 하나만으로도 상관없다.

이런 이유에서 워드프레스에서 또 하나의 중요한 파일이 single.php 이다. 파일명처럼 글 하나를 볼때 사용되는 파일이다. single.php 와 함께 다니는 파일은 comment.php 이다. 답글(꼬릿말)이나 트랙백, 핑백의 내용을 보여주며 답글을 작성할 수 있도록 하는 파일이다. 트랙백 주소도 이곳에 표현된다.

Style.css 는 구조화된 워드프레스 테마 템플릿의 시각적인 부분을 담당한다.이미지, 배경색/이미지/아이콘, 폰트 크기/색, 박스 크기/색 등 눈으로 볼 수 있는 대부분을 정의하는 파일이다. 이는 인라인 스타일을 사용하는 대부분의 테터툴 스킨과 다른점이다.Style.css를 수정하기 위해서는 Topstyle pro 3과 같은 프로그램을 이용하는 것이 편리할 것이다.

여기까지만 보면, 테터툴의 index.php 파일을 워드프레스에서는 index.php + single.php + comment.php + style.css 파일로 쪼개 논 것 같다. 맞다. 파일의 효율성을 위해서 독립시킨 것이다. 여기에 다양한 레이아웃을 보여줄 수 있도록 category.php achive.php

예전에 한번 비교해보니 워드프레스 기본테마의 필수 파일 3가지(style.css 제외)를 합친 것이 테터툴 기본스킨의 index.php 파일보다 크기가 훨씬 작았던 것으로 기억난다. 이는 table 레이아웃과 div + CSS 레이아웃의 차이점이랄 수 있다.

아래는 일반적으로 워드프레스의 테마에 포함된 파일 구조이다.

• inde.php : 기본 템플릿 파일 (대부분 아래의 파일로 분리됨)
  • header.php : 상단에 항상 표현되는 파일
  • footer.php : 하단 항상 표현되는 파일
• style.css : 기본 스타일 파일 (경우에 따라 아래 파일들로 분리됨)
  • layout.css : 레이아웃을 구성하는 파일
  • default.css : 기본적인 클랙스나 아이디를 구성하는 파일
  • print.css : 블로그 내용을 프린트할 때 사용되는 파일
• single.php : 글 하나만 볼 때 사용되는 파일
  • comment.php : 답글을 쓸때 사용되는 파일
  • comment-popup.php : 팝업창으로 답글을 쓸때 사용되는 파일
• sidebar.php : 사이드바(메뉴)를 구성하는 파일
  • sidebar-left.php : 3단 구조에서 왼쪽 사이드바를 구성하는 파일
  • sidebar-right.php : 3단 구조에서 오른쪽 사이드바를 구성하는 파일
• search.php : 검색결과를 보여주는 파일
• archive.php : 글 묶음을 볼 때 사용되는 파일
  • category.php : 글의 분류에 따라 글을 볼때 사용
  • date.php : 년, 월, 일별로 글을 볼 때 사용
• page.php : 블로그 글과 다른 정적인 형식인 페이지를 볼때 사용
  • archives.php : 기본적인 페이지 템플릿
  • author.php : 블로그 주인을 소개할 때 사용하는 페이지 템플릿
  • contact.php : 이메일을 발송할 관련 페이지의 템플릿
  • link.php : 링크 관련 페이지의 템플릿
• 404.php : 블로그에 없는 파일을 찾을 때 보여주는 파일

이렇게 많은 파일들은 페이지 로딩속도 향상과 레이아웃의 다양화를 위해서 반드시 분리되야 한다고 생각한다.

수정 : 워드프레스의 테마에 대한 자세한 설명은 UrbanGiraffes님의 블로그에서 확인할 수 있다.

몇몇 블로거들이 흥미반관심반으로 워드프레스를 설치하지만, 꾸준히 사용하지 못하고 다시 테터툴로 옮기는 현상이 있다. 마치 몇달 전에 국내 많은 네티즌들이 파이어폭스를 설치했다가 곧 익스플러로 되돌아간 현상과 같다.

자신만의 디자인과 스타일을 찾고자 하는 설치형 블로거들에게 외관적으로 볼때 워드프레스 기본 테마는 단순하게 생겼음에도 불구하고 무려 16개 파일들(이미지 파일 제외)로 구성되어있다. 이는 단 3개의 파일로 구성된 테터툴보다 접근하기 어려울 것이다.

나는 블릭스 테마를 사용하고 있다. 이 녀석의 경우는 20개의 파일을 구성되어 있다. CSS만 기본, 레이아웃, 봄계절용의 3개를 구성되어 있으며, 테마 자체적으로 최근 글 플러그인 외의 PHP 함수를 포함한 파일도 존재한다. 하지만, 나는 20개의 파일이 결코 많다고 생각하지 않는다. 오히려 필요한 템플릿 파일은 추가로 만들어 쓰고 있다.

오히려 테터툴이 워드프레스처럼 템플릿 파일들을 지원하지 않음을 아쉬워 하고 있다. 자신만의 스타일을 중요하게 생각하는 블로거들에게 표현할 수 있는 레이아웃이 하나밖에 없다는 건 슬픔일 것이다. 오히려 테터툴의 작은 파일 숫자가 블로그의 레이아웃을 복잡하게 표현하도록 강요하는지도 모른다.

테터툴 보다 워드프레스의 템플릿 태그들은 다양하다. 조금 다양하다. 문제는 다양함이 아니라 템플릿 태그를 한글로 설명해 준 곳의 존재 유무일 것이다. 그리고, 테마(스킨)나 Hack, 플러그인을 제공하는 개발자가 기능들에 대해서 한글로 설명해 주느냐 일 것이다.

나 역시 테터툴을 통해서 처음으로 블로그를 설치했다. TT를 통해 제대로 된 블로그 세계에 첫걸음을 했던 것이다. 이 글은 결코 테터툴을 비난하는 글이 아니다. 다만, 익숙함으로 인해 새로움을 두려워 말길 바랄 뿐이다.

250여개가 넘는 다양한 테마와 수많은 개발자들의 참여로 만들어지는 플러그인을 내세운 워드프레스가 해외에서는 설치형 블로그의 대세라는 말도 들리고 있다. 요즘 국내에도 사용자가 늘어나고 있고, 포럼도 만들어지고 있다.

만들어진 길을 걷기 보다 내가 만든 길을 많은 사람들이 이용하는 것이 좋은 상상 아닐까? ^-^