일모리와 웹표준

최근 마이크로소프트쪽에서 제안한 버전 지정 Version Targeting 때문에 표준 커뮤니티가 후끈 거리고 있습니다. 하지만 IE 이기 때문에 라는 색안경이 큰 역할을 하고 있는듯 한데요. 이 움직임의 시발점이된 Aaron Gustafson 의 “Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8″ 이라는 글입니다. A List Apart에 소개되었죠. 이제 어느정도 자리를 잡혀가는 한국의 표준 커뮤니티에도 제대로된 토론과 이해가 있었으면 하는 바램으로 번역해서 올립니다.

Translated with the permission of A List Apart Magazine and the author[s].
이하의 글은 A List Apart Magazine과 저자의 허락아래 번역되었습니다.

“Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8″
성장은 언제나 진통이 따른다. 브라우저도 개발자들이 특정 브라우저나 툴에 맞추게 되면 유저들이 진통을 격게된다. 새로운 브라우저 버전들이 공개되고 몇개의 버그들이나 스팩의 약간의 변화에 사이트들은 깨지게 되고 상사나 유저들이 실망하게 되는 것이다.

몇시간을 들여 왜 사이트가 깨졌는지 설명할수 있겠지만 아예 처음부터 깨지지 않는다면 더 낫지 않겠는가?

약간의 배경
CSS의 상당한 업글을 보여주었던 IE7 의 공개에 힘입어 IE팀은 완전히 새로운 렌더링을 탑제한 IE8(CSS2.1 을 최대한 따른) 개발을 시작했다. 그리고 Acid2 렌더링 테스트를 완벽하게 통과하는 기염을 토해내었다. 이것은 IE가 곧 generated content 와 data URL 을 지원한다는 것 뿐만이 아니라 hasLayout 이 완전히 사라진다는 것을 의미한다. Acid2 를 통과한 사파리나 iCab, Konqueror 그리고 오페라와 렌더링에 있어서 동격을 이룬다고 할수 있다. (Firefox3는 Acid2를 통과했지만 아직 출시되지 않았다.)

이번 새 엔진을 개발하는 동안 IE팀은 IE7 을 공개하면서 받은 여러 비판을 잊지 않았다. 몇몇 표준 구루들과 Microsoft의 몇몇 팬들까지도 IE7 이 버그나 CSS 지원에 있어서 충분하지 못했다고 생각했었고 상당수의 개발자들은 IE7 에서 깨지는 사이트들을 바라보며 불신에 속삭였다. 이에 Roger Johanssen은 자신의 블로그에 IE가 깨지는 3가지의 이유를 나열했지만 IE팀은 4번째 이유까지 발견했다. CSS 레이아웃을 가능케 하는 중요 부분인 Doctype 이 호환성을 지키기 위해서 너무나 부족함을 말이다.

서막일수도 있겠죠. IE8의 출시를 앞두고 호환성에 관련한 논란의 바람이 불고 있습니다. (Via WaSP) Microsoft 는 ‘브라우저 버전별 명시’를 제시하며 개발자들에게 버전에 …

오는 7월 23일 Youtube이 정치인과 시민을 잇는다. 유세때의 TV에서만 진행되던 선거 후보들의 문답형식의 미디어에서 벗어나 시민들이 직접 질문을 던지는 시민 참여의 획을 긋는 …

불펌. 쌓아두었던 말도안되는 분위기와 문화에 대해 질러보고자 한다. 최근 likejazz님께서 원칙을 어기셨다고 하셨지만 ^^ 일모리 또한 평상시의 일모리를 벗어나 직설적으로 다가서고자 한다. 먼저 일모리네 구독자 분들께 무뚝뚝한 어투에 대해 사과를 먼저 드리고 싶다.

불펌의 영향
불펌. 불법으로 퍼오는(펌질) 행위의 줄임말로 말그대로 타인의 글을 자신이 쓴 양 출처를 밝히지 않고 올려놓는 것이다. 이미 수많은 이들이 피해를 입었으며 지금 이순간에도 일어나고 있을꺼라 짐작한다. 리뷰, 강좌, 뉴스 하다못해 비평글까지 불펌이 난리를 친다. 헌데 이 불펌피해가 심각한 만큼 우리에게 좋지 않은 문화가 생겨나 버렸다. 이름하여 “Paid-with-a-link content” 출처를 밝히는 펌질, 링크한줄에 자신의 컨텐츠들이 통체로 넘어가도 된다는 아이디어가, 문화가 너무나도 당연하게 펴져버렸고 인식되어 버렸다.

