> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 디자인 시스템 이해하기

> 디자인 시스템은 토큰, 색상, 타이포그래피, 컴포넌트를 담아내어 생성하는 모든 디자인이 브랜드에 맞게 유지되도록 합니다.

디자인 시스템은 기계가 사용할 수 있는 형태로 만든 여러분의 브랜드입니다. 제품을 *여러분*의 제품처럼 보이게 만드는 결정들, 즉 색상 토큰, 타이포그래피, 간격, 그리고 예시 컴포넌트를 담아내어, Design이 그저 예쁘기만 한 결과가 아니라 브랜드에 맞는 결과를 생성할 수 있게 합니다.

## 디자인 시스템에 담기는 것

생성된 디자인 시스템에는 다음이 포함됩니다.

* **토큰(Tokens)** — 나머지 모든 것이 참조하는 이름 붙은 값(색상, 간격, 반경)
* **색상(Colors)** — 역할(primary, surface, accent 등)이 부여된 팔레트
* **타이포그래피(Typography)** — 폰트 패밀리, 크기, 굵기
* **예시 컴포넌트(Example components)** — 시스템의 사용 예시를 보여주는 몇 가지 빌드된 컴포넌트(버튼, 카드 등)
* **로고와 브랜드 에셋** — 제공한 경우 포함됨

시스템은 프로젝트 내 `DESIGN.md` 파일로도 표현될 수 있습니다. [레퍼런스](/ko/design/design-md)를 참고하세요.

## 디자인 시스템의 출처

시스템을 만드는 두 가지 방법이 있습니다.

1. **처음부터 만들기** — Replit 홈페이지에서 프롬프트로 요청하고, 브랜드에 관한 짧은 질문에 답합니다.
2. **기존 디자인에서 추출하기** — 이미 마음에 드는 목업에서 시스템을 추출합니다(프레임의 점 세 개 메뉴 → 추출).

Figma URL, 웹사이트, 코드, 참고 이미지, 또는 기존 `DESIGN.md` 같은 소스로부터 시스템을 시작할 수도 있습니다. 자세한 내용은 [디자인 시스템 만들기](/ko/design/create-a-design-system)를 참고하세요.

## 디자인 시스템이 유용한 시점

* **한 번 이상 디자인할 때.** 두 번째 디자인부터 일관성이 흐트러지기 시작합니다. 시스템은 N번째 생성물이 첫 번째 생성물처럼 보이도록 유지해줍니다.
* **팀이 함께 디자인할 때.** 시스템을 워크스페이스에 저장하면 모두가 같은 브랜드로 생성할 수 있습니다.
* **기존 작업에 적용할 때.** 기존 아티팩트를 시스템에 맞춰 재빌드할 수 있습니다. [디자인 시스템 적용하기](/ko/design/apply-design-system)에서 시간/크레딧 경고가 의미하는 바를 포함해 확인하세요.

## 저장 위치

디자인 시스템은 워크스페이스에 저장되며, 새 아티팩트를 만들 때 선택할 수 있고, 프로젝트별로 전환할 수 있습니다.