고객사별 웹·앱 개발에서 반복되는 UI 구현을 줄이기 위해 React·React Native 공용 디자인 시스템을 설계하고 npm 패키지 2종으로 배포했습니다.
브랜드 색상→의미별 디자인 토큰→공용 UI 컴포넌트→웹 · 모바일 패키지
해결 과제
고객사마다 브랜드와 화면은 달라도 반복되는 UI가 많아, 컴포넌트 재사용과 브랜드별 테마 변경을 함께 지원해야 했습니다.
담당 업무 · 구현
- Button, TextField, Dropdown, Checkbox, DatePicker, Typography 등 공용 UI 컴포넌트 18종을 개발했습니다.
- Tailwind 커스텀 플러그인으로 Base → Semantic → Component 토큰 구조를 구성하고 브랜드 색상 변경 시 하위 토큰이 파생되도록 설계했습니다.
- Compound Component와 팩토리 함수로 컴포넌트 사용 규칙을 정리하고, Context·Provider·Hook으로 Popup과 BottomSheet 제어 로직을 공통화했습니다.
- Storybook으로 컴포넌트 사양을 문서화하고 tsup 기반 CJS·ESM·타입 선언 빌드, SVGR 아이콘 생성 파이프라인을 구성했습니다.
결과
- 웹·모바일 npm 패키지 2종으로 공용 UI 18종과 브랜드별 테마를 제공했습니다.
- 디자인 시스템과 AI 도구를 함께 적용한 페이지 퍼블리싱 시간을 3일에서 0.5일로 약 83% 줄였습니다.
ReactReact NativeTypeScriptStorybookExpo