폴리필 (프로그래밍)

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요
2. 정의
- 2.1. 폴리필과 Shim의 관계
3. 예시
참조

1. 개요

폴리필은 웹 브라우저가 기본적으로 지원하지 않는 API를 자바스크립트 등을 사용하여 구현하는 기술을 의미한다. 2009년 레미 샤프에 의해 처음 명명되었으며, '구멍을 메우는 충전재'라는 뜻의 Polyfilla에서 유래했다. 폴리필은 브라우저 호환성 문제를 해결하고, 최신 웹 기술을 구형 브라우저에서도 사용할 수 있도록 돕는다. HTML5 shiv, CSS3 PIE, FlashCanvas 등이 폴리필의 예시이며, core-js, Webshims Lib, Hyphenopoly.js와 같은 라이브러리도 존재한다.

더 읽어볼만한 페이지

반응형 웹 디자인 - 어도비 뮤즈
어도비 뮤즈는 어도비에서 개발한 웹사이트 제작 소프트웨어이며, 테마와 위젯을 제공하여 정적 HTML 파일을 생성하고, 2012년에 출시되어 2020년에 기술 지원이 종료되었다.
반응형 웹 디자인 - JQuery Mobile
jQuery Mobile은 다양한 모바일 플랫폼과 데스크톱 브라우저를 지원하며 HTML5 기반 UI 구성과 AJAX 기반 탐색을 통해 모바일 웹 페이지 제작을 돕는 jQuery 기반의 사용자 인터페이스 라이브러리이다.
웹 디자인 - 웹 접근성
웹 접근성은 장애가 있는 사람들이 웹을 사용할 수 있도록 기술 및 디자인 원칙을 적용하는 것이며, 웹 콘텐츠, 저작 도구, 사용자 에이전트의 접근성 향상을 위한 지침과 법률, 인공지능 기술 활용을 통한 접근성 개선 노력이 이루어지고 있다.
웹 디자인 - 접근성
접근성은 장애인을 포함한 모든 사람이 정보와 서비스에 차별 없이 접근하도록 보장하는 개념으로, 윤리적 책임, 사회적 형평성, 상업적 이익, 공익적 가치 때문에 중요하며, 물리적 환경, 정보 접근, 서비스 접근 등 다양한 영역에서 보조 기술과 적응 기술을 통해 구현되지만, 완전한 확보를 위해서는 지속적인 노력과 정책적 지원이 필요하다.
웹 개발 - Ajax
Ajax는 웹 페이지 전체를 새로고침하지 않고 비동기적으로 서버와 통신하여 웹 애플리케이션의 일부를 업데이트하는 웹 개발 기술로, XMLHttpRequest 객체의 등장으로 가능해졌으며 HTML, CSS, DOM, JavaScript, JSON 등의 기술을 통합하여 동적인 사용자 인터페이스를 구현한다.
웹 개발 - WebXR
WebXR은 웹 브라우저에서 가상 현실 및 증강 현실 콘텐츠를 구현하기 위한 API로, 다양한 장치 및 플랫폼에서 몰입형 웹 경험을 제공하며, 구글, 메타, 모질라 등 여러 기업과 단체가 개발에 참여하여 지속적인 업데이트를 통해 기능 향상을 목표로 한다.

폴리필 (프로그래밍)
일반 정보
종류	프로그래밍 기술
설명	최신 브라우저가 구형 브라우저에서도 최신 기능을 사용할 수 있도록 하는 기술
상세 정보
목적	브라우저 간 호환성 확보
작동 방식	개발자가 기대하는 기능을 제공하지 못하는 브라우저를 위한 대체 코드를 제공 자바스크립트 또는 다른 기술을 사용하여 구현
필요성	모든 브라우저가 동일한 기능을 지원하지 않기 때문에 웹 개발의 복잡성을 줄임 구형 브라우저를 사용하는 사용자에게도 최신 웹 경험을 제공
예시	HTML5 요소 지원 CSS3 속성 지원
장점	웹 개발 단순화 사용자 경험 개선 브라우저 호환성 문제 해결
단점	추가적인 코드 로딩으로 인한 성능 저하 가능성 모든 기능을 완벽하게 대체하지 못할 수 있음
관련 용어	브라우저 호환성 웹 표준 점진적 향상

2. 정의

