[클로드 시리즈_41] 클로드 코드로 홈페이지 배포하기 — [02] 랜딩 페이지 만들기

랜딩페이지, AI로 만들기

코딩 한 줄 몰라도 괜찮습니다. 우리가 배울 건 "AI에게 어떻게 부탁하는가" 입니다.

---

0. 시작하기 전에

이 수업이 끝나면

• 랜딩페이지가 어떤 부품들로 조립되는지 눈에 보입니다
• AI에게 부탁할 때 빠뜨리지 말아야 할 6가지를 외우게 됩니다
• 본인 회사 / 본인 서비스의 랜딩페이지 한 장을 직접 만들어볼 수 있습니다

랜딩페이지란

한 페이지짜리 회사 소개 홈페이지입니다. 위에서 아래로 한 번 스크롤하면 끝.

명함의 디지털 버전이라고 생각하시면 쉽습니다. 다만 명함보다 훨씬 많은 이야기를 할 수 있고, 마지막에 "전화 주세요" 라고 한 번 더 말할 수 있는 명함입니다.

---

1. 랜딩페이지는 어떻게 조립되는가

 

랜딩페이지는 위에서 아래로 6개 층이 쌓인 구조입니다. 빵을 굽는 것과 비슷합니다. 빵마다 들어가는 재료는 달라도, 빵을 만드는 순서는 거의 똑같죠.

① 네비게이션 (맨 위)

페이지 가장 위에 붙어 있는 띠입니다. 왼쪽에 회사 로고, 가운데에 메뉴 몇 개, 오른쪽에 "문의하기" 같은 작은 버튼이 들어갑니다.

역할: "여긴 어디 회사인지" 알려주는 표지판

• 예시파일

nextgenai-education-v2.html

0.04MB

 

② 히어로 섹션 (가장 중요한 곳)

페이지를 열자마자 화면 전체를 차지하는 가장 큰 글씨가 있는 영역입니다. 이름이 "히어로(영웅)"인 이유 — 이 한 줄에 페이지의 성패가 달려 있기 때문입니다.

방문자가 페이지를 열고 3초 안에 결정합니다.

• 이게 뭐 하는 회사야?
• 나한테 쓸모 있어?
• 더 스크롤해볼까, 아니면 닫을까?

이 결정을 이 한 칸이 책임집니다.

③ 신뢰 증명

"우리 회사는 좋은 회사예요" 라는 말은 누구나 합니다. 그래서 증거가 필요합니다.

들어가는 재료:

• 같이 일한 회사 로고들 (OP.GG, 등)
• 숫자 (도입 기업 20개 이상, 만족도 96%)
• 고객 후기 (실제 이름이 박힌 문장)

④ 본문 섹션 (필요한 만큼)

이 안에 여러 칸이 또 들어갑니다. 어떤 회사는 3개, 어떤 회사는 8개. 필요한 만큼 골라서 쌓는 부분입니다. 대표적인 재료들:

• 기능/특징 카드 (3~4개)
• 진행 방식 (1단계 → 2단계 → ...)
• 가격표
• 자주 묻는 질문 (FAQ)
• 팀 소개
• 고객 후기 모음

⑤ 최종 CTA 배너

CTA = Call To Action, 번역하면 "행동 요청" 입니다. 영어가 좀 어렵지만 뜻은 단순합니다.

페이지 맨 아래에서, 마지막으로 한 번 더 방문자에게 부탁합니다.

• "지금 상담 신청하세요"
• "무료 견적 받아보세요"
• "데모 보기"

영화 끝나기 직전에 "구독과 좋아요 부탁드립니다"라고 한 번 더 말하는 것과 똑같은 자리입니다.

⑥ 푸터 (맨 아래)

회사 주소, 사업자등록번호, 저작권 표시 같은 법적으로 들어가야 하는 것들이 모이는 자리입니다. 짧고 깔끔하게.

---

2. 방문자는 무엇을 궁금해하는가

랜딩페이지를 만들 때 가장 흔한 실수가 있습니다.

"우리가 하고 싶은 말"을 순서대로 쭉 쓰는 것

이건 잘못된 접근입니다. 잘 만든 랜딩페이지는 방문자가 마음속에서 순서대로 떠올리는 질문에 하나씩 답해줍니다.

방문자가 페이지를 열고 머릿속에서 던지는 4개의 질문

순서	마음속 질문	페이지가 답하는 곳
1	"이거 뭐지?"	히어로 — 큰 글씨 한 줄
2	"믿을 만한가?"	신뢰 증명 — 로고와 숫자
3	"나한테 맞나?"	본문 섹션 — 기능과 사례
4	"걸리는 게 있는데"	FAQ — 미리 푸는 의심

