작업 04 · 디자인 시스템
일관된 디자인으로 사용자 경험과 생산성을 개선
Flutter와 React에 맞춘 디자인 시스템을 만들었습니다. 구현과 QA 생산성을 높이고 사용자에게 일관된 경험을 제공했습니다.
직접 맡은 일
디자인 시스템 구조 · 컴포넌트 구현 · 미리보기 · 배포
- 디자인 시스템
- Flutter
- Widgetbook
- React
- Storybook
- 컴포넌트tokens · state · interaction
- 실행 화면Widgetbook · Storybook
- 디자인 검수같은 화면에서 확인
- 배포버전이 붙은 패키지
- 병합된 공개 PR
- 48개
- 모노레포 구조
- 4단계
공개 저장소에서 외부 확인 가능
토큰 · 기반 요소 · 컴포넌트 · 미리보기
상황
디자인과 실제 화면의 차이를 배포 직전 발견
디자이너와 개발자가 서로 다른 화면을 보면 상태, 간격, 터치 동작의 차이가 배포 직전까지 남았습니다. 문서와 캡처만으로는 실제 동작을 함께 확인하기 어려웠습니다.
바꾼 것
PR마다 실행 가능한 컴포넌트 미리보기 공유
- Melos 모노레포를 토큰·기반 요소·컴포넌트·미리보기 4단계로 분리
- Flutter는 Widgetbook, React는 Storybook으로 같은 디자인 시스템 확인 환경 제공
- 반응형 상태와 주요 사용 예시 작성, PR마다 미리보기 배포
- 디자인 확인이 끝난 컴포넌트만 배포 절차로 이관
확인한 결과
작성한 공개 PR 48개 전량 병합
Flutter WDS 공개 저장소에서 작성한 PR 48개를 확인할 수 있습니다. Flutter Widgetbook과 React Storybook도 공개 링크로 열려 있습니다.