배울 내용
다음을 배우게 됩니다:- 대상, 제안, 행동 유도를 페이지로 전환하는 방법.
- 페이지 카피, 레이아웃, 양식 동작을 Agent에게 요청하는 방법.
- 공유하기 전에 페이지가 명확한지 확인하는 방법.
- 게시된 URL에서 양식을 테스트하는 방법.
- 응답 품질을 기반으로 페이지를 개선하는 방법.
Canvas에서 다듬고 대안 탐색하기
Agent가 첫 번째 빌드를 완료하면, Canvas를 열어 프롬프트를 다시 작성하지 않고도 시각적 피드백을 주고 Agent에게 대안적인 방향을 요청하세요.1
랜딩 페이지 빌드하기
프롬프트를 복사하여 replit.com의 프롬프트 박스에 붙여넣거나, Build on Replit을 클릭하여 프롬프트가 미리 채워진 상태로 Replit을 여세요.
2
Agent가 빌드한 앱 미리보기
Agent가 완료되면 오른쪽 창이 Preview로 전환되어 랜딩 페이지와 실시간으로 상호 작용할 수 있습니다. 히어로를 스크롤하고, 행동 유도 버튼을 클릭하고, 다듬기 시작하기 전에 카피와 이미지가 요청한 것과 일치하는지 확인하세요.
3
Canvas 열기
Preview 및 Tools 탭 아래의 Canvas 버튼을 선택하여 오른쪽 창을 Preview에서 Canvas로 전환하세요.
4
미리보기 외부에 주석 달기
Canvas Text 및 Draw 도구를 사용하여 목업 주변의 빈 공간에 메모와 화살표를 추가한 다음, Agent가 변경하기를 원하는 특정 요소를 가리키세요. 미리보기 외부 — 캔버스에 배치된 주석은 Agent가 디자인과 함께 읽을 수 있도록 피드백에 연결된 상태로 유지됩니다.각 주석을 하나의 변경에 집중하세요. 짧고 구체적인 메모(“이 버튼의 너비를 줄여줘”)가 열린 피드백보다 더 효과적입니다.
5
주석과 미리보기를 선택하여 Agent에게 보내기
주석을 미리보기 프레임과 함께 마르키 선택하고, Chat about selected items에 짧은 프롬프트를 입력하여 보내세요. Agent는 주석과 디자인을 하나의 맥락으로 읽으므로, 각 메모가 어떤 요소를 가리키는지 알 수 있습니다.채팅 메시지를 일반적으로 유지하세요 — “주석에서 변경 사항을 적용해줘.” 같은 내용으로. 구체적인 내용은 주석에 담으세요.
6
다양한 방향 탐색하기
Canvas에서 디자인을 클릭하고 Explore different approaches와 같이 옆에 있는 제안을 선택하여 Agent에게 대안적인 시각적 방향을 요청하세요.
7
대안을 검토하고 반복하기
Agent가 생성을 마칠 때까지 기다리세요. Explore different approaches는 새로운 변형으로 동일한 아티팩트를 업데이트합니다 — 목업 위의 아티팩트 드롭다운에서 전환하세요. Explore different vibes는 원본 옆에 캔버스에 나타나는 별도의 시각적 목업을 생성합니다.변형이 나타나면 방향을 선택하고 계속 반복하세요. 선택한 프레임에 또 다른 주석을 추가하고, 디자인과 함께 마르키 선택하고, 새 요청을 보내세요 — 예: “주석에서 요청한 변경 사항을 적용해줘.” Agent는 변형 맥락과 새 주석을 하나의 프롬프트로 사용합니다.
8
작업 게시하기
Preview에서 페이지가 작동하면 워크스페이스 오른쪽 상단의 Publish(또는 이후 배포 시 Republish)를 클릭하여 최신 버전을 공개 URL에 푸시하세요. 공유하기 전에 게시된 URL을 새 탭에서 열고 테스트 응답을 하나 제출하여 라이브 페이지가 수집하는지 확인하세요.
다음 단계
통합 추가하기
후속 이메일을 보내거나 응답을 CRM에 동기화하세요.
커스텀 도메인 추가하기
공유하기 전에 페이지에 브랜드 캠페인 URL을 제공하세요.
데이터베이스 추가하기
정렬하고 내보낼 수 있는 더 구조화된 응답을 저장하세요.
한 번에 하나씩 변경 테스트하기
두 번째 변형을 만들고 메시지를 비교하세요 — 무엇이 차이를 만드는지 알 수 있도록 매 라운드 하나의 요소만 변경하세요.