다큐라이즈 7일 무료 체험 시작하기 →

다큐라이즈와 클로드로 나만의 랜딩페이지 만들기: 실제 사례부터 제작 프롬프트까지

브랜드 소개부터 무료 자료 안내, 웨비나 모집, 상품 판매까지. 실제 사례와 프롬프트로 나만의 랜딩페이지를 만들고, 다큐라이즈에서 신청·결제와 후속 안내까지 연결해 보세요.

다큐라이즈 팀
7분 읽기
다큐라이즈랑 AI로 나만의 웹페이지 만들기

새로운 서비스를 소개하거나, 무료 자료를 나누거나, 웨비나 참가자를 모집할 때 링크 하나로 안내하고 신청까지 받을 수 있는 페이지가 있으면 편리해요.

클로드로 원하는 디자인의 페이지를 만드는 건 쉬워졌어요. 하지만 공개한 뒤에도 챙길 일이 있습니다. 신청 폼을 연결하고, 신청자에게 안내를 보내고, 누가 관심을 보였는지 확인해야 하죠.

클로드로 만든 페이지를 다큐라이즈에 올리면, 페이지 공개부터 신청·결제, 자동 안내와 분석까지 한곳에서 이어갈 수 있어요.

  • 페이지 만들기: 클로드와 문안을 다듬고 원하는 디자인을 요청해요
  • 신청·결제 받기: 완성한 HTML을 다큐라이즈에 올리고 신청 폼이나 결제 폼을 연결해요
  • 후속 안내와 분석하기: 안내 메일을 자동으로 보내고, 신청 내역과 고객의 반응을 확인해요

실제 활용 사례부터 복사해서 쓸 수 있는 프롬프트까지, 직접 따라 할 수 있도록 차근차근 소개할게요.

1. 어떤 페이지를 만들고 싶으세요?

다큐라이즈 유저분들은 이렇게 만들었어요

다큐라이즈 유저분들과 다큐라이즈 팀이 HTML로 수정 기능을 활용해 만든 페이지예요. 웨비나 모집부터 상품 오픈 알림까지, 어떻게 활용했는지 살펴보세요.

HTML로 만든 페이지 4개의 모바일 첫 화면을 2열로 모은 이미지. 1 오문 라이브 웨비나 신청 페이지, 2 다큐라이즈 3차 온라인 워크숍 상세페이지, 3 미즈스모 울 머플러 오픈 알림 신청 페이지, 4 혜인 영업상담소 안내 페이지
  • 오문님: 라이브 웨비나 신청 페이지를 만들었어요. 화면 아래에 웨비나 신청하기 버튼을 고정해, 내용을 읽다가 바로 신청할 수 있게 했어요
  • 다큐라이즈 팀: 3차 온라인 워크숍 상세페이지예요. 일시, 진행 방식, 참가비를 첫 화면에 모아 주요 정보를 바로 확인할 수 있게 했어요
  • 미즈스모님: 울 머플러 3종을 출시하기 전에 오픈 알림 신청 페이지를 만들어, 관심 있는 분들을 미리 모았어요
  • 혜인님: 프리랜서의 영업 고민을 받는 영업상담소 안내 페이지예요. 고민을 남기면 연말 레터로 답변을 받을 수 있다고 안내했어요

페이지의 목적을 정해 보세요

어떤 페이지를 만들고 싶으신가요? 방문자가 무엇을 알게 되거나, 어떤 행동을 하면 좋을지부터 정해 보세요.

만들고 싶은 페이지담을 내용연결할 수 있는 다음 행동
브랜드·서비스 소개누구를 돕는지, 무엇을 제공하는지, 주요 사례서비스 자세히 보기, 문의하기
무료 자료 안내누구에게 필요한 자료인지, 어떤 내용이 담겼는지자료 보기, 자료 신청하기
웨비나·행사 안내주제, 대상, 일정, 진행자, 참여 방법참가 신청하기
대기리스트·사전 알림 모집준비 중인 소식, 대상, 신청하면 받을 안내알림 신청하기
상품 상세페이지제공 내용, 이용 방법, 가격, 구매 조건구매하기

소개와 정보를 전달하는 것만으로 충분한 페이지도 있어요. 모든 페이지에 신청이나 구매 버튼을 넣을 필요는 없습니다.

