HTML Academy · 강의

기능 감지와 브라우저 스니핑 비교

사용자 에이전트 스니핑 대신 기능 감지 사용하기

기능 감지와 브라우저 스니핑 비교은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

호환성을 위한 두 가지 접근 방식

현재 브라우저가 기능을 지원하는지 확인하려면 기능을 직접 감지("IntersectionObserver" in window)하거나 사용자 에이전트 문자열을 조사(navigator.userAgent.includes("Chrome"))할 수 있습니다. 하나는 신뢰할 수 있지만, 다른 하나는 오랫동안 버그의 원인이 되어 왔습니다.

사용자 에이전트 조사가 실패하는 이유

사용자 에이전트 문자열은 거짓 정보를 담습니다. Edge는 자신을 Chrome(그리고 Safari와 Firefox)이라고 주장합니다. Android의 Chrome은 iOS의 Chrome과 다른 UA를 내보냅니다. 브라우저는 개인정보 보호를 위해 UA 문자열을 "동결"합니다. UA 문자열에 기반한 모든 로직은 몇 달마다 망가집니다.

기능 감지 패턴

코드에 실제로 필요한 API를 확인하십시오: if ("IntersectionObserver" in window) { ... }. 속성이 존재하면 브라우저가 해당 기능을 지원하는 것이고, 존재하지 않으면 대체 경로를 사용하십시오. 이 검사는 직접적이고 빠르며 앞으로도 유효합니다.

if ("IntersectionObserver" in window) {
  const observer = new IntersectionObserver(handler);
} else {
  loadPolyfill().then(() => { /* use IntersectionObserver */ });
}

감지한 다음 사용하기

감지한 기능과 실제 대체 경로를 함께 마련하십시오. 없는 기능을 감지하는 것만으로는 충분하지 않습니다. 기능이 없을 때 수행할 작업이 있어야 합니다. 폴리필을 불러오거나, 정적인 대안을 렌더링하거나, 해당 기능을 완전히 숨기십시오.

CSS 기능 쿼리

CSS에는 자체 기능 감지도 있습니다: @supports (display: grid) { ... }. 이 블록은 브라우저가 속성 및 값 쌍을 이해할 때만 적용됩니다. 이를 사용하면 구형 브라우저를 위해 부동 기반 대체 방식을 제공하면서 그리드 레이아웃을 배포할 수 있습니다.

@supports (display: grid) {
  .grid { display: grid; gap: 16px; }
}
@supports not (display: grid) {
  .grid > * { float: left; width: 33%; }
}

사용자 에이전트 클라이언트 힌트

최신 브라우저는 navigator.userAgentData를 통해 구조화된 정보를 제공합니다(Chromium 전용). 자유 형식 문자열 대신 브랜드와 버전의 쌍을 반환합니다. 그래도 기능 감지를 우선하십시오. UA 힌트는 속성 확인만으로 기능을 추론할 수 없을 때만 유용합니다.

사용자 에이전트 조사가 허용되는 경우

UA 감지가 허용되는 좁은 범위의 사용 사례는 버그가 있는 브라우저를 제외하는 것입니다. 예를 들어 X 버전의 알려진 iOS Safari 버그가 있습니다. 그렇더라도 기능 기반 제외(CSS.supports("aspect-ratio: 1"))를 우선하십시오. UA 감지는 최후의 수단이어야 합니다.

Modernizr 스타일 라이브러리

Modernizr는 여러 기능 감지를 묶어 <html> 요소의 클래스(html.flexbox, html.no-flexbox)로 노출합니다. 현대적인 프로젝트에는 거의 필요하지 않습니다. 대부분의 감지는 한 줄이면 되기 때문입니다. 하지만 레거시 마이그레이션에는 여전히 유용합니다.

대체 경로 검증

감지를 설정한 후 두 경로를 모두 검증하십시오. DevTools를 열고 기능을 정의되지 않은 상태로 덮어쓴 다음 대체 경로가 작동하는지 확인하십시오. 검증되지 않은 대체 경로는 방치되어 낡습니다. 사용자가 이를 필요로 하는 순간이 오면 개발자가 전혀 상상하지 못한 방식으로 실패하는 경우가 많습니다.

프레임워크에서의 감지

React, Vue 및 다른 도구에는 특별한 감지 API가 없습니다. 이펙트 또는 컴포넌트 초기화 안에서 일반 JavaScript를 사용하십시오. 서버에서 렌더링되는 앱은 클라이언트에서 감지해야 합니다. SSR 중에는 "IntersectionObserver" in window가 정의되지 않기 때문입니다.

기능을 추정하는 UA 조사 피하기

일부 팀은 기능을 추측하기 위해 UA를 확인합니다("iPhone인가요? 그렇다면 Touch가 있을 가능성이 높습니다"). 이는 서로 관련 없는 두 가지를 하나로 혼동하는 것입니다. "ontouchstart" in window를 통해 터치를 직접 감지하거나, 더 나은 방법으로 입력 방식을 추상화하는 포인터 이벤트를 우선하십시오.

지식 점검

브라우저 기능을 처리할 때 사용자 에이전트 조사보다 기능 감지를 선호하는 이유는 무엇입니까?

요약

사용자 에이전트 조사보다 기능 감지("API" in window)를 우선하십시오. CSS에는 같은 목적을 위한 @supports가 있습니다. 항상 감지 기능과 실제 대체 경로를 함께 마련하고 두 경로를 모두 검증하십시오. UA 조사는 알려진 버그가 있는 브라우저 버전을 제외할 때만 사용하고, 기능을 추측하는 데는 절대 사용하지 마십시오.

자주 묻는 질문

“기능 감지와 브라우저 스니핑 비교” 강의는 무료인가요?

네 — “기능 감지와 브라우저 스니핑 비교” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“기능 감지와 브라우저 스니핑 비교”에서 뭘 배우나요?

사용자 에이전트 스니핑 대신 기능 감지 사용하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“기능 감지와 브라우저 스니핑 비교” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기