in 웹 디자인

테터툴 1.0에 대한 바램.

웹브라우저는 문서형식(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이 국내에서 웹표준을 선도하는 어플리케이션이 되길 바란다. 워드프레스와 경쟁하는 세계 만인의 블로그 툴이 되었으면 좋겠다.

댓글 남기기

  1. 간만입니다.

    THEYELL 블로그를 계속 만들어 나가야 하는데, 뭔가 이것만 생각하면 머리 속이 복잡해져서 코딩이 안되네요. ㅡㅜ

    UTF8 지원, XHTML 준수 CSS 의 활용 시스템 지원의 권고안.. 한꺼번에 너무 많은 것을 이룰려고 하면 힘들더군요. 하나씩 해결해나가는 버릇을 들여야 하는데..

    그리고 하나 지적..
    이상하게 이 단어는 오타가 다른 사이트도 대부분이더군요. ‘태’터 라고 부른다고 하더군요. ‘테’터 라고 적힌 곳들이랑 ‘티터’ 도 있던데.. 이 단어 은근히 발음이 어렵게 보이는 걸지도 모르겠습니다 ^^;

  2. 아 그리고 아까 전만 해도 xhtml 에 대한 글이 있다가 사라진 거 같던데, 글 다듬고 계신가 봐요.

    html 의 의미론적 요소에 대해서 고민하고 있는 게, ul 의 사용인데요. 가령 예를 들어 미니위니(아시죠?) 사이트에서처럼 계층적 답글이 있을 때, 이 계층 표현을 의미론적으로 하기 위해서 ul 중첩 [ ul > li > ul > li … ] 식으로 각각 하나의 답글마다 둘러싸는 것이 좋을까요?

    개발하다가 보니, 그렇게 하려면 템플릿 구조 같은 경우 출력시 과도한 ul 겹침(답글이 계층적으로 5단계라면 ul 하위 태그 양만 5배)이 생기더라구요. 하지만 그걸 배제하기 위해 계층이라는 걸 표시하기 위한 오른쪽 밀어내기를 css 로 왼쪽 마진을 주는 건 의미론상으로 안맞는 것 같구요. 게다가 이 경우 css 가 꺼지면 계층이 구분이 안됩니다. 정말 머리아픈 문제.. -_-;

    그래서 조언을 구해 봅니다 ^^

  3. Strict 나 Transitional 이나 둘다 W3C 표준입니다. 랜더링 차이는 DTD 이 없어서 strict 인지 transitional 인지 조차 판별 할 수 없는 문서의 경우 발생합니다. 이것은 Standards mode vs. Quirks mode 의 차이 입니다. 문서 형식이 지정되어 있지 않으면 quirks mode 로 랜더링 됩니다.

  4. yser님/ 개발자시군요. 아~ 몰랐습니다. 하긴 전파발전소 사이트가 조금 독특하기에 직접 개발한 것 같더라구요.

    답글을 리스트 형식으로 쓰는 건 이번 테마 작업하면서 첨으로 해본 거랍니다. 계층 표현이라는 부분에서 중첩 ul, li가 사용되야 겠죠? 확인해보니 미니위니가 독특한 답글 형식을 취하고 있네요~ ^^;

    신현석님/ 새벽에 글을 쓰다가보니 무슨 의도로 글을 썼는지 저도 잘 이해가 안될 정도가 되버리더라구요. ^^; 그러면, 문서형식이 없을 경우에만 발생하는 문제인가요? 제가 잘못 알고 있었네요~ ㅎㅎ

  5. 현석 님, w3c 는 둘 다 표준이더라도 strict 를 권장하고 있는건가요? 제가 영어 해석이 딸려서, 그간 듣기로는 strict 를 권장 하는 거 같더군요.. 저는 tran~ 쪽을 선호하지만요. 그리고 dtd 문제는 ie 의 경우 버그도 있어서 dtd 선언 위에 공백 이상의 것이 있으면 quirks 로 작동 하더군요 -_-; 그래서 권장하는 xhtml 선언의 상위에 <?xml 선언도 못하게 되더군요..

    Hooney 님.. 전파 발전소는 위키고요. 개발 되어 있던 것을 가져다 쓰고 있다가, 아무래도 블로그 개발할 계획도 있었고 배포할 생각을 가지고 있었기에 만들고 있었는데 너무 거창하게 할려고 했던지라 느릿느릿 합니다.

    계층은 역시 중첩 목록인가요.. ㅡㅜ 으.. html 이 커지더라도 역시 의미상으로는 그런건가 보군요. 으음 고민 좀 더 해봐야 겠습니다.

    참.. 궁금한 게 있는데, 혹 아시면..
    http://theyell.org/yser/
    여기서 보시면 익스는 Comment 링크 선택할려고 하면 그 아랫 부분이 몽창 지워져 버립니다. 이건 대체 무슨 버그인가요? -_-; 원인을 모르겠더군요.

  6. yser님 말씀대로 strict 를 권장하고 있죠.
    1.0 transitional 은 말 그대로 transitional, 즉 변화중인 이란 뜻이니 html4.01 과 xhtml 중간 노릇을 하고 있는 샘이죠.

    strict 를 권하고는 있지만 실제 정말 권하고 있는건 xhtml 1.1 입니다. 새로 만들어 지는 사이트는 1.1로 만들으라고 권하고 있더군요 ^^;;

    그리고 신현석님께서 말씀하신 quirt 모드에 IE 가 들어갈 경우, IE6는 IE 5.5 와 같이 행동하게 됩니다.

    네. 아주 슬픈일이되는거죠. ㅡㅜ

Webmentions

  • 일모리 블로그@ilmol.com 2005년 06월 23일

    과연 테터 1.0 의 방향은?

    어떤 한 아리따우신 인테리어 디자이너 분의 블로그를 제작중입니다. WP 숭배자 일모리가 그분께 테터를 추천하여서 아마도 일단은 시작을 TT로 하실듯 싶습니다. ‘TT 추천이라 오호라&#…