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

# 기존 웹사이트 리디자인하기

> 현재 사이트를 디자인 프레임으로 다시 만들고, 여러 방향을 나란히 비교한 다음, 선택한 안을 빌드합니다.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

사이트는 작동하지만 구식으로 보이고, 리디자인을 말로 설명해서는 아무도 설득하지 못합니다.
라이브 사이트를 Replit Design에서 디자인 프레임으로 다시 만들고, 원본 옆에서 여러 방향을
탐색한 다음, 채택된 안을 빌드하세요. 가져오기는 마크업을 픽셀 단위로 복사하는 것이 아니라
룩앤필을 출발점으로 재현합니다. 각 방향은 새 프레임으로 생성되므로 원본은 비교를 위해
캔버스에 그대로 남습니다.

## 다음과 같은 경우에 적합합니다

* 리디자인을 말로 설명하는 대신 현재 사이트 옆에 나란히 보여줘야 하는 디자이너.
* 콘텐츠는 괜찮지만 외관이 낡은 사이트를 새로 단장하려는 창업자.

## 시작하기 전에

다시 작업하려는 페이지의 공개 URL을 준비하세요. 리디자인 후에도 유지해야 할 것(제안,
내비게이션, 신뢰 요소)과 열어둘 것을 정하세요. 로그인이 필요한 페이지는 가져올 수 없습니다.

## Agent에게 요청하기

[replit.com/design](https://replit.com/design)으로 이동해 프롬프트 상자 아래의 **Import URL**을
선택하세요. 프롬프트가 미리 채워져 있으니 그 뒤에 URL을 붙여넣으면 됩니다.

<AiPrompt>
  이 웹사이트의 룩앤필을 재현해 주세요: \[URL]. 디자인 프레임까지만 진행하세요.
  앱 빌드는 시작하지 마세요.
</AiPrompt>

프레임이 생성되면 리디자인 자체를 요청하세요:

<AiPrompt>
  원본의 제안, 내비게이션, 신뢰 요소는 그대로 유지해 주세요. 히어로와 타이포그래피에
  대해 세 가지 방향을 생성해 주세요.
</AiPrompt>

## 예상 결과

가져온 프레임 옆에 세 가지 방향이 별도의 프레임으로 생성되며, 각각 제안, 내비게이션, 신뢰
요소가 그대로 반영됩니다. 현재 사이트와 세 가지 새 모습, 총 네 가지를 비교하게 됩니다.
세부 사항을 보기 전에 전체 화면으로 먼저 판단하세요. 채팅으로 이야기하거나
[Visual Editor](/ko/design/visual-editor)에서 요소를 클릭해 선택한 안을 다듬으세요.

방향이 마음에 들면 프레임을 선택하고 **Build**를 선택해
[실제 소프트웨어로 만드세요](/ko/design/build-your-design). 같은 프로젝트에 새 앱을 만들지,
기존 사이트 앱을 프레임에 맞게 리스타일할지 선택할 수 있습니다. Agent가 먼저 체크포인트를
만들기 때문에 어느 쪽이든 되돌릴 수 있습니다.

## 나에게 맞게 조정하기

<AiPrompt>
  레이아웃은 그대로 두고 시각 언어만 바꿔 주세요: 타입 스케일, 간격 리듬, 색상.
  원본 옆에 나란히 놓아 주세요.
</AiPrompt>

<AiPrompt>
  사이트 전체가 일관되도록 가격 페이지와 연락처 페이지를 채택된 방향으로 다시
  만들어 주세요.
</AiPrompt>

## 문제 해결

<AccordionGroup>
  <Accordion title="가져온 결과가 원본과 다릅니다">
    Import URL은 마크업이 아니라 룩앤필을 재현합니다. 정확히 일치해야 하는 부분을
    지정한 다음, 채팅이나 Visual Editor로 수정하세요.
  </Accordion>

  <Accordion title="로그인이 필요한 페이지는 가져올 수 없습니다">
    가져오기에는 공개 URL이 필요합니다. 대신 스크린샷으로 해당 페이지를 다시 만드세요.
  </Accordion>

  <Accordion title="원본을 잃어버린 것 같습니다">
    잃어버리지 않았습니다. 모든 생성 결과는 새 프레임으로 만들어지며 가져온 원본은
    캔버스에 그대로 남아 있습니다. 선택해서 비교하세요.
  </Accordion>

  <Accordion title="리디자인에서 콘텐츠가 빠졌습니다">
    문구, 내비게이션, 신뢰 요소는 원본에서 가져오고 시각적 방향만 열려 있다고
    말해 주세요.
  </Accordion>
</AccordionGroup>

## 관련 문서

<CardGroup cols={2}>
  <Card title="디자인 시스템 만들기" href="/ko/use-cases/create-design-system">
    선택한 룩을 추출해 다음 페이지도 브랜드에 맞게 시작하세요.
  </Card>

  <Card title="라이브 웹사이트 검토하기" href="/ko/use-cases/review-a-live-website">
    리디자인이 공개된 후 링크, 레이아웃, 접근성을 확인하세요.
  </Card>
</CardGroup>