소개
시도하고자 했던 것과 그 이유를 알려주세요.
지난 번 만든 랜딩페이지 만드는 법을 개선하면서 제대로 만들어보는 것에 초점을 맞추었습니다.
그리고 다른 분들 만든 것들 사례 보면서 괜찮은 내용들 배우고 익혀서 제 랜딩 페이지를 만드는 데 참고했습니다.
불면증 치료에 특화된 한의원을 소개하는 랜딩페이지를 만들고자 했고, 나중에 한의원 마케팅에 활용할 생각으로 미리 연습해봤습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
ChatGPT만 사용했었는데 이번에는 Claude로 갈아타봤습니다.
그리고 AI에게 모든 것을 맡기는 것 보다는 제가 랜딩페이지에 들어갈 요소들을 먼저 머리속으로 구상한 후, 필요한 것들은 하나하나 단계별로 Claude에게 요청하는 형태로 진행했습니다. 이 방법이 훨씬 더 제가 원하는 방향으로 작업을 진행할 수 있었고, Contents quality도 올라가는 것 같습니다.
이렇게 제가 주도적으로 내용 및 구성 요소를 결정하면서 단계별로 contents를 만들었고, 이를 바탕으로 코드를 짜달라고 요청했습니다.
import React from 'react';
import { MoonIcon, LeafIcon, HeartPulseIcon, BrainIcon, StarIcon, PhoneIcon } from 'lucide-react';
export default function LandingPage() {
return (
<div className="min-h-screen bg-white">
{/* Hero Section */}
<section className="relative bg-blue-900 text-white py-24">
<div className="container mx-auto px-6">
<h1 className="text-4xl md:text-5xl font-bold leading-tight mb-8 max-w-3xl">
끝없이 이어지는 불면과 뒤척임의 밤,<br />
이제 편안한 꿀잠으로 바꿔드립니다
</h1>
<button className="bg-yellow-500 text-blue-900 px-8 py-4 rounded-lg font-bold text-lg hover:bg-yellow-400 transition-colors">
무료 상담 예약하기
</button>
</div>
</section>
{/* Why Choose Us */}
<section className="py-20 bg-gray-50">
<div className="container mx-auto px-6">
<h2 className="text-3xl font-bold text-center mb-16">왜 꿀잠 한의원인가요?</h2>
<div className="grid md:grid-cols-2 gap-8">
{/* Feature 1 */}
<div className="bg-white p-8 rounded-xl shadow-lg">
<div className="flex items-center mb-6">
<HeartPulseIcon className="w-8 h-8 text-blue-900 mr-4" />
<h3 className="text-xl font-bold">맞춤형 한약과 침 치료로 근본 원인 해결</h3>
</div>
<ul className="space-y-3 text-gray-600">
<li>• 개인별 불면 원인에 따른 맞춤 처방</li>
<li>• 과도한 긴장과 스트레스를 풀어주는 전문 침술</li>
<li>• 불안감과 걱정을 덜어주는 천연 한약 처방</li>
<li>• 교감신경 안정화로 수면 품질 개선</li>
</ul>
</div>
{/* Feature 2 */}
<div className="bg-white p-8 rounded-xl shadow-lg">
<div className="flex items-center mb-6">
<LeafIcon className="w-8 h-8 text-blue-900 mr-4" />
<h3 className="text-xl font-bold">건강한 수면을 위한 자연주의 식이요법</h3>
</div>
<ul className="space-y-3 text-gray-600">
<li>• 수면제 없이도 편안한 숙면 관리</li>
<li>• 수면의 질을 높이는 맞춤형 식단 제안</li>
<li>• 카페인과 음식 섭취 관리 가이드</li>
<li>• 체질에 맞는 수면 개선 차(茶) 처방</li>
</ul>
</div>
{/* Feature 3 */}
<div className="bg-white p-8 rounded-xl shadow-lg">
<div className="flex items-center mb-6">
<MoonIcon className="w-8 h-8 text-blue-900 mr-4" />
<h3 className="text-xl font-bold">전신 이완 프로그램으로 편안한 잠자리 준비</h3>
</div>
<ul className="space-y-3 text-gray-600">
<li>• 숙면을 돕는 전문가 지도 스트레칭</li>
<li>• 잠들기 전 긴장 해소를 위한 이완 운동</li>
<li>• 수면 자세 교정으로 숙면 유도</li>
<li>• 호흡법과 연계한 몸매 관리까지</li>
</ul>
</div>
{/* Feature 4 */}
<div className="bg-white p-8 rounded-xl shadow-lg">
<div className="flex items-center mb-6">
<BrainIcon className="w-8 h-8 text-blue-900 mr-4" />
<h3 className="text-xl font-bold">마음의 안정을 찾는 한방 명상</h3>
</div>
<ul className="space-y-3 text-gray-600">
<li>• 오래된 불면 습관 개선</li>
<li>• 잠들기 전 마음 다스리기</li>
<li>• 전통 한의학의 명상법 전수</li>
<li>• 수면 전 루틴 확립</li>
</ul>
</div>
</div>
</div>
</section>
{/* Testimonials */}
<section className="py-20 bg-white">
<div className="container mx-auto px-6">
<h2 className="text-3xl font-bold text-center mb-16">실제 꿀잠 한의원 치료 후기</h2>
<div className="grid md:grid-cols-2 gap-8">
{/* Testimonial 1 */}
<div className="bg-gray-50 p-8 rounded-xl">
<div className="flex items-center mb-4">
<StarIcon className="w-6 h-6 text-yellow-500" />
<span className="ml-2 font-bold">40대 직장인 김OO 님</span>
</div>
<p className="text-gray-600 mb-4">
"20년 가까이 지속된 만성 불면증으로 매일 수면제를 복용했었습니다. 일에 대한 스트레스와 걱정으로 잠들기까지 2-3시간은 기본이었죠. 꿀잠 한의원의 맞춤형 한약과 침 치료를 받으면서 처음으로 수면제 없이도 푹 잘 수 있게 되었습니다. 특히 퇴근 후 하는 전신 이완 운동이 많은 도움이 되었어요. 이제는 피로가 풀리는 듯한 숙면을 취하고 있습니다."
</p>
<p className="text-blue-900 font-medium">
4개월 치료 후 수면제 복용 중단, 입면 시간 30분 이내로 단축
</p>
</div>
{/* Testimonial 2 */}
<div className="bg-gray-50 p-8 rounded-xl">
<div className="flex items-center mb-4">
<StarIcon className="w-6 h-6 text-yellow-500" />
<span className="ml-2 font-bold">28세 대학원생 이OO 님</span>
</div>
<p className="text-gray-600 mb-4">
"논문 준비하면서 불안과 긴장으로 잠들기가 너무 힘들었어요. 잠들었다 해도 자주 깨고 꿈을 많이 꿔서 피로가 쌓였죠. 꿀잠 한의원의 한약 치료와 명상 프로그램을 병행하면서 마음이 차분해지고 수면의 질이 정말 좋아졌습니다. 식이요법 프로그램으로 커피 조절하는 법도 배웠는데, 덕분에 더 깊은 잠을 잘 수 있게 되었어요!"
</p>
<p className="text-blue-900 font-medium">
2개월 치료 후 수면 시간 6시간 이상 유지, 중간 기상 횟수 감소
</p>
</div>
</div>
</div>
</section>
{/* FAQ */}
<section className="py-20 bg-gray-50">
<div className="container mx-auto px-6">
<h2 className="text-3xl font-bold text-center mb-16">자주 묻는 질문 (FAQ)</h2>
<div className="max-w-3xl mx-auto space-y-8">
<div className="bg-white p-6 rounded-xl shadow-lg">
<h3 className="font-bold text-lg mb-3">불면증 한방 치료는 얼마나 걸리나요?</h3>
<p className="text-gray-600">
증상과 원인에 따라 개인차가 있지만, 보통 4-8주 정도의 치료로 뚜렷한 개선 효과를 보실 수 있습니다. 현재 복용 중인 수면제가 있으신 분들은 단계적인 감량과 함께 6-12주의 치료 기간을 권장해 드립니다. 첫 진료 시 정확한 상담을 통해 예상 치료 기간을 안내해 드립니다.
</p>
</div>
<div className="bg-white p-6 rounded-xl shadow-lg">
<h3 className="font-bold text-lg mb-3">현재 수면제를 복용 중인데 한방 치료를 받아도 될까요?</h3>
<p className="text-gray-600">
네, 가능합니다. 꿀잠 한의원은 수면제를 복용 중이신 분들을 위 한 맞춤 프로그램을 운영하고 있습니다. 갑작스러운 수면제 중단은 위험할 수 있어, 한방 치료와 함께 단계적으로 수면제를 줄여나가는 안전한 방법을 제시해 드립니다. 복용 중인 약물 정보를 첫 진료 시 꼭 말씀해 주세요.
</p>
</div>
<div className="bg-white p-6 rounded-xl shadow-lg">
<h3 className="font-bold text-lg mb-3">한약은 매일 복용해야 하나요? 평소 한약을 잘 못 먹는데 걱정됩니다.</h3>
<p className="text-gray-600">
개인의 상황과 증상에 따라 복용법을 조절해 드립니다. 한약을 처음 접하시는 분들을 위해 복용하기 편한 농축액 형태나 혼합차 형태로도 처방이 가능합니다. 한약 이외에도 침 치료, 이완 운동, 명상 등 다양한 치료법을 병행하여 불면 증상을 개선해 드리니 걱정하지 않으셔도 됩니다.
</p>
</div>
</div>
</div>
</section>
{/* CTA Section */}
<section className="bg-blue-900 text-white py-16">
<div className="container mx-auto px-6 text-center">
<h2 className="text-3xl font-bold mb-8">지금 바로 무료 상담을 신청하세요</h2>
<p className="text-xl mb-8">
전문 한의사가 귀하의 수면 고민을 상담해드립니다
</p>
<div className="flex flex-col md:flex-row justify-center items-center gap-4">
<button className="bg-yellow-500 text-blue-900 px-8 py-4 rounded-lg font-bold text-lg hover:bg-yellow-400 hover:scale-105 hover:shadow-lg transition-transform transition-shadow duration-300 focus:outline-none focus:ring-4 focus:ring-yellow-300 flex items-center">
<PhoneIcon className="w-6 h-6 mr-2" />
무료 상담 예약하기
</button>
</div>
</div>
</section>
</div>
);
}이렇게 코드를 만든 후에 리드젠에 입력을 했는데 에러가 나서 안되더라고요.
그래서 뭐가 문제인지 고민하다가 리드젠 사용법을 잘 모른다는 판단하에 리드젠 이명신 대표님의 사용법 특강을 수강했습니다. 그결과 리드젠 사용법을 좀 알게 되었고, 이에 기반해서 claude가 짜준 코드는 html이 아니라 js였다는 것을 알게 되어, 다시 html로 짜달라고 요청했고, 리드젠 블로그형 랜딩페이지 만드는 곳에서 html 탭을 열고 복사해서 미리보기를 했더니 이제서야 되더군요.
코드를 복사해서 ChatGPT에게 이건 어떤 언어로 짜준 코드인지 물어봤더니,
위에 제시된 코드는 React.js라는 JavaScript 라이브러리를 사용하여 작성된 React 컴포넌트 코드입니다. React는 사용자 인터페이스(UI)를 구축하기 위한 라이브러리로, 특히 단일 페이지 애플리케이션(SPA, Single Page Application) 개발에 주로 사용됩니다. 라고 해서 새로 하나 더 배웠습니다.
그리고 다른 언어로 짜준 코드를 html처럼 내가 원하는 언어로 바꾸어서 다시 짤 수 있다는 점, 그리고 언어가 다르더라도 결국에는 서로 서로 비슷한 것 같다는 점을 배울 수 있었습니다.
하이젠버그님 3주차 사례에서 hover 기능이라는 것을 배워서 저도 적용해보고 싶어서 마지막 신청 버튼에 hover 기능을 추가했습니다. ChatGPT에게 hover 기능 추가해달라고 코드를 요청해서 새로 만들어진 코드를 원 래의 코드에서 부분 편집해서 집어넣었습니다. 그러면서 코드라는 것이 부분 부분으로 구획되어서 이루어져 있기 때문에 부분 부분 편집이 가능하다는 것을 깨달을 수 있었습니다.
또한, 리드젠에서 직접 편집 기능 이용해서 글씨 크기나 색깔 등을 수정하면 바로 반영이 된다는 것을 알 수 있었고,(아마도 이때 리드젠에서 코드도 같이 수정해주는 것이라고 추측되네요)
불면증을 표현하는 재미있고 위트있는 그림도 하나 넣어주면 좀 더 재미있고 호소력있는 랜딩페이지가 되겠다고 생각해서 DALLE에게 요청해서 그림도 하나 추가해서 넣었습니다.
이렇게 보완하고 다듬어서 성공적으로 리드젠에 올릴 수 있었습니다.
결과와 배운 점
ChatGPT, Claude, Perplexity 등을 자유자재로 번갈아가면서 쓰는 것이 좋다. (각각의 장점이 다르고 스타일도 다르므로 내가 원하는 것을 얻기 위해서는 두루두루 쓰는 것이 좋다.)
AI에게 100% 의존하는 것보다 내가 주도적으로 밑그림을 그리고 AI가 세부 내용을 채우는 형태가 훨씬 더 contents quality가 좋은 것 같음
코딩이라는 것이 내가 좀 더 관심갖고 좀만 더 공부하면 코딩 문외한도 AI 도움 받아가면서 어느 정도는 직접 할 수 있는 영역인 것 같음. 그러니 도전하자!
리드젠은 퍼널 마케팅을 하는데 있어서 쓸모있는 도구인 것 같음
랜딩페이지가 끝이 아니라 뒤의 여러 단계들이 필요하고 이를 연속적으로 이어가면서 만들어야 퍼널 마케팅이 완성되고, 이때 자동화가 중요함
도움 받은 글 (옵션)
리드젠 사용법 특강 by 리드젠 대표님
리드젠에서 제공된 랜딩페이지 CTA 버튼 적용, 꾸미기 by 하이젠버그