이 순서대로 답이 나와야, 방문자가 스크롤을 끝까지 내려서 "상담 신청" 버튼을 누릅니다.

기억하기

랜딩페이지는 내가 말하는 곳이 아니라, 상대방의 질문에 답하는 곳입니다.

---

3. AI에게 어떻게 부탁할까 — 6칸 채우기

자, 이제 본론입니다. AI에게 랜딩페이지를 부탁할 때, 이 6칸만 채우면 됩니다.

빈칸이 많을수록 결과물이 흐릿해지고, 빈칸이 채워질수록 AI가 정확히 알아듣습니다.

채워야 할 6칸

① 누가 만드는가 — 회사명, 브랜드명

예: 넥스트젠에이아이 (NextGenAI)

② 무엇을 파는가 — 한 줄 서비스 설명

예: 기업용 AI 교육 프로그램

③ 누구를 위한 것인가 — 타겟 고객

예: 중견기업 임원과 실무자

④ 어떤 분위기인가 — 톤과 색상

예: 다크(어두운) 배경, 프리미엄(고급) 느낌, 보라색 계열

⑤ 어떤 섹션이 필요한가 — 본문 부품 선택

예: 히어로 + 두 가지 교육 트랙 + 진행 방식 + FAQ

⑥ 무엇을 시키고 싶나 — 마지막 행동 요청

예: 도입 상담 신청

이 6칸을 한 문단으로 합치면

"NextGenAI 라는 회사가 기업용 AI 교육을 판다.
중견기업 임원과 실무자가 타겟이고,
다크 + 프리미엄 톤으로 만들어줘.
히어로 · 교육 트랙 2개 · 진행 방식 · FAQ를 넣고,
마지막은 "도입 상담 신청" 버튼으로 끝내줘."

이 한 문단이 곧 프롬프트(AI에게 보내는 부탁) 입니다.

---

4. 실제 프롬프트 템플릿 (복사해서 쓰세요)

아래 [ ] 안의 빈칸만 채워서 AI(클로드, ChatGPT 등)에 그대로 붙여 넣으세요.

[회사명] 의 랜딩페이지를 HTML 한 파일로 만들어줘.

회사 소개: [무엇을 하는 회사인지 한 문장]
타겟 고객: [누구를 위한 서비스인지 한 문장]
분위기: [다크 / 라이트 / 미니멀 중 선택] + [주 색상]

다음 섹션을 넣어줘:
- 히어로 섹션 (한 줄 약속 + 부연 설명 + 버튼)
- 신뢰 증명 (고객사 로고 또는 숫자)
- [필요한 본문 섹션들 — 기능 카드, 진행 방식, 가격, FAQ 등]
- 최종 CTA 배너 ([마지막 버튼 이름])
- 푸터 (회사명, 저작권)

언어: 한국어
파일: HTML 한 장으로 (CSS와 JS도 같은 파일 안에)

실제로 채워본 예시

NextGenAI 의 AI 교육 랜딩페이지를 HTML 한 파일로 만들어줘.

회사 소개: 기업용 AI 교육 프로그램을 운영하는 컨설팅 회사
타겟 고객: 중견기업 임원과 실무자
분위기: 다크 + 프리미엄, 보라색 계열

다음 섹션을 넣어줘:
- 히어로 섹션 ("조직의 AI 역량을 한 단계 끌어올리는 교육" 같은 한 줄 + 부연 + 도입 상담 버튼)
- 신뢰 증명 (OP.GG, 야나두 등 고객사 로고)
- 교육 트랙 두 갈래 (리더급 / 직무별)
- 진행 방식 4단계 (진단 → 커스터마이즈 → 운영 → 사후 지원)
- FAQ 5개
- 최종 CTA 배너 ("도입 상담 신청")
- 푸터 (회사명, 저작권)

언어: 한국어
파일: HTML 한 장으로

---

5. 결과물을 받은 다음에 할 일

AI가 만들어준 랜딩페이지는 첫 번째 시안입니다. 일러스트나 자료 디자인에서 디자이너에게 처음 받는 시안과 똑같습니다 — 마음에 안 드는 부분을 말로 고치면 됩니다.

자주 쓰는 수정 요청 문장들

고치고 싶은 것	AI에게 이렇게 말하기
글자 크기	"히어로 글씨를 더 크게 해줘"
색깔	"보라색을 푸른색으로 바꿔줘"
분위기	"전체적으로 좀 더 따뜻한 느낌으로"
추가/삭제	"FAQ 섹션을 빼고 가격표를 넣어줘"
카피	"히어로 카피 3가지 옵션을 더 보여줘"

