멀티 프레임워크 디자인 시스템, 결국 운영 가능한 구조를 선택한 이유

핵심 내용

• React와 Vue를 함께 지원하는 디자인 시스템에서 초기의 core + adapter 구조와 운영 전환 과정 정리
• 모든 프레임워크를 동일 수준으로 지원하는 방식보다 운영 가능한 범위를 선택하는 전략으로 변경
• React는 컴포넌트 운영축, Vue는 토큰·스타일·유틸리티 중심의 파운데이션 소비로 재정의

구조와 흐름

• core에 디자인 토큰, 스타일 유틸리티, headless 로직을 단일 출처로 집중
• React/Vue adapter는 렌더링, 이벤트, 컴포넌트 표면만 담당
• 상태와 의미 체계는 core에서 통일하고 프레임워크별 연결만 분리

문제 상황

• 새 컴포넌트 추가나 수정 때 React/Vue 양쪽 구현과 스토리, 검증 포인트가 모두 증가
• 공통 로직이 있어도 렌더링과 엣지 케이스 대응은 각 adapter에서 별도 처리 필요
• 변경 1건마다 동기화 비용이 커져 릴리즈 리드타임이 길어짐

해결 방법

• 지원 범위를 재정의해 컴포넌트 레이어는 React에 집중
• Vue는 디자인 파운데이션 소비에 집중하도록 전환
• 공통화 범위를 줄이는 대신 파운데이션 재사용성과 유연성 강화