Dev7 일기: 왜 내가 직접 design system을 만들기로 했는가?
Source: Dev.to
왜 내 자체 디자인 시스템을 만들기로 했는가?
이 글은 아마도 올해 마지막 포스팅이 될 것입니다. 프로젝트 회고 대신 새로운 무언가를 소개하고 싶습니다!
출발점
친구 개발자에게 목업을 보여주던 중, 그는 Figma에 컴포넌트와 변형이 가득한 페이지를 보며 이렇게 말했습니다:
“와, 디자인 시스템을 만들고 있네.”
그 말이 머릿속에 남았습니다. 저는 이미 자체 디자인 시스템을 만든 회사에서 일한 경험이 있었지만, 그 시스템을 유지·관리하는 팀에 직접 참여한 적은 없었습니다; 저는 단지 컴포넌트를 사용하고 가이드라인을 따랐을 뿐이죠.
컴포넌트를 처음부터 만들기로 한 결정
몇몇 선택은 제 개인적인 성장 목표에 의해 이루어졌습니다. 그래서 프로젝트를 더 오래 걸리더라도 처음부터 컴포넌트를 직접 만들기로 했습니다. 생각보다 시간이 많이 걸릴 줄은 몰랐지만, 그 경험은 매우 가치 있었습니다.
디자인 시스템 vs. UI 라이브러리
디자인 시스템에 대해 조사하면서 UI 컴포넌트 라이브러리와의 차이를 알게 되었습니다:
| 구분 | UI 라이브러리 | 디자인 시스템 |
|---|---|---|
| 범위 | 재사용 가능한 컴포넌트 집합(버튼, 카드, 모달, 폼 등) | 라이브러리 + 일관성 가이드, 디자인 토큰(색상, 간격) + 방대한 문서 |
| 목표 | 인터페이스 구축을 용이하게 함 | 제품 전체에 걸쳐 시각·코드 일관성을 보장 |
제 프로젝트 맥락에서 MoldeKit은 처음엔 라이브러리로 시작하지만, 성장하면서 완전한 디자인 시스템이 될 수 있습니다.
MoldeKit 전략
- 초기 단계 – MoldeKit은 프로젝트 Mangos의 인터페이스를 지원하는 데 필요한 컴포넌트만 포함합니다.
- 확장 – Mangos에서 사용할 컴포넌트를 모두 완성하면, 이를 MoldeKit에 추가합니다.
- 재사용 – 새로운 프로젝트를 시작할 때 이미 준비된 컴포넌트를 활용해 개발 속도를 높입니다.
현재 상황 및 향후 계획
첫 번째 시도라 설레면서도 약간은 긴장됩니다. 목표는 실제 서비스에 적용하는 것이 아니라, 제 역량을 보여주고 개인적인 성장에 도움이 되는 포트폴리오를 만드는 것입니다. 이는 프로젝트 문서에 명시된 바와 같습니다.
유용한 링크
- MoldeKit 저장소: https://github.com/usuario/moldekit
- 프로젝트 Storybook: https://moldekit-storybook.netlify.app
기여를 환영합니다!