폴리필(polyfill)

Polyfill, Shims, Fallback이란 용어들을 들어보셨을 겁니다. 용어는 틀려도 각각의 목적은 브라우저별로 다름없는 기능 구현이 목적입니다. 즉, 크로스 브라우징을 염두한 것입니다.

그림출처: http://addyosmani.com/blog/writing-polyfills/

폴리필이란?

폴리필(polyfill)은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말한다. 폴리필은 HTML5 및 CSS3와 오래된 브라우저 사이의 간격을 메꾸는 역할을 담당한다.

HTML5 Cross Browser Polyfills

Modernizr 측에서 정리하여 제공하고 있는 각종 폴리필 목록을 참고하면 원하는 기술을 선택하는데 도움이 될 것이다. 필자가 자주쓰는 것들을 아래와 같다.

• html5shiv : HTML5의 섹셔닝 요소(예: <header>, <nav>)를 지원하지 않는 브라우저를 위한 라이브러리
• mediaelement.js : HTML5의 <video>와 <audio> 요소들을 모든 브라우저에서 하나의 파일로 같은 UI를 제공하기 위한 라이브러리
• Placeholder : HTML5의 플레이스홀더(placeholder)의 지원을 통일하기 위해서 제공하는 라이브러리
• h5Validate : HTML5의 폼검증 기능을 구현하기 위해 제공하는 라이브러리
• selectivizr : CSS3의 의사 클래스(pseudo-class)와 속성 선택자들을 IE6~8에서 지원하기 위한 라이브러리
• css3pie : CSS3의 border-radius와 box-shadow, liner-gradient를 IE6~9 브라우저에서 지원하기 위한 라이브러리
• Respond : 반응형 웹의 필수 속성중에 하나인 미디어쿼리를 IE6~8에서 지원하기 위한 라이브러리

Mozilla 측에서도 폴리필을 손쉽게 사용하도록 방안을 모색하고 있는데 Polyfill을 사용하는 보다 쉬운 방법을 참고해보길 바란다.

이후에 작성될 글들에서 자주 사용되는 폴리필을 중점으로 분석 및 사용법을 제공할 예정입니다.