웹의 단계적 향상
오늘날의 World Wide Web 은 참 재미있게 움직이고 있습니다.
HTML5 와 CSS3 같은 최신 웹표준 기술이 뜨거운 감자로 부상하고 있고, 특정 웹브라우저가 웹을 독식하던 몇년 전과 달리 다시 웹브라우저 춘추전국시대가 되었으며, 아이폰과 안드로이드에 의해 모바일 웹이라는 새로운 공간이 등장하였습니다. 이렇게 구버전/신버전이 혼재된 혼란스러운 상황 속에서 웹의 선구자들에 의해 "단계적 향상(Progressive Enhancement)" 이라는 개념이 주목을 받고 있습니다.
"단계적 향상"은 성능이 가장 낮은 웹브라우저를 기준으로 모든 웹브라우저에서 똑같이 보이도록 개발하지 않고, 모든 사용자에게 제공되어야 할 필수 정보는 모두 제공하되 최신 웹브라우저를 쓰는 사람에게 더욱 좋은 화면 효과와 추가 기능을 제공한다는 개념입니다.
과거에는 웹표준은 존재했지만 강제성이 없어서 (현재도 강제성은 없습니다) 각 브라우저 벤더들도 표준보다는 자사의 브라우저에 화려한 독자적 기능을 제공하는 것을 우선하였기에 브라우저 간의 호환성이 부족했습니다. 모든 브라우저가 같은 문제를 가지고 있었지만 가장 문제였던 브라우저는 가장 점유율이 높았던 Internet Explorer 6 이었지요. ^^;
예전 웹 개발시에는 가장 점유율이 높은 웹브라우저(보통 IE6 -_-+)에 맞추어 다른 브라우저를 무시하거나, 각각 다른 스펙으로 지원하는 기능을 공통적으로 제공하기 위해 CSS핵을 사용하여 분기하거나, 모든 환경에서 똑같이 보여주기 위해서 가장 뒤떨어진 브라우저(보통 IE6 -_-++) 의 스펙에 맞추어 개발했습니다. 개발에 걸리는 시간이 훨씬 많고, 생산성 또한 낮아지며, 신기술도 사용할 수 없어 최신이 최신이 아니게 됨은 의심할 바 없지요.
우리나라의 경우 지원브라우저의 범위를 한정시키고 그 브라우저에 맞게 개발하는 경우가 많았던 것 같습니다. (보통 IE6 -_-+++)
그래서 우리나라에서는 세계적 추세와 다른 비정상적인 인터넷 익스플로러의 점유율(98%)을 보여주었는지도 모릅니다.
네이버의 굿바이 익스플로러6 캠페인 중 카툰 (http://campaign.naver.com/goodbye-ie6)
IE6 에 관한 개인적인(?) 원망은 여기에서는 묻어두기로 하겠습니다. ㅎㅎㅎ
아무튼 이러한 상황을 개선할 수 있는 비장의 카드는 바로 "웹표준" (저희 팀 이름이기도 하죠) 입니다. 어떤 웹브라우저라도 표준을 지원한다면 웹표준으로 개발된 사이트는 같은 동작을 하는 것을 보장하기에, 웹 환경에 있어서 상호 호환성을 확보할 수 있습니다.
즉 기준 브라우저가 웹표준을 잘 지원하는 브라우저이며 이 브라우저에서 잘 동작한다면 다른 웹표준 지원 브라우저에서도 제대로 동작한다는 보장을 할 수 있으므로, 개발 시간이 단축되고 개발 품질을 높일 수 있으며 브라우저를 한정지을 필요도 없어집니다.
굳이 언급하지 않아도 다 아시겠지만요... ^^;;
이런 혁신적인 "웹표준"의 개념이 한바탕 인터넷 세계를 휩쓸고, W3C와 웹브라우저 벤더들과 웹제작자들이 한마음 한뜻으로 웹표준을 통해 시장 상황을 바꾸려고 노력했음에도 불구하고, 우리나라 인터넷 상황은 그다지 개선되지 못했습니다.
끝까지 질긴 생명력을 유지하는 Internet Explorer 6 때문이었죠! (아 혈압...) 우리나라가 인터넷 강국이라고는 하지만 Windows XP 시절에 컴퓨터가 많이 보급되었고, Windows XP의 기본 웹브라우저인 IE6은 쉽사리 업그레이드 되지 않았습니다. 오히려 IE6 이 가볍다며 많이 쓰이고 업그레이드를 기피하게 되는 기이한 현상도 있었죠.
그래서 이 상황을 개선할 수 있는 또다른 개념이 "단계적 향상" 입니다. 위에서 간단하게 소개했듯이 필수 기능은 모든 사용자에게 제공하되 최신 웹브라우저에서는 더 나은 화면과 효과, 추가된 부가기능을 사용할 수 있게 개발한다는 개념입니다.
이를 통해 신기술 도입에 장벽이 사라지고, 개발에 소요되는 시간이 줄어들어 생산성을 높일 수 있다는 장점이 있지요. 또한 최신 웹브라우저를 사용하는 사용자에게 부가 기능과 풍부한 경험을 제공하기 때문에, 그렇지 않은 사용자에게 웹브라우저의 업그레이드를 자연스럽게 유도할 수도 있습니다.
몇가지 개발 예제를 보여드리겠습니다.
네이버me와 함께 새롭게 개편된 네이버SE(http://se.naver.com)의 로그인 창에는 CSS3 의 animation, transform 이 적용되어 있습니다.
네이버me 역시 단계적 향상 개념이 도입되어 HTML5와 CSS3를 잘 지원하는 크롬 브라우저에서는 CSS3 애니메이션 효과를 추가로 누릴 수 있습니다.
| .snb_fd .snb{-webkit-animation:snb_close .4s alternate;height:100%} ... .snb{-webkit-animation:snb_show .4s alternate} ... @-webkit-keyframes snb_close{from {-webkit-transform:translate(250px, 0px)}to{-webkit-transform:translate(0px, 0px)}} @-webkit-keyframes snb_show{from {-webkit-transform:translate(-250px, 0px)}to{-webkit-transform:translate(0px, 0px)}} |
이 효과는 IE나 파이어폭스 등 css3를 아직 지원하지 않는 브라우저에서는 보이지 않지만, CSS3를 지원하는 웹킷 엔진의 브라우저인 사파리, 크롬 등으로 확인하면 다음과 같이 부드럽게 열리고 닫히는 효과가 있습니다.
(아래는 유튜브 동영상이지만, 버그로 인해 IE에서 제대로 보이지 않습니다 ㅠㅠ 우선 파이어폭스 또는, 크롬, 또는 직접링크로 확인 부탁드립니다.)
또한 네이버 모바일에서 이미지 검색에서도 웹표준과 HTML5를 지원하는 아이폰/안드로이드와 이전 웹브라우저(Opera mobile 9.5) 간에서 기능지원에 대해 차이가 있습니다. 아이폰의 경우 터치 스크롤을 통해 이미지를 부드럽게 움직이는 효과가 추가되어 있지만, Opera mobile 9.5 의 경우 이를 지원하는 데에 한계가 있기 때문에 더 간단한 UI를 지원하며, 터치 스크롤 또한 제공되지 않습니다.
(아래는 유튜브 동영상이지만, 버그로 인해 IE에서 제대로 보이지 않습니다 ㅠㅠ 우선 파이어폭스 또는, 크롬, 또는 직접링크로 확인 부탁드립니다.)
옴니아2(opera mobile 9.5)에서 이미지 검색 기능제한
이 개념에 대한 가장 큰 장애물은 모든 환경에서 똑같이 보여야 한다는 오래된 관념입니다. 웹디자이너와 기획자, 개발자들은 사용자가 어떤 웹브라우저를 쓰던 1픽셀도 틀림없는 똑같은 디자인과 기능을 제공하기 위해 노력하였습니다. 심지어 같은 화면도 모자라서 아예 다르게 볼 수 있는 기능 자체를 막으려고 하기도 합니다.
하지만, 사실상 사용자와 화면의 제한은 불가능합니다. 사용자 역시 콘텐츠를 소비하는데 자유를 가지고 싶어하고, 색상, 폰트, 화면크기, 글자크기 등을 조절하고 싶어하기도 합니다. 또한 다르게 보이는 것을 막는 것은 그 자체로도 웹의 지향하는 방향과 반대방향을 보게 되지요.
이러한 고정 관념은 IE6 의 점유율을 계속 떨어뜨리지 못하는 원인 중 하나가 되기도 하고, 사용자의 다양성을 인정하지 않으며, 결국 웹 환경의 발전을 늦추어 자신의 발목을 스스로 붙잡게 하는 장애물이 될 수 있습니다.
다행히 우리나라 웹에서도 위에서 보듯 단계적 향상을 적용하는 곳을 점차 늘려가고 있고, 국내에서도 네이버를 비롯한 많은 서비스가 Internet Explorer 8을 주요 웹브라우저로 사용할 수 있도록 업그레이드 캠페인을 하고 있습니다. 사실 IE8 은 웹표준을 지원하지만 HTML5와 CSS3는 지원하지 않아 조금 아쉽고, 개인적으로는 웹킷 엔진을 사용한 구글 크롬을 더 권장하고 싶긴 하지만요. ^^;;
빠른 시간 안에 더 많은 사람들이 더 좋은 웹브라우저를 통해 더 풍부한 경험을 할 수 있는 세상이 오면 좋겠습니다.