UI 라이브러리 개발 [기술 블로그]

문제 상황

• 디자인 시스템 부재로 인한 프로덕트별 세부 스타일 불일치와 중복 컴포넌트
• 상태별 디자인 질의 반복에 따른 디자이너·개발자 커뮤니케이션 비용 증가

구조와 흐름

• React·TypeScript 기반 UI 라이브러리와 Storybook 중심의 시각적 문서화
• Rollup 기반 번들링, Emotion 기반 CSS-in-JS, ESM·CJS 동시 빌드
• 단위 테스트·인터랙션 테스트·E2E 테스트와 호스트 프로젝트 적용 검증의 반복

해결 방법

• 디자이너와 초기 의도를 동기화하고 애자일 방식으로 컴포넌트 구현·적용·개선
• styled export로 styled-components 환경의 스타일 오버라이드 지원
• React.InputHTMLAttributes 확장으로 네이티브 input 속성 지원 범위 확대

성능/운영 포인트

• tree shaking을 고려한 Rollup 선택과 ESM·CJS 병행 배포
• Bitbucket Pipeline 기반 Storybook 배포·Slack 알림·Playwright E2E 자동화
• aria 속성 및 Storybook a11y 애드온을 통한 접근성 검증