> ## 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 PublishSiteCover = () => <div className="chat-mkt" role="img" aria-label="A frosted publishing panel with a public link for a finished site" 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",
  width: "min(620px, 80%)",
  minHeight: "inherit",
  placeItems: "center",
  margin: "auto"
}}>
        <div style={{
  display: "grid",
  width: "100%",
  gap: "clamp(14px, 2.4vw, 22px)",
  padding: "clamp(18px, 3vw, 28px)",
  border: "1px solid rgba(255,255,255,.62)",
  borderRadius: 24,
  background: "linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.13))",
  boxShadow: "0 20px 40px rgba(55,27,18,.22)",
  backdropFilter: "blur(7px)"
}}>
          <div style={{
  display: "flex",
  justifyContent: "space-between",
  gap: 10
}}>
            <span style={{
  width: "36%",
  height: 9,
  borderRadius: 99,
  background: "rgba(255,255,255,.78)"
}} />
            <span style={{
  width: 18,
  height: 18,
  border: "1px solid rgba(255,255,255,.72)",
  borderRadius: 999
}} />
          </div>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: 10,
  padding: "clamp(11px, 1.8vw, 15px)",
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 14,
  background: "rgba(255,255,255,.16)"
}}>
            <span style={{
  width: 18,
  height: 18,
  border: "2px solid rgba(255,255,255,.88)",
  borderRadius: 6,
  transform: "rotate(-45deg)"
}} />
            <span style={{
  width: "60%",
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.74)"
}} />
            <span style={{
  width: 48,
  height: 22,
  marginLeft: "auto",
  borderRadius: 7,
  background: "rgba(255,255,255,.88)"
}} />
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
  gap: 7
}}>
            {[0, 1, 2, 3].map(stage => <span key={stage} style={{
  height: 8,
  borderRadius: 99,
  background: stage < 3 ? "rgba(255,255,255,.82)" : "rgba(255,255,255,.36)"
}} />)}
          </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>;

<PublishSiteCover />

여러분은 커피숍 아이디어를 출시 계획과 오픈 사이트로 발전시켰습니다. 이제
그것을 원하는 사람들에게 보여줄 차례입니다.

게시하기 전에 스토리, 메뉴 미리보기, 위치, 가입 경험이 처음 방문하는 사람에게
준비되어 있는지 확인하세요. Publishing을 사용하면 동네 사람들과 공유할 수 있는
공개 링크가 생성됩니다.

## 오픈 사이트 게시하기

<Steps>
  <Step title="도메인과 공개 범위 선택">
    **Publish**를 선택하고, 사용 가능한 주소를 고른 다음, 누가 사이트에 접근할 수
    있는지 결정하세요. 이 예시에서는 링크가 있는 누구나 방문할 수 있도록 공개
    주소를 사용합니다.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/choose-publish-settings.png" alt="사용 가능한 커피숍 사이트 도메인과 공개 공개 범위가 선택된 Replit Publish 패널" />
  </Step>

  <Step title="사이트 게시">
    설정을 검토한 다음 **Publish**를 선택하세요. Replit이 사이트를 준비하고
    사이트를 이용 가능하게 만드는 데 필요한 검사를 실행합니다.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/publishing-progress.png" alt="프로비저닝, 보안 검사, 빌드, 번들, 프로모트 단계를 보여주는 Replit 게시 진행 상황" />
  </Step>

  <Step title="라이브 링크 공유">
    게시가 완료되면 라이브 링크를 복사해서 원하는 사람들에게 오픈 사이트를
    공유하세요.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/site-is-live.png" alt="복사 링크 버튼과 함께 커피숍 오픈 사이트가 라이브 상태임을 확인하는 Replit 화면" />
  </Step>
</Steps>

게시 후에도 원래의 대화는 계속 유용하게 사용할 수 있습니다. Routine을 계속
사용해 새로운 현지 정보를 검토하고, 업데이트가 필요할 때 다시 사이트로
돌아오세요.

[앱 게시하기](/publish-your-app)에 대해 알아보세요.

이제 여러분은 아이디어에서 리서치, 컨텍스트, 반복되는 계획, 사이트, 공개된
결과물로 나아갔습니다. 다음 아이디어를 실제로 만들 때도 같은 패턴을 사용해
보세요.