목적을 정했다면 아래 네 가지를 적어 주세요.

① 누가 보나요?

방문할 사람을 구체적으로 적어 주세요.

단순히 사업가라고 하기보다, 무료 자료를 나눠주고 있지만 자료를 받은 사람에게 다음 안내를 보내지 못하고 있는 1인 사업가라고 설명하면 어떤 내용이 필요한지 정하기 쉬워요.

② 무엇을 전하나요?

방문자가 꼭 기억했으면 하는 내용을 정해 주세요.

서비스 소개라면 누구에게 어떤 도움을 주는지, 무료 자료라면 어떤 내용을 얻을 수 있는지, 행사라면 어떤 주제로 누구와 함께하는지 적으면 됩니다.

③ 어떤 정보가 필요한가요?

방문자가 내용을 이해하거나 참여를 결정하는 데 필요한 정보를 모아 주세요.

소개 문구, 이미지, 실제 사례, 일정, 장소, 준비물 등이 해당해요. 상품을 판매한다면 가격, 제공 범위, 이용 기간과 구매 조건도 필요합니다.

아직 정하지 않은 내용은 미정이라고 적어 주세요. AI가 임의로 채우지 않도록 하기 위해서예요.

④ 읽은 뒤 무엇을 하면 되나요?

관련 자료 보기, 문의하기, 신청하기, 구매하기 중 가장 중요한 행동을 정해 주세요. 별도로 연결할 행동이 없다면 없음이라고 적어도 됩니다.

2. 클로드에 페이지 문안을 요청하세요

다큐라이즈의 AI용 프롬프트부터 복사하세요

다큐라이즈에서 제공하는 프롬프트에는 HTML을 만들 때 지켜야 할 규칙이 들어 있어요. 페이지 제작을 요청하기 전에 먼저 전달해 주세요.

  1. 새로 만들기에서 문서를 만듭니다
  2. 본문 편집 방식에서 HTML로 수정을 누릅니다
  3. AI용 프롬프트 복사를 누릅니다
  4. 클로드 채팅창에 붙여넣습니다
다큐라이즈 HTML로 수정 화면. 프롬프트 복사하기, AI에 붙여넣고 설명하기, 받은 코드 붙여넣기 세 단계와 AI용 프롬프트 복사 버튼, 펼쳐진 지원 범위 자세히 보기

아무 조건 없이 HTML을 요청하면 다큐라이즈에 저장할 때 빠지는 코드가 포함될 수 있어요. 지원 범위 자세히 보기에서 사용할 수 있는 코드의 범위도 확인해 주세요.

  • 스크립트·폼·입력칸·버튼 태그는 저장할 때 빠져요. 본문의 버튼은 링크에 디자인을 적용해 만듭니다
  • 글꼴은 Pretendard, Paperlogy, Noto Serif KR를 사용할 수 있어요
  • 화면에 고정되는 헤더나 플로팅 버튼은 HTML로 만들지 않아요. 플로팅 버튼은 다큐라이즈 설정으로 추가합니다
  • 이미지는 images 폴더에 담아 .zip으로 올립니다. 노션·구글 드라이브·인스타그램의 이미지 주소는 접근 권한이나 만료 문제로 표시되지 않을 수 있어요

만들고 싶은 페이지의 정보를 더해 주세요

다큐라이즈 프롬프트를 붙여넣은 뒤, 아래 내용을 이어서 입력해 보세요. 대괄호 안을 내 페이지에 맞게 바꾸면 됩니다.

고객의 고민을 설명하는 페이지라면 신청서나 DM에서 고객이 직접 쓴 표현을 함께 전달해도 좋아요. 이름과 연락처 등 개인정보는 지워 주세요.

신청이나 구매를 설득하는 페이지라면 신 PASONA를 참고하세요

웨비나 참가자를 모집하거나 상품을 판매할 때는 고객의 고민을 짚고, 어떻게 도움을 줄 수 있는지 설명해야 합니다.

이럴 때 참고할 수 있는 방법이 신 PASONA 공식이에요. 일본의 마케팅 전문가 간다 마사노리가 기존 PASONA를 발전시켜 2016년 저서 『稼ぐ言葉の法則』에서 소개한 카피라이팅 공식입니다.

