이 글은 Andrew Betts와 Robert Nyman [Editor]이 쓴 An easier way of using polyfills의 한국어 번역본입니다.

Polyfill은 낡은 브라우저에서 모던(modern) 코드를 쓸 수 있게 해주는 환상적인 방법입니다. 하지만 현재의 Polyfill 이용법은 너무 어렵습니다. 그래서 우리 FT(파이낸셜 타임즈)는 Polyfill을 쉽게 쓸 수 있게 해주는 새로운 서비스를 만들었습니다. Polyfill.io 서비스에 당신을 초대합니다. 우리가 서비스를 개선할 수 있게 도와 주세요.

가능하면 기사에 그림을 많이 넣고 싶었습니다. 그래서 여기 유니콘 그림을 넣었습니다. Polyfill(뿔)을 가진 ‘말’이죠.

도전

여기 우리가 해결하고자 하는 문제가 있습니다.

• 개발자는 어떤 기능이 Polyfill에 의해 지원되는지 알 필요가 없습니다. 무시할 수 없을만큼 많은 사용자들이 낡은 버전의 IE로 당신 사이트를 방문합니다. 낡은 IE에서는 당신의 사이트가 정상 동작하지 않습니다. 어떤 기능이 문제의 원인인지 밝혀내기 위해서는 디버깅을 해야 합니다. 가끔 범인이 분명할 때도 있습니다. 하지만 대부분의 경우는 그렇지 않습니다. 특히 낡은 브라우저가 제공하는 개발자 도구가 형편 없을 때일수록 범인을 밝혀내기는 더 어렵습니다.
• 가끔 어떤 기능을 지원하는 Polyfill이 여러개 존재할 때가 있습니다. 어떤 Polyfill이 그 기능을 가장 잘 흉내내 주는지 알아내는 것은 쉽지 않은 일입니다.
• 어떤 Polyfill은 당신이 필요로 하지 않는 잡다한 많은 기능들까지 모두 포함한 커다란 번들 형태로 제공됩니다. ES6 같은 경우가 그런 예인데, 많은 기능들을 포괄적으로 지원하기 위해서입니다. 하지만 간단한 작은 기능을 사용하기 위해 커다란 코드를 모두 포함시켜 출시하는 것은 바람직하지 않은 일입니다.
• 새로운 브라우저들은 Polyfill을 필요로 하지 않습니다. 하지만 Polyfill들은 보통 모든 브라우저들을 지원 대상으로 삼습니다. 그래서 낡은 브라우저와의 호환성 때문에 Polyfill을 사용할 경우 모던(modern) 브라우저에서 성능이 저하될 수 있습니다. 우리는 그런식으로 타협하고 싶지 않습니다. 가능하다면 Polyfill이 필요한 브라우저에서만 Polyfill을 쓰고 싶습니다.

우리의 해법: Polyfill을 서비스로 이용하기(Polyfills as a Service)

이런 문제들을 해결하기 위해, 우리는 Polyfill 서비스를 만들었습니다. 이것은 시력을 측정하는 것과 비슷합니다. 시력 측정이 끝나면 측정된 시력에 딱 맞는 안경을 얻게 됩니다. 우리는 브라우저를 상대로 똑같은 일을 합니다. 우리 서비스가 동작하는 방식은 다음과 같습니다.

1. 개발자가 자신의 페이지에 Polyfill 서비스를 로딩 하는 스크립트를 추가합니다.
2. Polyfill 서비스는 브라우저의 User-Agent 헤더와 요청된 기능(디폴트는 Polyfill이 적용 가능한 모든 기능)을 분석합니다. 그리고 해당 브라우저에 필요한 Polyfill 목록을 만듭니다.
3. Polyfill 목록은 상호간의 의존성 관계를 만족시킬 수 있도록 그래프 소팅 알고리즘에 의해 정렬됩니다.
4. 이렇게 선택된 Polyfill들은 최소화(minified) 과정을 거쳐 CDN을 통해 제공됩니다 (CDN 덕분에 우리는 Polyfill을 아주 빠르게 제공할 수 있습니다).

우리가 정말 원하던 해법이 맞나요? 글쎄요, 이것을 생각해보세요. Modernizr는 (브라우저의) 여러 기능을 감지하기 위한 많은 코드를 모아놓았습니다. 그래서 Modernizr를 제대로 쓰려면 커스텀 빌드(build) 작업을 해야 합니다. 하지만 많은 수의 Modernizr 사용자들은 cdnjs.com 이나 HTML5 보일러플레이트가 제공하는 디폴트 빌드 결과물을 그대로 이용합니다. Modernizr가 제공하는 기능 감지 코드를 사용하지 않을거라면 뭐하러 Modernizr를 사용하나요? 아마도 당신은 Modernizr의 목적을 잘못 이해하고 있을 겁니다. Modernizr는 “고정된 해법의 모음”이 아닙니다. 저 역시 Modernizr를 처음 봤을 때 잘못 이해했습니다. 당시에 저는 Modernizr가 실질적인 기능을 제공하지 못하고 단지 모던함(modernness)에 대한 정의만 제공하는 것을 보고 살짝 실망했습니다.

