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

# 제안 살펴보기

> 디자인 프레임을 선택하면 Replit Design이 다음에 무엇을 디자인할지 제안합니다. 클릭 한 번으로 새로운 방향을 생성할 수 있으며, 마음에 드는 결과를 앱에 적용할 수 있습니다.

제안은 Replit Design 인터페이스의 중심입니다. 빈 프롬프트 박스를 마주하고 무엇을 요청해야 할지 알아낼 필요 없이, 디자인 프레임을 선택하면 Replit Design이 다음에 시도해볼 것을 제안합니다. 각 제안은 클릭 한 번이면 새로운 생성으로 이어집니다.

<Frame>
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=7f39fec76cde3f60e3a20e6c5a13d8db" alt="APEX X1 슈퍼카 히어로를 보여주는 선택된 Website 프레임과 그 옆에 Explore different approaches, Try different layouts, Explore different vibes, Surprise me 같은 제안 칩을 제공하는 Suggested next steps 패널" width="2000" height="1254" data-path="images/design/replit-design/ambient-iq.png" />
</Frame>

## 제안이 작동하는 방식

생성된 디자인 프레임을 선택하면 그 옆에 제안이 나타납니다. 제안은 현재 보고 있는 것을 기반으로 하므로, 살펴보는 데 디자인 용어를 알 필요가 없습니다. 하나를 클릭하면 Replit Design이 결과를 새 프레임으로 생성하고, 원본은 그대로 유지됩니다.

## 제안이 제시하는 것

제안은 다양한 탐색 질문에 답합니다:

* **새로운 룩**: 다크 에디토리얼 변형이나 다른 레이아웃 등 같은 디자인을 다른 방향으로 표현한 것.
* **확장**: 가격 정책 섹션이나 문의 페이지처럼 디자인이 암시하지만 아직 없는 섹션이나 페이지.
* **새로운 맥락**: 모바일 뷰포트처럼 디자인을 다른 곳에 적용한 것.

## 제안으로 살펴보기

이 루프는 의도적으로 짧게 설계되어 있습니다:

<Steps>
  <Step title="생성된 프레임 선택하기">
    캔버스에서 생성된 디자인 프레임을 클릭하세요.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-select-frame.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=0eb316c59e669b8c3f9dd9e468dc1ce4" alt="캔버스에서 회색 슈퍼카 히어로 페이지를 보여주는 APEX X1 Exact Replica라는 이름의 Design 프레임" width="2000" height="1252" data-path="images/design/replit-design/ambient-select-frame.png" />
    </Frame>
  </Step>

  <Step title="제안 선택하기">
    선택한 프레임 옆에 현재 보고 있는 것을 기반으로 한 제안이 나타납니다. 제안을 살펴보고 하나를 클릭하세요. 따로 추가할 내용은 필요하지 않습니다.
  </Step>

  <Step title="클릭하면 Agent가 빌드합니다">
    클릭하는 순간 Agent가 원본 옆에 새 프레임으로 제안을 빌드하기 시작합니다. 이전 프레임은 캔버스에 그대로 남아 있으므로 살펴본다고 해서 잃는 것은 없습니다.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-suggestion-building.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=ec2866d4a77b9a0765c1faaf9c8970e2" alt="원본 APEX X1 프레임 옆에 'Add Saturation on Scroll'이라는 제목의 새 Design 프레임이 Building… 표시와 함께 스켈레톤 레이아웃으로 렌더링되는 모습" width="2000" height="1252" data-path="images/design/replit-design/ambient-suggestion-building.png" />
    </Frame>
  </Step>

  <Step title="변경 사항 확인하기">
    완성된 프레임이 원본 옆에 나타나 두 개를 나란히 비교할 수 있습니다. 채팅 패널에는 변경된 내용이 요약되어 표시됩니다.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-suggestion-result.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=576559f27cd6dba45bb3c391a7773ae5" alt="캔버스에 나란히 놓인 두 개의 완성된 Design 프레임 — 원본 APEX X1 Exact Replica와 완성된 Add Saturation on Scroll 변형 — 그리고 채팅 패널의 'Run complete' 요약" width="2000" height="1189" data-path="images/design/replit-design/ambient-suggestion-result.png" />
    </Frame>
  </Step>

  <Step title="가장 마음에 드는 디자인을 앱에 적용하기">
    마음에 드는 방향을 찾을 때까지 선택하고 갈래를 뻗어 나가세요. 어떤 프레임을 선택하든 새로운 제안이 나타납니다. 최종 선택한 디자인이 목업으로만 남을 필요는 없습니다. 프레임을 선택하고 액션 바에서 \*\*Build…\*\*를 선택한 다음 **Apply to an existing creation** 아래에서 기존 앱을 선택하세요. Agent가 디자인에 맞게 앱의 코드를 다시 작성하며, 프레임은 참고용으로 캔버스에 남습니다.

    <Frame caption="Build 메뉴: 가장 마음에 드는 프레임을 이미 가지고 있는 앱에 적용하세요.">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/explore-variants-apply.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=85738e29a0bd530f30cd62352b2a986a" alt="선택한 변형에서 열린 Build 메뉴 — 새 아티팩트를 만드는 'Build this design'과 프로젝트의 Website 아티팩트를 나열하는 'Apply to an existing creation' 두 가지 옵션이 있음" width="2000" height="1226" data-path="images/design/replit-design/explore-variants-apply.png" />
    </Frame>

    프레임을 새 앱으로 빌드하는 방법을 포함한 전체 흐름은 [디자인 빌드하기](/ko/design/build-your-design)를 참조하세요. 적용하기 전에 세부 사항을 다듬으려면 [채팅으로 다듬기](/ko/design/chat-about-your-design)를 확인하세요.
  </Step>
</Steps>

## 팁

* **단계가 아니라 방향으로 탐색하세요.** 제안은 갈래를 만들 뿐, 하나를 따라간다고 해서 거기에 얽매이지 않습니다. 몇 가지를 생성해서 캔버스에서 비교해보세요.
* **직접 말로 표현해보세요.** 제안과 [디자인 채팅박스](/ko/design/chat-about-your-design)는 함께 작동합니다. 제안을 클릭해 폭넓게 탐색하고, 채팅으로 정밀하게 방향을 잡으세요. 채팅은 다듬기용으로만 쓰이는 것이 아닙니다. *"내비게이션을 왼쪽에 배치해줘"* 같은 메시지도 새로운 방향을 열어줍니다.
* **다른 감각을 원한다면 모델을 전환하세요.** 모델마다 탐색하는 방식이 다릅니다. [다양한 모델로 살펴보기](/ko/design/explore-with-different-models)를 참조하세요.
