Tidewater Design System
사내 도구 6개를 하나의 컴포넌트 라이브러리로 통합했습니다. 버튼 스타일 14개를 1개로 줄이고 React와 Figma에 함께 배포했습니다.
- 클라이언트
- Harbor & Line Logistics
- 역할
- 리드 디자이너, 디자인 시스템 엔지니어링
- 연도
- 2026
- 스택
- React, TypeScript, Storybook, Figma Variables
6
이전한 제품
−41%
UI 코드량
AA
모든 토큰 대비 기준
(01) 문제
팀마다 같은 테이블, 모달, 날짜 선택기를 따로 만들고 있었습니다. 작은 차이가 쌓여 문의가 늘고 신규 입사자 적응이 느려졌습니다.
(02) 한 일
화면 1,200개를 점검하고 Figma와 코드가 함께 쓰는 토큰 체계를 정의했습니다. 각 팀과 짝을 이뤄 가장 많이 쓰는 화면부터 옮겼습니다.
(03) 결과
새 화면은 몇 주가 아니라 며칠 만에 나가고, 기본값이 올바르게 잡혀 있어 접근성 이슈가 거의 사라졌습니다.