브라우저 호환성 대응 방안

Browser Compatibility - 브라우저 호환성 대응 방안

PC/모바일에서 사용하는 브라우저가 다양하고 각각의 레이아웃 엔진, Javascript 엔진이 다르고 지원하는 기능 범위도 차이가 있습니다. 

부분적인 기능이지만 참고 http://html5test.com/compare/browser/chrome-37/firefox-32/ie-11/ie-8.html 

그로 인해 개발과 검수하는 단계에서 현재 진행하고 있는 프로젝트가 고객들이 사용하는 주요 브라우저에서 잘 서비스되는지 검토해야 합니다. 

아래는 검토 시 필요한 내용들을 정리하였습니다.

브라우저 호환성 대응 기준

호환성 대응 방법을 얘기하기 전에 어떤 범위까지 지원할지 정리가 필요합니다 

아래는 체크가 필요한 방향과 기준에 대해서만 작성하였습니다. 

주요 브라우저

모든 프로젝트, 모든 기능에 아래 브라우저들을 전부 테스트할 필요는 없습니다.

Windows				Mac
IE7+	Latest	Latest	Latest	Latest	Latest	Latest

지원하는 주요 브라우저 선택 기준

프로젝트에서 목표로 생각하는 고객의 브라우저 시장점유율 확인 : 글로벌의 개별 지역에 따라 점유율을 확인하면 됩니다. 

• http://marketshare.hitslink.com/ (계정이 있는지 확인이 필요합니다.) 
• http://gs.statcounter.com/ 

고객 로그 분석 솔루션을 이용할 수 있다면 반드시 체크가 필요합니다. (ex. logger, Google Analytics, WebTrends 등등)

브라우저 호환성 대응 방법

개발 시 체크

1. 프로젝트 개발 진행 전 브라우저 지원 범위 정의

• 현재 서비스 중인 프로덕트의 경우 지원 범위 정리

2. 개발 시 다른 브라우저 확인 필요

• 개발 시 사용한 브라우저 기준이 아닌 개발 내부 테스트 시에는 사용자가 보는 브라우저 기준으로 확인해야 합니다. 
• 아래 코드는 서비스 중인 웹이 IE의 특정 버전으로 랜더링 되도록 정의한 코드입니다. 첫번째는 IE8로 랜더링 되고, 두번째는 사용자의 최신 IE 브라우저로 랜더링 됩니다.

html

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">

즉 IE의 경우는 여러 버전에서 확인하지 않으면 개발PC 브라우저, 랜더링 설정된 버전으로만 확인하게 됩니다.

3. 브라우저 호환성 대응을 위해 Object Detection 방식으로 코드 작성 권장

• Javascript 개발 시 현재 Jquery 등의 검증된 오픈소스를 대부분 사용하고 있어서 별도의 브라우저 호환성 대응을 위한 코드 체크는 거의 없는 것으로 알고 있습니다.
• 다만 Jquery 등의 오픈소스를 적용하더라도 개발자가 직접 브라우저 Dependency가 있는 코드, 기능을 작성하는 경우는 반드시 생기므로 그럴 경우 Object Detection 방식으로 코드 작성을 권장합니다.

• Object Detection 방식은 Javascript의 Method, Property가 해당 브라우저에서 지원하는지 체크 후 코드 분기하는 방식을 말합니다. 
• 단지 UA값으로 특정 브라우저라고 단정해서 분기하면 브라우저가 업그레이드 될 때마다 지원하는 기능에 제대로 대응하지 못하게 됩니다. 
• 크롬일 경우는 버전이 수시로 바뀝니다. http://www.chromium.org/developers/calendar

4. 브라우저 호환성 보기(Compatibility View) 이슈 숙지 필요

참고로 이 호환성 보기 이슈는 IE일 경우 해당됩니다. 

호환성 보기는 브라우저가 IE7과 거의 동일한 방식으로 웹 페이지를 렌더링할 수 있게 하는 Internet Explorer의 기능입니다. (MS 국내 담당자 유선 확인)

http://msdn.microsoft.com/ko-kr/library/ie/gg622935(v=vs.85).aspx

호환성 보기가 발생할 수 있는 상황은 사용자 PC에서 IE의 브라우저 호환성 보기를 사용하는 경우, 다시 말해 사용자가 인위적으로 호환성 보기를 사용 하거나 적용된 해당 PC를 사용할 수 있습니다.

5. IE 호환성 보기 대응

개별 코드 대응을 통해 동작하도록 하기

드물지만 작성한 코드의 Method, Property 들이 호환성 이슈에 Dependancy가 있다면 아래 사항을 체크하셔야 합니다. 

일반적인 UA String 체크가 아닌 아래 조건으로 체크해야 합니다.

• IE7의 navigator.userAgent에 trident가 없다. 
• IE8+에는 msie 7이라는 스트링이 없다. 
• IE7 && trident가 userAgent 스트링에 포함되어 있다면 호환성 모드다.

javascript

var ua= navigator.userAgent.toLowerCase();
if( ua.indexOf('msie 7') > -1 && ua.indexOf('trident') > -1 ) {
  //IE7 호환성
} else {
  //…
}

공통 코드 대응을 통해 무시하기

• 개별 코드 대응에서 기술한 방법으로 해당 케이스 별로 체크할 수 있고 컨펌이나 얼럿창을 통해 안내 문구나 공지 페이지로 리다이렉트 처리하는 방법이 있습니다.

검수 시 체크 사항

검수 조직 내용을 체크하도록 합니다. 검수 조직은 QA 조직을 포함한 검수하는 부서를 말합니다. 

• 개발 초기 협의한 브라우저 지원 범위를 전부 테스트할 수 있는가? 
• 비용, 현실적인 이슈가 없는지, 있다면 개발 복잡도와 주요 기능

ex) 로그인, 결제, 고객의 자산이 소모되는 기능 등에 한해 전부 테스트 하는 방안으로 협의 협의는 프로젝트 초기 단계에서 설정해야 합니다.