여섯 단계의 영어 앞 글자를 따서 이름을 붙였어요.

단계의미페이지에 담을 내용
P · Problem문제 제기방문자가 겪는 고민이나 원하는 변화를 짚어 주세요
A · Affinity친근감 형성비슷한 경험이나 고객을 도우며 알게 된 점으로 그 고민을 이해하고 있음을 보여 주세요
S · Solution해결책 제시어떤 방법으로 도움을 줄 수 있는지 설명해 주세요
O · Offer구체적 제안자료, 행사, 상품의 제공 내용과 참여 조건을 안내해 주세요
N · Narrowing down대상·조건 좁히기대상, 정원, 마감 등 실제 조건을 알려 주세요
A · Action행동 촉구신청하기, 구매하기 등 다음에 할 행동을 안내해 주세요

출처: 다이아몬드사 신 PASONA 소개

활용하고 싶다면 기본 프롬프트 뒤에 아래 요청을 추가해 주세요.

모든 페이지에 이 공식을 적용할 필요는 없어요. 브랜드 소개나 단순 안내 페이지는 방문자가 궁금해할 정보를 바로 보여주는 것만으로도 충분합니다.

3. 원하는 디자인으로 HTML을 만드세요

문안이 준비됐다면 디자인을 요청할 차례예요.

예쁘게, 세련되게 만들어 달라고만 하면 내가 생각한 모습과 다른 결과가 나올 수 있어요. 참고할 화면과 마음에 드는 부분을 함께 알려 주세요.

참고 화면으로 원하는 디자인을 알려 주세요

마음에 드는 웹사이트나 랜딩페이지를 캡처해 클로드에 첨부해 보세요.

전체 페이지가 아니어도 괜찮아요. 첫 화면의 제목 배치, 이미지와 설명을 나란히 놓은 방식, 가격 안내처럼 참고하고 싶은 부분만 보여줘도 됩니다.

여러 이미지를 첨부한다면 각각 어떤 부분을 참고할지도 적어 주세요.

  • 첫 번째 이미지: 제목 크기와 첫 화면 배치
  • 두 번째 이미지: 이미지와 설명을 나란히 놓는 방식
  • 세 번째 이미지: 버튼의 색상과 모양

디자인을 어떻게 설명해야 할지 모르겠다면 익숙한 서비스를 예로 들어도 좋아요. 서비스 이름에 원하는 특징을 덧붙이면 더 구체적으로 전달할 수 있습니다.

원하는 분위기이렇게 요청해 보세요
토스처럼 간결하고 읽기 편하게넓은 여백, 큰 제목, 짧은 설명을 활용해줘. 강조색은 주요 버튼과 핵심 정보에만 사용해줘
애플 제품 소개 페이지처럼 이미지 중심으로큰 이미지와 짧은 문구로 보여줘. 한 구간에는 핵심 메시지 하나만 담아줘
노션 문서처럼 담백하고 정돈되게장식을 줄이고 제목, 본문, 목록의 구분을 분명하게 해줘. 긴 내용도 훑어보기 쉽게 만들어줘

같은 서비스를 떠올려도 참고하는 화면은 다를 수 있어요. 서비스 이름과 함께 마음에 드는 화면을 캡처해 보내면 원하는 모습을 전달하기 쉬워요.

브랜드 색상 코드와 로고가 있다면 함께 전달해 주세요. 서비스 화면, 무료 자료의 일부, 행사 현장처럼 내용을 이해하는 데 도움이 되는 이미지도 준비하면 좋습니다.

아직 이미지가 없다면 임의의 사진을 넣기보다, 필요한 이미지와 들어갈 위치부터 제안해 달라고 요청해 보세요.

첫 화면부터 만들어 보세요

처음부터 긴 페이지 전체를 만들면 디자인을 바꾸고 싶을 때 수정할 부분도 많아져요.

먼저 첫 화면과 본문 한 구간을 만들어 보고, 글자와 색상, 여백이 마음에 드는지 확인해 보세요.

색상과 분위기는 내 브랜드에 맞게 바꿔 주세요.

클로드의 미리보기로 디자인을 확인한 뒤, 아래 4번의 방법으로 다큐라이즈에서도 의도한 대로 표시되는지 살펴보세요.

