Dev7 일기: 왜 내가 직접 design system을 만들기로 했는가?

발행: (2025년 12월 29일 오후 11:16 GMT+9)
4 min read
원문: Dev.to

Source: Dev.to

왜 내 자체 디자인 시스템을 만들기로 했는가?

이 글은 아마도 올해 마지막 포스팅이 될 것입니다. 프로젝트 회고 대신 새로운 무언가를 소개하고 싶습니다!

출발점

친구 개발자에게 목업을 보여주던 중, 그는 Figma에 컴포넌트와 변형이 가득한 페이지를 보며 이렇게 말했습니다:

“와, 디자인 시스템을 만들고 있네.”

그 말이 머릿속에 남았습니다. 저는 이미 자체 디자인 시스템을 만든 회사에서 일한 경험이 있었지만, 그 시스템을 유지·관리하는 팀에 직접 참여한 적은 없었습니다; 저는 단지 컴포넌트를 사용하고 가이드라인을 따랐을 뿐이죠.

컴포넌트를 처음부터 만들기로 한 결정

몇몇 선택은 제 개인적인 성장 목표에 의해 이루어졌습니다. 그래서 프로젝트를 더 오래 걸리더라도 처음부터 컴포넌트를 직접 만들기로 했습니다. 생각보다 시간이 많이 걸릴 줄은 몰랐지만, 그 경험은 매우 가치 있었습니다.

디자인 시스템 vs. UI 라이브러리

디자인 시스템에 대해 조사하면서 UI 컴포넌트 라이브러리와의 차이를 알게 되었습니다:

구분UI 라이브러리디자인 시스템
범위재사용 가능한 컴포넌트 집합(버튼, 카드, 모달, 폼 등)라이브러리 + 일관성 가이드, 디자인 토큰(색상, 간격) + 방대한 문서
목표인터페이스 구축을 용이하게 함제품 전체에 걸쳐 시각·코드 일관성을 보장

제 프로젝트 맥락에서 MoldeKit은 처음엔 라이브러리로 시작하지만, 성장하면서 완전한 디자인 시스템이 될 수 있습니다.

MoldeKit 전략

  1. 초기 단계 – MoldeKit은 프로젝트 Mangos의 인터페이스를 지원하는 데 필요한 컴포넌트만 포함합니다.
  2. 확장 – Mangos에서 사용할 컴포넌트를 모두 완성하면, 이를 MoldeKit에 추가합니다.
  3. 재사용 – 새로운 프로젝트를 시작할 때 이미 준비된 컴포넌트를 활용해 개발 속도를 높입니다.

현재 상황 및 향후 계획

첫 번째 시도라 설레면서도 약간은 긴장됩니다. 목표는 실제 서비스에 적용하는 것이 아니라, 제 역량을 보여주고 개인적인 성장에 도움이 되는 포트폴리오를 만드는 것입니다. 이는 프로젝트 문서에 명시된 바와 같습니다.

유용한 링크

기여를 환영합니다!

Back to Blog

관련 글

더 보기 »

CSS를 활용한 디자인 시스템

간단 요약 인기 있는 프레임워크나 라이브러리의 도움 없이 순수 CSS만으로 웹사이트에 디자인 시스템을 적용하려고 시작했다면—