클라이언트 감지

2014. 11. 20. 11:15 나홀로스터디/JS For Web Dev


9장 클라이언트 감지

이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
 
9.1 기능 탐지 사용
9.2 브라우저 탐지의 역사
9.3 어떤 타입의 탐지를 사용할 것인가


클라이언트 탐지는 웹 개발에서 가장 논란이 많은 주제이지만 개발 전략에서 빼놓을 수 없는 중요 파트이다.



9.1 기능 탐지
클라이언트 탐지 중에서 가장 널리 쓰이는 방법은 '기능탐지'라는 방법인데 이것은 어떤 브라우저를 사용 중인지에는 관심이 없고 어떤 기능이 지원되는지에 주목한다. 기능 탐지에서 매우 중요한 두가지 개념이 있는데 같은 결과를 얻을 수 있는 가장 일반적인 방법을 제일 먼저 테스트해야 한다는 것이고, 두 번째로 중요한 개념은 사용하려는 기능을 정확히 테스트해야 한다는 것이다.


9.1.1 안전한 기능 탐지
기능 탐지는 단순히 원하는 기능이 존재하는지만이 아니라 그 기능이 정확히 동작함을 확힌할 수 있을 때 가장 효과적이다. 함수의 존재여부를 확인하기 위해 typeof 를 써야 하지만 일부 브라우저에서는 정확한 연산자를 반환하지 않을수 있으므로 브라우저와 객체를 가리지 않고 함수의 존재 여부를 확인하려면 isHostMethod() 함수를 써야한다.
// 피터 마이콕스가 개발
function isHostMethod(object, property){   var t = typeof object[property];   return t == 'function' ||     (!! (t == 'object' && object[property])) ||     t == 'unknown'; }
result = isHostMethod(xhr, "open"); // true result = isHostMethod(xhr, "foo"); // false

9.1.2 기능 탐지는 브라우저 탐지가 아니다
특정 기능이나 기능 집합을 탐지할 때 어떤 브라우저에서 실행 중인지 알 필요는 없다. 애플리케이션에서 특정 브라우저 기능이 필요하다면 기능 탐지를 반복하기보다는 몇가지 기능을 묶어서 브라우저 그룹을 만드는 방법이 적절하다.
※ 기능 탐지는 해결책을 찾지 못했을 때 쓰는 보험 같은 것이지, 어떤 브라우저에서 실행 중인지 알기 위함이 아니다.
 




9.2 쿽스 탐지
쿽스탐지는 브라우저의 특정 동작방식을 찾아내려는 것이다. 쿽스 탐지는 보통 짧은 코드를 실행하고 기능이 정확히 동작하는지 확인한다. 쿽스 탐지는 코드를 실행해야 하므로 직접적인 영향이 있는 버그만 테스트하고 가능한 스크립트 첫 부분에서 테스트해서 이를 배제하는 편이 좋다.
 



9.3 브라우저 탐지
브라우저 탐지는 사용자 에이전트 문자열을 통해 어떤 브라우저에서 실행중인지 확인한다. 사용자 에이전트 문자열은 HTTP 요청을 보낼 때마다 받는 응답 헤더에 포함되어 있으며 자바스크립트에서는 navigator.userAgent를 통해 접근한다. 서버에서는 사용자 에이전트 문자열을 보고 어떤 브라우저를 사용 중인지 확인하고 그에 맞게 반응하도록 프로그램 하는 일이 일반적이며 문제도 없지만 브라우저 탐지는 기능 탐지나 쿽스 탐지로 해결되지 않을때만 사용하는 수단으로 여겨진다.
사용자 에이전트 문자열에서 가장 심한 논란거리는 브라우저가 사용자 에이전트 문자열에 잘못된, 또는 착각을 유도하는 정보를 넣어서 서버를 속이는 소위 '위장'의 역사다


9.3.1 역사
명세는 추가적으로 사용자 에이전트 문자열을 토큰/제품 버전의 목록 형태로 만들길 요구하지만 현실에서 사용자 에이언트 문자열은 그리 단순하지 않다

초기 브라우저
첫번째 웹 브라우저인 모자이크는 1993년 NCSA(국립 슈퍼컴퓨터 애플리케이션 센터)에서 만들어졌다. 운영체제와 플랫폼에 따라 매우 다르긴 했지만 모자이크 사용자 에이전트 문자열은 매우 단순해서 다음과 같은 형태였다
Mosaic/0.9 
슬래시 앞에 있는 텍스트는 제품 이름(NCSA 모자이크 또는 변형)이고 뒤에 있는 텍스트는 제품 버전이다.
넷스케이프 커뮤니케이션즈에서 웹 브라우저 개발을 처음 시작했을 때 그 코드 네임은 모질라("모자이크 킬러")였다.
Mozilla/Version [Language] (Platform; Encryption) 
넷스케이프는 제품 이름과 버전을 사용자 에이전트 문자열 맨 앞에 두는 형식을 받아들였지만 언어, 플랫폼(운영체제), Encryption(암호화타입)을 추가했다.


