광고는 다음 주부터 돌려야 하는데 랜딩페이지가 없어서 밤에 잠이 안 오던 때가 있었어요. 외주 견적은 부르는 곳마다 다르고, 노코드 툴은 뭘 골라야 할지 몰라서 비교만 하다 하루가 갔죠. 결론부터 말하면, 코딩을 전혀 모르는 저도 Claude Code에 한국어로 요청하는 방식으로 랜딩페이지를 직접 만들 수 있었어요. 다만 3분 만에 뚝딱은 아니었고, 꼬박 3일간의 시행착오가 있었어요. 이 글은 그 과정에서 실제로 쓴 프롬프트, 겪은 오류, 외주와 비교한 비용까지 숨김없이 적은 기록이에요.
- 랜딩페이지, 상세페이지랑 뭐가 다른 걸까
- 외주 견적 받아보고 직접 만들기로 한 이유
- 첫 프롬프트, 이렇게 던졌어요
- 사흘 동안 겪은 삽질 3가지와 해결법
- 전환율을 좌우한 건 코드가 아니라 문장이었어요
- 완성 후 점검부터 무료 배포까지
- 자주 묻는 질문
랜딩페이지, 상세페이지랑 뭐가 다른 걸까
📌 핵심 요약
랜딩페이지는 방문자가 딱 한 가지 행동만 하게 설계한 원페이지이고, 코딩을 몰라도 Claude Code에 한국어로 요청하면 직접 만들 수 있어요. 저는 3일 걸렸어요.
처음엔 저도 랜딩페이지와 상세페이지를 같은 말인 줄 알았어요. 그런데 만들다 보니 완전히 다르더라고요. 랜딩페이지는 광고나 링크를 클릭한 사람이 처음 도착하는 페이지예요. 목표는 딱 하나, ‘신청하기’든 ‘구독하기’든 정해둔 행동 하나를 하게 만드는 거예요.
반면 상세페이지는 쇼핑몰에서 상품 하나를 길게 설명하는 페이지고, 홈페이지는 메뉴가 여러 개라 출구도 여러 개예요. 랜딩페이지는 출구가 하나뿐이라는 게 핵심이에요. 그래서 메뉴바를 아예 빼는 경우도 많아요.
이 구분이 중요한 이유는 돈 때문이에요. 클릭당 몇백 원씩 내는 광고를 홈페이지로 연결하면, 방문자가 여기저기 구경만 하다 나가버려요. 목표 하나에 집중한 랜딩페이지로 보내야 같은 광고비로 더 많은 신청을 받을 수 있어요. 저도 이걸 알고 나서야 ‘왜 다들 랜딩페이지 제작부터 하라고 하는지’ 이해가 됐어요.
외주 견적 받아보고 직접 만들기로 한 이유
처음엔 저도 외주부터 알아봤어요. 크몽과 숨고에서 견적을 요청해 보니 단순한 원페이지 기준으로 대략 30만 원대부터 시작했고, 기획과 카피까지 맡기면 100만 원을 훌쩍 넘는 견적도 왔어요. 작업 기간은 보통 1~2주였고요. 에이전시급은 200만 원 이상 부르는 곳도 있었어요.
문제는 비용보다 수정이었어요. 만들고 나서 문구 하나 바꾸려 해도 건당 추가 비용이 붙거나 며칠을 기다려야 한다는 후기가 많았거든요. 랜딩페이지는 반응 보면서 계속 고쳐야 하는 물건인데, 이건 치명적이라고 느꼈어요.
| 제작 방법 | 예상 비용 | 기간 | 수정 자유도 |
|---|---|---|---|
| 외주(크몽·숨고) | 약 30만~150만 원 | 1~2주 | 낮음(건당 추가 비용) |
| 노코드 빌더(아임웹·윅스 등) | 월 구독료(플랜별 상이) | 하루~이틀 | 중간(템플릿 범위 안) |
| Claude Code 직접 제작 | 도구 구독료 수준(공식 홈페이지 확인) | 저는 3일 | 높음(말로 무제한 수정) |
노코드 빌더도 진지하게 고민했어요. 아임웹이나 윅스는 확실히 빠르고 예쁜데, 템플릿 틀을 벗어나는 순간 답답해진다는 게 걸렸어요. 마침 워드프레스 블로그를 만들면서 Claude Code를 쓰고 있었으니, 이걸로 랜딩페이지 제작까지 되는지 직접 검증해 보기로 했어요. 실패해도 배우는 게 남으니까요.
첫 프롬프트, 이렇게 던졌어요
첫날 저지른 실수부터 고백할게요. 무작정 ‘랜딩페이지 만들어줘’라고 입력했더니, 영어 더미 텍스트로 채워진 밋밋한 페이지가 나왔어요. 틀리진 않았는데 제 비즈니스랑 아무 상관이 없는 결과물이었죠. AI는 제가 말해주지 않은 건 모른다는 당연한 사실을 여기서 배웠어요.
그래서 프롬프트를 다시 썼어요. 실제로 효과를 본 문장은 이거예요. 「1인 창업자를 위한 온라인 클래스 신청 랜딩페이지를 만들어줘. 섹션은 히어로, 문제 공감, 해결책 소개, 수강 후기, 신청 폼 순서로 구성해. 모바일 우선 반응형으로 HTML 파일 하나에 담고, 버튼은 무료 체험 신청 하나만 넣어줘.」 이렇게 구체적으로 쓰자 결과물의 수준이 완전히 달라졌어요.
기획 메모부터 손으로 쓰기
누구에게, 어떤 행동 하나를 시킬지, 핵심 문구는 뭔지 세 줄로 정리해요. 이게 없으면 AI도 헤매요.
섹션 구조를 순서대로 지정하기
히어로 → 문제 공감 → 해결책 → 후기 → 신청 폼처럼 섹션 이름을 순서대로 불러주면 뼈대가 잡혀요.
조건을 명시해서 요청하기
모바일 우선 반응형, HTML 파일 하나, 버튼은 하나. 조건 세 개만 붙여도 결과물이 실전용에 가까워져요.
브라우저로 열어보고 한 가지씩 수정 요청
만들어진 HTML 파일을 더블클릭해 브라우저로 확인하고, 고칠 점을 한 번에 하나씩만 말해요.
여기서 나올 만한 질문 하나. ‘HTML을 모르는데 결과물을 어떻게 확인하나요?’ 저도 몰랐는데, 만들어진 파일을 그냥 더블클릭하면 브라우저에서 열려요. 코드를 읽을 필요 없이 화면만 보고 판단하면 돼요.
사흘 동안 겪은 삽질 3가지와 해결법
첫 번째 삽질은 모바일 화면 깨짐이었어요. 컴퓨터에서는 멀쩡한데 제 폰으로 열어보니 글자가 화면 밖으로 삐져나가더라고요. 「모바일 화면에서 히어로 섹션 글자가 잘려. 화면 폭에 맞게 고쳐줘」라고 증상을 그대로 설명하니 한 번에 해결됐어요. 크롬에서 F12를 누르면 나오는 개발자 도구의 휴대폰 모양 아이콘으로 모바일 화면을 미리 확인하는 방법도 이때 익혔어요.
두 번째는 이미지가 안 뜨는 문제였어요. 원인은 허무하게도 이미지 파일을 다른 폴더에 둔 것. HTML 파일과 같은 폴더에 이미지를 넣고 파일 이름을 정확히 알려주니 바로 표시됐어요. 경로라는 개념을 여기서 처음 체감했네요.
세 번째가 제일 뼈아팠어요. 둘째 날 욕심이 나서 「색도 바꾸고 폰트도 바꾸고 섹션도 추가해줘」라고 한 번에 다 요청했더니, 잘 되던 부분까지 뒤엉켜버렸어요. 결국 전날 버전으로 되돌리고 처음부터 다시 했어요. 이후로는 수정 요청을 무조건 하나씩만 던졌고, 그 뒤로는 큰 사고가 없었어요.
⚠️ 주의사항
수정 요청 전에 잘 되는 버전의 파일을 복사해 백업해 두세요. 저처럼 한 번에 여러 개를 고치다 꼬이면, 백업이 있어야 몇 시간을 아낄 수 있어요.
전환율을 좌우한 건 코드가 아니라 문장이었어요
사흘째 되니 페이지 모양은 그럴듯해졌는데, 지인들에게 보여주자 반응이 미지근했어요. ‘그래서 이거 누르면 뭐가 좋은데?’라는 질문을 듣고 깨달았어요. 랜딩페이지 제작에서 진짜 어려운 건 코드가 아니라 첫 화면의 문장이라는 걸요.
히어로 섹션은 방문자가 3초 안에 ‘나한테 뭐가 좋은지’를 판단하는 자리예요. 저는 ‘온라인 클래스 오픈’이라는 공급자 시점의 문구를 ‘퇴근 후 2시간, 내 첫 사이드프로젝트 만들기’라는 독자 시점 문구로 바꿨어요. CTA 버튼도 ‘제출’에서 ‘무료 체험 신청하기’로 바꿨고요. 버튼 하나에 얻는 것과 비용(무료)을 함께 담는 게 요령이더라고요.
사회적 증거도 넣었어요. 후기가 아직 없다면 참여 인원 수, 운영 기간 같은 사실 기반 숫자라도 넣는 게 낫고, 없는 후기를 지어내는 건 절대 금물이에요. 신청 폼은 이름과 이메일 두 칸으로 줄였어요. 입력칸이 하나 늘 때마다 이탈이 늘어난다는 이야기를 여러 자료에서 봤는데, 실제로 주변 테스트에서도 두 칸짜리가 반응이 좋았어요.
💡 꼭 알아두세요
문구 고민이 될 때는 Claude Code에 「이 헤드라인을 고객 관점으로 5가지 버전 써줘」라고 요청해 보세요. 그중 하나를 고르고 다듬는 방식이 백지에서 쓰는 것보다 훨씬 빨라요.
완성 후 점검부터 무료 배포까지
완성했다고 끝이 아니었어요. 광고를 태우기 전에 점검할 게 두 가지 있었는데, 로딩 속도와 모바일 화면이에요. 구글의 PageSpeed Insights에 주소를 넣으면 속도 점수를 무료로 알려줘요. 저는 첫 측정에서 이미지 용량이 크다는 지적을 받고, 이미지를 압축해 다시 올렸더니 모바일 점수가 눈에 띄게 올랐어요.
배포는 생각보다 간단했어요. HTML 파일 하나짜리 랜딩페이지라면 GitHub Pages 같은 무료 서비스에 올릴 수 있고, 저처럼 워드프레스를 운영 중이라면 고정 페이지로 옮겨 담는 방법도 있어요. Claude Code에 배포 절차를 물어보면 단계별로 안내해 주니, 막히는 지점에서 화면에 뜬 메시지를 그대로 붙여넣고 물어보면 돼요.
📋 발행 전 최종 체크리스트
✓ CTA 버튼을 눌렀을 때 신청 폼이 실제로 동작하는지 테스트
✓ PageSpeed Insights 속도 측정과 이미지 압축
✓ 오탈자·가격·날짜 등 숫자 정보 최종 확인
✓ 잘 되는 버전 파일 백업해 두기
배포 후에는 헤드라인이나 버튼 문구를 하나씩 바꿔보며 반응을 비교하는 A/B 테스트로 이어가면 좋아요. 직접 만들었으니 수정에 돈이 안 든다는 것, 이게 랜딩페이지를 내 손으로 만든 가장 큰 보상이었어요.
자주 묻는 질문
Q. 랜딩페이지를 무료로 만들 수 있나요?
페이지 자체는 무료로 배포할 수 있어요. Claude Code로 만든 HTML 파일은 GitHub Pages 같은 무료 호스팅에 올리면 되고, 별도 서버 비용이 들지 않아요. 도구 자체의 요금제는 종류가 여러 가지라 공식 홈페이지에서 확인하는 게 정확해요.
Q. 랜딩페이지 제작 비용은 보통 얼마인가요?
외주 기준으로 크몽·숨고에서 약 30만~150만 원, 에이전시는 200만 원 이상인 경우도 흔해요. 직접 만들면 도구 구독료 수준으로 줄어들지만, 대신 며칠의 시간과 시행착오를 투자해야 해요.
Q. 랜딩페이지와 상세페이지의 차이는 뭔가요?
랜딩페이지는 방문자에게 행동 하나(신청·구독 등)를 시키는 게 목적인 원페이지고, 상세페이지는 상품 정보를 자세히 설명하는 페이지예요. 광고 도착지로는 목표가 하나인 랜딩페이지가 유리해요.
Q. 코딩을 전혀 몰라도 정말 가능한가요?
가능해요. 다만 마법처럼 한 번에 되지는 않아요. 저도 모바일 깨짐, 이미지 오류 같은 문제를 사흘간 겪었어요. 대신 오류 메시지를 그대로 붙여넣고 물어보면 대부분 해결되고, 기획과 문구는 결국 내가 정해야 한다는 점만 기억하면 돼요.
참고자료
- Anthropic 공식 문서 — Claude Code 설치 방법과 사용법, 요금제 정보를 확인할 수 있어요.
- MDN 웹 문서 — HTML·CSS 기초 개념이 궁금할 때 찾아보기 좋은 공식 레퍼런스예요.
- Google PageSpeed Insights — 완성한 랜딩페이지의 로딩 속도를 무료로 측정할 수 있어요.
- GitHub Pages 공식 안내 — HTML 파일을 무료로 배포하는 방법이 정리돼 있어요.
3일 전의 저는 랜딩페이지 제작이라는 말만 들어도 외주 견적서부터 떠올리던 사람이었어요. 지금은 폰으로 제가 만든 페이지를 열어보며 버튼 문구를 어떻게 바꿀지 고민하고 있고요. 완벽하진 않지만 내 손으로 만들었고, 언제든 공짜로 고칠 수 있다는 게 생각보다 큰 자신감이 되더라고요. 외주냐 직접이냐로 며칠째 검색만 하고 있다면, 일단 기획 메모 세 줄부터 써보세요. 그 세 줄이 있으면 AI가 나머지 길을 함께 걸어줘요. 저는 다음 글에서 이 페이지에 실제 광고를 붙여본 결과를 기록해 볼게요.
함께 보면 좋은 글
