Modernizr란 무엇인가?
Modernizr는 최신 웹 기술(HTML5, CSS3 등)이 사용자의 브라우저에서 기본적으로 지원되는지 여부를 감지해주는 경량 자바스크립트 라이브러리입니다.
웹 표준이 빠르게 발전하면서 각 브라우저마다 지원하는 기능의 범위가 달라졌습니다. Modernizr를 사용하면 사용자 브라우저가 특정 기능을 지원하는지 일일이 확인하지 않고도, 자동으로 감지하여 그에 맞는 코드나 스타일을 적용할 수 있습니다. 이를 통해 구형 브라우저 사용자에게도 안정적인 웹 경험을 제공할 수 있습니다.
Modernizr 설치 및 기본 사용법
Modernizr는 공식 사이트에서 다운로드한 후 다음과 같이 페이지에 포함시키면 됩니다.
<script src="modernizr.min.js"></script>라이브러리가 로드되면 전역 객체인 Modernizr를 통해 각 기능의 지원 여부를 불리언(Boolean) 값으로 확인할 수 있습니다.
JavaScript 예제
if (Modernizr.canvas) {
// Canvas를 지원하는 경우 실행할 코드
} else {
// 미지원 브라우저를 위한 대체(fallback) 코드
}CSS 예제
Modernizr는 감지 결과에 따라 <html> 요소에 canvas, no-canvas 같은 클래스를 자동으로 추가합니다. 따라서 CSS에서도 손쉽게 분기 처리가 가능합니다.
.canvas .chart { display: block; }
.no-canvas .chart { display: none; }Modernizr로 감지 가능한 주요 기능
아래 표는 Modernizr가 감지할 수 있는 대표적인 웹 기술 목록입니다. 각 기능별로 CSS 클래스명과 JavaScript 확인 방법을 함께 정리했습니다.
| 감지 항목 | CSS 클래스 | JavaScript 확인 |
|---|---|---|
| @font-face (웹폰트) | .fontface | Modernizr.fontface |
| Canvas | .canvas | Modernizr.canvas |
| Canvas Text | .canvastext | Modernizr.canvastext |
| HTML5 오디오 | .audio | Modernizr.audio |
| HTML5 오디오 포맷 | 해당 없음 | Modernizr.audio[format] |
| HTML5 비디오 | .video | Modernizr.video |
| HTML5 비디오 포맷 | 해당 없음 | Modernizr.video[format] |
| rgba() | .rgba | Modernizr.rgba |
| hsla() | .hsla | Modernizr.hsla |
| border-image | .borderimage | Modernizr.borderimage |
| border-radius | .borderradius | Modernizr.borderradius |
| box-shadow | .boxshadow | Modernizr.boxshadow |
| 다중 배경(Multiple backgrounds) | .multiplebgs | Modernizr.multiplebgs |
| 투명도(Opacity) | .opacity | Modernizr.opacity |
| CSS 애니메이션 | .cssanimations | Modernizr.cssanimations |
| CSS 멀티 컬럼 | .csscolumns | Modernizr.csscolumns |
| CSS 그라디언트 | .cssgradients | Modernizr.cssgradients |
| CSS 반사 효과(Reflections) | .cssreflections | Modernizr.cssreflections |
| CSS 2D 변형(Transforms) | .csstransforms | Modernizr.csstransforms |
| CSS 3D 변형(Transforms) | .csstransforms3d | Modernizr.csstransforms3d |
| CSS 전환(Transitions) | .csstransitions | Modernizr.csstransitions |
| Geolocation API | .geolocation | Modernizr.geolocation |
| 입력 타입(Input Types) | 해당 없음 | Modernizr.inputtypes[type] |
| 입력 속성(Input Attributes) | 해당 없음 | Modernizr.input[attribute] |
| localStorage | .localstorage | Modernizr.localstorage |
| sessionStorage | .sessionstorage | Modernizr.sessionstorage |
| Web Workers | .webworkers | Modernizr.webworkers |
| applicationCache | .applicationcache | Modernizr.applicationcache |
| SVG | .svg | Modernizr.svg |
| SVG 클립 패스(Clip Paths) | .svgclippaths | Modernizr.svgclippaths |
| SMIL | .smil | Modernizr.smil |
| Web SQL Database | .websqldatabase | Modernizr.websqldatabase |
| IndexedDB | .indexeddb | Modernizr.indexeddb |
| Web Sockets | .websockets | Modernizr.websockets |
| hashchange 이벤트 | .hashchange | Modernizr.hashchange |
| History 관리 | .historymanagement | Modernizr.historymanagement |
| 드래그 앤 드롭(Drag and Drop) | .draganddrop | Modernizr.draganddrop |
| 창 간 메시징(Cross-window Messaging) | .crosswindowmessaging | Modernizr.crosswindowmessaging |
| addTest() 플러그인 API | 해당 없음 | Modernizr.addTest(str, fn) |
정리
Modernizr는 브라우저별 기능 차이로 인한 문제를 해결하는 데 매우 유용한 도구입니다. 사용자 에이전트(User Agent) 문자열을 추측하는 방식이 아니라 실제 기능을 직접 테스트하여 정확한 결과를 제공하며, 이를 통해 점진적 향상(Progressive Enhancement)과 우아한 성능 저하(Graceful Degradation) 전략을 손쉽게 구현할 수 있습니다. 최신 웹 프로젝트에서 크로스 브라우저 호환성을 확보하고 싶다면 Modernizr의 도입을 적극적으로 고려해 보시기 바랍니다.