안녕하세요. 린치핀소프트 한광희입니다.

오늘은 웹 페이지 개발 기획 또는 개발단계에서 고민하게 되는 “크로스 브라우저” 문제에 대해서 이야기해보려고 합니다.

어떠한 소프트웨어와 프로그래밍언어를 이용하여 웹 페이지를 구성하든 웹 페이지는 “인터넷 브라우저”를 통해 보여지고 이 인터넷 브라우저는 보통 웹 서비스 개발자가 큰 영향을 미치기 어려운 영역입니다. 그래서 웹 페이지를 오픈하고 이용자가 어떠한 인터넷 브라우저와 디바이스들로 접속을 하는지 로그와 분석툴을 이용해 분석할때가 있기는 하지만, 강제적으로 특정한 브라우저를 이용하도록 할 수는 없습니다.

그래서 보통 웹 페이지를 개발할때 이용자들이 많이 사용하는 브라우저들을 대상으로 최적화를 염두해 두고 작업을 하고 해당 인터넷 브라우저들에서 웹 페이지의 기능이 정상적으로 작동하며 콘텐츠나 레이아웃을 구독하는데 문제가 없도록 하는 작업이 필요합니다. 이 작업을 보통 “크로스 브라우저(Cross Browser) 최적화” 작업 이라고 말합니다.

하지만 개발 초기 어느 브라우저까지 최적화 작업을 지원해볼것이냐에 따라 개발 기간과 비용이 큰차이가 나기도 합니다.

browsericons

 

 

 

그래서 이에 대해서 보통 개발방법이나 기준을 구상하는데, 제가 사용하는 2가지 방법 또는 기준을 소개합니다.

 

반응형 페이지는 IE(인터넷 익스플로)8까지(6,7,8)는 사실 지원하는데 추가적인 노력이 필요합니다. 이는 IE8까지 반응형 페이지 요소(Media Query)를 지원하지 않고 IE9부터 지원하며, IE8까지 지원하기 위해서는 그에 따라 추가공수가 많이 들어갑니다.

또한 애니메이션 효과(transition,transform)등과 같은 CSS3의 요소들이 IE10에서는 많은 부분 지원되나, IE9에서는 지원되지 않는 부분이 많습니다.

그래서 모든 브라우저와 같은 브라우저 내에서도 버전이 상이한 경우 일관된 사용자경험을 유지하기는 어렵습니다. 이는 기술의 발전에 따라 구형브라우저의 도태와 그를 보완하기 위한 개발자들의 노력에 의해 좌우되곤 합니다.(예를들어 IE8에서 반응형을 지원하긴 위한 Respond.js의 이용과 기능적으로 CSS3요소를 보완하기 위한 Modernizr.js 등)

그래서 보통 이런 브라우저를 지원하기 크게 2가지 방법중 택일을 하여 개발하게 됩니다.

린치핀소프트는 우아한 성능 저하 방법론을 선호합니다.

 

– “우아한 성능 저하

반응형 페이지 또는 CSS3, HTML5등 사용자경험과 인터페이스를 강화시켜줄수 있는 웹 표준 요소를 차용하는 비교적 최신 브라우저들을 기준으로 웹 서비스를 개발합니다.

하지만 IE6~8, 부분적으로 IE9에서는 최신 기술(웹표준 및 HTML5,CSS3)의 적용이 어려운 점을 반영하여 콘텐츠는 보여주되 이미지의 효과나 레이아웃의 변동은 시각적으로 최신 웹표준을 지원하는 브라우저와 동일한 사용자 경험과 일관된 인터페이스를 제공하지는 않는 방향입니다.  최신 웹 기술들과 웹표준을 기반으로 비교적 최근 브라우저에서 가장 높은 사용자경험과 인터페이스 설계를 하고 구형브라우저 일수록 기능과 경험을 제공하는데 조금씩의 제한을 감수하는 방법입니다.

조금 과격하지만, 프로젝트의 도메인과 해당 웹 서비스의 이용자 분석을 기반으로 구형 브라우저는 팝업창 또는 이미지를 통해 최신 브라우저 업그레이드를 권고하고 콘텐츠를 보여주지 않을 때도 있습니다.

 

– “점진적인 향상

비교적 IE7-8등과 같은 구형브라우저에서도 지원하는 기술을 토대로 사이트를 구성하여  IE7-8등에서도 핵심기능과 콘텐츠가 정상적으로 구현되도록 구성합니다. 그 후 최신 브라우저등에 대한 사용자경험요소 강화 작업을 거칩니다.

이는 공기관 / 대형포털 / IE7-8 과 같은 구형 브라우저 지원이 꼭 필요한 경우에만 수반됩니다. 이는 통상적으로 “우아한 성능 저하”와 비교하여 비용과 기간이 커질 수밖에 없습니다. “우아한 성능 저하” 방법보다 “점진적인 향상”이 필요한 경우에는 보통 구형 브라우저(IE7-8)등을 고객(이용자)이 분명 이용하며 이에 대한 지원이 필요함이 명시적일때 이 방법을 차용합니다.