그게 IE6에서도 지원되나요?

웹사이트에 HTML5나 CSS3 같은 기술을 도입하려고 받게 되는 질문입니다.

몇몇 이유 때문에, 우리나라의 웹 환경은 아직도 IE6에서 크게 벗어나지 못하고 있는데요. 이 때문에 HTML5나 CSS3이 얼마나 개선되었고 만들기도 수월한지와는 상관없이, 대다수 사용자가 사용하는 웹브라우저에서 볼 수 있는지가 가장 심각하게 고려할 부분이 되어 버렸습니다.

그런데, IE6이나 몇몇 기존 브라우저들이 최신 기술을 구현하지 못한다고 해서 손을 놓고만 있을 수는 없습니다. 몇 년이 걸릴지는 몰라도 웹 환경은 점점 HTML5와 CSS3으로 옮겨갈 테니까요. (시간에 따른 웹 브라우저 점유율 변동표도 참고하세요.)

이런 진퇴양난을 극복할 방법은 바로, 하위 호환성입니다. HTML5와 CSS3을 적용하여 개발하면서도, 기존 브라우저를 위한 대안을 마련해두는 것이죠.

예를 들어 HTML5에서는 마크업을 개념적으로 잘 정의하자는 의미에서 header, footer, nav 등의 새로운 태그들을 추가했습니다. 그런데 이 태그를 사용한 웹페이지를 IE에서 불러보면 모든 게 엉망진창이 되어 있겠죠?

이를 해결하는 대안은 바로 다음과 같은 자바스크립트 구문입니다.

<br>
&lt;!--[if lt IE 9]&gt;</p>
<p>document.createElement("nav");</p>
<p>document.createElement("header");</p>
<p>document.createElement("footer");</p>
<p>document.createElement("section");</p>
<p>document.createElement("aside");</p>
<p>document.createElement("article");&lt;![endif]--&gt;<br>

자바스크립트에 의존해야하는 단점이 생기긴 하지만, 모든 사용자에게 잘 보인다는 장점에 비하면 감수할 만하겠죠?

이렇게, HTML5와 CSS3의 장점들을 설명하면서도, 기존 브라우저를 배려한 대안을 설명하는 책을 소개합니다. 바로, 『HTML5 & CSS3 : 오늘 구현하는 내일의 웹 표준』입니다.

26가지 팁으로 구성된 이 책은, ‘오늘 구현하는 내일의 웹 표준‘이라는 부제에 걸맞게 각 팁을 기존 브라우저에 적용할 수 있는 방법들도 설명합니다. 또, 각 기술이 향후 어떤 식으로 발전해가며 여기에 대해서는 어떻게 대처해야 할지도 간략히 짚어줍니다.

번역은, 클리어보스에서 HTML5 명세의 한글판과 UX MYTHS의 번역본을 작성하신 걸로 유명한 한선용(검은태양) 님이 맡아주셨습니다. 예제 코드를 한글화하고 스크린샷을 새로 찍는 와중에, 웹브라우저들이 업데이트되면서 현재 상황에 맞게 본문을 수정하느라 고생이 많으셨답니다.

마크업 개발자들이 새 표준을 배워서 쓸 때 가장 어려운 점은 배우고 익히는 과정 자체가 아닙니다. 바로, ‘기존 브라우저들이 지원하지 않는데 어떻게 하지? 좋은 건 알겠는데, 깨지는 걸 쓸 순 없잖아!’라는 걱정입니다.

이 책의 진가는 바로 여기에 있습니다. HTML5와 그 장점을 설명하고 끝내는 것이 아니라, 기존 브라우저에서도 최신 브라우저와 거의 같은 사용자 경험을 전달할 수 있는 방법을 소개합니다. 우리가 구조와 표현을 분리해서 점진적 발전을 이뤘듯이, 오래된 브라우저를 위한 폴백과 새 표준을 깔끔하게 분리했으므로 더 좋은 방법으로 바꾸거나 더이상 필요 없어서 삭제할 때도 아주 쉽게 일할 수 있습니다.

『HTML5 & CSS3 : 오늘 구현하는 내일의 웹 표준』은 바로, 지금 읽어야 할 책이라고 생각합니다.

– 옮긴이의 글 중에서…

이 책을 통해 최신 기술을 웹사이트에 적용하는 데 방해되는 기존 브라우저라는 장애물이, 조금이나마 해소되었으면 좋겠습니다. ^^

※소스 코드와 정오표