▲

User-Agent vs. Feature Detection: 무엇을 언제 어떻게 써야 할까?

 (devocean.sk.com)
5P by baeba 1일전 | ★ favorite | 댓글과 토론

개요

브라우저나 기기 환경에 따라 기능을 다르게 제공할 때, User-Agent Sniffing과 Feature Detection이 대표적 접근 방식이다.
최근에는 유지보수성, 보안성 측면에서 Feature Detection을 우선 적용하는 것이 권장된다.

1. User-Agent Sniffing

User-Agent 문자열을 분석해 기기나 브라우저를 식별하는 방식이다.
기기 모델 식별에는 유용하지만, 업데이트에 민감하고 개인정보 보호 정책 강화로 사용이 점차 제한되고 있다.

navigator.userAgentData.getHighEntropyValues(['model', 'platform'])

2. Feature Detection

기능 자체의 지원 여부를 검사해 조건 분기하는 방식이다.
브라우저나 기기 종류에 상관없이 안전하고 유연하게 적용할 수 있다.

if ('fetch' in window) {  
  // fetch API 사용  
}

3. 라이브러리: Modernizr & Sniffr

Modernizr는 Feature Detection을 편하게 도와주는 라이브러리로, 원하는 기능만 포함해 빌드할 수 있다.
Sniffr는 User-Agent 기반의 정보를 쉽게 파싱해주는 라이브러리이다.

4. 플랫폼별 감지 가능성

  • Android는 모델명(SM-xxxx 등)까지 추출 가능
  • iOS는 iPhone/iPad 구분은 가능하지만 모델 식별은 제한적
  • Mac/Windows는 OS 버전까지는 확인 가능하지만 기기 식별은 어려움

5. 기타 감지 가능 정보

  • CPU 코어 수: navigator.hardwareConcurrency
  • 메모리 용량: navigator.deviceMemory
  • 네트워크 속도: navigator.connection.effectiveType

6. 혼합 접근 예시

User-Agent와 Feature Detection을 결합해 보다 정교한 환경 감지도 가능하다.
예: 노치 모델 감지, Apple Silicon 여부, 기능 지원 여부를 모두 판단

environment.supportsServiceWorker = 'serviceWorker' in navigator;

7. 미래 대응: Privacy Sandbox와 User-Agent Reduction

구글은 User-Agent 문자열을 축소 중이며, 이에 대응해 User-Agent Client Hints API 사용이 권장된다.
이 API는 보다 구조화되고 개인정보 친화적인 방식으로 사용자 정보를 제공한다.

navigator.userAgentData.getHighEntropyValues(['platform', 'model']);

결론

  • 기본적으로 Feature Detection을 우선 적용
  • User-Agent 기반 감지는 최소화하고, 필요할 경우 최신 기술(API)을 활용
  • 미래 표준에 대응하기 위해 Client Hints 등 새로운 방식도 준비해두는 것이 좋다.