> ## 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에서 프롬프트로 첫 디자인 프레임을 생성하고, AI의 제안을 살펴보며 계속 발전시켜 보세요. 디자인 경험은 필요 없습니다.

이 퀵스타트에서는 평범한 문장으로 작성한 프롬프트에서 첫 디자인 프레임을 생성한 다음, AI의 제안을 활용해 클릭 한 번으로 새로운 방향을 탐색해 봅니다. 디자인 경험은 필요 없으며, 마음에 드는 것을 선택하는 방식으로 방향을 잡아가면 됩니다.

<Steps>
  <Step title="Replit Design 열기">
    [replit.com/design](https://replit.com/design)로 이동하세요. 정중앙에 있는 프롬프트 상자가 디자인을 시작하는 곳입니다.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/design-hero.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=9936d9ed0024a66cfad69c01858bb73f" alt="Replit Design 홈 화면. 'Describe what you want to design'이라고 적힌 프롬프트 상자와 그 아래 Import URL, Import Figma, Recreate screenshot, Start with a design system 옵션이 표시됨" width="889" height="414" data-path="images/design/replit-design/design-hero.png" />
    </Frame>

    <Note>
      이미 워크스페이스에 있나요? 대신 워크스페이스 홈의 생성 입력창 아래에서 **Design**을 선택하세요. 입력창이 디자인 모드로 전환되고 프롬프트 상자에 **Design** 칩이 나타납니다.

      <Frame>
        <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/design-pill.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=f719dfa884a772e9ee10602cea462f74" alt="워크스페이스 홈의 생성 입력창에서 Design이 선택된 모습. 프롬프트 상자에 Design 칩이 표시됨" width="800" height="270" data-path="images/design/replit-design/design-pill.png" />
      </Frame>
    </Note>
  </Step>

  <Step title="디자인하고 싶은 것 설명하기">
    디자이너 친구에게 브리핑하듯 프롬프트를 작성하세요: 무엇인지, 누구를 위한 것인지, 그리고 생각하고 있는 분위기가 있다면 그것까지요. 예를 들면: *"슈퍼카 렌탈 서비스를 위한 랜딩 페이지, 대담하고, 어둡고, 시네마틱하게."* 그런 다음 제출하세요.
  </Step>

  <Step title="Design이 빌드하는 모습 지켜보기">
    Agent가 프롬프트를 받아 빌드를 시작하며, 작업하는 동안 채팅 패널에서 진행 상황을 알려줍니다.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/design-building.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=05dd7f12861379619e1b4cb0e9297cda" alt="Replit Design 홈에서 채팅 패널이 럭셔리 슈퍼카 렌탈 앱에 대한 프롬프트를 처리하며 Velocity 아티팩트를 생성하고 있다고 알리는 모습" width="2000" height="1254" data-path="images/design/replit-design/design-building.png" />
    </Frame>
  </Step>

  <Step title="첫 프레임 검토하기">
    디자인이 캔버스에 프레임으로 도착합니다. 잠시 기다렸다가 전체 크기로 살펴보세요.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/first-frames.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=a5ede17a7fc66686789eeaa9b76a949e" alt="Focus 모드에서 전체 크기로 검토 중인 생성된 Velocity 슈퍼카 렌탈 페이지. 보드 상단에 Exit focus 버튼이 표시됨" width="1600" height="1003" data-path="images/design/replit-design/first-frames.png" />
    </Frame>
  </Step>

  <Step title="제안을 활용해 계속 생성하기">
    가장 마음에 드는 프레임을 선택하세요. 다음에 무엇을 디자인할지 제안이 나타납니다. 하나를 클릭하면 새로운 방향이 새 프레임으로 생성되며, 원본은 그대로 남습니다. 마음에 드는 것이 나올 때까지 계속 클릭해 보세요.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/suggestions.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=7d11114b53e2ef02252b9aa3f85336a8" alt="캔버스에서 선택된 생성된 Velocity 프레임. 채팅 패널에는 실행 완료가 표시되고, 프레임 옆에는 Suggested next steps 패널이 열리는 모습" width="1600" height="1003" data-path="images/design/replit-design/suggestions.png" />
    </Frame>
  </Step>
</Steps>

## 다음 단계

* [제안 살펴보기](/ko/design/explore-suggestions): 탐색 루프를 더 깊이 알아보세요.
* [템플릿으로 시작하기](/ko/design/start-from-a-template): 빈 프롬프트 대신 미리 만들어진 디자인으로 시작해 보세요.
* [디자인 빌드하기](/ko/design/build-your-design): 우승한 프레임을 실제로 동작하는 앱으로 만들어 보세요.
