디자인 시스템 만들기 및 재사용

브랜드를 정의하는 참고 자료 수집하기

Home 사이드바에서 Design systems(디자인 시스템)를 연 다음 Create(만들기)를 선택하세요. 생성하기 전에 웹사이트 또는 GitHub 링크, 브랜드 참고 자료, 파일, 서면 설명 등의 소스 자료를 추가하세요. 만들기 화면에서는 파일당 최대 12 MB까지 업로드할 수 있습니다. 선택한 서비스에 제공할 권한이 있는 참고 자료를 사용하세요.

이미 작성된 디자인 규칙이 있다면 DESIGN.md를 붙여넣으세요. 기존 디자인 시스템을 복사하여 시작점으로 사용할 수도 있습니다. 브랜드 색상, 타이포그래피, 로고 간격, 컴포넌트 동작 등 변경하지 않아야 할 사항을 명시하세요.

코드 또는 Figma를 참고 자료로 사용하기

GitHub 저장소, 로컬 코드, .fig 파일 또는 Figma 파일 URL을 사용하려면 Advanced(고급)를 펼치세요. 관련 없는 프로젝트 폴더를 업로드하지 말고 적합한 소스를 선택하세요. 에셋과 컴포넌트를 설명하는 파일은 함께 보관하세요.

Figma URL은 소스 참고 자료이며, 모든 비공개 파일을 읽을 수 있음을 보장하지 않습니다. 액세스에 실패하면 권한이 있는 로컬 .fig 사본이나 명확한 스크린샷을 제공하세요. Figma 참고 자료를 가져오더라도 네이티브 Figma 파일로 직접 다시 내보내는 기능은 활성화되지 않습니다.

시스템 생성, 검토 및 개선하기

1. 제공한 참고 자료를 확인하고 Generate(생성)를 선택하세요. 시스템을 사용할 준비가 되었다고 판단하기 전에 추출 또는 생성이 완료될 때까지 기다리세요.
2. 생성된 미리보기와 DESIGN.md를 검토하세요. 색상, 글자 크기, 간격 및 컴포넌트를 참고 자료와 비교하고 누락된 항목이나 서로 충돌하는 규칙을 수정하세요.
3. 수정한 DESIGN.md를 저장하세요. 에이전트에게 시스템 수정을 요청한 경우 게시하기 전에 결과를 다시 검토하세요.

다른 프로젝트에서 따를 수 있도록 요구 사항을 작성하세요. 각 색상을 어디에 사용해야 하는지, 제목과 본문에 어떤 글꼴을 사용할지, 버튼·양식·상태가 어떻게 동작해야 하는지 명시하세요. 보기 좋은 스크린샷 모음만으로는 이러한 규칙이 정의되지 않습니다.

게시하고 프로젝트에 사용할 시스템 선택하기

1. 시스템 검토가 끝나면 Published(게시됨) 컨트롤을 사용하세요. 초안은 검토할 수 있도록 계속 유지되지만, 다른 프로젝트에서 사용하려면 먼저 게시해야 합니다.
2. Home 또는 프로젝트의 디자인 시스템 선택 화면으로 돌아가세요. 사용할 시스템을 선택하고 미리보기를 확인하세요.
3. 만들 작업과 중요한 규칙을 설명하세요. 생성된 결과물을 시스템과 대조해 확인한 다음, 차이가 있는 부분만 집중적으로 수정하세요.

규칙 저장, 시스템 게시, 프로젝트에 시스템 적용은 각각 별개의 작업입니다. 디자인 시스템을 변경했다고 해서 기존 결과물이 다시 생성되었다는 의미는 아닙니다. 관련 프로젝트를 다시 열고 결과를 확인하세요.

인터페이스 워크플로를 진행하려면 프로토타입을 참조하세요. 기존 HTML 결과물을 조금만 변경하려면 캔버스 편집을 참조하세요.

시스템이 없거나 읽기 전용인 경우

현재 활성화된 워크스페이스와 시스템의 게시 여부를 확인하세요. 팀 리소스와 개인 리소스는 서로 다를 수 있습니다. 팀원의 동기화된 사본은 읽기 전용일 수 있으므로, 소스나 게시 상태를 변경하려면 소유자 또는 필요한 워크스페이스 권한이 있는 계정을 사용하세요.

추출에 실패하면 소스 URL, 파일 크기 및 액세스 권한을 확인하세요. 액세스할 수 없는 소스를 제거하거나 허용된 로컬 참고 자료로 교체한 다음 다시 시도하세요. 저장에 실패하면 화면을 나가기 전에 수정한 규칙의 사본을 보관하세요. OpenDesign에서 게시해도 변경 사항이 GitHub로 다시 푸시되지는 않습니다.