Polyfiller란?

레일스가이드의 Action View Form Helper 부분을 보면 "polyfiller"란 단어가 나온다. 일반사전에는 나오진 않는 단어이다. 위키피디아를 검색해 보면 이런 의미를 찾아 볼 수 있다.

In web development, a polyfill (or polyfiller) is downloadable code which provides facilities that are not built-in to a web browser.

웹브라우저에 내장되어 있지 않은 기능을 제공하는 다운로드가능한 코드를 polyfill 또는 polyfiller라고 한다.

이 단어는 HTML5와 CSS3 기능을 지원하지 않는 웹브라우저에서도 호환성을 갖도록 하기 위한 조치를 언급할 때 사용된다.

최근 스마트 디바이스가 IT를 주도하게 됨에 따라 HTML5와 CSS3에 대한 개발요구가 절대적으로 필요하게 되었는데, 최근의 다양한 웹브라우저에서는 아직 100% 지원을 하지 못하고 있고 전세계적으로도 아직 MS사의 IE의 6~8 버전을 많이 사용하고 있는 터라 코드 호환성의 문제로 웹개발자들은 힘들어 하고 있다.

저자의 경우에는 가장 최신의 IT 기술을 발빠르게 접목하고 있는 Ruby on Rails(루비로 만들어진 웹어플리케이션 개발 프레임워크)로 웹개발을 주로 하고 있어서, 더더욱 국내 브라우저 시장의 우위를 점하고 있는 IE과의 호환성은 항상 골치 아픈 문제이다.

서두에서 언급한 바 있는 RailsGuide의 내용 중에는 바로 이런 문제를 해결할 수 있는 방법에 대해서 소개하고 있는데, 한번쯤은 이에 대한 공부를 해 두어야 겠다고 생각했었다.

인터넷상에는 이에 대한 참고할 만한 자료가 많다. 구글검색을 통해서 알게 된 내용을 중심으로 본 글을 통해서 polyfiller 기법에 대한 내용을 정리해 보기로 한다.

---

가장 먼저 접하게 된 것은 바로 "Modernizr"와 "yepnope"에 대한 내용이다.
Modernizr의 철자를 보면 마지막에 -zer 로 끝나지 않고 'e' 자가 빠진 상태인 `-zr`로 되어 있다. 아마도 이름을 특이하게 보이게 하기 위해 이렇게 명명하지 않았나 싶다. 어쨌던 처음 접할 때부터 약간의 주의를 끌게 되는 `Modernizr` ㅎㅎㅎ.

`Modernizr`의 홈페이지를 찾아가 보면 문서화가 잘 되어 있다.  시간을 두고 차근차근 읽어 볼 필요가 있다. `Modernizr`의 개념과 설치, 사용법에 대해서 자세하게 안내되어 있다. 실전 튜토리얼도 찾아 볼 수 있다. 아쉬운 건 유료다. ㅎㅎㅎ. `Modernizr`를 이용하여 본인이 사용하는 웹브라우저의 호환성을 알아보는 웹서비스도 눈에 띈다. 이와 연관있는 서비스로 브라우저스코프라는 것도 있다.

웹개발시 그냥 자바스크립트를 인클루드하여 사용해도 되지만, 저자의 경우 루비온레일스프레임워크를 이용하여 개발을 주로하기 때문에 asset pipeline(레일스3.1+ )을 사용하여 `Modernizr` 자바스크립트를 인클루드할 수 있는 관련 젬을 검색해 보기로 했다. 다행히도 github.com에서 두 개의 젬을 찾을 수 있었는데, 하나는 `modernizr-rails`이고 다른 하나는 `rack-modernizr`이다.

`Modernizr`는 HTML5와 CSS3 요소의 지원여부를 클라이언트 웹브라우저에서 테스트하는 기능이 포함되어 있는 자바스크립트 라이브러리라고 생각하면 될 것 같다. 당연한 말이겠지만, 레일스 프레임워크에서 `Modernizr` 자바스크립트를 사용하기 위해서는 위에서 소개한 젬을 이용하여 `Modernizr`를 먼저 인클루드해야 한다.

결국 자바스크립트에서 어떻게 `Modernizr`를 사용하면 되는지를 알기만 하면 되겠다. John Athayde가 2012년 4월 30일 RailsView에 올린 글은 `Modernizr`를 이해하는 도움이 준다. 아래에  내용을 정리해 본다.


`Modernizr`의 custom build page를 보면 여러가지 옵션과 인클루드해야 할 항목을 볼 수 있다.

`Modernizr`의 코어 기능(Extra 섹션)으로 html5shiv, yepnode.js, respond.js(media queries) 와 CSS class를 추가하기가 있다.

html5shiv는 IE 6~9, 사파리 4.x(아이폰 3.x 폼함), 파이어폭스 3.x 브라우저에서 HTML5의 디폴트 스타일을 적용할 수 있게 해주고 특히 레거시 IE에서 HTML5의 section 엘리먼트를 사용할 수 있게 해 주는 툴이다. (shim or shiv) 프린트를 해야할 필요가 있을 때는 `w/printshiv` 옵션을 선택해야 한다.

yepnope.js는 이름에서 알 수 있듯이 호환성여부를 yes(yep) or no(nope) 로 알수 있도록 해 준다.  임의 조건에 따라 해당하는 스타일 클래스를 적용해 주는 작은 크기(3k)의 자바스크립트이다. 조건에 맞는 특정 파일을 서브할 수 있게 해준다.  이 로더는 Modernizr.load() 함수를 사용할 수 있게 해 준다.

`respond.js`를 인클루드하면 CSS3 Medial Queries 기능을 사용할 수 있다.  이것은 `Modernizr` 없이도 사용할 수 있다.

 `Add CSS Classes` 를 포함할 경우에는 특정 태그에 CSS 클래스를 추가할 수 있다.

CSS3 섹션은 CSS3 엘리먼트에 대한 테스트와 지원을 할 수 있게 해 준다. 특히 eBook을 작성하기 위해서는 @font-face, CSSGradients, box-shadow, rgba() 항목은 필수적으로 포함할 필요가 있다.

HTML5 섹션은 이미 html5shiv를 포함할 경우 이미 활성화되었기 때문에 실제로는 HTML5 태크를 포함하고 있지는 않다. 대신에 HTML5의 기능확장을 위한 엘리먼트을 포함하고 있다.

Misc. 섹션은 특정 브라우져에서 좀 더 복잡한 항목들을 사용할 수 있게 해 준다. 사실 box-sizing:border-box 를 사용하고자 한다면 polyfill 기능을 해제할 경우도 있다.

John Athayde는 2010년 Faruk Ateş 가 작성한 글을 읽어 볼 것을 권한다.  이 글에는 실제 코딩예를 들어 자세하게 설명하고 있어 이에 대한 내용도 다음 게시글에서 정리해 보기로 한다.