디자인 시스템 (Design System)
별칭: design system · 디자인 시스템 · UI 시스템
여러 화면이 같은 기준으로 보이도록 색, 글자, 간격, 컴포넌트 규칙을 묶은 체계.
디자인 시스템은 화면을 매번 새로 꾸미지 않도록 공통 기준을 정리한 체계다. 초보 바이브코딩에서는 거대한 시스템을 만들기보다 색, 폰트, 둥글기, 카드·버튼 규칙 정도만 정해도 화면 품질이 크게 안정된다.
정의
디자인 시스템은 제품의 화면이 일관되게 보이고 동작하도록 색상, 글꼴, 간격, 컴포넌트, 상태, 접근성 규칙을 정리한 체계다. 버튼, 카드, 입력창, 탭, 배지처럼 반복되는 UI 요소를 매번 새로 만들지 않고 같은 기준으로 재사용하게 한다.
왜 중요한가
AI에게 화면을 만들게 하면 첫 결과물은 그럴듯해도, 다음 화면을 추가할 때 색과 여백, 버튼 모양이 매번 달라지는 일이 많다. 디자인 시스템은 "이 서비스는 이렇게 생긴다"는 기준을 먼저 잡아 AI가 새 화면을 만들 때도 같은 규칙을 따르게 만든다.
Semiclass에서의 의미
의식 2 · 디자인의 룬에서는 거대한 전문 디자인 시스템을 만들지 않는다. 생활정보 보드에 필요한 색 1개, 폰트 1개, 둥글기 1개, 카드·버튼 스타일 정도를 정해 "못생기지 않은 화면"을 빠르게 안정화하는 것이 목표다. 이 기준은 이후 데이터, DB, API, 모바일 화면을 추가할 때 계속 재사용된다.
주의할 점
초기 단계에서 디자인 시스템을 과하게 만들면 실제 기능보다 문서 정리에 시간이 더 든다. 초보자 프로젝트에서는 토큰 몇 개와 핵심 컴포넌트 규칙으로 시작하고, 화면이 늘어날 때 점진적으로 확장하는 편이 실용적이다.