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

> Clean Markdown view of GeekNews topic #20881. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=20881](https://news.hada.io/topic?id=20881)
- GeekNews Markdown: [https://news.hada.io/topic/20881.md](https://news.hada.io/topic/20881.md)
- Type: news
- Author: [baeba](https://news.hada.io/@baeba)
- Published: 2025-05-13T10:17:00+09:00
- Updated: 2025-05-13T10:17:00+09:00
- Original source: [devocean.sk.com](https://devocean.sk.com/blog/techBoardDetail.do?ID=167453)
- Points: 7
- Comments: 0

## Summary

**User-Agent Sniffing**과 **Feature Detection**은 환경별 기능 제공을 위해 사용하는 대표적 방식입니다. 기능 지원 여부를 직접 확인하는 **Feature Detection**이 유지보수성과 보안성에서 더 우수하여 최근에는 주로 활용합니다. **Modernizr**, **Sniffr**와 같은 라이브러리는 각 방식을 효율적으로 구현하는 데 도움을 줍니다. 구글이 **User-Agent 문자열**을 축소함에 따라, 구조화된 정보 제공을 위한 **User-Agent Client Hints API** 사용이 증가합니다.

## Topic Body

##### 개요  
  
브라우저나 기기 환경에 따라 기능을 다르게 제공할 때, **User-Agent Sniffing**과 **Feature Detection**이 대표적 접근 방식이다.  
최근에는 **유지보수성, 보안성 측면에서 Feature Detection**을 우선 적용하는 것이 권장된다.  
  
---  
  
##### 1. User-Agent Sniffing  
  
User-Agent 문자열을 분석해 기기나 브라우저를 식별하는 방식이다.  
기기 모델 식별에는 유용하지만, 업데이트에 민감하고 개인정보 보호 정책 강화로 사용이 점차 제한되고 있다.  
  
```javascript  
navigator.userAgentData.getHighEntropyValues(['model', 'platform'])  
```  
  
---  
  
##### 2. Feature Detection  
  
기능 자체의 지원 여부를 검사해 조건 분기하는 방식이다.  
브라우저나 기기 종류에 상관없이 안전하고 유연하게 적용할 수 있다.  
  
```javascript  
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 여부, 기능 지원 여부를 모두 판단  
  
```javascript  
environment.supportsServiceWorker = 'serviceWorker' in navigator;  
```  
  
---  
  
##### 7. 미래 대응: Privacy Sandbox와 User-Agent Reduction  
  
구글은 User-Agent 문자열을 축소 중이며, 이에 대응해 **User-Agent Client Hints API** 사용이 권장된다.  
이 API는 보다 구조화되고 개인정보 친화적인 방식으로 사용자 정보를 제공한다.  
  
```javascript  
navigator.userAgentData.getHighEntropyValues(['platform', 'model']);  
```  
  
---  
  
##### 결론  
  
* **기본적으로 Feature Detection을 우선 적용**  
* **User-Agent 기반 감지는 최소화하고, 필요할 경우 최신 기술(API)을 활용**  
* 미래 표준에 대응하기 위해 Client Hints 등 새로운 방식도 준비해두는 것이 좋다.

## Comments



_No public comments on this page._