HomeFeedAbout

틈틈히 만드는 디자인 시스템

김성현 1개월 전
storybook디자인 시스템프론트엔드

입사한 지 벌써(이제야,,) 한달이 됐습니다.
팀원들과 함께 사용할 UI 라이브러리를 npm에 배포해서 사용하고 있어요.

이제 막 개발팀이 인하우스되는 시점이라
백오피스의 UI가 대부분 재사용이 어려운 페이지 단위로 만들어져 있었어요.

더 이상 UI 만드는 데 시간을 쓰지 말자는 생각으로 만들기 시작했고, 팀원들이 쉽게 사용할 수 있도록 Storybook으로 문서화했습니다.

같이 사용할 라이브러리를 만들어 본 건 처음이라 생각보다 어려웠습니다.
처음에는 Searchbar같이 Select를 여러 개 담을 수 있는 컴포넌트를 만들어서 onSearch prop을 제공하고 선택한 값들에 대한 정보도 알수 있도록 useSearch 같은 훅을 제공하면 어떨까? 이런 생각도 해봤는데요,

결론적으로 UI 라이브러리는 딱 UI에 관련된 상태만 관리하는 게 맞다는 생각이 들었어요. 이때부터는 자주 쓰이는 Button, Select, DatePicker, Pagination 같은 더 작은 단위의 컴포넌트들을 라이브러리화 했고 벌써 7개 정도 되었네요,,ㅋㅋ

인하우스 시점이라 라이브러리 뿐만 아니라 스크럼, 코드리뷰 문화, 폴더 구조, Biome 도입 등 팀원들과 새로운 것들을 많이 적용해볼 수 있어서 오히려 좋은 것 같습니다.

+어제 벼락치기로 SQLD 시험을 봤는데 생각보다 재밌어서 앞으로 SQL을 좀 더 공부해보려고 합니다,,