I/O 2019의 웹 구성요소
Google I/O 2019에서 Polymer Project의 Kevin Schaaf와 Salesforce의 Caridy Patiño가 웹 구성요소의 상태에 관해 이야기했습니다.
웹 구성요소의 인기는 어느 정도인가요?
오늘 웹을 사용했다면 아마 웹 구성 요소를 사용했을 것입니다. 계산에 따르면 오늘날 모든 페이지 로드의 5~8%가 하나 이상의 웹 구성요소를 사용합니다. 따라서 웹 구성 요소는 지난 5년 동안 출시된 가장 성공적인 새로운 웹 플랫폼 기능 중 하나입니다.
YouTube나 GitHub와 같이 매일 사용하는 사이트에서 웹 구성요소를 찾을 수 있습니다. AMP로 구축된 많은 뉴스 및 게시 사이트에서도 사용됩니다. AMP 구성요소는 웹 구성요소이기도 합니다. 또한 많은 기업이 웹 구성요소를 채택하고 있습니다.
웹 구성요소란 무엇인가요?
웹 구성 요소란 무엇일까요? 웹 구성요소 사양은 브라우저에 내장된 HTML 태그 집합을 확장할 수 있는 하위 수준의 API 집합을 제공합니다. 웹 구성요소는 다음을 제공합니다.
- 구성요소를 만드는 일반적인 메서드 (표준 DOM API 사용)
- 속성/이벤트를 사용하여 데이터를 수신하고 전송하는 일반적인 방법입니다.
이러한 표준 인터페이스 외에는 구성요소가 실제로 구현되는 방식에 대해서는 어떠한 것도 언급하지 않습니다.
- DOM을 만드는 데 사용하는 렌더링 엔진입니다.
- 속성 또는 속성의 변경사항에 따라 자체 업데이트되는 방식
즉, 웹 구성요소는 구성요소를 만들 시점과 위치를 브라우저에 알려주지만 방법은 알려주지 않습니다.
작성자는 React와 같은 함수 렌더링 패턴을 선택하여 웹 구성 요소를 빌드할 수도 있고, Angular 또는 Vue에서 찾을 수 있는 것처럼 선언적 템플릿을 사용할 수도 있습니다. 작성자는 구성요소 내에서 사용하는 기술을 자유롭게 선택하는 동시에 상호 운용성을 유지할 수 있습니다.
웹 구성 요소는 어디에 유용한가요?
웹 구성요소와 독점 구성요소 시스템의 주요 차이점은 상호 운용성입니다. 표준 인터페이스로 인해 <input> 또는 <video>와 같은 내장 요소를 사용하는 곳이라면 어디에서나 웹 구성요소를 사용할 수 있습니다.
실제 HTML로 표현할 수 있기 때문에 모든 인기 프레임워크에서 렌더링할 수 있습니다. 따라서 사용자를 하나의 프레임워크에 종속시키지 않고도 더 다양한 애플리케이션에서 구성요소를 더 광범위하게 사용할 수 있습니다.
또한 구성요소 인터페이스는 표준이므로 다른 라이브러리를 사용하여 구현된 웹 구성요소를 같은 페이지에서 혼합할 수 있습니다. 이는 기술 스택을 업데이트할 때 애플리케이션의 미래 경쟁력을 확보하는 데 도움이 됩니다. 한 프레임워크와 다른 프레임워크 간의 대대적인 단계적 변경을 통해 모든 구성 요소를 교체하는 대신, 한 번에 하나씩 구성 요소를 업데이트할 수 있습니다.
누가 웹 구성 요소를 사용합니까?
이러한 이유로 Web Components는 실제로 여러 다양한 사용 사례에서 큰 성공을 거두고 있습니다. 특히 콘텐츠 사이트, 디자인 시스템, 엔터프라이즈 애플리케이션과 같은 세 가지 사용 사례가 특히 인기가 있습니다.
콘텐츠 사이트
웹 구성 요소는 콘텐츠를 점진적으로 향상시키기 위한 완벽한 기술입니다. 왜냐하면 웹 구성 요소는 이미 많은 CMS 시스템에 의해 표준 HTML로 출력될 수 있기 때문입니다.
AMP는 웹 구성요소가 콘텐츠 제공을 위한 게시 업계의 인프라에 얼마나 빠르고 쉽게 도입되었는지를 잘 보여주는 좋은 예입니다.
디자인 시스템
조직 사이트 및 애플리케이션의 일반적인 디자인과 분위기를 정의하는 일련의 구성요소와 가이드라인인 디자인 시스템을 사용하여 자신을 표현하는 방식을 통합하는 회사가 늘고 있습니다. 웹 구성 요소도 여기에 잘 맞습니다.
디자이너는 단일 세트의 표준 구성 요소를 사용하는 대신 React, Angular 및 기타 모든 프레임워크를 기반으로 자체 버전의 디자인 시스템 구성요소를 빌드하는 여러 팀과 싸워야 하는 경우가 많습니다.
웹 컴포넌트가 바로 해답입니다. 한 번의 작성으로 어디서나 실행되는 컴포넌트 시스템으로 앱 팀이 원하는 프레임워크를 자유롭게 사용할 수 있습니다.
ING, EA, Google과 같은 회사는 자사의 디자인 언어를 웹 구성요소에 구현하고 있습니다.
기업: Salesforce의 웹 구성요소
또한 웹 구성 요소는 표준화를 위한 안전하고 미래 경쟁력이 있는 기술로 기업 내부에서 획기적인 발전을 이루고 있습니다. Salesforce UI 플랫폼의 설계자인 카리디 파티노가 웹 구성요소를 사용해 UI 플랫폼을 빌드한 이유를 설명했습니다.
Salesforce는 애플리케이션 모음이며 대부분은 인수에서 비롯된 애플리케이션입니다. 각각 자체 기술 스택에서 실행할 수 있습니다. 서로 다른 스택에 빌드되기 때문에 모두 같은 디자인과 분위기를 주기는 어렵습니다. 또한 고객은 Salesforce 플랫폼을 사용하여 자체적인 맞춤 애플리케이션을 구축할 수 있습니다. 외부 개발자도 구성요소를 사용할 수 있는 것이 이상적입니다.
Salesforce는 플랫폼에 대한 고객의 요구사항을 다음과 같이 파악했습니다.
- 독점 솔루션이 아닌 표준
- 일반적인 구성요소 모델이므로 Salesforce 애플리케이션을 맞춤설정하는 것도 동일한 방식으로 이루어집니다.
또한 고객이 원하지 않는 사항도 확인했습니다.
- 구성요소 및 앱의 브레이킹 체인지 즉, 이전 버전과의 호환성이 반드시 필요했습니다.
- 오래된 기술에 갇혀 진화할 수 없음
- 담으로 둘러싸인 정원 안에 갇힘
웹 구성요소를 새로운 UI 플랫폼의 기반으로 사용하는 것이 이러한 모든 요구사항을 충족하며 그 결과 새로운 Lightning Web Components가 탄생했습니다.
웹 구성요소 시작하기
웹 구성요소를 시작하는 좋은 방법은 여러 가지가 있습니다.
웹 앱을 빌드하는 경우 사용 가능한 많은 기성 웹 구성 요소를 사용하는 것이 좋습니다. 이 중 몇 가지 사례를 아래에 정리해 보았습니다.
- Google은 자체 Material Design 시스템인 Material Web Components를 웹 구성요소로 제공합니다.
- 유선 요소는 손으로 그린 개략적인 느낌의 웹 구성요소 모음입니다.
<model-viewer>와 같이 특별한 용도의 웹 구성요소가 있으며, 어느 앱에나 드롭하여 3D 콘텐츠를 추가할 수 있습니다.
회사를 위한 디자인 시스템을 개발 중이거나 모든 환경에서 사용할 수 있는 단일 구성요소 또는 라이브러리를 제공하는 경우 웹 구성요소를 사용하여 구성요소를 작성해 보세요. 내장된 웹 구성 요소 API를 사용할 수 있지만 매우 낮은 수준이기 때문에 이 프로세스를 더 쉽게 만드는 데 사용할 수 있는 라이브러리가 많습니다.
자체 구성요소를 빌드하려면 Google에서 개발한 웹 구성요소 기반 클래스인 LitElement를 확인해 보세요. 이 클래스는 React와 유사한 뛰어난 기능 렌더링 환경을 갖추고 있습니다.
고려할 만한 기타 도구 및 라이브러리:
- 스텐실은 웹 구성요소 우선 프레임워크입니다. JSX, TypeScript와 같이 널리 사용되는 여러 프레임워크 기능이 포함되어 있습니다.
- Angular Elements는 Angular 구성요소를 웹 구성요소로 래핑하는 방법을 제공합니다.
- Vue.js 웹 구성요소 래퍼는 Vue 구성요소를 웹 구성요소로 패키징하는 방법을 제공합니다.
추가 리소스:
- open-wc.org에는 시작하는 데 유용한 유용한 정보와 더불어 빌드 및 개발 도구에 대한 팁과 기본 구성이 포함되어 있습니다.
- 웹 기초에서는 기본 웹 구성요소 API에 대한 입문서와 웹 구성요소 설계를 위한 권장사항을 제공합니다.
- MDN은 웹 구성요소 API의 참조 문서와 일부 튜토리얼을 제공합니다. \
제이슨 튜인스트라가 제작한 Unsplash의 히어로 이미지
편집자 주: chromestatus.com에 보고된 전체 월별 사용 데이터를 표시하도록 맞춤 요소 사용량 차트가 업데이트되었습니다. 이 게시물의 이전 버전에는 최근 몇 달을 제외한 6개월 단위의 그래프가 포함되어 있었습니다. 원본 차트의 V0 및 V1 계열은 누적되었지만 이제 모호성을 없애기 위해 전체 선과 함께 누적됩니다. 2017년 말에 급격한 증가는 chromestatus.com의 데이터 수집 시스템이 변경됨에 따른 것입니다. 이러한 변화로 인해 모든 웹 플랫폼 기능의 통계가 영향을 받았으며, 그 결과 앞으로 더 정확하게 측정할 수 있게 되었습니다.