Vibrant Design System을 활용한 크로스 플랫폼 UI 개발

기존 Class101-UI의 한계와 네이티브 개발의 어려움

• 클래스101의 기존 class101-ui 라이브러리는 웹(HTML Element) 중심 개발로, 네이티브 앱 개발 시 UI 스타일을 직접 구현해야 했습니다.
• 이로 인해 네이티브 앱 개발 코드는 웹에 비해 3배에서 5배 더 많아지는 비효율이 발생했습니다.
• 웹 중심의 HTML Element 사용은 React Native의 View 컴포넌트와 호환되지 않아, 네이티브 환경에서 재사용이 불가능했습니다.
• 이러한 문제 해결을 위해 네이티브 디자인 시스템의 필요성이 대두되었고, One Product System (OPS) 개발로 이어졌습니다.

One Product System의 Box 컴포넌트 기반 크로스 플랫폼 시도

• 초기 OPS는 Web과 Native 컴포넌트를 분리하여 구현하고, Box 컴포넌트를 도입해 스타일 통합을 시도했습니다.
• Box.tsx와 Box.native.tsx를 통해 플랫폼별로 다른 구현을 자동 로드하여 ContainedButton과 같은 컴포넌트의 크로스 플랫폼 지원을 가능하게 했습니다.
• as prop을 활용하여 **HTML5 태그(p, img, button)**를 동적으로 변경할 수 있도록 했으나, 이는 Web First API 설계의 한계를 드러냈습니다.
• 스크롤 기능(overflow: scroll vs ScrollView) 및 Switch 컴포넌트와 같이 플랫폼별 구현 방식이 상이한 경우, Box 컴포넌트 내 복잡한 if문 분기가 발생하여 유지보수성을 저해했습니다.

Vibrant Core를 통한 컴포넌트 역할 분리 및 개선

• Vibrant Design System에서는 기존 Box 컴포넌트의 역할을 Text, ScrollBox, PressableBox, Transition 등 전문화된 코어 컴포넌트로 분리했습니다.
• 각 코어 컴포넌트는 자신의 역할에 충실하며, ScrollBox.tsx와 ScrollBox.native.tsx처럼 플랫폼별 구현 로직을 직접 담당하여 단일 컴포넌트 내의 복잡한 분기를 제거했습니다.
• 이 아키텍처 개선을 통해 더 깔끔하고 유지보수가 용이한 크로스 플랫폼 UI 컴포넌트 개발이 가능해졌습니다.