받은 파일은 어떻게 쓰나

AI가 준 HTML 파일은 그대로 인터넷에 올릴 수 있는 완성품입니다.

가장 쉬운 방법 두 가지:

1. Vercel 이라는 서비스에 파일을 드래그 앤 드롭 → 5초 안에 인터넷 주소가 생김
2. Netlify 도 동일한 방식

수강생 분들 중 직접 배포가 어려우신 경우, 회사 IT 담당자나 외주 분께 "이 파일을 우리 도메인에 올려달라" 고 부탁하시면 됩니다. 별로 어려운 작업이 아닙니다.

---

6. 정리 — 외워야 할 4가지

✅ 외우기 1: 랜딩페이지는 6층 빵이다

위에서부터 네비 → 히어로 → 신뢰 → 본문 → CTA → 푸터.

✅ 외우기 2: 방문자의 4가지 질문에 답하라

"이거 뭐지?" → "믿을 만한가?" → "나한테 맞나?" → "걸리는 게 있는데"

✅ 외우기 3: 프롬프트는 6칸을 채운다

회사명 / 서비스 / 타겟 / 분위기 / 섹션 / 마지막 행동

✅ 외우기 4: 첫 결과는 시안이다, 말로 고친다

만족할 때까지 대화로 수정. "좀 더 따뜻하게", "이 부분을 빼고" 처럼 일상 한국어면 충분합니다.

---

7. 오늘의 실습

A4 한 장에 손글씨로 써보세요. 컴퓨터 없이 먼저 손으로.

① 우리 회사 이름:
② 한 줄 소개:
③ 누구를 위한 거?:
④ 다크 vs 라이트? 무슨 색?:
⑤ 어떤 섹션이 필요?:
⑥ 마지막 버튼 이름?:

이 6칸을 채우셨다면, 랜딩페이지의 90%가 끝난 겁니다. 나머지 10%는 AI가 알아서 합니다.

---

Q&A — 자주 묻는 질문

Q. AI가 만든 페이지를 진짜 회사 홈페이지로 써도 되나요?
네, 됩니다. 다만 회사 대표 페이지로 쓰실 거면 한 번쯤 디자이너가 검수해주시면 더 좋습니다.

Q. 영어로도 만들 수 있나요?
프롬프트 마지막에 "언어: 영어" 라고만 바꾸시면 됩니다.

Q. 사진이나 동영상도 넣을 수 있나요?
네. AI가 만든 페이지에 직접 넣거나, "이미지 자리 표시만 해줘"라고 부탁해서 나중에 채워 넣어도 됩니다.

Q. 한 번 만들면 끝인가요?
아닙니다. 시즌별로 다시 만들거나, 새 캠페인마다 새로 뽑으셔도 됩니다. AI에게는 같은 6칸만 다시 채워주면 됩니다.

 

작성자 프로필

강호종 AI 길라잡이 강사

생성형 AI 활용 업무 효율화 전문강사 · 디지털융합교육원 지도강사 & AI 전문강사, 젠스파크 AI 전문강사 · (사)한국AINFT협회 이사
저서: 『생성형 AI 활용 업무혁신』(2026.1) · 『이것이 GEO마케팅이다』(2026) 외
📞 010-9912-9934 | 📧 art386@naver.com | Ⓑ blog.naver.com/art386 | Ⓣ aiart386.tistory.com

​생성형 AI, AI 리터러시, ChatGPT·Claude·Gemini 실무 활용, AI 업무 자동화, GEO마케팅을 중심으로 공공기관·기업·단체 대상 강의와 콘텐츠를 제작합니다.

---

메타 설명

클로드 코드로 홈페이지 배포하기 시리즈의 랜딩페이지 만들기 실습 글입니다. 랜딩페이지의 6층 구조, 방문자의 4가지 질문, AI 프롬프트 6칸 공식, HTML 생성 프롬프트와 배포 전 체크리스트까지 초보자도 따라 할 수 있게 정리했습니다.

---

해시태그

#클로드시리즈 #ClaudeCode #클로드코드 #랜딩페이지 #홈페이지제작 #AI홈페이지제작 #HTML #Netlify #Vercel #AI리터러시 #생성형AI강의 #AI강사 #강호종강사 #AI길라잡이 #ChatGPT활용 #Claude활용 #MCP #GEO마케팅 #AX전환 #노코드홈페이지