[UX Engineering] [Design System] 적용 일지 2

tmaxos.ux.sinri·2022년 12월 11일
0
post-thumbnail

코드 컨벤션 제작 후 저희는 공통 컴포넌트를 어떻게 프로젝트에서 구축해 갈지 전략을 세웠습니다.

폴더링 > 모듈화

일단 현 프론트엔드 프로젝트의 src/.../common 의 디렉토리에서 시작하기로 했습니다.
그리고 프론트엔드 개발자가 헷갈리지 않게 src/.../common/osds (os design system)으로 다시 세분화 했습니다.

장기적으로 storybook을 테스팅&커뮤니케이션 도구로 고려하고 있으며,
rollup을 통해 모듈화하는 방법을 공부하고 있습니당.

UI 추상화 전략

저희 팀 GUI 가이드는 이미 디자인시스템을 만들기위한 공통 룰이 잘 정리가 되어있었기 때문에 (Figma의 Component 기능을 적극 활용한 가이드)
추상화하는 과정이 수월했습니다.

예시로 보여드린 Button UI 추상화 Draft
프론트엔드 개발자는 기능이 필요한 props를 추가할 수 있다.

디자인 시스템 명세

notion에서 제공하는 디자인 시스템 템플릿 중 하나를 채택했고 하나씩 정의를 추가해가고 있습니다. !!!!

😵 화이팅 !!

profile
티맥스오에스 UX팀 sinri

0개의 댓글