넷스케이프 내비게이터3과 인터넷 익스플로러3
페이지를 인터넷 익스플로러에서 보면 브라우저를 판단할 수 없어서 페이지가 깨지곤 했으므로 마이크로소프트는 사용자 에이전트 문자열을 넷스케이프 사용자 에이전트 문자열과 호환되게 만들기로 결정했다.
Mozilla/2.0 (compatible; MSIE Version; Operating System) 

넷스케이프 커뮤니케이터4와 인터넷 익스플로러 4-8
사용자 에이전트 문자열을 업데이트하여 형식을 자주 바꾼 것은 과거에 사용하던 브라우저 탐지 스크립트와의 호환성을 유지하면서도 새 스크립트에는 다른 정보를 제공하기 위함이다.


게코
게코가 처음 개발되던 당시에는 이후 넷스케이프6이 된 범용 모질라 브라우저의 일부분이었다. 넷스케이프6을 위해 만들어진 명세에는 미래 버전에서 사용자 에이전트 문자열을 어떻게 만들어야 하는지 정의하는 내용이 들어있다.
Mozilla/MozillaVersion (Platform; Encryption; OS-or-CPU; Language;
  PrereleaseVersion) Gecko/GeckoVertion ApplicationProduct/ApplicationProductVersion 

웹킷
애플은 2003년 사파리라는 웹 브라우저를 발표했다. 사파리의 렌더링 엔진은 웹킷인데 웹킷은 리눅스 기반 웹 브라우저인 컨터러의 엔더링 엔진 KHTML에서 분기하면서 시작했고 몇 년이 지난 후 웹킷은 독자적인 오픈 소스 프로젝트가 되었고 렌더링 엔진 개발에 초점을 맞추었다.
사파리는 인기 브라우저와 호환된다고 판단할만한 정보를 사용자 에이전트 문자열에 제공하가 위해 사용자 에이전트 문자열 형식을 만들었고, 모든 웹킷 기반 브라우저는 게코 기반 브라우저와 마찬가지로 자신을 모질라 5.0이라 칭한다.


컨커러
KDE 리눅스 데스크톱 환경에 따라오는 컨커러 브라우저는 오픈 소스 렌더링 엔진인 KHTML을 렌더링 엔진으로 사용한다. 호환성을 위해 컨커러 사용자 에이전트 문자열 형식을 인터넷 익스플로러와 비슷하게 만들기로 정했다.
Mozilla/5.0 (compatible; Konqueror/Version; OS-or-CPU) 

크롬
구글의 크롬 웹 브라우저는 렌더링 엔진으로 웹킷을 사용하지만 자바스크립트 엔진은 독자적으로 개발했다. 크롬의 사용자 에이전트 문자열에는 웹킷이 들어가는 모든 정보와 함께 크롬 버전도 포함된다.


오페라
오페라의 기본 자용자 에이전트 문자열은 최신 브라우저 중에서는 가장 논리적이어서 이름과 버전을 정확히 표시한다.


IOS와 안드로이드
모바일 운영체제인 iOS와 안드로이드의 기본 웹 브라우저는 모두 웹킷이므로 데스크톱과 같은 기본 사용자 에이전트 문자열 형식을 공유한다.
 


9.3.2 브라우저 탐지 사용
사용자 에이전트 문자열을 가지고 특정 브라우저인지 판단하는 것은 대단히 복잡한 문제이다.

렌더링 엔진 식별
렌더링 엔진을 정확히 식별하려면 정확한 순서로 테스트해야 한다. 브라우저의 비일관성 때문에 테스트 순서가 틀리면 부정확한 결과를 얻게 된다.
첫 번째로 오페라인지 판단해야 하는데 오페라의 사용자 에이전트 문자열이 다른 브라우저와 완전히 똑같을 수 있기 때문이다. 오페라에서 실행 중인지 판단하려면 window.opera  객체가 있는지 확인해야 하는데 버전 7.6 이후에는 브라우저 버전 번호를 문자열로 반환하는 version() 메서드가 있다.
두 번재로 테스트할 렌더링 엔진은 KHTML이다. KHTML의 사용자 에이전트 문자열에도 "Gecko"가 들어 있으므로 웹킷과 KHTML 을 모두 배제한 뒤에 게코를 체크하면 안전하다. 케코 버전 번호는 "rv:"와 닫는 괄호()) 사이에 있으므로 버전 번호를 추출하는 정규 표현식은 닫는 괄호가 아닌 모든 문자를 캡처 해야한다.
마지막 렌더링 엔진은 인터넷 익스플로러이다. 버전 번호는 "MSIE"와 세미콜론 사이에 있으므로 이를 찾는 정규 표현식은 단순하다.