제 이전글에 이어 버즈삼구님께서 긴 포스팅으로 덧글을 다시 남기셔서 짧은 덧글로는 힘들거 같네요. ^^;;
(대한민국 토고를 이겼으니 프랑스도 잡기를 기원하며… 불가능 이겠지만서도. 공은 둥근데다 이번엔 가장둥근 공이니.. ^^)

현석님께서 지적하셨지만 일단 첫 인용부터 약간은 변역을 잘못하신거 같아서 제가 다시하겠습니다.
Using markup improperly — not according to specification — hinders accessibility. Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it. Furthermore, using presentation markup rather than structural markup to convey structure (e.g., constructing what looks like a table of data with an HTML PRE element) makes it difficult to render a page intelligibly to other devices (refer to the description of difference between content, structure, and presentation).

즉, 테이블 레이아웃은 디자인의 쉽고 어려움과는 전혀 상관없이 프로그램에서 데이터를 알기가 힘들고, PC 이외의 다른 기기에서 렌더(HTML을 실제 이미지로 변환하는 것)의 어려움이 있다는 것입니다. 즉, 코드의 확장성을 염두에 둔 가이드라인이라는 것입니다. XHTML로 디자인을 하면 코드 변경없이 모바일에서도 서비스가 된다고 생각하면 쉽습니다. Google은 모바일용 웹사이트에서 XHTML을 지원하고 있습니다.

번역하자면 이렇습니다.
“마크업을 상황에 맞게 해라 - 스펙에 꼭 맞추어서 하는것이 아닌 - 접근성을 떨어뜨린다. (왜냐면) 보여주기 위한 (presentation effect) 마크업을 할때엔 (테이블로 레이아웃을 짜는것) 특별히 제작된 소프트웨어로(예로 스크린리더) 웹서핑을 하는 이들에게 불편함을 줄수 있기 때문이다. 더 나아가서 Structural(구조적인) 마크업 보다 ‘보여주는 마크업’ 으로 구조할때에 타 기기들과 호환성이 떨어지기 때문이다.”

이정환님의 정리를 버즈삼구님께서 반론하신다고 적으신 일부 부분을 발췌했습니다.

웹표준을 지켜야 하는 이유는 여러가지 브라우져에 제대로 혹은 잘 보이게 하는 가장 편리한 방법이기 때문이지 그 이상도 아닙니다. 그리고, 테이블도 엄연한 표준이지만, 레이아웃을 테이블로 잡는 것은 웹표준이 아니라는 말은 어패가 있습니다.

실제 CSS를 이용한 레이아웃은 테이블에 비해서 수정이 쉽다고 하지만, 아주 간단한 레이아웃이 아닌 약간만 복잡한 레이아웃을 CSS만으로 적용하려 하면 테이블에 비해서 아주 많은 노력이 있어야 합니다. 테이블이 매우 직관적인데 비해서 CSS는 코드 자체만으로 디자인이 머리에 그려지질 않기 때문에 수정이 쉽지도 않습니다. 또한, 테이블에 비해서 CSS는 브라우져마다 약간씩 적용되는 바가 틀리기 때문에(padding이나 margin 등) CSS 핵이라는 전혀 필요없는 코드가 들어가야 합니다.

긴글중 아주 짧은 두 문단이지만 여러가지 사실이 아닌 부분들이 많아 키보드를 잡았습니다. 덧글로 달기엔 많을꺼 같았습니다.

답글을 쓰다보니 길어져서 포스팅을 하며 트랙백을 보냅니다. 오랜만에 답글을 위한 트랙백의 목적을 사용해 보네요. ^^
윈도우 라이브 관련 정보를 보다가 구글링하는데 이상한게 있어서 보니까 구글 개인화 페이지가 서비스 되고 있다. 아니 내가 눈이 어두워서 못본 것인가 아니면 지금 새로 시작한 것인가? 하여튼 나는 윈도우 라이브에 대해서 부정적인 생각이 든다. 예를 들자면 신용과 보안이 생명인 은행에서도 고객 돈 빼서 도망가는 사람이 종종 나타나는데, 과연 사적인 정보가 포함되는 개인화 페이지를 만들어 데이타베이스를 구축하면 무사할까? - Mr.Learn
이제 개인화 페이지니 라이브니 하는 쪽으로 사용자를 몰고 가는 셈이다. 그러지 않아도 이미 개인화 페이지는 충분하지 않은가? - Mr.Learn