디자인 시스템에 담기는 것
생성된 디자인 시스템에는 다음이 포함됩니다.- 토큰(Tokens) — 나머지 모든 것이 참조하는 이름 붙은 값(색상, 간격, 반경)
- 색상(Colors) — 역할(primary, surface, accent 등)이 부여된 팔레트
- 타이포그래피(Typography) — 폰트 패밀리, 크기, 굵기
- 예시 컴포넌트(Example components) — 시스템의 사용 예시를 보여주는 몇 가지 빌드된 컴포넌트(버튼, 카드 등)
- 로고와 브랜드 에셋 — 제공한 경우 포함됨
DESIGN.md 파일로도 표현될 수 있습니다. 레퍼런스를 참고하세요.
디자인 시스템의 출처
시스템을 만드는 두 가지 방법이 있습니다.- 처음부터 만들기 — Replit 홈페이지에서 프롬프트로 요청하고, 브랜드에 관한 짧은 질문에 답합니다.
- 기존 디자인에서 추출하기 — 이미 마음에 드는 목업에서 시스템을 추출합니다(프레임의 점 세 개 메뉴 → 추출).
DESIGN.md 같은 소스로부터 시스템을 시작할 수도 있습니다. 자세한 내용은 디자인 시스템 만들기를 참고하세요.
디자인 시스템이 유용한 시점
- 한 번 이상 디자인할 때. 두 번째 디자인부터 일관성이 흐트러지기 시작합니다. 시스템은 N번째 생성물이 첫 번째 생성물처럼 보이도록 유지해줍니다.
- 팀이 함께 디자인할 때. 시스템을 워크스페이스에 저장하면 모두가 같은 브랜드로 생성할 수 있습니다.
- 기존 작업에 적용할 때. 기존 아티팩트를 시스템에 맞춰 재빌드할 수 있습니다. 디자인 시스템 적용하기에서 시간/크레딧 경고가 의미하는 바를 포함해 확인하세요.