브라우저 확인
렌더링 엔진만으로 자바스크립트 기능에 대해 알 수 없을때가 있다. 애플의 사파리 브라우저와 구글의 크롬 브라우저는 모두 웹킷 렌더링 앤진을 쓰지만 자바스크립트 엔진은 서로 다르다. 오페라와 인터넷 익스플로러의 경우 browser 객체에 저장된 값은 engine 객체에 저장된 값과 같다.


플랫폼 감지
여러 플랫폼에서 동작하도록 만들어진 브라우저는 플랫폼별로 다른 문제가 있을 수 있다.
렌더링 엔진과는 달리 플랫폼 정보는 일반적으로 매우 제한적이며 운영체제나 버전 정보를 쉽게 얻기는 힘들다.


윈도 운영체제 식별
플랫폼이 윈도일 경우 사용자 에이전트 문자열에서 운영체제 정보를 더 얻을 수 있다. XP 이전의 윈도는 가정용과 비즈니스용 두 가지 버전이 있었는데 가정용 버전은 윈도라고 불렀고 버전은 95, 98, ME가 있다. 비즈니스 버전은 윈도 NT와 윈도2000이 있다. 윈도 XP는 두 버전을 윈도 NT에서 발전한 공통 코드로 통합했다. 윈도 비스타는 윈도 XP를 기반으로 만들어졌다.


모바일 장치 식별
주요 브라우저는 모두 모바일 버전이 있고 다른 장치에서 동작하는 버전도 있으므로 이를 구분할 수 있어야 한다. 모바일 장치 식별의 첫 단계는 모든 모바일 장치가 해당하는 프로퍼티를 추가하는 것이다.
iOS 장치 탐지는 문자열 "iPhone", "iPod", "iPad" 만 검색되므로 정규 표현식을 써서 사용자 에이전트 문자열에 iOS 버전이 들어 있는지 확인한다.
안드로이드 운영체제는 문자열 "안드로이드"를 검색하기만 하면 되고 버전 번호는 바로 뒤에 있다.
노키아 N 시리즈 스마트폰도 웹킷을 이용하고 사용자 에이전트 문자열에 "Safari"가 들어있긴 하지만 실제 사파리 브라우저는 아니다. 이 스마트폰은 사용자 에이전트 문자열 "NokiaN"만 체크해도 된다.
마지막 주요 모바일 장치 플랫폼은 포켓 PC와 스마트폰용 윈도 모바일(이전에는 윈도CE라고 불린)이다. 이 장치들은 윈도 플랫폼에 속하므로 윈도 운영체제와 비슷한 값을 반환한다.


게임 시스템 식별
Wii 브라우저는 오페라 커스텀 버전이므로 Wii는 단순히 문자열 "Wii"를 테스트 하는 것으로 충분하다.  플레이스테이션에서는 정규 표현식을 써서 사용자 에이전트 문자열을 테스트하되 대소문자를 가리지 않게 했다.
 


9.3.4 사용법
브라우저 탐지는 클라이언트 탐지에서 가장 마지막 옵션으로 생각해야 한다. 가능하다면 기능 탐지나 쿽스 탐지를 먼저 시도해야 하고 다음과 같은 상황에 사용하는것이 알맞다.
- 기능이나 쿽스를 직접 정확히 탐지할 수 없을때
- 같은 브라우저의 기능이 플랫폼별로 다를 때
- (사용자 통계 등의) 정보 수집 목적으로 정확히 어떤 브라우저인지 알아야 할때
 



9.4 요약
기능탐지 - 특정 브라우저 기능을 사용하기 전에 먼저 테스트하는 이 접근법에서는 개발자가 브라우저 타입이나 버전에 신경 쓰지 않고 단순히 원하는 기능이 존재하는지만 알면된다. 기능탐지로는 특정 브라우저나 버전을 정확히 알수 없다.

쿽스탐지 - 쿽스는 사실 브라우저 구현상의 버그인데 쿽스 탐지는 보통 짧은 코드를 실행해서 브라우저에 해당 버그가 있는지 확인하는 방식이다. 쿽스 탐지는 특정 버그가 스크립트 진행을 방해할 소지가 있을 때만 사용한다.

브라우저 탐지 -  사용자 에이전트 문자열을 통해 브라우저를 식별한다. 자용자 에이전트 문자열에는 브라우저에 관한 정보가 매우 많은데 브라우저, 플랫폼, 운영체제, 브라우저 버전 등이 이에 속한다. 브라우저 탐지는 어려운 작업이지만 사용자 에이전트 문자열을 통해 모바일장치나 게임 시스템을 포함한 모든 브라우저에서 렌더링 엔진과 플랫폼을 파악할 수 있다.

 
 
 

'나홀로스터디 > JS For Web Dev' 카테고리의 다른 글

DOM 확장  (0) 2014.12.18
DOM  (0) 2014.12.08
브라우저 객체모델  (0) 2014.11.12
함수 표현식  (0) 2014.10.23
참조타입  (0) 2014.10.17
Copyright © HuckleberryM All Rights Reserved | JB All In One Designed by CMSFactory.NET