> ## 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.

# 기존 앱에 디자인 시스템 적용하기

> 캔버스 또는 컴포저에서 기존 아티팩트를 디자인 시스템에 맞춰 재구성하는 방법과, 시간 및 크레딧 경고가 의미하는 바를 알아보세요.

디자인 시스템은 새 작업에만 쓰이는 것이 아닙니다. 기존 아티팩트에도 적용할 수 있으며, Agent가 해당 시스템에 맞춰 아티팩트의 모습을 다시 빌드합니다.

<Steps>
  <Step title="대상 선택하기">
    재스타일링하려는 아티팩트가 있는 프로젝트를 엽니다.
  </Step>

  <Step title="시스템 적용하기">
    캔버스에서: 대상 프레임을 선택하고 **⋯** 메뉴를 열어 **Apply design system**을 선택합니다. 또는 컴포저에서 요청할 수도 있습니다(Agent 재빌드): *"apply my design system to this app."*

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ds-apply-menu.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=ff9f762ff7fcfbb4f43500d0f662d71d" alt="Apply design system이 강조 표시된 프레임의 점 세 개 메뉴" width="400" height="180" data-path="images/design/replit-design/ds-apply-menu.png" />
    </Frame>
  </Step>

  <Step title="재빌드 확인하기">
    기존 작업에 시스템을 적용하는 것은 실제로 재빌드가 이뤄지는 작업입니다. 시작하기 전에 **시간 및 크레딧 경고**가 표시됩니다. 이는 정상적인 동작입니다. Agent는 스타일시트를 바꿔치기하는 것이 아니라 아티팩트의 스타일링 레이어를 다시 생성하고 있는 것입니다.
  </Step>

  <Step title="결과 검토하기">
    주요 화면을 시스템에 맞춰 확인하세요. 이후 편집도 계속 시스템을 사용합니다. 이전 스타일로 되돌아가는 부분이 보이면 채팅에서 알려주세요.
  </Step>
</Steps>