웹 컴포넌트 (Web Component)

회사에서 여러 서비스를 만들면서 UI 단위(HTML, CSS, JavaScript) 의 코드 재사용성 에 대해 한창 고민했던 적이 있다.
리펙토링을 반복하며 모듈간 연관성을 제거하는 방식으로 개선해봤지만, 기존의 개발방식에서 크게 벗어나지 않으면서 전체적인 구조에서 모듈간 상호 의존성없이 완전히 재사용 가능하게 만드는 것은 사실상 불가능했다.

프레임워크 컴포넌트

그래서 React, Angular2 등의 프레임워크의 컴포넌트 개념만이 이 문제를 해결할 수 있을 것이라는 생각을 했었다. React는 사실 프레임워크는 아니지만..

그러나 프레임워크의 사용은

• 학습이 필요하기 때문에 진입장벽이 높게 느껴질 수 있고

• 작은 서비스의 경우 오히려 프레임워크 사용으로 전체적으로 무거워질 수 있으며,

• 그 생태계 안에서는 훌륭할 수 있으나 서로 다른 프레임워크 간 결합이 어렵다.

  • 이것을 상호운용성(Interoperability)이라고 표현한다.
  • Angular 컴포넌트 안에서 React를 쉽게 사용할 수 없다.
  • 그 반대의 경우도 그렇다.

• 마지막으로 회사에 속해 있던 나로서는 가장 중요한 부분이었는데 기존 개발 방식을 유지하면서 새로운 기술을 도입하는 것이 매우 큰 일이 될 수 있다.

위와 같은 프레임워크 컴포넌트를 사용할 때 유의할 점들 때문에 웹 컴포넌트 에 대한 관심이 생겨 이 포스트를 작성하게 되었다.

웹 컴포넌트 (Web Component)

Web Component 는 캡슐화, 웹에 대한 사용자 인터페이스 단위의 재사용에 대해 표준화된 결과물이다.

웹 컴포넌트 는 JavaScript, CSS, HTML들을 컴포넌트화 하기 위해 필요한 4개의 표준 을 묶어서 부르는 이름인데, 웹 표준 이외에는 어떤 것도 관여하지 않기 때문에 어떤 생태계에서든지 동작하며, 따라서 다음과 같은 장점이 있다.

• 상호운용성 (Interoperability) : 프레임워크를 넘어서서 다른 기술 스택의 프로젝트에서도 동작한다.
• 수명 (Lifespan) : 상호운용가능하기 때문에 더 긴 수명을 갖게 되고, 새 기술에 맞춰 재작성해야할 필요가 줄어든다.
• 가용성 (Portability) : 특정 라이브러리나 프레임워크에 의존하지 않는다면, 컴포넌트가 의존성 없이 어디에도 동작하기 때문에 도입에 대한 장벽이 상당히 낮아진다.

4개의 표준은 다음과 같다.

1. Custom Elements : 새로운 HTML 요소의 이름과 동작을 정의할 수 있도록 해주는 JavaScript API의 집합.
2. Shadow DOM : 완전히 캡슐화된 sub-DOM 트리를 제공하며 외부 스타일에 영향을 받지 않는다.
3. HTML templates : <template> 과 <slot> 엘리먼트를 사용하여 재사용 가능한 HTML 마크업 템플릿을 작성할 수 있다.
4. HTML Imports : HTML 템플릿이 새로운 템플릿을 만들게 해준다면, HTML imports는 다른 HTML 파일에서 템플릿을 가져오게 해준다. 이 표준은 웹 컴포넌트 개발에서 제외될 것으로 보인다. mozilla에서 효용에 대한 이견이 있음. ~

위 네 가지 표준에 대한 자세한 내용은 설명이 길어질 것 같아 좀 더 필요성을 느낄 때 개별 포스팅으로 정리할 예정이다.

사실 웹 컴포넌트는 새로 등장한 개념은 아니다.
심지어 옛날 버전이긴 하지만 2012년의 네이버 기술 블로그 포스트도 있다.(https://d2.naver.com/helloworld/188655)

왜 이제 알았을까?

최근 몇 년간 프론트엔드 프레임워크에 대한 관심은 매우 높아지고 일반화된 반면, 웹 컴포넌트에 대한 개념은 약간 생소하게 느껴진다. 심지어 매우 오래전에 나온 표준인데도 말이다.

• 웹 컴포넌트의 4가지 표준마다 지원하는 수준이 다르기는 하지만 아직까지는 크로스 브라우징 문제 가 있다.

  • 기본적으로 Chrome과 Opera, Firefox (version 63)에서 지원된다.
  • Safari는 여러 기능을 지원하지만 위의 브라우저보다 지원범위가 작다.
  • Edge는 구현 작업중이다.

• Polyfill 이 지원되기는 하지만 성능 문제 가 있다고 한다.

즉, 엄격하게 크로스브라우징을 해야하는 경우나 구 브라우저 지원이 필요한 프로젝트에는 아직까지 사용하기에 부족한 부분들이 보인다.

아마 그래서 지금까지 주목을 받지 못한 것이 아닐까?

글을 적으면서 느낀건데, 표준이 계속 바뀌고 있고 최신 버전에 대한 한글화된 자료가 많이 없어서 이 포스팅에서 정리하는 것 만으로도 꽤나오래걸렸다. (+ 자료마다 내용이 조금씩 달라서 어느 것이 최신 자료인지 구분하기 어려웠다)

그래도 웹 컴포넌트의 표준들은 개별적으로 사용이 가능하기 때문에 명세와 브라우저 호환성을 확인해보고 필요에 따라 사용해도 좋을 것 같다. 또한 대표적으로 Polymer 를 포함한 다양한 웹 컴포넌트 라이브러리가 있기 때문에 비교적 손쉽게 사용해볼 수 있다.

Reference

• 웹컴포넌트
• 왜 Web Component가 중요한가
• 웹 컴포넌트(1) — KEEP CALM AND #USETHEPLATFORM
• 웹 컴포넌트 | MDN