폴리머 (라이브러리)

1. 개요

폴리머는 2013년 11월에 시작된 웹 컴포넌트 개발을 위한 자바스크립트 라이브러리이다. Material Design 기반의 시각 스타일 가이드라인, 데이터 바인딩, 웹 컴포넌트 라이브러리를 제공하며, 사용자 정의 요소 생성, 데이터 바인딩, 계산된 속성, 조건부 템플릿, 제스처 이벤트 등의 기능을 지원한다. 2015년 성능을 개선한 버전 1.0이 출시되었으며, 이후 LitElement 및 단방향 바인딩에 집중하는 방향으로 개발이 진행되었다.

2. 역사

폴리머의 공개 개발은 2013년 11월 프로미스 폴리필 출시와 함께 시작되었다. 이후 데이터 바인딩 기능, Material Design 기반의 시각적 스타일 가이드라인, 그리고 "Core" 및 "Paper" 웹 컴포넌트를 포함하는 웹 디자인 라이브러리로 점차 확장되었다. 'Core' 컴포넌트는 일반적인 기능을, 'Paper' 컴포넌트는 Material Design 개념에 특화된 컴포넌트를 제공하기 위해 설계되었다.

구글은 폴리머 프로젝트 홍보 및 개발자 커뮤니티 활성화를 위해 여러 차례 폴리머 서밋을 개최했다.

2.1. 주요 버전

폴리머의 공개 개발은 2013년 11월 프로미스 폴리필의 출시와 함께 시작되었다. 이후 시각적 스타일 가이드라인(Material Design 기반), 데이터 바인딩 기능, 그리고 다수의 "Core" 및 "Paper" 웹 컴포넌트를 포함하는 웹 디자인 라이브러리로 점차 확장되었다. 'Core' 컴포넌트는 대부분의 웹사이트에 필요한 일반적인 기능을 포함하도록 설계되었고, 'Paper' 컴포넌트는 Material Design 개념을 핵심 디자인 요소로 사용하는 더 특화된 컴포넌트를 제공하도록 만들어졌다. 버전 0.5의 출시는 초기 사용자들이 프로젝트를 사용할 수 있는 첫 번째 버전으로 여겨지는 중요한 이정표였다.

구글은 버전 0.5 출시 이후에도 폴리머 설계를 계속 개선했으며, 특히 많은 개발자가 지적한 성능 문제를 해결하는 데 중점을 두었다. 이러한 노력은 2015년 버전 1.0의 출시로 이어졌으며, 이는 라이브러리의 첫 번째 "프로덕션 준비" 버전으로 간주되었다. 버전 1.0은 폴리머의 성능을 크게 향상시켜 로드 시간을 최대 7배까지 단축했다. 또한 버전 1.0부터 구글은 폴리머 프로젝트의 요소를 요소 카탈로그와 웹 컴포넌트 폴리필 및 웹 컴포넌트 슈가링 라이브러리로 명확하게 분리했다.

2018년 5월 2일, 폴리머 팀은 향후 폴리머 개발 방향을 변경하여, 기존의 양방향 바인딩과 템플릿 시스템에서 벗어나 LitElement(여전히 폴리머 프로젝트의 일부)와 단방향 바인딩에 집중할 것이라고 발표했다.

3. 특징

폴리머는 웹 컴포넌트 표준을 기반으로 한다. 커스텀 엘리먼트는 클래스가 있는 ES 모듈(주로 자바스크립트)을 사용하여 개발할 수 있다. 커스텀 엘리먼트 정의는 엘리먼트의 CSS 스타일, 엘리먼트의 로컬 DOM을 위한 HTML 템플릿, 엘리먼트 속성, 라이프사이클 콜백, 자바스크립트 메소드 등으로 구성된다.

이렇게 정의된 커스텀 엘리먼트는 HTML 코드 안에서 일반 HTML 태그처럼 사용할 수 있다.

폴리머는 순수(vanilla) 웹 컴포넌트 기능 외에 다음과 같은 여러 유용한 기능을 추가로 제공한다.

* 커스텀 엘리먼트를 더 간단한 방법으로 생성하는 기능
* 단방향 및 양방향 데이터 바인딩 기능
* 계산된 속성(Computed properties)
* 조건부 템플릿 및 반복 템플릿
* 사용자 상호작용을 위한 제스처 이벤트

4. 구성 요소

폴리머 라이브러리의 핵심 구성 요소는 커스텀 엘리먼트(Custom Element)이다. 이는 HTML, CSS, 자바스크립트 코드를 하나로 캡슐화하여 재사용 가능한 웹 컴포넌트를 정의하는 기술이다. 개발자는 ES 모듈과 클래스를 사용하여 커스텀 엘리먼트를 만들 수 있으며, 이렇게 정의된 엘리먼트는 일반적인 HTML 태그처럼 웹 페이지 코드 내에서 사용할 수 있다. 커스텀 엘리먼트는 엘리먼트의 시각적 표현(CSS), 내부 구조(HTML 템플릿), 동작(자바스크립트) 등을 포함하여 정의된다.

4.1. 커스텀 엘리먼트 정의 (예시)

커스텀 엘리먼트는 클래스가 있는 ES(ECMAScript, 대부분 자바스크립트) 모듈을 사용하여 개발할 수 있다. 커스텀 엘리먼트 정의는 CSS 스타일, 엘리먼트의 로컬 DOM을 위한 HTML 템플릿, 엘리먼트 속성, 라이프사이클 콜백, 자바스크립트 메서드로 구성된다:


import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'

class HelloElement extends PolymerElement {

static get template() {
return html`


Hello !
`;
}

static get is() { return 'hello-element'; }
static get properties() {
return {
name: {
type: String
}
/* Element properties */
}
}
/* Custom methods */
}
window.customElements.define(HelloElement.is, HelloElement);


위에 정의된 엘리먼트는 HTML 코드 안에서 다음과 같이 사용할 수 있다:

5. 활용

폴리머는 상호 운용 가능한 "레고 블록"과 같은 구조를 활용하여 웹 애플리케이션을 구축하는 데 사용될 수 있다. 이는 구조화된 설계 프로세스에 특별한 주의를 기울인 결과로, 재사용 가능한 컴포넌트를 만들고 이를 조합하여 복잡한 사용자 인터페이스(UI)를 효율적으로 구성하는 것을 가능하게 한다. 이러한 특징 덕분에 폴리머는 2015년과 2016년에 걸쳐 사용량이 증가하며 시장에서 인지도를 높였다.

2018년에는 폴리머 프로젝트의 일환으로 구글 크롬 팀이 LitElement를 개발했다. LitElement는 웹 컴포넌트를 만들기 위한 가볍고 사용하기 쉬운 프레임워크로 설계되었으며, 모든 프런트엔드 프레임워크 또는 라이브러리와 함께 사용할 수 있다.