HTML·CSS를 먼저 그리는 웹 컴포넌트, Elena가 말하는 '점진적' 설계

프론트엔드에서 재사용 가능한 UI를 만드는 방식은 지난 몇 년간 프레임워크 중심으로 굳어졌다. 그런데 최근 공개된 Elena는 이 흐름과 결이 다른 접근을 내세운다. 자바스크립트가 모든 것을 책임지도록 강제하지 않고, HTML과 CSS를 먼저 불러온 뒤 자바스크립트로 상호작용을 점진적으로 얹는다는 것이다. 이 라이브러리는 스스로를 'Progressive Web Components(점진적 웹 컴포넌트)'를 위한 도구라고 소개한다.

Elena는 @arielle이 약 10년간 엔터프라이즈 규모의 디자인 시스템을 웹 컴포넌트로 구축하며 반복적으로 마주친 문제들을 배경으로 만들어졌다. 접근성 문제, 서버 사이드 렌더링(SSR)의 한계, 레이아웃 시프트, 콘텐츠가 보이지 않는 순간(flash of invisible content), React Server Components, 지나친 클라이언트 자바스크립트 의존, 그리고 서드파티 분석 도구와의 호환성 같은 것들이다. 이런 통증점을 웹 표준과 플랫폼이 기본으로 제공하는 기능에 뿌리를 둔 채 풀어보려는 시도가 이 라이브러리의 출발점이다.

무엇을 다르게 하는가

핵심 아이디어는 렌더링 순서에 있다. Elena는 HTML과 CSS를 먼저 그리고, 그다음 자바스크립트로 하이드레이션한다. 시맨틱 HTML을 토대로 삼되 Shadow DOM이라는 장벽을 두지 않으며, 네이티브 커스텀 엘리먼트와 웹 표준 위에 전적으로 구성된다. prop과 state가 바뀌면 효율적인 배치 방식으로 다시 렌더링하고, 복잡한 우회 없이 CSS 캡슐화를 제공한다는 점도 강조된다. 런타임 의존성이 없고 압축 기준 2.9kB에 불과하다는 점은 '작고 단순하다'는 설계 지향을 그대로 보여준다.

실무적으로 눈여겨볼 지점은 프레임워크 간 호환성이다. Elena는 React, Next.js, Vue, Angular 등 주요 프레임워크에서 함께 쓰거나 아예 프레임워크 없이도 동작하도록 만들어졌다. prop과 속성(attribute) 동기화, 이벤트 위임, 프레임워크 호환성 같은 이른바 '배관 작업'을 라이브러리가 대신 처리해 준다는 것이 판매 포인트다. 여러 프레임워크를 동시에 지원해야 하는 컴포넌트 라이브러리나 디자인 시스템 팀이 주된 대상 사용자로 명시돼 있다는 점에서, 개별 앱 개발자보다는 공용 UI 자산을 관리하는 조직을 겨냥한 도구임을 알 수 있다.

세 가지 컴포넌트 모델

Elena는 여러 컴포넌트 모델을 지원한다. 내부에 구성된 HTML을 감싸고 향상시키는 Composite Component, 스스로 자신의 HTML을 렌더링하는 독립형 Primitive Component, 그리고 이 둘의 하이브리드로서 Declarative Shadow DOM을 활용하는 Declarative Component가 그것이다. 서로 다른 렌더링 요구를 하나의 문법 안에서 선택할 수 있게 한 구성으로, HTML을 이미 갖고 있는 콘텐츠를 점진적으로 강화하는 경우와 컴포넌트가 마크업 전체를 책임지는 경우를 모두 포괄하려는 의도로 읽힌다.

브라우저 지원은 '커스텀 엘리먼트를 렌더링할 수 있는 브라우저'를 기준선으로 삼는다. 그 위에서 어떤 CSS 스타일과 자바스크립트 상호작용을 얼마나 얹을지는 프로젝트가 판단할 몫으로 남겨 둔다. 라이브러리 자체는 주요 브라우저의 최신 두 개 버전에서 테스트된다고 밝힌다. 즉 점진적 향상(progressive enhancement)이라는 오래된 웹 원칙을 컴포넌트 단위로 다시 적용한 셈이며, 자바스크립트가 늦게 로드되거나 실패해도 기본 마크업은 화면에 남는다는 안정성이 이 접근의 실질적 이점이다.

다만 판단에는 유보가 필요하다. 공개된 정보는 라이브러리의 지향과 특성 목록에 집중돼 있을 뿐, 실제 프로덕션에서의 성능 수치나 대규모 도입 사례, 커뮤니티 규모 같은 검증 자료는 아직 드러나지 않았다. Shadow DOM을 쓰지 않는 캡슐화가 스타일 격리 측면에서 어떤 한계를 갖는지, 세 가지 컴포넌트 모델의 학습 비용이 얼마나 되는지도 도입 전 직접 확인해야 할 부분이다. 그럼에도 '자바스크립트 우선'에서 '표준 우선'으로 무게중심을 되돌린다는 문제의식 자체는, SSR과 하이드레이션 비용에 지친 팀이라면 한 번쯤 검토해 볼 만한 방향이다.