폴리필(polyfill)이라는 용어는 2009년 레미 샤프(Remy Sharp)가 공동 집필한 책 ''HTML5 소개''에서 "브라우저가 네이티브로 지원하지 않는 API를 자바스크립트(또는 플래시 등)를 사용하여 복제한다"는 의미의 단어가 필요하여 만들어낸 신조어이다.^[4]^[5] 샤프에게 'shim'은 레이아웃에 사용되는 shim.gif와 같은 스페이서 GIF와 같은 투명하지 않은 API와 임시 방편을 연상시켰고, 점진적 향상 및 우아한 성능 저하와 같은 유사한 용어는 적절하지 않아 새로운 용어를 만들었다.^[5] 이 용어는 벽의 틈새와 구멍을 메우는 데 사용되는 다목적 충전재 브랜드인 Polyfilla에서 유래되었으며, "많은 (poly-) 방식으로 구멍(기능)을 채운다"는 의미를 갖는다. 이 단어는 이후 폴 아이리쉬(Paul Irish)의 사용과 Modernizr 문서에서 특히 인기를 얻었다.^[5]^[7]

2. 1. 폴리필과 Shim의 관계

이 용어는 2009년 레미 샤프(Remy Sharp)가 공동 집필한 책 ''HTML5 소개''에서 "브라우저가 네이티브로 지원하지 않는 API를 자바스크립트 (또는 플래시 등)를 사용하여 복제한다"는 의미의 단어가 필요하여 만들어낸 신조어이다.^[4]^[5] 형식적으로 "shim은 이전 환경에서 해당 환경의 수단을 사용하여 새로운 API를 제공하는 라이브러리"이다.^[2] 폴리필은 이 정의에 정확히 부합한다. 'shim'이라는 용어는 초기 폴리필에도 사용되었다.^[6] 그러나 샤프에게 'shim'은 레이아웃에 사용되는 shim.gif와 같은 스페이서 GIF와 같은 투명하지 않은 API와 임시 방편을 연상시켰고, ''점진적 향상'' 및 ''우아한 성능 저하''와 같은 유사한 용어는 적절하지 않아 그는 새로운 용어를 만들었다.^[5] 이 용어는 벽의 틈새와 구멍을 메우는 데 사용되는 다목적 충전재 브랜드인 ''Polyfilla''에서 유래되었으며, "많은 (poly-) 방식으로 구멍(기능)을 채운다"는 의미를 갖는다. 이 단어는 이후 폴 아이리쉬(Paul Irish)의 사용과 Modernizr 문서에서 특히 인기를 얻었다.^[5]^[7]

샤프가 구별하는 점은 다음과 같다.^[4]

> 폴리필을 우리가 이미 가지고 있는 shim과 같은 기술과 다르게 만드는 것은 이것이다: 폴리필 스크립트를 제거하더라도 폴리필이 제거되었음에도 불구하고 코드에 변경 없이 계속 작동한다는 것이다.

이러한 구별은 다른 저자들은 하지 않는다.^[2] 때때로 shim, 폴리필 및 fallback 사이에 다양한 구별이 이루어지지만 일반적으로 받아들여지는 구별은 없다. 대부분은 폴리필을 shim의 한 형태로 간주한다.^[8] 'polyfiller'라는 용어도 가끔 사용된다.^[9]

3. 예시

다음은 몇 가지 폴리필 예시이다.

HTML5 shiv: 인터넷 익스플로러 9 이하에서 시맨틱 태그를 지원하도록 한다.
CSS3 PIE: 인터넷 익스플로러 9 이하에서 CSS3 둥근 모서리(border-radius) 속성을 지원하도록 한다.
FlashCanvas: 캔버스를 지원하지 않는 인터넷 익스플로러 8 이하에서 HTML5 캔버스를 플래시 오브젝트로 바꾸어 나타내 준다.
MediaElement.js: audio/video 태그를 지원하지 않는 브라우저에서 해당 태그를 플래시로 바꾸어 표시한다.
Flexie: Flex를 지원하지 않는 구형 브라우저에서 Flex CSS 옵션을 지원하도록 한다.

3. 1. HTML5 관련 폴리필

HTML5 shiv: 인터넷 익스플로러 9 이하에서 시맨틱 태그를 지원하도록 한다.^[4]
CSS3 PIE: 인터넷 익스플로러 9 이하에서 CSS3 둥근 모서리(border-radius) 속성을 지원하도록 한다.
FlashCanvas: 캔버스를 지원하지 않는 인터넷 익스플로러 8 이하에서 HTML5 캔버스를 인터넷 익스플로러 8 이하에 맞는 플래시 오브젝트로 바꾸어 나타내 준다.
MediaElement.js: audio/video 태그를 지원하지 않는 브라우저에서, 해당 태그를 플래시로 바꾸어 표시한다.
Flexie: Flex를 지원하지 않는 구형 브라우저에서 Flex CSS 옵션을 지원하도록 한다.

