I/O 2019의 웹 구성요소
Google I/O 2019에서 Polymer 프로젝트의 케빈 샤프와 Salesforce의 카리디 패티뇨가 웹 구성요소의 상태에 관해 이야기했습니다.
웹 구성요소는 얼마나 인기가 있나요?
오늘 웹을 사용했다면 웹 구성요소를 사용했을 가능성이 큽니다. 현재 모든 페이지 로드의 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과 같은 기업은 웹 구성요소에 회사의 디자인 언어를 구현하고 있습니다.
Enterprise: Salesforce의 웹 구성요소
웹 구성요소는 표준화할 수 있는 안전하고 미래지향적인 기술로 기업 내에서 눈에 띄게 성장하고 있습니다. Salesforce UI 플랫폼의 아키텍트인 카리디 패티뇨는 웹 구성요소를 사용하여 UI 플랫폼을 빌드한 이유를 설명했습니다.
Salesforce는 애플리케이션 모음이며, 그중 다수는 인수로 얻은 것입니다. 각 서비스는 자체 기술 스택에서 실행될 수 있습니다. 서로 다른 스택을 기반으로 빌드되므로 모두 동일한 디자인과 느낌을 제공하기는 어렵습니다. 또한 Salesforce를 통해 고객은 Salesforce 플랫폼을 사용하여 자체 맞춤 애플리케이션을 빌드할 수 있습니다. 따라서 외부 개발자도 구성요소를 사용할 수 있으면 좋습니다.
Salesforce는 플랫폼 고객의 요구사항을 파악했습니다.
- 독점 솔루션이 아닌 표준 솔루션이므로 경험 많은 개발자를 더 쉽게 찾고 신규 개발자를 더 빠르게 양성할 수 있습니다.
- 공통 구성요소 모델이므로 모든 Salesforce 애플리케이션을 맞춤설정하는 방법은 동일합니다.
또한 고객이 원하지 않는 몇 가지 사항도 확인했습니다.
- 구성요소 및 앱의 중대한 변경사항 즉, 이전 버전과의 호환성이 필수였습니다.
- 오래된 기술에 얽매여 발전할 수 없음
- 폐쇄된 생태계 내에서 활동해야 합니다.
웹 구성요소를 새로운 UI 플랫폼의 기반으로 사용하면 이러한 모든 요구사항을 충족할 수 있었으며, 그 결과 새로운 Lightning Web Components가 탄생했습니다.
웹 구성요소 시작하기
웹 구성요소를 시작하는 방법에는 여러 가지가 있습니다.
웹 앱을 빌드하는 경우 사용 가능한 여러 상용 웹 구성요소 중 일부를 사용하는 것이 좋습니다. 이 중 몇 가지 사례를 아래에 정리해 보았습니다.
- 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에 관한 참조 문서와 몇 가지 튜토리얼을 제공합니다. \
Unsplash의 제이슨 투인스트라 제공 히어로 이미지
편집자 참고사항: 맞춤 요소 사용량 차트가 chromestatus.com에 보고된 대로 전체 월별 사용량 데이터를 표시하도록 업데이트되었습니다. 이 게시물의 이전 버전에는 최근 개월을 제외한 6개월 단위의 그래프가 포함되어 있었습니다. 원래 차트의 V0 및 V1 계열은 누적되어 있었지만 이제는 모호성을 없애기 위해 총계 선과 함께 누적되지 않은 상태로 표시됩니다. 2017년 말의 급격한 증가는 chromestatus.com의 데이터 수집 시스템 변경으로 인한 것입니다. 이 변경사항은 모든 웹 플랫폼 기능의 통계에 영향을 미쳤으며 향후 더 정확한 측정이 가능해졌습니다.