> ## 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 OpeningSiteDesignCover = () => <div className="chat-mkt" role="img" aria-label="A frosted design canvas with a website layout and image asset" style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "grid",
  gridTemplateColumns: "minmax(0, 1.15fr) minmax(0, .85fr)",
  gap: "clamp(12px, 2.4vw, 22px)",
  width: "min(720px, 84%)",
  minHeight: "inherit",
  alignItems: "center",
  margin: "auto"
}}>
        <div style={{
  display: "grid",
  gap: 12,
  minHeight: "clamp(148px, 23vw, 198px)",
  padding: "clamp(12px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.6)",
  borderRadius: 20,
  background: "linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.12))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(6px)"
}}>
          <div style={{
  display: "flex",
  gap: 6
}}>
            {[".92", ".52", ".32"].map(opacity => <span key={opacity} style={{
  width: 7,
  height: 7,
  borderRadius: 999,
  background: `rgba(255,255,255,${opacity})`
}} />)}
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "minmax(0, 1fr) minmax(0, .8fr)",
  gap: 10
}}>
            <div style={{
  display: "grid",
  alignContent: "center",
  gap: 9
}}>
              <span style={{
  width: "76%",
  height: 12,
  borderRadius: 99,
  background: "rgba(255,255,255,.86)"
}} />
              <span style={{
  width: "94%",
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.46)"
}} />
              <span style={{
  width: "72%",
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.34)"
}} />
              <span style={{
  width: 48,
  height: 18,
  marginTop: 4,
  borderRadius: 99,
  background: "rgba(255,255,255,.74)"
}} />
            </div>
            <div style={{
  minHeight: 92,
  border: "1px solid rgba(255,255,255,.42)",
  borderRadius: 12,
  background: "linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.18))"
}} />
          </div>
        </div>
        <div style={{
  display: "grid",
  gap: 10
}}>
          {["68%", "86%", "54%"].map((width, index) => <div key={width} style={{
  display: "grid",
  gridTemplateColumns: "18px minmax(0, 1fr)",
  alignItems: "center",
  gap: 9,
  padding: "clamp(9px, 1.5vw, 13px)",
  border: "1px solid rgba(255,255,255,.46)",
  borderRadius: 14,
  background: index === 0 ? "rgba(255,255,255,.29)" : "rgba(255,255,255,.12)",
  backdropFilter: "blur(5px)"
}}>
              <span style={{
  width: 18,
  height: 18,
  borderRadius: index === 1 ? 4 : 999,
  background: index === 0 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.42)"
}} />
              <span style={{
  width,
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.7)"
}} />
            </div>)}
        </div>
      </div>
    </div>
  </div>;

export const CoffeeShopScreenshotFrame = ({src, alt}) => <div style={{
  margin: "28px 0",
  overflow: "hidden",
  borderRadius: "24px",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)",
  boxShadow: "0 16px 32px rgba(112,36,13,.18)"
}}>
    <div style={{
  padding: "clamp(10px, 2vw, 18px)",
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}}>
      <a href={src} target="_blank" rel="noreferrer" aria-label={`Open ${alt} at full size`} style={{
  display: "block",
  overflow: "hidden",
  border: "1px solid rgba(255,255,255,.62)",
  borderRadius: "16px",
  background: "rgba(255,255,255,.96)",
  boxShadow: "0 12px 28px rgba(55,27,18,.2)",
  cursor: "zoom-in"
}}>
        <img src={src} alt={alt} style={{
  display: "block",
  width: "100%",
  height: "auto"
}} />
      </a>
    </div>
  </div>;

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>;
};

<OpeningSiteDesignCover />

Conversation과 프로젝트의 차이를 이해하셨습니다. 이제 커피숍 출시 계획을
사람들이 볼 수 있는 형태로 만들어 보겠습니다.

Replit에게 Conversation, 조사 내용, 출시 계획을 활용해 동네 카페를 위한
오픈 예정 사이트를 만들어 달라고 요청하세요:

