디바이스마다 여러 가지 브라우저가 사용되고 있고,  사용하는 버전 역시  다양하기 때문에 HTML5 크로스 브라우징은 중요한 이슈입니다.  HTML5 크로스 브라우징에서 자주 등장하는 용어가 ‘폴리필(Polyfill)’ 입니다.

외국 사이트의 튜토리얼이나 예제를 공부하다 보면 ‘폴리필(polyfill)’이란 용어를 만나곤 하는데, 오늘은 ‘폴리필’이 무엇인지 알아보도록 하겠습니다.

HTML5 마크업 뿐만 아니라 HTML5 API는 웹 표준을 향해 가고 있지만 실제 모든 브라우저에서 동시에 지원하고 있지 못합니다. HTML5이 논의되기 전 구식 브라우저들은 당연히 그렇고요, 최신 브라우저라 하더라도 브라우저 버전별로, 혹은 브라우저 벤더에 따라서 지원하는 내용이 달라집니다. 이렇게 HTML5 스펙의 기능들이 어떤 브라우저에서는 되고, 어떤 브라우저에서는 안되는 것을 브라우저 파편화(browser fragmentation)이라고 합니다.

개발자에게 브라우저 파편화는 골치아픈 문제 중 하나인데요, 이런 파편화를 줄이기 위해, 비슷하게라도 같은 결과를 만들기 위해 여러 가지 방법들을 동원합니다.   이런 방법들을 shim이라고 부릅니다. (fallback이라 부르기도 합니다)

사전에서 shim을 찾아보면 틈 새를 메우는 “끼움쇠” 정도로 설명되어 있을텐데요,  HTML5를 지원하지 않는 브라우저의 공백(hole)을 메우는 스크립트나 기타 코드라고 생각하시면 쉬울 것입니다.

폴리필(polyfill)은  파편화를 보이는 브라우저에 삽입하는 자바스크립트 소스로, 브라우저를 스스로 판별하여 해당 브라우저에 필요한 shim을 알아서 끼워넣어줍니다.

폴리필이란 용어를 처음 사용한 사람은 영국의 개발자 Remy Sharp인데요, 그의 설명에 따르면 “poly”란 여러 가지 방법을 의미하고 “fill”은 브라우저의 공백을 메운다는 의미라고 합니다. 즉, 브라우저들 간의 지원 공백을 다양한 방법으로 메우는 것이라고 생각하면 될 것입니다. 좀더 자세한 설명은 그의 블로그에 있는 What is a Polyfill?을 참고하세요.

개발되어 있는 폴리필들은 꽤 많은데 그것을 한 곳에 모아놓은 페이지도 있더군요.   HTML5 Cross Browser Polyfills.   HTML5 크로스 브라우징을 위한 폴리필이나 심(shim), 폴백(fallback)을 한눈에 볼 수 있습니다.

혹시 폴리필을 직접 개발해 보고 싶으신가요? 그렇다면 이곳을 참고하세요^^  The Developer’s Guide To Writing Cross-Browser Javascript Polyfills.