IE 9 이전 버전에서는 <section> 및 <nav>와 같은 알 수 없는 HTML 요소가 빈 요소로 파싱되어 페이지의 중첩 구조를 손상시키고 해당 요소를 CSS를 사용하여 스타일링하는 것을 불가능하게 했다. 가장 널리 사용되는 폴리필 중 하나인 html5shiv는 이 버그를 해결하기 위해 IE의 또 다른 특징, 즉 새로운 HTML5 요소 각각에 대해 `document.createElement("tagname")`을 호출하면 IE가 이를 올바르게 파싱한다는 점을 활용한다. 또한 이러한 HTML5 요소에 대한 기본적인 기본 스타일도 포함한다.

3. 2. CSS3 관련 폴리필

CSS3 PIE: 인터넷 익스플로러 9 이하에서 CSS3 둥근 모서리(border-radius) 속성을 지원하도록 하는 폴리필이다.
Flexie: Flex를 지원하지 않는 구형 브라우저에서 Flex CSS 옵션을 지원하도록 하는 폴리필이다.^[1]
Selectivizr: IE 8 이하 버전에서 많은 CSS3 선택자를 사용할 수 있게 해주는 폴리필이다. 페이지의 스타일시트를 읽어 여러 CSS3 선택자를 찾아낸 후, jQuery와 같은 자바스크립트 선택자 라이브러리를 사용하여 해당 선택자와 일치하는 요소를 문서에서 쿼리하고, 해당 요소에 직접 스타일을 적용한다.^[2]
PIE (프로그레시브 인터넷 익스플로러): IE에서 가장 인기 있는 CSS3 박스 데코레이션 속성 중 일부를 구현하는 폴리필이며, 여기에는 IE 8 이하의 `border-radius`와 `box-shadow`, IE 9 이하의 선형 그라데이션 배경이 포함된다. HTC 동작으로 호출되어 지원되지 않는 CSS3 속성을 특정 요소에서 찾아 IE 6–8의 경우 VML을 사용하고 IE 9의 경우 SVG를 사용하여 해당 속성을 렌더링한다. 렌더링은 기본 브라우저 구현과 거의 구별할 수 없으며 동적 DOM 수정도 잘 처리한다.^[3]

3. 3. 자바스크립트 관련 폴리필

HTML5 shiv: 인터넷 익스플로러 9 이하에서 시맨틱 태그를 지원하도록 한다.
CSS3 PIE: 인터넷 익스플로러 9 이하에서 CSS3 둥근 모서리(border-radius) 속성을 지원하도록 한다.
FlashCanvas: 캔버스를 지원하지 않는 인터넷 익스플로러 8 이하에서 HTML5 캔버스를 플래시 오브젝트로 바꾸어 나타내 준다.
MediaElement.js: audio/video 태그를 지원하지 않는 브라우저에서, 해당 태그를 플래시로 바꾸어 표시한다.
Flexie: Flex를 지원하지 않는 구형 브라우저에서 Flex CSS 옵션을 지원하도록 한다.

core-js^[10]는 가장 인기 있는^[11] JavaScript 표준 라이브러리 폴리필 중 하나이다. 최신 버전의 표준인 ECMAScript까지의 폴리필을 포함한다. 프로미스, 심볼, 컬렉션, 이터레이터, 타입 배열, 기타 여러 기능, ECMAScript 제안, URL과 같은 일부 크로스 플랫폼 WHATWG / W3C 기능 및 제안이 포함된다. 필요한 기능만 로드하거나 전역 네임스페이스 오염 없이 사용할 수 있다. 바벨과 통합될 수 있으며, 이를 통해 필요한 core-js 모듈을 자동으로 코드에 삽입할 수 있다.

더글러스 크락포드는 원래 (당시에는 막 부상하던) JSON 데이터 형식을 읽고 쓰기 위한 API로 json2.js를 작성했다. 이 API는 널리 사용되어 브라우저 공급업체들이 API를 기본적으로 구현하고 사실상 표준으로 만들기로 결정했다. json2.js는 이제 최신 브라우저의 기능을 이전 브라우저에 구현하므로, 라이브러리가 아닌 폴리필이 되었다.

