웹 컴포넌트는 오랫동안 이상과 현실의 간극이 큰 기술이었다. 프레임워크에 종속되지 않고 브라우저 표준 위에서 동작하는 재사용 컴포넌트라는 개념은 매력적이지만, 실제 도입 과정에서는 레이아웃 이동(layout shift), 스타일이 적용되지 않은 화면이 잠깐 노출되는 FOUC, 부실한 서버 사이드 렌더링(SSR) 지원, 접근성 문제 같은 고질적 통증이 반복돼 왔다. 디자인 시스템 아키텍트 아리엘 살미넨(Ariel Salminen)이 새로 공개한 오픈소스 라이브러리 Elena는 바로 이 지점을 다시 짚는다. 그는 근 10년간 웹 컴포넌트로 엔터프라이즈급 디자인 시스템을 만들어 왔고, 문제의 근원이 웹 컴포넌트 모델 자체가 아니라 '우리가 그것을 만들어 온 방식'에 있다고 진단한다.
두 개의 레이어로 나눈 컴포넌트
Elena가 내세우는 개념은 '점진적 웹 컴포넌트(Progressive Web Component)'다. 핵심은 컴포넌트를 두 개의 층으로 설계한다는 데 있다. 하나는 자바스크립트 없이 즉시 렌더링되는 HTML과 CSS의 기반 레이어이고, 다른 하나는 반응성과 이벤트 처리, 더 정교한 템플릿을 나중에 얹는 자바스크립트 강화 레이어다. 즉 화면의 기본 형태와 초기 상태는 브라우저가 HTML·CSS만으로 먼저 그리고, 인터랙션은 스크립트가 로드된 뒤 점진적으로 붙는 구조다. 이는 대다수 웹 컴포넌트 라이브러리가 모든 렌더링을 자바스크립트에 의존하게 만드는 방식과 정면으로 다르다.
살미넨은 이 철학 아래 세 가지 유형을 구분한다. 내부에 작성된 HTML을 감싸 강화하는 '컴포지트(Composite)' 컴포넌트는 HTML과 CSS가 모두 Light DOM에 존재하며, 이른바 HTML 웹 컴포넌트라 부를 수 있다. '프리미티브(Primitive)' 컴포넌트는 자체적으로 HTML을 렌더링하되 초기 상태에 필요한 기본 HTML과 CSS를 역시 Light DOM에 둔다. '선언형(Declarative)' 컴포넌트는 이 둘의 혼합으로, 선언적 섀도 DOM(Declarative Shadow DOM)을 활용한다. 다만 그는 이 분류를 강제하지 않는다고 못 박는다. 결국 모두 표준 웹 컴포넌트일 뿐이며, 분류는 어떤 방식이 자기 상황에 맞는지 판단할 때 도움을 주는 참고 틀에 가깝다.
크기는 2.6kB, 표준 위에서만 동작
Elena 자체는 압축 기준 2.6kB에 불과한 작은 라이브러리다. 런타임 의존성이 없고 네이티브 커스텀 엘리먼트와 웹 표준 위에서만 돌아간다. 그러면서도 표준 커스텀 엘리먼트의 전체 수명주기, open·closed 섀도 DOM, template과 slot, 선언적 섀도 DOM까지 기본 지원한다. 즉 점진적 방식이 마음에 들지 않는다면 평범한 웹 컴포넌트를 만드는 데 써도 된다. 프로퍼티와 상태 변경은 배치 처리된 효율적 재렌더링을 유발하며, 프레임워크 간 호환을 위한 프로퍼티·속성 동기화와 이벤트 위임 같은 번거로운 배관 작업을 라이브러리가 대신 처리한다고 설명한다.
서버 사이드 렌더링에 대한 접근도 눈여겨볼 만하다. 점진적 웹 컴포넌트는 본질적으로 HTML과 CSS이기 때문에 서버에 특별한 렌더링 로직이 필요 없다는 것이다. render() 메서드가 없는 컴포넌트는 기본적으로 완전한 SSR 호환을 갖고, render()를 가진 컴포넌트는 초기 상태를 자바스크립트 없이 서버에서 그린 뒤 클라이언트에서 하이드레이션을 완성하는 '부분 지원'이 된다. 이때 인터랙션에는 자바스크립트가 필요하지만, 별도로 제공되는 @elenajs/ssr 도구를 함께 쓰면 이 한계를 보완할 수 있다. 강한 격리가 필요하면서도 서버 렌더링을 유지하고 싶은 경우를 위해 선언적 섀도 DOM도 지원한다.
실무자가 따져봐야 할 지점
한국 개발 조직 관점에서 이 라이브러리의 의미는 명확하다. 여러 프레임워크를 오가는 대규모 조직이 하나의 디자인 시스템을 유지할 때, 컴포넌트가 특정 프레임워크에 묶이지 않으면서도 스크립트 로드 이전에 화면을 확보한다는 점은 실질적 가치가 있다. 접근성, SSR, 레이아웃 이동 같은 문제를 설계 단계에서 회피하도록 겨냥한 것도 제품팀 입장에서 매력적이다. Elena는 @elenajs 스코프 아래 13개 npm 패키지로 나뉘어 배포된다.
다만 냉정하게 볼 부분도 있다. 현재 공개된 것은 정식 버전이 아니라 일곱 번째 릴리스 후보인 v1.0.0-rc.7로, 프로덕션 채택을 결정하기에는 API 안정성과 생태계 성숙도를 더 지켜볼 필요가 있다. 또한 '점진적 웹 컴포넌트'는 라이브러리 기능이 아니라 설계 철학이라고 저자 스스로 강조한다. 다시 말해 Elena를 도입한다고 해서 자동으로 얻어지는 결과가 아니라, HTML과 CSS를 기반으로 먼저 사고하고 자바스크립트를 나중에 얹는 규율을 팀이 실제로 지켜야 효과가 난다는 뜻이다. React Server Components 같은 최신 서버 컴포넌트 흐름과의 궁합, 그리고 render()를 쓰는 컴포넌트의 부분 SSR 한계를 자기 스택에서 검증하는 일은 결국 도입하는 쪽의 몫으로 남는다.