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

# 랜딩 페이지 디자인하기

> Notion 브리프와 브랜드 파일을 바탕으로 Replit Design에서 대기자 명단 또는 출시 페이지를 디자인하세요.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </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>;
};

아직 페이지가 없는 경우입니다: 새 제품, 대기자 명단, 또는 캠페인입니다. Notion 브리프와
Google Drive의 브랜드 파일을 바탕으로 Replit Design에서 랜딩 페이지를 디자인하세요:
히어로, 증거, 작동 방식, 그리고 하나의 콜투액션입니다. Agent는 Notion의 오퍼와 카피,
그리고 Drive의 로고, 색상, 타이포그래피를 사용합니다. 이는 코드로 구현된 사이트가 아니라
페이지의 비주얼 시스템입니다. 실제로 빌드할 때는 이 프레임을 스펙으로 사용하세요.

## 적합한 대상

* 제품이 아직 출시되지 않은 상태에서 대기자 명단 또는 출시 페이지가 필요한 프로덕트 디자이너
* Notion 브리프와 Drive 자산을 바탕으로 첫 온브랜드 레이아웃이 필요한 창업자

## 커넥터

<Connectors
  items={[
{
  id: "notion",
  name: "Notion",
  why: "브리프: 오퍼, 대상, 증거, 콜투액션",
},
{
  id: "google-drive",
  name: "Google Drive",
  why: "로고, 색상, 타이포그래피, 브랜드 자산",
},
]}
/>

## 시작하기 전에

브리프(오퍼, 대상, 콜투액션)가 담긴 Notion 페이지와 Drive의 브랜드 파일을
준비하세요. Notion과 Drive를 연결하세요. 페이지 대상이 누구인지, 주요 콜투액션이
무엇이어야 하는지(가입, 대기자 명단, 데모 예약, 구매) 알려주세요.

## Agent에게 요청하기

<AiPrompt>
  이 Notion 페이지\[링크]와 Google Drive의 브랜드 파일을 바탕으로
  \[대기자 명단/출시/데모 예약]을 위한 랜딩 페이지를 Replit Design에서
  디자인해 주세요. Notion의 오퍼, 대상, 증거, 콜투액션을 사용해 주세요. 데스크톱과
  모바일 프레임을 만들어 주세요: 하나의 콜투액션이 담긴 히어로, 소셜 증거, 작동 방식,
  마지막 콜투액션입니다. 기존 로고, 색상, 타이포그래피를 사용해 주세요.
</AiPrompt>

## 예상되는 결과

Agent는 Notion 브리프와 Drive 브랜드 파일을 읽은 다음 Replit Design에서 프레임을
배치합니다. 배포된 앱이 아니라 데스크톱 페이지와 모바일 크롭을 받게 됩니다. 실제로
빌드할 때 이 프레임을 스펙으로 사용하거나, 이후 Build 워크플로에서 Agent에게 구현을
요청하세요. 데스크톱과 모바일을 나란히 미리보기하세요. 프레임을 최종본으로 여기기 전에
콜투액션, 증거 포인트, 색상을 Notion 및 Drive와 대조해 확인하세요.

## 나에게 맞게 조정하기

<AiPrompt>
  이걸 대기자 명단 랜딩 페이지로 만들어 주세요: 하나의 약속, 세 가지 증거 포인트,
  이메일 수집, 추가 내비게이션 없음. 증거 포인트는 Notion에서 가져와 주세요.
</AiPrompt>

<AiPrompt>
  이 Notion 표\[링크]를 바탕으로 세 가지 요금제 섹션을 추가해 주세요. 비주얼
  시스템은 유지하고 중간 플랜을 강조해 주세요.
</AiPrompt>

## 문제 해결

* **카피가 브리프에서 나오지 않음:** Notion 페이지 링크를 제공하고, 사이트에서 다시 작성하지 말고 그곳의 오퍼, 대상, 증거, 콜투액션을 사용하도록 Agent에게 요청하세요.
* **색상과 타이포그래피가 브랜드와 맞지 않음:** Drive를 연결하고 로고, 색상, 타이포그래피 파일을 지정하세요.
* **실제 사이트를 기대했음:** 이 워크플로는 배포된 앱이 아니라 Replit Design의 프레임을 만듭니다. 이 프레임을 스펙으로 사용하거나, 이후 Build 워크플로에서 Agent에게 구현을 요청하세요.

## 관련 문서

<CardGroup cols={2}>
  <Card title="소셜 아이콘과 배너 만들기" href="/ko/use-cases/create-social-kit">
    프로필 및 커버 자산에도 동일한 Google Drive 브랜드 파일을 사용합니다.
  </Card>

  <Card title="유료 이벤트 웹사이트 출시하기" href="/ko/use-cases/launch-event-website">
    프레임뿐 아니라 공개 페이지에도 동일한 Notion 소스를 사용합니다.
  </Card>
</CardGroup>