ECMAScript 제5판("ES5")은 몇 가지 유용한 새로운 스크립팅 기능을 제공하며, 구형 자바스크립트 엔진과 구문 호환되므로 기본 JS 객체에 메서드를 패치하여 대부분 폴리필할 수 있다. es5-shim 폴리필은 es5-shim.js가 완전히 폴리필될 수 있는 메서드를 포함하고, es5-sham.js가 기본 엔진에 너무 의존하여 정확하게 작동하기 어려운 다른 메서드의 부분적인 구현을 포함하는 두 부분으로 구성된다.

3. 4. 기타 폴리필

폴리필 이름	설명
HTML5 shiv	인터넷 익스플로러 9 이하에서 시맨틱 태그를 지원하도록 한다.
CSS3 PIE	인터넷 익스플로러 9 이하에서 CSS3 둥근 모서리(border-radius) 속성을 지원하도록 한다.
FlashCanvas	캔버스를 지원하지 않는 인터넷 익스플로러 8 이하에서 HTML5 캔버스를 인터넷 익스플로러 8 이하에 맞는 플래시 오브젝트로 바꾸어 나타내 준다. 어도비 플래시 플러그인을 사용하여 HTML5 Canvas API를 구현한 것이다. 상업적인 폴리필로서는 드물게 유료 버전과 그림자 등의 고급 기능을 몇 가지 지원하지 않는 무료 버전이 있다.
MediaElement.js	audio/video 태그를 지원하지 않는 브라우저에서, 해당 태그를 플래시로 바꾸어 표시한다. John Dyer의 MediaElement.js 폴리필은 Flash 또는 Silverlight 플러그인을 사용하여 구형 브라우저에서 HTML5 MediaElement API를 포함한 `<video>` 및 `<audio>` 요소를 지원한다. 또한 모든 브라우저에서 일관된 이러한 요소에 대한 선택적 미디어 플레이어 UI를 제공한다.
Flexie	Flex를 지원하지 않는 구형 브라우저에서 Flex CSS 옵션을 지원하도록 한다.
Webshims Lib	알렉산더 파르카스(Alexander Farkas)가 만든 것으로, 다른 많은 폴리필들을 하나의 패키지로 묶어 방문하는 브라우저에 필요한 것들만 조건부로 로드한다.
Hyphenopoly.js	해당 문서 언어에 대해 브라우저에서 아직 지원하지 않는 경우 자동 하이픈 분리를 가능하게 한다.^[15]

3. 5. 폴리필 서비스

앤드루 베츠가 폴리필을 구현하기 위해 만든 자바스크립트 라이브러리이다. 2024년 2월, 이 라이브러리의 도메인은 중국 회사 펀널(Funnull)에 인수되었으며, 몇 달 안에 공급망 공격의 일부가 되었다.^[12]^[13]

참조

_[1] 서적 Mastering CSS Grid: A comprehensive and practical guide to creating beautiful layouts with CSS Grid https://books.google[...] Packt Publishing Ltd 2023-06-09
_[2] 서적 Speaking JavaScript http://speakingjs.co[...]
_[3] 문서
_[4] 서적 Introducing HTML5
_[5] 웹사이트 What is a polyfill? https://remysharp.co[...] 2010-10-08
_[6] 웹사이트 Mistakes, Sadness, Regret https://ln.hixie.ch/[...] 2008-01-23
_[7] 웹사이트 HTML5 Cross browser Polyfills https://github.com/M[...]
_[8] 웹사이트 What is the difference between a shim and a polyfill? https://stackoverflo[...]
_[9] 서적 HTML5 Developer's Cookbook
_[10] 웹사이트 Core-js https://github.com/z[...] 2021-10-26
_[11] 웹사이트 Airbnb-js-shims vs core-js vs core-js-pure vs es5-shim vs es6-shim vs js-polyfills vs polyfill-library vs polyfill-service | NPM trends https://www.npmtrend[...]
_[12] 웹사이트 384,000 sites pull code from sketchy code library recently bought by Chinese firm https://arstechnica.[...] 2024-07-03
_[13] 웹사이트 Polyfill.io Attack Infects Over 110,000 Websites - Spiceworks https://www.spicewor[...] 2024-07-01
_[14] 웹사이트 navigator.id https://developer.mo[...] Mozilla Developer Network 2012-06-30
_[15] 웹사이트 Hyphenopoly.js https://github.com/m[...] 2022-09-25

본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com