User-Agent와 Feature Detection, 무엇을 언제 어떻게 써야 할까?

웹 애플리케이션을 개발할 때, 사용자 디바이스나 브라우저 환경에 따라 기능이나 UI를 다르게 제공해야 할 경우가 많다.

대표적인 접근법은 다음 두 가지다:

• User-Agent 기반 감지
• Feature Detection 기반 감지

이 보고서에서는 두 방식의 개념, 차이점, 장단점, 그리고 향후 기술 변화에 따른 대응 방안을 정리했다.

User-Agent Sniffing: 사용자의 환경 정보에 의존한 방식

User-Agent 감지는 브라우저가 전송하는 문자열을 분석해 사용자의 운영체제, 브라우저 종류, 버전, 기기 모델 등을 파악하는 방식이다.

예를 들어, Android 기기의 경우 모델명이나 제조사를 문자열로 확인할 수 있고, iPhone 또는 iPad 여부를 판별할 수도 있다.

장점

• 특정 기기나 브라우저에서만 발생하는 오류를 우회하거나 패치할 수 있다.
• 디바이스나 브라우저 별로 UX를 조절해야 할 때 유용하다.

단점

• 새 기기나 브라우저 등장 시마다 파싱 로직을 업데이트해야 해 유지보수가 어렵다.
• 개인정보 보호 정책 강화로 User-Agent 정보 제공이 점점 축소되고 있다.
• 크롬을 중심으로 기존 User-Agent 정보는 축소되고, User-Agent Client Hints API라는 새로운 표준 방식으로 전환 중이다.

Feature Detection: 기능 지원 여부 중심의 방식

Feature Detection은 브라우저나 기기의 종류가 아닌, 해당 기능이 실제로 지원되는지를 확인하는 접근이다.

즉, 어떤 기능이 지원되면 실행하고, 그렇지 않으면 다른 대체 방식을 사용하는 방식이다.

예를 들어, fetch API, 웹 워커, 로컬 스토리지 등의 지원 여부를 직접 검사하고 그에 따라 조건 분기를 설정하는 방식이다.

장점

• 브라우저 종류나 운영체제에 관계없이, 기능이 실제로 동작 가능한지를 기준으로 판단하므로 더 안정적이다.
• 유지보수가 훨씬 간편하다. 브라우저 업데이트나 정책 변화의 영향을 거의 받지 않는다.

단점

• UI나 성능 관련 요소는 감지할 수 없고, 오직 “기능의 존재 여부”만 판단 가능하다.
• 디바이스의 구체적인 모델이나 브랜드명을 알아내기 어렵다.

주요 라이브러리 및 도구

Modernizr

• 대표적인 Feature Detection 라이브러리
• 다양한 기능 지원 여부를 간단히 확인할 수 있도록 도와주며, 필요한 기능만 선택하여 최적화된 빌드를 만들 수 있다.

Sniffr

• User-Agent 기반 감지를 간편하게 해주는 라이브러리
• 직접 파싱하지 않아도 운영체제, 브라우저, 기기 정보를 손쉽게 얻을 수 있다.

적용 전략: 언제 무엇을 선택해야 하나?

TI Tech Lab 김준수 연구원

Source

• https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData
• https://developer.chrome.com/docs/privacy-security/user-agent-client-hints?hl=ko
• https://modernizr.com/
• https://github.com/amoilanen/sniffr