확인한 디자인으로 전체 페이지를 완성하세요

첫 화면이 마음에 들면 나머지 페이지를 요청합니다.

4. 다큐라이즈 포스트에 올리고 화면을 확인하세요

클로드가 만든 HTML을 다큐라이즈 포스트에 넣어 주세요.

  1. 새로 만들기 → 누구에게나 자료 공유를 고릅니다
  2. 콘텐츠 설정에서 포스트를 선택합니다
  3. HTML로 수정을 누릅니다
  4. HTML 소스 칸에 클로드가 만든 코드를 붙여넣습니다
  5. 오른쪽 미리보기에서 PC와 모바일을 번갈아 확인합니다
다큐라이즈 포스트 HTML로 수정 화면 아래쪽. 이미지 .zip 올리기 안내, 왼쪽 HTML 소스 칸, 오른쪽 미리보기와 PC·모바일 전환 버튼

이미지가 있다면 준비한 파일을 images 폴더에 담고, 폴더를 압축해 .zip 올리기로 업로드해 주세요.

저장할 때 빠진 코드가 있으면 HTML 소스 아래에 개수가 표시됩니다. 미리보기에서 의도와 다르게 보이는 부분은 클로드에 수정을 요청해 주세요.

아쉬운 부분은 화면을 캡처해 전달하세요

더 예쁘게 해 달라고 하기보다 어디를 어떻게 바꾸고 싶은지 알려 주세요. 다큐라이즈 미리보기를 캡처해 첨부하면 수정할 위치를 전달하기 쉬워요.

화면에서 아쉬운 점수정 요청 예시
첫 화면이 복잡해요첫 화면에는 제목과 짧은 소개만 남기고, 자세한 설명은 아래로 옮겨줘
무엇이 중요한지 모르겠어요핵심 메시지가 먼저 눈에 들어오도록 제목 크기와 색상 강조를 조정해줘
카드가 반복돼 답답해요비교할 정보만 카드로 묶고, 나머지 설명은 제목과 본문으로 풀어줘
모바일 제목이 어색하게 끊겨요첨부 화면을 보고 제목 크기와 줄바꿈을 조정해줘. 문구는 유지해줘
이미지가 너무 작아요이미지 안의 내용을 읽을 수 있도록 크게 보여줘. 모바일에서는 본문 위에 배치해줘
글자가 흐릿해요본문 글자를 더 진하게 조정하고 배경과 구분되게 해줘

고칠 부분과 유지할 부분을 함께 알려 주세요. 제목 크기만 바꾸고 싶다면 나머지 문안, 색상, 배치는 그대로 유지해 달라고 덧붙이면 됩니다.

디자인을 확인한 뒤에는 내용도 다시 읽어 보세요.

  • 처음 방문한 사람도 페이지의 목적을 이해할 수 있나요?
  • 필요한 정보가 빠지거나 같은 설명이 반복되지는 않나요?
  • 제공하지 않은 후기, 수치, 경력이 들어가지는 않았나요?
  • 이미지와 문구가 실제 안내하려는 내용과 맞나요?

5. 신청·결제와 후속 안내를 연결하세요

소개와 안내만 담은 페이지라면 내용을 확인하고 공개하면 됩니다.

관련 자료로 이동하거나 신청·결제를 받아야 한다면 목적에 맞게 연결해 주세요.

관련 페이지나 자료로 연결할 때

HTML 본문의 링크나 버튼에 이동할 주소를 넣으면 됩니다. 직접 코드를 수정하기 어렵다면 클로드에 요청해 보세요.

링크가 여러 개라면 어떤 버튼을 어느 주소로 연결할지 구분해서 알려 주세요.

신청을 받을 때

HTML 본문 안에는 입력칸을 넣을 수 없으므로, 다큐라이즈 신청 폼을 만들고 페이지의 버튼에 연결합니다.

  1. 새로 만들기 → 신청 폼 만들기로 신청 폼을 만듭니다
  2. 이름·이메일과 신청자에게 물을 질문을 정합니다
  3. 게시한 신청 폼의 주소를 복사합니다
  4. 포스트 본문의 신청 버튼에 해당 주소를 넣습니다

