오리진의 개발노트

React 프로젝트를 시작할 때마다 반복되는 고민이 있습니다. 버튼 하나, 모달 하나 만드는 데 시간을 쏟을 건지, 아니면 잘 만들어진 디자인 시스템을 가져다 쓸 건지. 결론부터 말하면, 디자인 시스템 쓰는 게 맞습니다.직접 여러 프로젝트에서 써본 경험을 토대로, 실무에서 진짜 쓸 만한 무료 디자인 시스템 7개를 정리했습니다. 각각의 특징과 장단점, 그리고 어떤 상황에서 쓰면 좋은지까지 구체적으로 다룹니다.디자인 시스템이 왜 필요할까?혼자 개발할 때는 CSS 직접 쓰는 게 빠를 수도 있습니다. 하지만 프로젝트 규모가 커지거나, 팀원이 늘거나, 유지보수 기간이 길어지면 이야기가 달라집니다.디자인 시스템을 도입하면 달라지는 것들:UI 일관성이 자동으로 유지됩니다. 컴포넌트마다 다른 스타일이 생기는 문제가 사..

웹 프로젝트를 시작할 때마다 UI를 처음부터 만드느라 시간을 허비하고 계신가요? 디자인 시스템을 활용하면 버튼, 입력 필드, 카드 같은 기본 컴포넌트를 직접 만들 필요 없이 바로 가져다 쓸 수 있습니다. 오늘은 2026년 기준 가장 많이 사용되는 무료 디자인 시스템 5가지를 직접 써본 경험을 바탕으로 비교해 드리겠습니다.디자인 시스템이란?디자인 시스템은 UI 컴포넌트, 디자인 토큰(색상/타이포/간격), 사용 가이드라인을 하나의 패키지로 묶은 것입니다. 개발팀 전체가 같은 규칙으로 일관된 UI를 만들 수 있어서 협업 효율이 크게 올라갑니다.디자인 시스템을 쓰면 좋은 이유:반복적인 UI 작업 시간을 50% 이상 절약디자이너-개발자 간 커뮤니케이션 비용 감소일관된 사용자 경험 제공접근성(a11y) 기본 내장으..