웹표준에 대한 오해
버즈삼구님의 “웹 2.0시대를 여는 10가지 거대한 변화의 반론“의 웹표준에 대한 부분의 반론입니다.
1. 웹 표준을 지켜라.
웹표준을 지켜야 하는 이유는 여러가지 브라우져에 제대로 혹은 잘 보이게 하는 가장 편리한 방법이기 때문이지 그 이상도 아닙니다. 그리고, 테이블도 엄연한 표준이지만, 레이아웃을 테이블로 잡는 것은 웹표준이 아니라는 말은 어패가 있습니다.실제 CSS를 이용한 레이아웃은 테이블에 비해서 수정이 쉽다고 하지만, 아주 간단한 레이아웃이 아닌 약간만 복잡한 레이아웃을 CSS만으로 적용하려 하면 테이블에 비해서 아주 많은 노력이 있어야 합니다. 테이블이 매우 직관적인데 비해서 CSS는 코드 자체만으로 디자인이 머리에 그려지질 않기 때문에 수정이 쉽지도 않습니다. 또한, 테이블에 비해서 CSS는 브라우져마다 약간씩 적용되는 바가 틀리기 때문에(padding이나 margin 등) CSS 핵이라는 전혀 필요없는 코드가 들어가야 합니다.
1번에 대해서는 처음 정의부터 잘못된 것 같습니다. 웹표준은 단지 브라우저 호환성을 가지기 위한 것이 아닙니다. 디자인과 컨텐츠를 분리하여 의미론적 웹을 구현하는데 그 목적이 있다고 생각합니다. 테이블의 용도는 표 데이터를 만들기 위한 요소로 레이아웃을 위한 요소가 아닙니다.
그리고 XHTML+CSS의 수정이 어렵다는 것은 아직 국내의 웹표준으로 사이트를 구축하는 기술이 정착되지 않은 과도기적인 상황이라 그런 것 같습니다. 저도 지금까지 꽤 많은 시간을 테이블로 코딩을 해왔고 처음 XHTML+CSS로 사이트를 구축했을 당시에는 상당히 고생했던 것이 사실입니다. 하지만 잘 짜여진 사이트라면 CSS만큼 편하고 쉬운 것이 없는 것 같습니다.
일모리님이 말씀하신 것처럼 IE5.0나 5.5를 대상 브라우저에서 제외하고 사이트를 제작하는 경우, hack이 사용되어지는 경우는 그렇게 많지 않습니다. 제대로 된 구조를 잡는다면 hack을 거의 사용하지 않고 사이트를 구축할 수 있습니다.
모바일에 대한 부분은 저도 모바일 사이트를 구축한 적이 없어서 제대로 언급하지는 못하겠지만 제 휴대폰에 들어있는 모바일용 브라우저(Openwave System Mobile Browser 1.0.8.3)로도 웹표준으로 구축된 사이트를 볼 수 있습니다. 물론 디자인적인 부분은 표시되지 않지만 컨텐츠는 확인 가능합니다. 저는 이런 부분에서 웹표준의 모바일에의 가능성을 크게 느끼고 있습니다.
2. 모든 브라우저를 지원하라.
이 것은 당연합니다. 하지만 모든 브라우져에 적용할 수 있게 제작하기 위해서는 테이블 베이스의 디자인 밖에는 없습니다. 오페라와 같은 브라우져에서 제대로 보이는 디자인을 CSS로 구현하는 것은 실질적으로 불가능합니다. 아주 간단한 디자인이라면 몰라도…그리고, 이 부분이 중요한 이유는 또 한가지가 있는데, 광고가 들어가는 웹사이트에서 타브라우져로 보았을때 광고가 제대로 보여지지 않는다면 신뢰도에 큰 문제가 생깁니다. 페이지뷰로 단가가 책정되는 이미지 광고의 경우 보여지지도 않는 광고로 광고주가 광고비를 지급하기 때문입니다. 얼마전까지 야후!의 뉴스페이지 상단 728X90사이즈의 광고가 파이어폭스에서 하단 20픽셀 정도밖에는 보이지 않는 적이 있었습니다. 그것도 꽤 오랫동안…
2번에 대해서도 이 부분은 웹표준으로 구현할 수 없는 부분이 아니라 기술적인 수준이 부족하거나 제대로 브라우저 테스트를 하지 않고 대충 만들었기 때문이라고 생각되어집니다. 특히 국내와 같은 경우 오히려 테이블로 만들어진 사이트가 IE이외에서 제대로 안 보이는 경우가 더 많습니다. 예가 너무 많아서 일일이 들기 힘들 정도이지만 최근에 오픈한 싸이마켓이 대표적인 경우입니다.
국내에서 CSS에 대한 이런 논의가 많은 것은 그만큼 기술적으로 정착이 되지 않았기 때문이라고 생각합니다. 버즈삼구님의 반론에서 언급된 내용들은 대부분 아직 웹표준에 의한 사이트 제작 기술에 익숙하지 않기 때문에 생기는 오해인 것 같습니다.
웹표준의 가장 근본적인, 가장 큰 목적은 모두가 사용하기 편한 웹을 만드는 것이라고 생각합니다.
어바웃 웹 - About WEB: 웹표준과 CSS에 대한 반론입니다.
답글을 남기려 했으나 구글 블로거 서비스 이용자가 아니면 답글을 남길 수 없어서 이곳에 다시 반론을 적습니다. 먼저 제가 적은 글의 “기술적인 언급”부분에서 마음이 상하셨다면 죄송합니다. 하지만 쉬운 길이 있으면 쉬운 길로 가는 것이 좋아 보이거든요
는 아니라고 생각합니다. 쉽게 쉽게만 가면 더 이상 발전이 없다고 생각합니다.
먼저 XHTML은 마크업 언어(markup Language)입니다. 테이블 레이아웃으로 디자인을 하게 되면 당연히 제대로 된 구조를 갖지 못하게 됩니다. 그래서 당연히 CSS로 디자인적인 요소를 지정하게 되어 있습니다.
Web Content Accessibility Guidelines 1.0은 말 그대로 액세스빌리티 가이드라인입니다. 코드의 확장성을 염두에 둔 가이드라인
이 아닙니다. 접근성에 대한 지침으로 이해해 주시길 바랍니다.
시작장애인용 웹사이트를 CSS의 교체만으로 당연히 디자인이 가능합니다. 하지만, HTML 문서를 새로 만드는 것이 훨씬 빠를 것입니다.
CSS+XHTML 문서를 이용해야 되는 이유는 콘텐츠의 재활용(확장성)에 있다는 것을 W3C문서에서 알 수 있었습니다.
CSS의 교체로 리뉴얼을 하는 것 보다는 템플릿을 이용한 리뉴얼이 훨씬 유연한 환경을 제공합니다.
템플릿을 이용하면 이런 것은 매우 수월하게 만들 수 있습니다. 반면 CSS를 이용해서 제작한다고 하면 대부분 사람이 인정하듯이 쉽지 않은 일이 되어 버립니다. 그리고, 테이블 레이아웃에 중간중간 CSS를 적용하면 가장 빠르고 대부분의 브라우져에서 보여지는 웹사이트 제작이 가능합니다.
현실적으로 XHTML이 추구하는 방향에 가장 확실하게 부합하는 것은 디바이스 별 디자인이 별도로 들어가는 것입니다. 모바일용 웹페이지 따로, PC용 따로, PDA용 따로… 템플릿을 이용하면 이런 것은 매우 수월하게 만들 수 있습니다. 반면 CSS를 이용해서 제작한다고 하면 대부분 사람이 인정하듯이 쉽지 않은 일이 되어 버립니다. 그리고, 테이블 레이아웃에 중간중간 CSS를 적용하면 가장 빠르고 대부분의 브라우져에서 보여지는 웹사이트 제작이 가능합니다.
이 부분들에 대한 논리적 근거를 적어주신 글만으로는 조금 이해하기 힘들군요. 템플릿(정확히 어떤 템플릿을 말씀하시는지는 잘 모르겠지만…)을 말씀하신다면 XHTML+CSS로도 충분히 템플릿을 구축할 수 있습니다. 여러 디바이스에 대응하기 위하여 새로 페이지를 만드는게 더 쉬운지 CSS를 수정하는게 더 쉬운지…상식적으로 생각해봐도 수정하는 편이 더 쉽지 않겠어요?
실례로 프로젝트를 진행하는 경우 기본적으로 두가지 타입의 미디어에 대응하여 CSS를 작성하고 있습니다. screen용과 print용, 대부분 먼저 screen용을 작성한 다음 print용을 작성하는데…print용의 CSS는 극히 짧은 시간에 작성할 수 가 있습니다. screen용을 베이스로 두고 조금만 수정하면 됩니다. 가령 700페이지 정도의 사이트를 작업한다고 했을때 일일히 print용 페이지를 만드는 것 보다 print용의 CSS를 하나 만드는게 훨씬 빠르고 편하다고 생각합니다.
저같은 경우만 봐도 현재 웹디자인을 하면서, 여러가지 프로젝트를 진행하면서 웹표준의 여러가지 장점에 대해서 몸으로 느끼고 있습니다. 반드시 익숙하다고 해서 계속 사용하는 것도 좋지 않다고 생각합니다.
참고로 구글같은 검색엔진이 가장 좋아하는 웹문서는 웹표준으로 제작된 문서입니다. 사람뿐만 아니라 검색로봇에게도 친절한, 알기쉬운 페이지가 바로 웹표준으로 제작된 페이지입니다.
2006-06-12 at 07:59:35
아.. 시험기간이라 제 의견을 길게 쓸 순 없고, 간단하게 정리해볼께요. ㅜ.ㅜ
1. 웹표준을 현재 웹1.0에 끼워 맞추기 위한 기술의 일부(예를 들어 코딩)로 이해하면 안됨.
2. 웹표준을 미래 웹2.0에 나가기 위한 근본으로 이해해야 함.
3. 오페라는 CSS ACID 테스트를 100% 통과한 최고의 CSS 호환 브라우저임.
4. 국내는 물론이지만, 해외에서도 웹표준을 준수함으로써 얻는 효과를 제대로 발휘하는 사이트는 적음.
5. 과연 나는 웹종사자가 될 수 있을지.. 몽상가로 끝날지 고민 중. ^^;
2006-06-12 at 09:19:01
ちょっと！ 自分のようにNetFrontを使っている人もいますから～
2006-06-12 at 11:37:12
hooney님
hooney님은 훌륭한 웹종사자가 되시리라 믿어 의심치 않습니다.
하 씩씩이님
NetFrontって名前だけ知っていましたが、今調べたら結構使えそうですね。
サポートしているプラグインも多いし、HTML4.01、XHTML1.1もサポートしてるんですね！
2006-06-12 at 16:12:44
답변 겸 해서 포스팅했습니다. 제가 봐도 너무 기네요.(후회후회~~)
http://blog.repl.net/web/2006/06/css.html
2006-06-12 at 16:44:31
다시 윗글에 이어서 반론을 작성하였습니다.
2006-06-12 at 21:06:29
안녕하십니까?
Tuna님 블로그에 들렀다가,
제맘대로 nmind님의 영역에 당도했습니다.
너무너무 흥미로운 글들 잘 읽고 물러갑니다.
허락해주신다면 종종 들러 애독하겠습니다.
그럼 오늘도, 내일도, 멋진 하루 맞이하시길 바랍니다.
p.s. 저역시 동경에 거주하고 있사오며,
mac user는 아닙니다. ^^
2006-06-12 at 21:58:25
noctiluca님 안녕하세요. 반갑습니다.
부족한 글 좋게 봐주셨다니 감사합니다. 종종 들려주시면 제가 고맙죠 :-)
noctiluca님도 좋은 하루가 되시길 바랍니다.
2006-06-12 at 22:20:13
버즈삼구님은 CSS문서에 나오는 presentation을 다른 용어와 혼동하고 계신 듯 합니다.
2006-06-12 at 23:01:05
분야를 막론하고 항상 표준 - standard - 의
정의에 대한 논의는 흥미롭습니다.^^
더욱 열띤 논쟁을 두근거리며 기대하겠습니다.
2006-06-13 at 00:07:15
신현석님
네. 조금 오해하고 계시는 부분이 있으신 것 같아서 반론을 하는데 저도 조금 흥분한 것 같습니다. 제가 다시 읽어봐도 조금 얄미운 것 같습니다..;;
noctiluca님
블로그 주소 끝에 “/”이 없어서 제대로 연결이 안되더라구요. 수정해드렸습니다.
noctiluca님 블로그에 유익한 정보도 많고 즐거운 블로그더군요 :-) 저도 RSS추가했으니 종종 놀러가겠습니다. 잘 부탁드립니다.
앞으로 더 열심히 공부해야죠. 인격적으로 조금 더 성숙해질 필요도 있는 것 같습니다.
2006-06-14 at 11:17:51
웹표준의 오해 토론 #2…
제 이전글에 이어 버즈삼구님께서 긴 포스팅으로 덧글을 다시 남기셔서 짧은 덧글로는 힘들거 같네요. ^^;;
(대한민국 토고를 이겼으니 프랑스도 잡기를 기원하며… 불가능 이겠지만서도. …
2006-06-14 at 16:15:45
원래 흥분하면 얄미워지잖아요 ^^ 죄송합니다. 저도 약간 흥분 상태로 쓴 것 같아요.
현석님, CSS에서 말하는 presentation에 대한 짦은 코멘트 부탁드립니다. 찾아봐도 잘 모르겠어요 -_-ㅋ
그리고, 템플릿은 스마티나 템플릿 언더바 등을 말했던 것이구요, screen, printer 등의 경우가 템플릿을 씁니다. 제가 작년 초에 CSS만으로 같지만 디자인만 같은 프로젝트를 진행한 적이 있는데요, 가능은 했었습니다.(가능만 했었네요, 디자이너한테 욕을 엄청 먹어서 그렇지요)
아무튼 테이블 레이아웃이 디자이너한테 욕 안먹어서 편해서 그런가봐요. 정말 CSS만으로 디자인 된 코드를 보면 눈이 휘둥그레질 정도로 복잡했거든요. 직관적이지 않다라는 말은 그래서 나온 것이고…
그리고, XHTML은 HTML보다 조금 엄격한 면이 있어서(익스플로러에서도 두가지 모드가 있죠) 혼용을 하게 되면 정말 이상하게 렌더링 되는데요, 포탈사이트에 들어가는 경우, 상단 탭은 그 회사에서 제공하게 되는데, 이 코드와 XHTML 코드가 또 맞지를 않는 경우도 있었어요.
이러저러해서 HTML에 테이블 레이아웃이 편하다 라고 생각하고 있는데요… 근데 흥분은 왜 했을까 모르겠네요. 아무튼 축구 이겨서 좋습니다. ^^
2006-06-14 at 17:48:15
역시 코딩은 디자이너가 직접해야 하는 것 같아요. 전부 다 코딩하는게 무리라면 최소한 이런식으로 기본 구조는 잡아줘야 한다고 생각합니다. 디자이너가 시각적인 요소만 디자인하다 보면 전체적인 구조를 보지 못하게 되는 경우가 있더군요. 디자이너도(웹디자이너라면!) 웹표준에 대해서 공부를 해야만 한다고 생각합니다.
CSS로 구성된 페이지의 XHTML은 일목요연하고 알기 쉽지만…CSS의 경우 제대로 정리하지 않으면 만든 사람도 알 수 없을 정도로 복잡해지는 경우도 있습니다. CSS에 중복된 프로퍼티를 줄이고 깔끔하게 만들려면 역시 많이 만들어보고 제대로 정리하는 습관을 들이는게 중요한 것 같습니다.
그리고 XHTML+CSS로 페이지를 작성할 경우 문서형선언(DTD)이 굉장히 중요합니다. 브라우저에게 어떻게 렌더링을 할 것 인지를 지시하는 역활도 하고 문서안에 어떤 요소가 사용가능하고 어떤 요소가 사용 불가능한지는 문서형선언(DTD)에 달려 있습니다. 현실적으로 포탈사이트에 들어가는 페이지의 경우라면 그 사이트가 요구하는 가이드에 맞춰 작업 할 필요가 있겠죠.
이삼구님도 웹표준에 매력을 느끼실 수 있었으면 좋겠습니다. 이삼구님뿐만 아니라 웹에 종사하시는 많은 분들이 웹표준에 매력을 느낄 수 있었으면 좋겠습니다.
그리고 축구 이겨서 정말 좋네요 :-)
2006-06-14 at 18:56:34
제겐 CSS2.0+XHTML1.1을 지키기가 너무 어렵더군요. 그래도 잘 하시는 분이 부럽기도 하네요. 생각이 조금 바뀌었습니다. 불가능하다에서 하면 된다로…
그런데 nmind 님의 코멘트를 보고 있으면 차분해 지는게 릴렉스해 지는 느낌이네요. ^^
2006-06-14 at 20:16:12
웹표준이라고 해서 반드시 XHTML1.1만을 이야기하는 것이 아닙니다. HTML4.01과 XHTML1.0도 존재하고, 그안에 다시 각각 Transitional(상대적으로 느슨한 규격), Strict(상대적으로 엄격한 규격)과 Frameset(프레임을 사용할 경우)의 3종류가 있습니다.
HTML4.01의 Transitional로 작성해보시면 XHTML1.1만큼 고생하지 않을 것이라고 생각합니다. 그리고 Strict, XHTML1.0…웹표준에 대해 정말 조금만 더 이해하시게 되면 그 매력을 느끼실 수 있을거라고 생각합니다. 건투를 기원합니다.
그리고 감사합니다 :-)
헉…이제 정말 일에 집중 해야겠네요
2006-06-14 at 22:08:42
Step by Step to Web Standards…
이정환님의 정리와 일모리님, 이삼구님, 그리고 nmind님의 토론을 보고 내 생각을 몇자 적는다.
최근 회자되는 웹 표준은 W3C의 HTML/XHTML, CSS 등 기술에 대한 명세와 더불어 WCAG 등 웹에서의 접근…
2007-06-12 at 14:54:07
웹디자이너입니다.
테이블 코딩을 주로 하고 있는데,
요즘 회사에서 XHTML+CSS 코딩을 원하고 있어서 자료를 찾다가 이곳까지 도착했습니다.
이 문제에 관한 열띤 토론이 있었군요.
저도 경험해 보니까
디자인이 조금만 복잡해지면 위치, 정렬 등의 문제 때문에 XHTML+CSS 쪽이 훨씬 시간과 노력이 많이 듭니다.
잘만 짜놓으면 XHTML+CSS 쪽이 수정하기 편하다고들 하시는데, 그 ‘잘 짜기’가 힘들다는 것이죠.
제 입장에선 가시적인 테이블 코딩이 훨씬 빨리되고 편한데,
개발자들 입장에서는 XHTML+CSS 쪽이 편하다고 하고…
저희 회사에서도 곧 열띤 토론이 벌어질 것 같습니다. ^^
토론에 앞서 많은 정보와 의견 잘 읽었습니다.
웹 발전을 위해 노력하시는 모든 분들 화이팅입니다~!
2007-06-13 at 18:42:03
안녕하세요 코나나님. 반갑습니다:-)
단순히 수정, 관리의 용이성 때문에 XHTML+CSS을 사용하는 것 보다는 보다 의미에 맞는 웹문서를 작성하기 위해서 XHTML과 CSS로 코딩을 하는 것을 추천하고 있습니다. 물론 거기에 따라 수정, 관리도 용이해지긴 합니다만 역시 가장 중요한 것은 제대로 된 구조를 갖춘 문서를 작성하는 것이라고 생각합니다.
2007-11-08 at 12:32:26
[...] nmind님의 블로그에 웹표준에 대한 오해의 글이 [...]