스크롤해도 신청 버튼이 보이게 하려면 팝업 / 배너 → 플로팅 버튼을 켜고 같은 신청 폼 주소를 넣어 주세요.

팝업 배너 탭의 플로팅 버튼 설정. 버튼 텍스트, 설명, 버튼에 들어갈 링크 입력칸

버튼 문구와 설명, 연결할 주소를 입력한 뒤 PC와 모바일 미리보기를 확인하세요.

신청 직후 안내 메일을 보내려면 자동화에서 보낼 시점을 폼 제출 시로 선택하고 해당 신청 폼을 연결합니다.

자료 링크, 행사 참여 방법, 앞으로 받을 안내처럼 신청자가 알아야 할 내용을 담아 주세요.

자세한 순서는 이메일 자동화, 다큐라이즈에서 5분만에 세팅하기에서 확인할 수 있어요.

상품을 판매할 때

상품을 판매한다면 자료 판매하기에서 상세페이지와 결제 폼을 함께 만들 수 있어요. 이때도 클로드가 만든 HTML을 사용할 수 있습니다.

  1. 새로 만들기 → 자료 판매하기를 선택합니다
  2. 상세 페이지와 함께를 고릅니다
  3. 2단계 판매 옵션에서 결제 폼의 제목, 받을 정보, 상품과 가격을 입력합니다
  4. 3단계 상세 페이지 → HTML로 수정에서 코드를 붙여넣습니다
자료 판매하기 3단계 상세 페이지 화면. 본문 편집 방식에서 HTML로 수정을 고르고, 오른쪽 상세 페이지 미리보기 아래에 구매하기 버튼이 보인다

이 방법으로 만들면 상세페이지 아래의 플로팅 구매 버튼이 2단계에서 만든 결제 폼으로 자동 연결돼요.

HTML 본문에도 구매 버튼을 넣었다면, 게시한 뒤 해당 결제 폼 주소를 본문 버튼의 링크에 넣어 주세요.

플로팅 구매 버튼 설정. 버튼 텍스트 구매하기, 설명 칸, 버튼과 글자 색상, 버튼에 들어갈 링크는 2단계에서 만든 판매 페이지로 자동 연결된다는 안내

본문의 구매 버튼과 다큐라이즈가 제공하는 플로팅 구매 버튼을 각각 눌러, 같은 결제 폼으로 연결되는지 확인해 주세요.

결제 후 안내는 5단계 팔로업 캠페인이나 자동화 → 결제 완료 시에서 설정합니다.

자료 링크, 수강 방법, 참여 안내 등 구매자가 이용에 필요한 내용을 담아 주세요. 결제 확인 이메일과 별도 자동화를 함께 사용한다면 안내가 빠지거나 중복되지 않는지도 살펴보세요.

5단계의 결제 확인 이메일은 처음에 꺼져 있어요. 제목과 본문을 입력하고 직접 켜야 발송됩니다.

자세한 설정은 다큐라이즈 유료 판매 자료 세팅 가이드에서 확인할 수 있어요.

6. 공개한 페이지를 직접 확인하고 반응을 살펴보세요

미리보기에서 잘 보이더라도, 다른 사람에게 링크를 공유하기 전에 공개한 페이지를 직접 확인해 주세요.

확인할 것점검 방법
내용소개, 일정, 제공 내용 등 안내한 정보가 정확한지 읽어 봅니다
모바일 화면글자가 읽기 편한지, 제목과 버튼이 잘리지 않는지 확인합니다
이미지업로드한 이미지가 모두 표시되는지 확인합니다
링크본문 링크와 버튼을 각각 눌러 봅니다. 임시 링크나 예시 주소가 남아 있지 않은지도 확인합니다
방문자 화면시크릿 창에서 공유할 주소를 열어 방문자에게 보이는 화면을 확인합니다

신청 폼이나 결제 폼을 연결했다면 해당 과정도 테스트해 주세요.

  • 신청 페이지: 직접 신청한 뒤 리드 등록 여부와 안내 메일 수신 여부를 확인해요
  • 판매 페이지: 테스트 결제 후 주문 기록과 후속 안내를 확인해요. 테스트 주문은 확인 후 환불 처리합니다

