웹 프론트엔드 UI의 저수준(Low-level)을 Web Component로 구성하고 고수준(High-level)은 특정 Framework를 의존할 때, 둘 사이의 상호운용성을 만드는 간단한 예제를

웹 프론트엔드 UI의 저수준(Low-level)을 Web Component로 구성하고 고수준(High-level)은 특정 Framework를 의존할 때, 둘 사이의 상호운용성을 만드는 간단한 예제를 소개하는 글입니다. 디자인 시스템은 UI 계층에서 Leaf Node의 역할을 합니다. 본문에서는 Leaf Component라고 표현했는데요, 표현 컴포넌트(Presentatinal Component) 같은 역할이라고 이해하면 쉽습니다. Leaf Node는 UI 시스템의 저수준을 지탱하기 때문에 재사용 가능성이 매우 높아야 합니다. Leaf Node가 특정 시스템을 의존하면, 이 의존성은 애플리케이션 전체로 퍼져버립니다. 당연히 Leaf Node가 존재하는 계층이 특정 프레임워크를 의존하지 않는다면 더 다양한 클라이언트 환경을 지원할 수 있겠죠? 저희도 디자인 시스템을 준비하면서 이 문제를 고민하고 있습니다. 지금은 디자인 시스템을 테스트 하는 단계라서 이 문제를 당장 풀어야 하는 건 아니지만, 언젠가는 해결해야 합니다. 이 시기가 빨리 올 수도 있고요. 그래서인지 아직 생태계가 충분하지는 않지만, 그래도 웹 표준인 Web Component에 눈길이 자꾸 가네요. 비슷한 고민을 한 Adobe가 Lit(구글이 만든 Web Component 라이브러리)로 디자인 시스템을 만들었다는 소문이 들리는데요, 이 바닥에 괜찮은 레퍼런스가 나오기를 기다려 봅니다.