반면 Polyfill 서비스는 실제로 문제를 해결합니다. 낡은 브라우저들에 부족한 기능들을 알아내는데 시간을 허비할 필요가 없습니다. 그것은 다른 사람이 알아내게 합시다. 우리는 세세한 내용을 몰라도 다른 사람이 노력해서 알아낸 결과물을 이용할 수 있습니다.

이용 방법

가장 간단한 이용방법은 다음과 같습니다.

<script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>

이것은 디폴트 Polyfill 목록을 제공합니다. 디폴트 목록은 우리가 생각하기에 모던(modern) 웹 개발에 있어 필수적인 기능들의 목록입니다. 또 적정한 수준에서 작고 정확하게 동작하는 Polyfill들의 목록들입니다. 만약 특정 Polyfill을 명시하고 싶다면 다음 코드처럼 하면 됩니다.

<!-- Just the Array.from polyfill -->
<script src="//cdn.polyfill.io/v1/polyfill.min.js?features=Array.from" async defer></script>
 
<!-- The default set, plus the geolocation polyfill -->
<script src="//cdn.polyfill.io/v1/polyfill.min.js?features=default,Navigator.prototype.geolocation" async defer></script>

만약 Polyfill이 당신의 코드가 파싱 되기 전에 먼저 로딩 완료되어야 하는 상황이라면, async와 defer 속성을 제거하거나 스크립트 로더(loader)를 사용하세요 (물론 Polyfill을 필요로하지 않는 스크립트 로더를 사용하세요!).

테스트와 문서 지원

아래 도표는 주요 웹 기술과 주요 브라우저들에 대한 Polyfill 서비스의 지원 상황을 보여줍니다.

우리가 지원하는 전체 기능 목록이 기능 도표에 정리되어 있습니다. 이 도표를 만들기 위해 우리는 Sauce Labs의 테스트 자동화 플랫폼을 이용했습니다. 이 테스트 자동화 플랫폼은 각각의 브라우저들 위에서 각각의 Polyfill들에 대한 일련의 테스트들을 자동으로 실행해줍니다. 링크된 문서는 그 테스트 결과입니다.

그래서, 유저-에이전트(User-Agent)를 구분한다구요? 정말요?

예. UA 분석 방식이 기능 분석 방식보다 우월한 몇가지 이유가 있습니다.

• 때때로 동일한 기능을 지원하는 Polyfill이 여러개 존재하는 경우가 있습니다. 때로는 일부 브라우저들이 비표준적인 형태로 기능을 제공하기 때문에 단지 표준적인 모양으로 맞추기 위해 Polyfill이 존재하는 경우도 있습니다. 또 때로는 어떤 기능을 아예 제공하지 않기 때문에 Polyfill이 존재하는 경우도 있습니다. UA를 감지하면 적절한 Polyfill을 선택할 수 있습니다.
• UA를 감지하면 첫번째 HTTP 요청만으로 Polyfill 코드를 응답 받을 수 있습니다. 기능 감지 방식을 사용하면, 첫번째 요청에 대한 응답은 기능 감지 코드가 될 것입니다. 그래서 Polyfill 코드를 얻기 위해서는 두번째 요청이 필요할 것입니다.

아주 많은 거의 모든 웹사이트들이 UA 감지 방식을 사용합니다. UA 감지 방식에 덧씌워진 오명을 들추려는 것은 아니지만, UA 감지 방식은 나쁘다고 알려져 있습니다. UA 감지 코드는 잘 못 만들기는 쉬운 반면, 잘 만들기는 어렵습니다. 사실 우리는 기능 감지 방식으로 우리 서비스를 이용하는 것에 반대하고 싶은 생각이 없습니다. (실제로 우리 이슈 트래커에는 기능 감지 방식에 관련된 이슈가 등록되어 있습니다).

모두를 위한 서비스

이 서비스는 FT(파이낸셜 타임즈)에 의해 유지됩니다. 우리는 계속해서 도구, 문서, 테스트, 기능을 확장하고 또 개선하고 있습니다. GitHub를 통해 소스코드를 자유롭게 이용할 수 있습니다. 따라서 당신이 직접 서비스를 운영하는 것도 가능합니다. 우리는 cdn.polyfill.io에서 누구나 무료로 이용할 수 있는 서비스 인스턴스를 운영하고 있습니다. Fastly에 있는 우리 친구들이 무료 CDN 서비스와 SSL 서비스를 도와주고 있습니다.

우리는 플랫폼을 만들었습니다. 우리는 이 플랫폼을 활성화시켜줄 커뮤니티의 도움이 필요합니다. 우리는 이미 Jonathan Neal, Mathias Bynens 등이 만든 최고의 Polyfill들을 서비스하고 있습니다. 하지만 우리는 좀 더 포괄적인 서비스를 만들고 싶습니다. 당신의 Polyfill을 가지고 오세요. 우리의 테스트를 개선해주세요. 그래서 이 서비스가 웹 세상을 전진시킬 수 있도록 도와주세요!