소개
시도하고자 했던 것과 그 이유를 알려주세요.
랜딩 페이지란 것이 무엇인지도 몰랐는데, 랜딩페이지 개념을 익히고 AI 통해서 어떻게 만드는지 체험해 보는 것이 목적이었음
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
ChatGPT를 사용했고, 스터디장님께서 만드신 STP Analysis Assistant GPT를 이용했습니다.
사용한 프롬프트와 과정을 공유합니다.
메시지 문구가 마음에 들지 않아서 계속 수정을 요청해서 다듬었습니다.
https://chatgpt.com/share/67347fa8-0738-8004-9f44-e551b38dcd73
코드는 ChatGPT에게 물어봐서 만들었습니다.
<meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>당뇨와 합병증 예방을 위한 한약 치료 | 체질 맞춤 한방 관리 </title> <header> <h1>당뇨와 합병증을 한약으로 잡아라 </h1> <p>체질에 맞춘 한약 치료와 생활 개선으로 건강한 삶을 시작하세요 </p> <a href="#consult" class="cta-button">무료 상담 신청하기</a> </header> <div class="container"> <!-- Section 1: 문제 제기 --> <section id="problem" class="section"> <h2 id="ii5tk">당뇨와 합병증, 걱정되지 않으세요? </h2> <p> 당 뇨는 단순히 혈당 수치만의 문제가 아닙니다. <strong>합병증의 위험</strong>을 피하고자 한다면, 체질에 맞춘 한약 치료로 근본부터 관리하세요. 기존의 억제 방법이 아닌, 당신의 체질에 맞는 진정한 건강 솔루션을 제공합니다. </p> </section> <!-- Section 2: 솔루션 소개 --> <section id="solution" class="section"> <h2>체질 맞춤 한약 치료로 당뇨 관리 </h2> <p> 저희 한의원에서는 <strong>체질에 맞춘 한약</strong>을 통해 당뇨와 합병증을 근본적으로 관리합니다. 단순히 증상을 억제하는 것이 아니라, 몸 속부터 건강을 되찾도록 돕습니다. 당뇨의 근본적인 문제를 해결하여 <strong>합병증 없는 삶</strong>을 시작하세요! </p> <a href="#consult" class="highlight">지금 바로 상담 신청하고 내 몸에 맞는 맞춤형 치료를 경험해보세요!</a> </section> <!-- Section 3: 성공 사례 --> <section id="testimonials" class="section"> <h2>체질 맞춤 한약 치료로 변화를 경험한 고객들 </h2> <div class="testimonial"> <h3>김상훈 (52세) </h3> <p id="ihuyg"> "약물에만 의존하지 않고 혈당 관리를 시작하면서 삶의 질이 훨씬 좋아졌습니다. <b>체질에 맞는 한약이 이렇게까지 효과가 좋을 줄 몰랐습니다. </b> <u>한약 덕분에 합병증 걱정도 덜어내고 건강을 되찾았습니다. </u>" </p> </div> <div class="testimonial"> <h3>박민희 (45세) </h3> <p id="in2vi"> "매일 걱정했던 당뇨와 합병증... <b>한방 치료로 체질에 맞는 관리를 하면서 마음의 평화를 찾았습니다 </b>. <u>이제는 더 이상 당뇨가 무섭지 않습니다! </u>" </p> </div> </section> <!-- Section 4: 상담 유도 CTA --> <section id="consult" class="section"> <h2>건강한 삶을 위한 첫걸음, 지금 바로 시작하세요! </h2> <p> 당뇨와 합병증에 대한 두려움을 해결하는 방법, 지금 바로 상담을 통해 알아보세요. 당신의 체질에 맞춘 한약 치료로 당뇨를 근본부터 관리해드립니다. </p> <a href="#" class="cta-button">무료 상담 신청하기</a> </section> </div> <footer> <p>© 2023 한의원. 모든 권리 보유. </p> </footer> <style>* { box-sizing: border-box; } body { margin: 0; } body{ font-family:Arial, sans-serif; line-height:1.6; color:#333; margin:0; padding:0; } header{ background:#4a90e2; color:#fff; padding:30px 0; text-align:center; } header h1{ font-size:2.5em; margin:0; } header p{ font-size:1.2em; margin:10px 0; } .container{ width:90%; max-width:1200px; margin:0 auto; padding:20px 0; } .section{ padding:40px 0; text-align:center; } .section h2{ font-size:2em; color:#4a90e2; margin-bottom:20px; } .section p{ font-size:1.1em; color:#555; max-width:800px; margin:0 auto; } .highlight{ background:#4a90e2; color:#fff; padding:15px 25px; font-size:1.2em; display:inline-block; border-radius:5px; margin-top:20px; } .cta-button{ background:#f44336; color:#fff; padding:15px 30px; font-size:1.3em; font-weight:bold; border:none; border-radius:5px; margin-top:20px; cursor:pointer; transition:background 0.3s ease; text-decoration:none; display:inline-block; } .cta-button:hover{ background:#d32f2f; } .testimonial{ background:#f9f9f9; padding:20px; margin:20px auto; border-radius:5px; text-align:left; max-width:800px; } .testimonial h3{ font-size:1.5em; color:#4a90e2; margin-bottom:10px; } footer{ background:#333; color:#fff; padding:20px 0; text-align:center; } footer p{ margin:0; } </style>
결과물을 VS code에 저장해서 html 파일로 만들었습니다.
결과물 capture한 것입니다.
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
처음 해보면서 랜딩페이지의 개념 및 구성 요소들에 대해서 배웠습니다.
실패담도 괜찮아요. 시행착오나 도움이 필요한 부분이 있나요?
리드젠에서 스마트형 랜딩 페이지로 만들었는데 결과 저장을 어떻게 하는지 모르겠어서 완성을 못했습니다. 알려주시면 좋겠습니다. 감사합니다.
앞으로의 계획이 있다면 들려주세요.
댓글 추출기 등 스터디장님께서 알려주신 방법들을 적용해서 더 업그레이드 해보고 싶습니다.
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
https://www.gpters.org/marketing/post/creating-landing-page-office-lViQ3eJNX1dnAFa
(영상) 1주차 댓글 추출하여 랜딩페이지 카피 html 코드 만들기 https://youtu.be/u7mT_3eShkI?si=vSzZ8Ymk4o14Qo1-&t=1385
