I/O 2019의 웹 구성요소
게시일: 2019년 6월 18일
Google I/O 2019에서 Polymer 프로젝트의 Kevin Schaaf와 Salesforce의 Caridy Patiño가 웹 구성요소의 상태에 관해 이야기했습니다.
웹 구성요소는 얼마나 인기가 있나요?
오늘 웹을 사용했다면 웹 구성요소를 사용했을 가능성이 높습니다. 현재 모든 페이지 로드의 5~8%가 하나 이상의 웹 구성요소를 사용하고 있습니다. 이로 인해 웹 구성요소는 지난 5년간 출시된 가장 성공적인 새로운 웹 플랫폼 기능 중 하나가 되었습니다.
YouTube, GitHub 등 매일 사용하는 사이트에서 웹 구성요소를 확인할 수 있습니다. AMP로 구축된 많은 뉴스 및 게시 사이트에서도 사용됩니다. AMP 구성요소는 웹 구성요소이기도 합니다. 또한 많은 기업에서 웹 구성요소를 채택하고 있습니다.
웹 구성요소란 무엇인가요?
웹 구성요소란 무엇일까요? 웹 구성요소 사양은 브라우저의 내장 HTML 태그 집합을 확장할 수 있는 하위 수준 API 집합을 제공합니다. 웹 구성요소는 다음을 제공합니다.
- 표준 DOM API를 사용하여 구성요소를 만드는 일반적인 방법입니다.
- 속성/이벤트를 사용하여 데이터를 수신하고 전송하는 일반적인 방법입니다.
표준 인터페이스 외에 표준에서는 구성요소가 실제로 구현되는 방식에 관해 아무것도 언급하지 않습니다.
- DOM을 만드는 데 사용하는 렌더링 엔진입니다.
- 속성 또는 특성의 변경사항에 따라 업데이트되는 방식
즉, 웹 구성요소는 브라우저에 구성요소를 만들 시기와 위치를 알려주지만 만드는 방법은 알려주지 않습니다.
작성자는 React와 마찬가지로 기능적 렌더링 패턴을 선택하여 웹 구성요소를 빌드하거나 Angular 또는 Vue에서 볼 수 있는 선언적 템플릿을 사용할 수 있습니다. 작성자는 상호 운용성을 유지하면서도 구성요소 내에서 사용할 기술을 자유롭게 선택할 수 있습니다.
웹 구성요소는 어떤 용도로 사용되나요?
웹 구성요소와 독점 구성요소 시스템의 주요 차이점은 상호 운용성입니다. 표준 인터페이스 덕분에 <input> 또는 <video>과 같은 기본 제공 요소를 사용하는 모든 곳에서 웹 구성요소를 사용할 수 있습니다.
실제 HTML로 표현할 수 있으므로 모든 인기 프레임워크에서 렌더링할 수 있습니다. 따라서 사용자를 하나의 프레임워크에 종속시키지 않고 더 다양한 애플리케이션에서 구성요소를 더 광범위하게 사용할 수 있습니다.
구성요소 인터페이스가 표준이므로 서로 다른 라이브러리를 사용하여 구현된 웹 구성요소를 동일한 페이지에서 혼합할 수 있습니다. 이러한 사실은 기술 스택을 업데이트할 때 애플리케이션을 미래에 대비하는 데 도움이 됩니다. 모든 구성요소를 교체하는 한 프레임워크와 다른 프레임워크 간의 큰 단계별 변경 대신 구성요소를 한 번에 하나씩 업데이트할 수 있습니다.
웹 구성요소를 사용하는 사람은 누구인가요?
이러한 모든 이유로 웹 구성요소는 다양한 사용 사례에서 큰 성공을 거두고 있습니다. 특히 콘텐츠 사이트, 디자인 시스템, 엔터프라이즈 애플리케이션의 세 가지 사용 사례가 인기가 많았습니다.
콘텐츠 사이트
웹 구성요소는 콘텐츠를 점진적으로 개선하는 데 적합한 기술입니다. 이미 수많은 CMS 시스템에서 표준 HTML로 출력할 수 있기 때문입니다.
AMP는 콘텐츠를 제공하기 위해 게시 업계의 인프라에 웹 구성요소가 얼마나 빠르고 쉽게 통합되었는지 보여주는 좋은 예입니다.
디자인 시스템
조직의 사이트와 애플리케이션의 공통 디자인과 스타일을 정의하는 구성요소 및 가이드라인 집합인 디자인 시스템을 사용하여 자체를 표현하는 방식을 통합하는 기업이 점점 늘어나고 있습니다. 여기에서도 웹 구성요소가 적합합니다.
디자이너는 단일 표준 구성요소 집합이 있는 대신 React, Angular 및 기타 모든 프레임워크를 기반으로 설계 시스템 구성요소의 자체 버전을 빌드하는 여러 팀과 경쟁해야 하는 경우가 많습니다.
웹 구성요소가 그 해답입니다. 한 번 작성하면 어디서나 실행할 수 있는 구성요소 시스템으로, 앱 팀이 원하는 프레임워크를 사용할 수 있습니다.
ING, EA, Google과 같은 회사에서는 웹 구성요소에 회사 디자인 언어를 구현하고 있습니다.
엔터프라이즈: Salesforce의 웹 구성요소
웹 구성요소는 표준화할 수 있는 안전하고 미래 지향적인 기술로 기업 내에서도 놀라운 발전을 보이고 있습니다. Salesforce UI 플랫폼의 설계자인 Caridy Patiño는 웹 구성요소를 사용하여 UI 플랫폼을 빌드한 이유를 설명했습니다.
Salesforce는 여러 애플리케이션으로 구성되어 있으며, 그중 상당수는 인수를 통해 확보한 것입니다. 각각 자체 기술 스택에서 실행될 수 있습니다. 서로 다른 스택을 기반으로 빌드되므로 모든 앱에 동일한 디자인과 분위기를 적용하기는 어렵습니다. 또한 Salesforce를 사용하면 고객이 Salesforce 플랫폼을 사용하여 자체 맞춤 애플리케이션을 빌드할 수 있습니다. 따라서 구성요소는 외부 개발자도 사용할 수 있어야 합니다.
Salesforce는 플랫폼 고객의 요구사항을 다음과 같이 파악했습니다.
- 독점 솔루션이 아닌 표준 솔루션을 사용하므로 숙련된 개발자를 더 쉽게 찾고 신규 개발자를 더 빠르게 온보딩할 수 있습니다.
- 일반적인 구성요소 모델: Salesforce 애플리케이션을 맞춤설정하는 방식이 동일합니다.
또한 고객이 원하지 않는 사항도 파악했습니다.
- 구성요소 및 앱의 브레이킹 체인지 즉, 하위 호환성이 필수였습니다.
- 오래된 기술에 갇혀 발전할 수 없습니다.
- 폐쇄형 생태계에 갇혀 있음
새 UI 플랫폼의 기반으로 웹 구성요소를 사용하면 이러한 요구사항을 모두 충족할 수 있으며 그 결과가 새로운 Lightning 웹 구성요소입니다.
웹 구성요소 시작하기
웹 구성요소를 시작하는 방법은 다양합니다.
웹 앱을 빌드하는 경우 제공되는 다양한 표준 웹 구성요소를 사용하는 것이 좋습니다. 이 중 몇 가지 사례를 아래에 정리해 보았습니다.
- Google은 자체 Material Design 시스템을 웹 구성요소인 Material Web Components로 제공합니다.
- Wired Elements는 스케치하고 손으로 그린 듯한 모양이 특징인 멋진 웹 구성요소 세트입니다.
<model-viewer>과 같은 특수 목적 웹 구성요소를 사용하면 앱에 드롭하여 3D 콘텐츠를 추가할 수 있습니다.
회사의 디자인 시스템을 개발하거나 모든 환경에서 사용할 수 있는 단일 구성요소 또는 라이브러리를 판매하는 경우 웹 구성요소를 사용하여 구성요소를 작성하는 것이 좋습니다. 기본 제공 웹 구성요소 API를 사용할 수 있지만 하위 수준이므로 프로세스를 더 쉽게 만들어 주는 여러 라이브러리가 있습니다.
자체 구성요소 빌드를 시작하려면 React와 유사한 훌륭한 기능적 렌더링 환경을 갖춘 Google에서 개발한 웹 구성요소 기본 클래스인 LitElement를 확인하세요.
고려할 만한 기타 도구 및 라이브러리:
- Stencil은 웹 구성요소 우선 프레임워크입니다. JSX, TypeScript와 같은 인기 프레임워크 기능이 포함되어 있습니다.
- Angular 요소는 Angular 구성요소를 웹 구성요소로 래핑하는 방법을 제공합니다.
- Vue.js 웹 구성요소 래퍼는 Vue 구성요소를 웹 구성요소로 패키징하는 방법을 제공합니다.
추가 리소스:
- open-wc.org에는 시작하기에 유용한 정보와 빌드 및 개발 도구의 팁과 기본 구성이 나와 있습니다.
- 웹 기초에서는 기본 웹 구성요소 API와 웹 구성요소 설계 권장사항에 관한 입문서를 제공합니다.
- MDN에서는 웹 구성요소 API의 참조 문서와 일부 튜토리얼을 제공합니다.