브라우저 호환성과 caniuse.com
caniuse.com에서 브라우저별 기능 지원을 확인하고 공급업체 접두사를 이해하며 필요할 때 폴리필이나 대체 기능을 사용합니다.
브라우저 호환성과 caniuse.com은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
호환성이 중요한 이유
브라우저마다 웹 표준을 구현하는 속도가 다릅니다. Chrome 130에서 사용할 수 있는 CSS 속성이나 JavaScript API가 이전 버전의 Safari 또는 Firefox에는 없을 수 있습니다. 호환성을 테스트하고 계획하면 사용자에게 작동하지 않는 환경이 제공되는 것을 방지할 수 있습니다.
caniuse.com — 호환성 참고 자료
caniuse.com으로 이동하여 CSS 속성, JavaScript API 또는 HTML 속성을 입력합니다. 모든 주요 브라우저와 최신 버전 전반의 지원 현황을 색상으로 구분한 표와 사용 통계 및 부분 지원에 관한 참고 사항을 확인할 수 있습니다.
caniuse 표 읽기
초록색 = 지원됨. 노란색 = 부분 지원. 빨간색 = 지원되지 않음. 회색 = 알 수 없음입니다. 상단의 전 세계 사용 비율을 확인하십시오. 사용자의 97% 이상이 해당 기능을 사용한다면 일반적으로 fallback 없이 사용할 수 있습니다.
브라우저 호환성 데이터 및 MDN
MDN 웹 문서 페이지의 모든 API 참고 페이지 하단에는 브라우저 호환성 표가 포함되어 있습니다. 이 표는 caniuse와 동일한 데이터를 사용하며 브라우저 공급업체가 직접 자주 업데이트합니다.
Baseline 이니셔티브
Baseline 이니셔티브(web.dev/baseline)는 Chrome, Edge, Firefox 및 Safari 전반의 지원 여부를 기준으로 기능을 새롭게 사용 가능 또는 널리 사용 가능으로 표시합니다. 널리 사용 가능한 기능은 폴리필 없이 안전하게 사용할 수 있습니다.
폴리필
폴리필은 이전 브라우저에서 최신 API를 구현하는 JavaScript 코드입니다. 널리 사용되는 출처로는 polyfill.io(필요한 폴리필만 제공), core-js(포괄적인 JavaScript 폴리필), Babel 도우미가 있습니다.
// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>@supports — CSS 기능 쿼리
@supports를 사용하면 속성이 지원될 때만 적용되는 CSS를 작성할 수 있습니다. 미디어 쿼리가 반응형 재정의를 제공하는 것처럼 CSS 대체 규칙을 제공합니다.
/* Fallback for all browsers */
.grid {
display: flex;
flex-wrap: wrap;
}
/* Enhancement for browsers that support grid */
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}브라우저 제조사 접두사(이전 방식)
이전 CSS 기능에는 브라우저 제조사 접두사가 필요했습니다: -webkit-, -moz-, -ms-. 현재는 대부분 더 이상 사용되지 않으며, 최신 브라우저는 접두사 없는 표준 속성을 사용합니다. Autoprefixer(PostCSS 플러그인)는 여전히 필요할 경우 이를 자동으로 추가합니다.
Babel을 사용한 변환 컴파일
Babel은 최신 JavaScript(ES2022 이상)를 이전 브라우저에서도 실행할 수 있는 ES5로 컴파일합니다. Vite와 webpack은 플러그인을 통해 Babel을 연동합니다. package.json의 browserslist에서 대상 브라우저를 설정합니다.
// package.json
"browserslist": [
"last 2 versions",
"not dead",
"> 0.5%"
]실제 브라우저에서 검증하기
DevTools의 기기 에뮬레이션은 실제 브라우저 검증을 대신할 수 없습니다. 진정한 브라우저 간 검증을 위해 BrowserStack, Sauce Labs 또는 실제 Safari 브라우저(macOS 또는 iOS 필요)를 사용하십시오.
자동 업데이트 브라우저 환경
Chrome, Edge, Firefox, Safari는 모두 자동으로 업데이트됩니다. 오래된 브라우저의 긴 꼬리는 매년 짧아지고 있습니다. 대부분의 소비자용 제품에서는 각 브라우저의 최신 주요 버전 2개를 대상으로 지정하면 사용자 95% 이상을 지원할 수 있습니다.
빠른 확인
caniuse.com 지원 표에서 초록색 칸은 무엇을 나타냅니까?
복습: 브라우저 호환성
새 프로그래밍 인터페이스를 사용하기 전에 caniuse.com을 확인하십시오. MDN 호환성 표를 읽으십시오. browserslist로 합리적인 브라우저 집합을 대상으로 지정하십시오. CSS 기능 쿼리에는 @supports를 사용하십시오. 필요한 항목만 폴리필하십시오. Babel로 최신 JS를 변환 컴파일하십시오. 중요한 기능은 실제 브라우저에서 검증하십시오.
자주 묻는 질문
“브라우저 호환성과 caniuse.com” 강의는 무료인가요?
네 — “브라우저 호환성과 caniuse.com” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“브라우저 호환성과 caniuse.com”에서 뭘 배우나요?
caniuse.com에서 브라우저별 기능 지원을 확인하고 공급업체 접두사를 이해하며 필요할 때 폴리필이나 대체 기능을 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“브라우저 호환성과 caniuse.com” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Chrome DevTools: Elements, Console, Network
- VSCode: 확장 기능, Emmet, 단축키
- Prettier 및 ESLint 설정
- 브라우저 호환성과 caniuse.com