피드로 돌아가기
올리브영 테크블로그Frontend
원문 읽기
올리브영 테크블로그올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳!
올리브영이 Vite + React + TypeScript + Storybook + Emotion 조합으로 UI 컴포넌트 디자인 시스템을 구축해 재사용 가능한 컴포넌트 라이브러리 구성
AI 요약
Context
올리브영 서비스 운영 중 UI 개발 작업자 간 디자인 패턴 불일치로 인한 통일성 저하 문제가 발생했다. 컴포넌트 옵션 변경 시 모양과 동작을 체계적으로 확인할 수 있는 가이드라인이 부재했다.
Technical Solution
- Vite + React + TypeScript 기반 프로젝트 환경 구성: 모듈 번들러와 정적 타입 언어를 통한 개발 안정성 확보
- Storybook 도입: 컴포넌트를 독립적 환경에서 구조와 형태를 파악할 수 있는 문서화 제공
- Emotion CSS-in-JS 라이브러리 도입: JavaScript 내 CSS 작성으로 동적 스타일링 및 조건부 스타일 적용 가능
- Global 컴포넌트를 preview.tsx에서 관리: CSS 리셋 및 전역 스타일을 Storybook 내 통일되게 적용
- 3파일 구조 컴포넌트 세트 표준화: index.ts(내보내기) + 컴포넌트파일(구현) + stories파일(스토리 정의) 으로 일관성 있는 컴포넌트 구성
- Keyframes 및 미디어쿼리 재사용 패턴: emotion에서 배열 기반 중단점을 활용한 반응형 스타일 관리
- GitHub Packages를 통한 배포 계획: @oy-alldev/ui 패키지명으로 npm 설치 가능하게 패키징
Key Takeaway
UI 컴포넌트 라이브러리 구축 시 Storybook으로 시각적 문서화를 제공하고 Emotion의 동적 스타일링으로 props 기반 조건부 스타일을 구현하면, 디자이너와 개발자 간 디자인 패턴 동기화를 통해 작업 통일성을 확보할 수 있다.
실천 포인트
React 기반 멀티 프로젝트 환경에서 UI 컴포넌트를 재사용해야 할 때, Storybook + Emotion 조합으로 컴포넌트의 모든 상태(checked, disabled 등)를 Control 영역에서 동적으로 제어하며 소스 코드를 즉시 확인할 수 있게 구현하면, 컴포넌트 변경 영향도를 신속하게 파악하고 개발 표준화를 달성할 수 있다.