공개한 뒤에는 고객의 반응도 확인하세요

페이지를 공유한 뒤에는 실제로 어떤 반응이 있었는지 살펴보세요.

신청 내역과 주문 내역에서 참여와 구매 결과를 확인할 수 있어요. 팝업·배너·플로팅 버튼을 사용했다면 팝업 / 배너 탭의 버튼 클릭 분석도 함께 살펴보세요.

어떤 안내에 반응했는지, 신청이나 구매는 얼마나 있었는지 확인하고 다음 모집과 판매에 참고해 보세요.

복사·붙여넣기 없이 만들고 싶다면

클로드에 다큐라이즈를 연결하면 계정에 직접 작업을 요청할 수도 있어요. 이런 연결 방식을 MCP라고 합니다.

연결한 뒤에는 클로드에 포스트와 폼, 안내 메일 초안을 만들어 달라고 요청할 수 있어요.

클로드 웹의 커스텀 커넥터에 아래 정보를 입력해 연결합니다.

  • 이름: DocuRise
  • 서버 주소: https://docurise.io/api/mcp

다큐라이즈 승인 화면에서는 읽기 및 쓰기 권한을 선택해 주세요. 읽기 권한으로 연결하면 조회만 할 수 있어요.

화면별 연결 순서와 지원 여부는 AI 앱에서 DocuRise 사용하기 가이드에서 확인해 주세요.

문안과 디자인을 확인한 뒤 생성을 요청하세요

연결해서 작업할 때도 페이지의 목적과 문안, 디자인을 먼저 정해 주세요.

내용을 확인했다면 실제 생성을 요청합니다.

필요하다면 신청 폼과 안내 메일도 이어서 만들어 달라고 요청할 수 있어요.

연결해서 작업할 때는 다음 사항을 확인해 주세요.

  • 포스트와 폼은 만들어지는 즉시 공개돼요. 대화에서 내용을 충분히 확인한 뒤 생성을 요청해 주세요
  • 메일 자동화는 꺼진 상태로 만들어져요. 대시보드에서 내용과 발송 대상을 확인한 뒤 직접 켜야 합니다
  • 판매 페이지는 결제 폼 연결 후 수정 방법에 제한이 있어요. 연결 후에는 상세페이지 본문과 버튼을 대시보드에서 수정해야 하므로, 먼저 문안과 디자인을 확인해 주세요

상품 판매까지 요청하려면 계정에서 판매 기능을 사용할 수 있는지도 확인해 주세요.

판매 기능은 현재 일부 계정에 먼저 제공하고 있어요. 자료 판매하기가 출시 예정으로 표시된다면 다큐라이즈에 문의해 주세요.

지금 필요한 페이지 하나부터 만들어 보세요

브랜드 소개, 무료 자료 안내, 웨비나 모집, 상품 판매까지. 먼저 누구에게 무엇을 보여줄 페이지인지 정해 보세요.

클로드와 문안을 다듬고, 마음에 드는 화면을 참고해 원하는 디자인을 요청해 보세요. 첫 화면부터 확인하면 수정할 부분도 구체적으로 찾을 수 있어요.

완성한 페이지는 다큐라이즈에서 공개하고, 신청·결제와 후속 안내까지 연결해 보세요. 페이지를 본 사람의 반응을 확인하며 다음 안내도 준비할 수 있습니다.

지금 안내하고 싶은 내용 하나로 시작해 보세요.

함께 보면 좋은 글

다큐라이즈 팀

자료 공유부터 리드 수집, 후속 메시지까지. 콘텐츠가 고객으로 이어지는 흐름을 만듭니다.

다큐라이즈 팀의 글 더 보기

관련 게시물

내 시간을 파는 일을 멈추기로 했습니다

다큐라이즈 활용사례

13년 차 교육자의 새로운 도전, 직접 가르치던 노하우를 '내가 빠져도 팔리는 상품'으로

다큐라이즈 팀2026년 11월 13일
검은 배경 가운데 Guide 표시와 전체 발송 대신 필요한 분께만 안내하기 문구

다큐라이즈 가이드

신청자가 모이기 시작했다면? 다큐라이즈 그룹·태그로 필요한 안내 보내기

다큐라이즈 팀2026년 11월 13일