멀티 프레임워크 디자인 시스템, 지속 가능한 운영을 위한 선택

본문에서는 레거시 Vue 프로젝트와 신규 React/Next.js 프로젝트를 동시에 운영하면서, YDS(Yeogiforge Design System) 업데이트의 프로젝트별 반복 반영에 따른 운영 비용 증가 문제를 해결하고자 했다. 초기에는 core + adapter(react/vue) 구조를 통해 중복 구현을 줄이려 했지만, 실제 운영 과정에서 컴포넌트 레이어의 이중 구현과 동기화 비용이 문제로 대두되었다. 핵심 의도는 “규칙은 한 곳에서 관리하고, 프레임워크별 연결만 분리”하는 것이었지만, 지속적인 변경 사항 동기화에 많은 리소스가 소모되었다.

운영 데이터를 기반으로 지원 범위를 재정의하여, 컴포넌트 레이어는 React를 단일 운영 축으로 집중하고, Vue는 토큰/스타일/유틸리티 같은 디자인 파운데이션 소비에 집중하도록 전환했다. 이 결정은 “두 프레임워크를 모두 동일 수준으로 유지”하는 목표보다, “지속 가능한 속도로 품질을 유지”하는 목표를 우선한 결과였다. Vue에서 컴포넌트 레벨의 즉시 확장성은 일부 포기했지만, 파운데이션 정합성을 유지해 시각/토큰 레벨의 일관성은 계속 보장했다. 즉, 지속 가능한 품질과 속도를 위해 지원 범위를 조정했다.

저자는 컴포넌트 공통화 범위를 줄이는 대신, 파운데이션 레이어의 재사용성과 사용성을 높이는 데 집중했다. Typography는 CSS 변수(CSS Variables)로 노출하여 프로젝트별 오버라이드가 가능하도록 했고, Color Palette + Semantic Color 분리를 통해 브랜드 변경과 UI 의미 변경을 독립적으로 다룰 수 있게 했다. 또한, SVG Icon의 fill을 `currentColor`로 정규화하여 React/Vue 어디서든 동일한 방식으로 색상을 제어하도록 했으며, Shadow 값을 토큰화하여 컴포넌트와 화면 레벨 모두에서 같은 시각 기준을 재사용하도록 했다. 핵심은 “모든 것을 강제 공통화”가 아니라 “필요한 파운데이션만 가져다 쓸 수 있는 유연성”을 확보하는 것이었다.

본 경험을 통해 멀티 프레임워크 디자인 시스템의 핵심은 기술 선택 자체보다, 지원 범위를 어떻게 설계하고 운영할지에 있다는 점을 강조한다. 처음에는 React/Vue를 동일 수준으로 지원하려 했지만, 실제 운영에서는 구현·검증·배포 비용이 빠르게 증가했다. 따라서, 아키텍처의 이상형보다 팀의 역량과 지속 가능한 운영 가능성을 고려하여 지원 범위를 정의하는 것이 중요하다고 말한다. 디자인 시스템은 한 번의 구축으로 완성되는 것이 아니라, 운영 가능한 범위를 지속적으로 조정해 나가는 제품이라는 점을 강조한다.