프론트엔드
Vibrant Design System 과 함께하는 크로스 플랫폼 개발기
두줄요약
웹과 앱이 각자 다르게 만들던 UI를 크로스 플랫폼 디자인 시스템으로 통합한 과정을 소개했습니다. 기존 Box 중심 구조의 한계를 해결하기 위해 역할 분리와 플랫폼별 구현 방식을 도입했습니다.
문제 상황
- 웹과 앱이 서로 다른 코드와 방식으로 UI를 개발하던 구조
- 웹용 class101-ui는 있었지만 네이티브에서 그대로 재사용하기 어려운 한계
- Box 하나로 다양한 플랫폼 요구를 감당하며 분기와 코드 복잡도가 커진 상황
원인 분석
- 디자인 시스템 API를 웹 HTML 요소 기준으로 설계한 점
- React Native의 View, Text, ScrollView 등 웹과 다른 렌더링 모델
- Switch 같은 컴포넌트는 단순 태그 매핑으로 해결되지 않는 구조적 차이
해결 방법
- 기존 Box의 역할을 분리해 Text, ScrollBox, PressableBox, Transition 등으로 세분화
- 각 코어 컴포넌트를 플랫폼별 파일로 구현해 동일 API와 크로스 플랫폼 지원을 결합
- 웹 중심 API 의존을 줄이고 컴포넌트별 책임을 명확히 재정의