<AiPrompt>
  이 Conversation의 컨셉, 비주얼 방향, 출시 계획을 활용해 제 동네 커피숍을
  위한 오픈 예정 웹사이트를 디자인해 주세요. 따뜻하고 차분하며 편안한 느낌으로
  만들어 주세요. 짧은 소개, 동네 소개, 오픈 소식, 그리고 사람들이 소식을
  받아볼 수 있는 방법을 포함해 주세요.
</AiPrompt>

## 오픈 예정 사이트 만들고 다듬기

<Steps>
  <Step title="첫 사이트 검토하기">
    몇 분 후, Replit은 Conversation에서 정한 방향을 오픈 예정 사이트로 만들어
    냅니다. 무엇을 바꿀지 결정하기 전에 첫 번째 버전을 검토하세요.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/opening-site-preview.jpg" alt="Replit에서 Publishing 컨트롤과 함께 표시된 커피숍 오픈 예정 사이트 미리보기" />
  </Step>

  <Step title="Design 열기">
    게시하기 전에 사이트를 자신만의 것으로 만드세요. **Design**을 선택해
    디자인 캔버스를 엽니다.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/open-design.jpg" alt="오픈 예정 커피숍 사이트 위에 열린 Replit Design 메뉴" />
  </Step>

  <Step title="디자인 검토하기">
    디자인 캔버스는 다음에 무엇을 조정할지 결정하는 동안 오픈 예정 사이트를
    계속 볼 수 있게 해 줍니다.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/review-updated-site-design.jpg" alt="히어로 섹션에 생성된 카푸치노 이미지가 적용된, 업데이트된 커피숍 오픈 예정 사이트 디자인" />
  </Step>

  <Step title="다양한 레이아웃 살펴보기">
    제안된 다음 단계를 활용해 다른 레이아웃을 시도하거나 잘 작동하는 부분을
    다듬어 보세요. 살펴보는 동안 Replit은 첫 번째 버전도 계속 사용할 수 있게
    유지합니다.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/explore-design-directions.jpg" alt="커피숍 사이트를 재구상하고, 레이아웃을 시도하고, 다듬기 위해 Replit Design이 제안한 다음 단계" />
  </Step>

  <Step title="이미지 애셋 추가하기">
    **Generate**를 선택한 다음 **Image**를 선택하세요. 필요한 애셋과 그것이
    표시될 위치를 설명하세요. 여기서는 커피숍 사이트에 사용할 카푸치노
    이미지를 요청합니다.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/open-generate-menu.png" alt="Design, Image, Video, Vector Graphic 옵션이 있는 Replit Design 캔버스의 Generate 메뉴" />

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/write-image-request.png" alt="Replit Design 캔버스에서 카푸치노 이미지를 생성하기 위한 프롬프트" />
  </Step>

  <Step title="사이트에 새 애셋 사용하기">
    이미지가 준비되면 이를 선택하고 Replit에게 히어로 섹션에 사용해 달라고
    요청하세요. 사이트가 카페를 잘 나타낼 때까지 계속 다듬으세요.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/replace-hero-image.jpg" alt="Replit Design 캔버스에서 생성된 카푸치노 이미지가 선택된 상태로, 웹사이트 히어로 이미지를 교체해 달라는 요청이 있는 화면" />
  </Step>

  <Step title="게시 전 사이트 미리보기">
    완성된 사이트를 확인하려면 Preview를 여세요. 마음에 들면 게시할 준비가
    된 것입니다.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/opening-site-preview.jpg" alt="Replit에서 Publishing 컨트롤과 함께 표시된 커피숍 오픈 예정 사이트 미리보기" />
  </Step>
</Steps>

[디자인 만들기](/create-a-design)에 대해 자세히 알아보세요.

## 다음 단계

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/ko/home/publish-the-site">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-window">
        <b />

        <b />

        <b />
      </div>
    </div>

    <div className="chat-example-tag">게시</div>
    <div className="chat-card-title">사이트 게시하기</div>
    <p>오픈 예정 사이트를 사람들이 방문하고 공유할 수 있도록 공개하세요.</p>
    <div className="chat-card-link">계속하기 →</div>
  </a>
</section>