코딩을 모르는 직장인이 AI로 랜딩 페이지를 만들어 무료로 공개하려면 어떻게 하나요?
AI에게 한국어로 구성표, 문구, HTML 파일 하나를 차례로 받으면 됩니다. 그 파일을 무료 호스팅에 올리고 신청 버튼에 구글 폼이나 네이버 폼 링크를 걸면, 코딩을 몰라도 내 소개 페이지나 서비스 소개 페이지를 공개할 수 있습니다. 처음이라면 HTML 파일을 Netlify Drop에 폴더째 끌어다 놓는 방법이 가장 쉽습니다. 문구 정리부터 공개까지 두세 시간이면 됩니다.
이 글은 2026년 10월 19일 기준입니다. Google, OpenAI, Netlify, GitHub의 공식 도움말과 함께, 포텐스닷 라운지에서 같은 요청을 Claude Sonnet 5.5와 GPT-6.1 Sol에 직접 넣어 본 결과를 참고했습니다.
처음 하는 사람은 어떤 순서로 하면 되나요?
회사 규정을 먼저 확인하고, AI로 페이지를 만들어 휴대폰에서 점검한 뒤, 공개하고 폼을 연결합니다.
- 회사 규정 확인: 회사에서 쓸 수 있는 AI 도구와 넣어도 되는 자료 범위를 확인합니다. 부업이라면 겸업 신고 절차도 인사 담당자에게 물어봅니다.
- AI에게 요청: 구성표, 문구, HTML 파일 하나를 한 번에 요청합니다. 글 끝의 템플릿을 그대로 복사해 쓰면 됩니다.
- 파일 저장: ChatGPT 캔버스에서 만들었다면 캔버스 화면의 다운로드 버튼으로 받습니다. 다른 AI라면 코드를 복사해 메모장에 붙여 넣고
index.html로 저장합니다. 저장할 때 파일 형식은 '모든 파일', 인코딩은 UTF-8을 고릅니다. - 휴대폰 점검: 크롬의 휴대폰 미리보기와 실제 휴대폰에서 화면을 보고, 깨진 곳은 AI에게 고쳐 달라고 합니다.
- 공개: Netlify Drop, GitHub Pages, Google Sites 중 하나에 올립니다.
- 폼 연결: 신청 버튼에 폼 링크를 넣고, 로그인하지 않은 시크릿 창에서 시험 삼아 제출해 봅니다.
회사 서비스 소개 페이지라면 개인 계정 말고 회사 계정으로 만드세요.
| 방법 | 준비물 | 디자인 | 공개하는 방법 | 처음 걸리는 시간 | 비용 |
|---|---|---|---|---|---|
| Netlify Drop | HTML 파일이 든 폴더, Netlify 계정 | AI가 만든 디자인을 그대로 씀 | Drop 화면에 폴더를 끌어다 놓기 | 두세 시간(문구 작업 포함) | 무료 범위는 Netlify 요금제에서 확인 |
| GitHub Pages | HTML 파일, GitHub 계정과 저장소 | AI가 만든 디자인을 그대로 씀 | 저장소 설정에서 Pages 켜기 | 세 시간 이상 | 무료 범위는 GitHub 요금제에서 확인 |
| Google Sites | Google 계정 | 템플릿 안에서만 바꿀 수 있음 | 편집기에서 만든 뒤 게시하기 | 한두 시간 | 무료 범위는 Google 요금제에서 확인 |
파일을 저장하는 것부터 부담스럽다면 Google Sites가 낫습니다. AI가 써 준 문구를 템플릿 칸에 붙여 넣기만 하면 됩니다. 대신 AI가 만든 디자인은 그대로 옮기기 어렵습니다.
헤드라인, 소개, 신청 버튼 구성은 AI와 어떻게 잡나요?
문구부터 받지 말고, 섹션 순서와 각 섹션의 역할을 표로 먼저 받아서 확인한 다음 문구와 디자인을 요청하세요. 1인 서비스 소개라면 아래 9개 섹션이면 충분합니다.
예시 문구는 가상의 부업 서비스 '한 장 카피 클리닉'(상세페이지 문구 진단, 1건 15만 원)으로 실험했을 때 모델이 낸 문구에서 골랐습니다.
| 순서 | 섹션 | 역할 | 예시 문구 |
|---|---|---|---|
| 1 | 헤드라인과 신청 버튼 | 3초 안에 누구를 위한 무슨 서비스인지 전달 | "상세페이지, 문구만 바꿔도 달라집니다" / 버튼 "내 페이지 문구 진단 신청하기" |
| 2 | 고민 공감 | 방문자가 "내 얘기네" 하고 느끼게 함 | "사진은 예쁜데 왜 사야 하는지가 안 보여요" |
| 3 | 서비스 내용 | 돈을 내면 무엇을 받는지 설명 | 문구 진단, 수정 문구 제안, 수정 이유 설명 |
| 4 | 진행 방식 | 신청부터 회신까지 단계를 보여 줘 불안을 줄임 | 신청 → 범위 확인 → 작업 → 회신 |
| 5 | 소개 | 누가 하는지 보여 주고 신뢰를 쌓음 | "브랜드 마케팅 7년 차, 한서윤입니다" |
| 6 | 사례 | 결과물이 어떤 모습인지 보여 줌 | 가상의 수정 전후 문구 예시 |
| 7 | 가격 | 가격과 포함 범위를 분명하게 안내 | "1건 150,000원, 페이지 1개 기준" |
| 8 | 자주 묻는 질문 | 망설이는 이유를 없앰 | "결과를 보장하나요? 보장하지 않습니다" |
| 9 | 마지막 신청 버튼 | 끝까지 읽은 사람이 바로 신청하게 함 | "내 페이지에서 가장 아쉬운 문장, 함께 찾아볼까요?" |
헤드라인은 세 개쯤 받아서 하나를 고르고, 버튼 문구도 두세 개 받아 보세요. 버튼은 "신청하기"보다 "내 페이지 문구 진단 신청하기"처럼 누르면 무슨 일이 생기는지 보이는 쪽이 낫습니다.
가격, 환불, 결과 보장처럼 약속이 되는 문장은 그 약속을 지킬 수 있는 사람이 공개 전에 직접 확인하세요. 회사 서비스라면 담당 책임자, 부업이라면 본인입니다.
디자인과 문구를 함께 요청할 때 프롬프트에 무엇을 적나요?
누구에게 무엇을 얼마에 파는지, 디자인 조건, 버튼 링크 자리, 넣지 말아야 할 정보를 적습니다. 애매하게 남겨 둔 조건은 AI가 마음대로 채웁니다.
- 서비스 정보: 대상 고객, 제공 내용, 가격, 일정, 회신 기한. 회신 기한은 '신청 후 3일'인지 '작업 시작 후 3일'인지까지 적습니다.
- 디자인 조건: 흰 바탕에 포인트 색 1개, CSS(색이나 간격 같은 꾸밈 설정)까지 한 파일에 넣기, 휴대폰 화면 폭 390px에서 좌우 스크롤이 생기지 않을 것.
- 링크 자리: 신청 버튼에는
여기에_구글폼_링크같은 표시를 넣고, 메뉴를 누르면 해당 섹션으로 이동하게 해 달라고 합니다. - 넣지 말 정보: 회사명, 회사 내부 성과 수치, 집 주소, 개인 휴대폰 번호. 사례가 없으면 가상의 예시라고 표시해 달라고 합니다.
- 설명 방식: 코딩 용어는 쉽게 풀어 주고, 정보가 부족해서 스스로 가정한 부분은 따로 밝혀 달라고 합니다.
모바일 화면에서 깨지는 부분은 어떻게 고치나요?
휴대폰 스크린샷, 번호를 매긴 증상 목록, 코드 전체를 함께 주고 "PC 디자인은 그대로 두고 휴대폰에서만 고쳐 달라, 바뀐 줄에는 한국어 주석을 달아 달라"고 요청합니다. 고친 코드는 크롬 휴대폰 미리보기와 실제 휴대폰에서 다시 봅니다.
- 휴대폰에서 깨진 화면을 캡처합니다.
- 증상을 번호를 매겨 글로도 적습니다. 예: "1. 좌우로 스크롤해야 전체가 보임".
- HTML 코드 전체를 붙여 넣습니다. 일부만 주면 원인이 다른 곳에 있을 때 못 찾습니다.
- "증상마다 원인이 되는 코드를 한 줄씩 설명하고, 고친 전체 코드를 달라"고 요청합니다.
- 고친 코드로 파일을 덮어쓰고 휴대폰 미리보기로 확인합니다.
저희 실험에서는 이미지를 넣을 수 없어서 스크린샷 대신 증상을 말로 적고 코드를 함께 줬습니다. 일부러 깨지게 만든 코드에서 증상별 원인은 아래와 같았고, AI가 낸 수정 코드도 같은 방향으로 고쳤습니다.
| 휴대폰 증상 | 원인이 된 코드 | 고치는 방향 |
|---|---|---|
| 좌우로 스크롤해야 전체가 보임 | 폭 width: 1200px 고정, viewport 줄 없음 |
viewport(휴대폰 화면 폭에 맞춰 보여 주라는 한 줄)를 넣고, 고정 폭을 max-width(최대 폭)로 바꿈 |
| 헤드라인이 화면 절반을 차지함 | 글자 크기 font-size: 72px 고정 |
휴대폰에서만 글자를 줄이거나 clamp로 화면 폭에 따라 자동 조절 |
| 메뉴 4개가 겹침 | 메뉴마다 좌우 여백 40px, white-space: nowrap(줄바꿈 금지) |
flex-wrap으로 자리가 모자라면 다음 줄로 넘기고 여백을 줄임 |
| 서비스 카드 3개가 찌그러짐 | 카드를 가로로만 놓는 설정, 카드 폭 360px 고정 | 좁은 화면에서는 카드를 세로로 쌓음 |
| 사례 이미지가 화면 밖으로 나감 | 이미지 폭 width: 900px 고정 |
max-width: 100%와 height: auto로 화면보다 커지지 않게 함 |
| 버튼 글자가 버튼 밖으로 나감 | 버튼 폭 160px, 높이 48px 고정, 줄바꿈 금지 | 고정 크기를 없애고 padding(안쪽 여백)으로 크기를 잡음 |
휴대폰에서만 적용할 규칙은 @media (max-width: 700px)처럼 씁니다. 화면 폭이 700px 이하일 때만 적용하라는 뜻입니다.
PC 크롬에서 휴대폰 화면을 미리 보는 방법은 이렇습니다.
index.html을 크롬 창에 끌어다 놓아 엽니다.- F12를 누릅니다. 안 열리면 오른쪽 위 ⋮ → 도구 더보기 → 개발자 도구로 들어갑니다.
- 개발자 도구 왼쪽 위의 휴대폰 모양 아이콘을 누릅니다. 단축키는 Windows
Ctrl+Shift+M, MacCmd+Shift+M입니다. - 위쪽 기기 목록에서 iPhone 계열을 고릅니다. 목록에 없으면 Responsive를 고르고 폭에 390을 입력합니다.
- 폭을 320, 375, 390, 430으로 바꿔 가며 좌우 스크롤, 메뉴 겹침, 버튼 글자를 확인합니다.
크롬 미리보기는 아이폰 사파리와 완전히 같지는 않습니다. 공개한 뒤 실제 휴대폰으로 한 번 더 열어 보세요.
무료로 배포하고 문의 폼은 어떻게 붙이나요?
index.html과 이미지를 한 폴더에 담아 Netlify Drop 화면에 끌어다 놓으면 공개 주소가 생깁니다. 신청 버튼의 href 자리에 폼의 응답자용 링크를 넣으면 문의 폼이 붙습니다.
Netlify Drop은 어떻게 올리나요?
- 바탕화면에 새 폴더를 만들고
index.html과 이미지 파일(예:case.jpg)을 넣습니다. 첫 화면 파일 이름은 영문 소문자index.html이어야 합니다. - Netlify Drop 안내에 나온 Drop 화면을 열고 폴더 전체를 업로드 영역에 끌어다 놓습니다.
- 업로드가 끝나면
이름.netlify.app형태의 주소가 생깁니다. 휴대폰에서 열어 봅니다. - 사이트를 내 계정에 등록하라는 안내가 나오면 그대로 따릅니다.
- 페이지를 고친 뒤에는 새 Drop 화면이 아니라 기존 사이트의 배포(Deploys) 화면에 폴더를 다시 올립니다. 새 Drop 화면에 올리면 사이트가 하나 더 생길 수 있습니다.
GitHub Pages는 어떻게 올리나요?
단계는 더 많지만 파일을 고칠 때마다 수정 기록이 남는다는 장점이 있습니다. GitHub Pages 빠른 시작 문서와 프로젝트 페이지 만들기 문서를 따라가면 됩니다.
- GitHub에 가입하고 오른쪽 위 + → New repository로 저장소를 만듭니다.
- 저장소 화면에서 Add file → Upload files를 눌러
index.html과 이미지를 맨 위 위치에 올리고 Commit changes를 누릅니다. - 저장소의 Settings → Pages에서 브랜치는 main, 폴더는 /(root)를 고르고 Save를 누릅니다.
- 몇 분 뒤 Pages 화면에
아이디.github.io/저장소이름/형태의 주소가 나옵니다.
이미지가 안 보이면 코드의 src="case.jpg"와 실제 파일 이름의 대소문자가 같은지 확인하세요.
구글 폼과 네이버 폼은 어떻게 연결하나요?
두 폼 모두 응답자용 링크를 복사해 버튼 코드의 href 자리에 붙여 넣으면 됩니다. 메뉴 이름은 바뀔 수 있으니 실제 화면과 맞춰 보며 진행하세요.
<a class="cta" href="https://forms.gle/복사한주소">무료 상담 신청하기</a>
- 구글 폼: 질문(이름, 회신받을 이메일, 상담 내용)을 만들고 오른쪽 위 보내기(또는 게시) → 링크 탭에서 응답자용 링크를 복사합니다. 설정의 '응답 1회로 제한'을 켜면 응답자에게 Google 로그인을 요구할 수 있으니, 꼭 필요하지 않으면 끕니다.
- 네이버 폼: 네이버에 로그인해 폼을 만들고 공유(배포) 메뉴에서 URL을 복사합니다. 응답자 로그인이나 참여 제한 설정도 확인합니다.
- 공통: 편집 화면 주소가 아니라 응답자용 주소를 넣었는지 확인하고, 로그아웃 상태나 시크릿 창에서 실제로 제출해 봅니다.
이름이나 연락처를 받는다면 폼 맨 위에 아래 같은 동의 문구를 넣고, 체크박스를 필수 질문으로 둡니다. 미리 체크해 두면 안 됩니다.
[개인정보 수집 및 이용 동의]
1. 수집 항목: 이름(또는 활동명), 회신받을 이메일
2. 이용 목적: 상담 신청 확인과 회신
3. 보유 기간: 상담 종료 후 3개월까지 보관하고 지체 없이 삭제
4. 동의 거부 권리: 동의하지 않을 수 있습니다. 동의하지 않으면 이 폼으로는 상담 신청을 받을 수 없습니다.
□ 위 내용을 확인했고 동의합니다. (필수)
동의 문구에는 동의하지 않을 수 있다는 점과, 동의하지 않으면 무엇을 받을 수 없는지를 꼭 적어야 합니다.
폼 응답이 쌓이는 구글 시트나 내려받은 엑셀은 나만 볼 수 있게 두고, 공유 링크를 만들지 마세요.
프로필 페이지에 개인정보는 어디까지 넣어도 되나요?
이름이나 활동명, 경력 분야와 연차, 서비스 이름과 가격과 진행 방식, 부업용 이메일까지는 공개해도 됩니다. 생년월일, 집 주소, 개인 휴대폰 번호, 사원증이 보이는 사진, 출시 전 제품 정보는 빼는 게 좋습니다. 회사명과 회사 성과 수치는 회사 허락을 받은 뒤에만 쓰세요.
본인 정보를 본인이 올리는 것 자체를 법이 일률적으로 막지는 않습니다. 다만 한 번 공개한 정보는 검색되고 복사되니, 서비스 신청에 필요한 만큼만 올리세요.
| 항목 | 판단 | 이유 | 대신 쓸 표현 |
|---|---|---|---|
| 실명 | 원하면 공개 | 회사 동료가 검색으로 찾을 수 있음 | 실명 또는 활동명 |
| 경력 분야와 연차 | 공개 | 신뢰를 주는 데 필요한 정보 | "브랜드 마케팅 7년 차" |
| 서비스 이름, 가격, 일정 | 공개 | 고객이 구매를 판단하는 데 필요 | "1건 15만 원, 주말 진행" |
| 생년월일 | 빼기 | 신청에 필요 없고, 실명과 합쳐지면 사칭에 쓰일 수 있음 | 연차만 표기 |
| 집 주소, 방문 상담 | 빼기 | 낯선 사람이 집을 알게 됨 | "이메일과 온라인으로 진행합니다" |
| 개인 휴대폰 번호 | 빼기 | 스팸이 오고 본업 연락과 섞임 | "문의는 신청 폼으로 남겨 주세요" |
| 개인 이메일 | 바꾸기 | 사생활 계정이 드러남 | 부업용 이메일을 새로 만듦 |
| 회사명, 팀명, 직급 | 회사 규정 확인 후 결정 | 회사가 보증하는 서비스로 오해받을 수 있고 겸업 문제와 얽힘 | "국내 화장품 브랜드 마케터" |
| 회사 성과 수치 | 회사 허락 전에는 빼기 | 회사 내부 자료일 수 있고, 제품명을 가려도 수치 공개 문제는 남음 | 가상의 수정 전후 예시 |
| 출시 전 제품, 캠페인 계획 | 빼기 | 영업비밀이나 보안 서약 대상일 가능성이 큼 | "신제품 캠페인 업무 경험" |
| 사원증이 보이는 회사 행사 사진 | 바꾸기 | 사번, 회사 로고, 동료 얼굴이 노출됨 | 회사와 관계없는 배경에서 혼자 찍은 사진 |
공개 전에 취업규칙과 근로계약서의 겸업 조항이 금지인지, 허가제인지, 신고제인지 확인하세요. 고객이 회사의 경쟁사나 거래처일 수 있다면 인사팀에 미리 물어보는 게 좋습니다.
페이지에 "소속 회사와 무관합니다"라고 적어도 회사 승인이나 비밀유지 의무를 대신하지는 못합니다. 부업 작업에는 회사 노트북, 회사 계정, 근무시간, 내부 자료를 쓰지 마세요.
돈을 반복해서 받게 되면 사업자등록, 통신판매업 신고, 세금 처리가 필요한지 세무사나 국세청 상담으로 확인하세요. 사업자 주소를 법적으로 표시해야 하는지는 소개 문구에서 집 주소를 빼는 것과는 별개로 따져야 합니다.
같은 요청을 두 모델에 넣으면 무엇이 다르게 나오나요?
두 모델 모두 구성표, 문구, HTML, 개인정보 분류를 끝까지 냈습니다. 차이는 프롬프트에 정해 두지 않은 부분, 그러니까 회신 기한을 언제부터 세는지, 회사 수치를 어떻게 다룰지, 어디까지 안내할지를 각자 다르게 채운 데서 났습니다. 모델마다 한 번씩만 돌린 결과라 다시 하면 달라질 수 있으니, 어느 모델이 낫다기보다 프롬프트에 무엇을 더 적으면 좋은지 보는 용도로 읽어 주세요. 두 모델 모두 Amazon Bedrock에서 같은 설정으로 실행했고, 프롬프트 원문은 글 끝에 있습니다.
첫 번째 요청은 구성, 문구, HTML, 개인정보 분류를 한 번에 부탁한 것입니다. 가상 인물에 일부러 과한 개인정보를 넣었습니다.
| 확인 항목 | Claude Sonnet 5.5 | GPT-6.1 Sol | 프롬프트에 더 적을 것 |
|---|---|---|---|
| 섹션 구성 | 9개(헤드라인부터 마지막 신청 버튼까지) | 10개(9개에 하단 안내 추가) | 필요한 섹션 목록 |
| 추천 헤드라인 | "상세페이지, 문구만 바꿔도 달라집니다" | "상품의 장점이 한눈에 읽히도록, 한 장의 문구부터 바꿉니다." | 헤드라인 길이 |
| 애매한 회신 기한 | '신청 후 3일 이내'로 그대로 씀 | 가정이라고 먼저 밝히고 '주말 작업 시작 후 3일 이내'로 바꿈 | 회신 기한을 언제부터 세는지 |
| 회사 성과 수치(2.1%→3.4%) | HTML 사례 칸에 수치를 넣고, 본문에서는 회사 허락이 필요할 수 있다고 경고 | 수치를 빼고 가상의 수정 전후 예시로 바꿈 | 회사 수치를 페이지에 넣을지 |
| 개인정보 분류 | 공개 3개, 빼기 4개, 바꾸기 4개 | 공개 3개, 빼기 3개, 바꾸거나 허락받기 5개 | 공개하면 안 되는 항목 목록 |
| 더 짚은 점 | 폼 동의 체크 칸, 사업자와 세금 확인 | 폼 정보의 국외 이전과 처리 위탁, 사업자 주소 표시 의무, 결제와 환불 기준 | 아직 정하지 않은 운영 조건 |
| 휴대폰 대응 | 화면 폭 480px 이하 규칙 | 화면 폭 680px 이하 규칙, 글자 크기 자동 조절, 카드 배치 전환 | 확인할 화면 폭(예: 390px) |
두 번째 요청은 아이폰 증상 6개와 깨진 코드를 주고 수정 코드, 무료 배포, 폼 연결 안내를 부탁한 것입니다.
| 확인 항목 | Claude Sonnet 5.5 | GPT-6.1 Sol | 프롬프트에 더 적을 것 |
|---|---|---|---|
| 원인 설명 | 증상 6개를 표로 설명, viewport 누락 지적 | 증상 6개를 표로 설명, 카드 여백이 폭에 더해지는 문제도 지적 | 증상마다 원인 한 줄씩 |
| 헤드라인 크기 | 화면 폭에 따라 36~72px로 자동 조절 | PC는 72px 유지, 휴대폰은 32px | PC 디자인을 유지할지 |
| 메뉴 이동 링크 | 이동할 섹션이 없다고 지적만 함 | 제목과 신청 버튼에 이동 대상을 붙여 '소개'와 '문의'를 연결하고, '가격'은 대상이 없다고 안내 | 메뉴와 섹션 연결 |
| 무료 배포 안내 | Netlify Drop 단계만 안내하고 GitHub Pages는 단계가 많다고만 설명 | Netlify Drop 7단계와 GitHub Pages 12단계를 모두 안내 | 두 방법 모두 단계별로 |
| 폼 연결 | 새 탭으로 열기, 새 응답 이메일 알림, 네이버 폼의 동의 항목 기능 | '응답 1회로 제한'이 로그인을 요구할 수 있다는 점, 시크릿 창 시험 제출, 광고 동의 분리 | 외부인이 로그인 없이 제출되는지 확인 |
| 출처가 확인되지 않은 안내 | 로그인하지 않으면 Netlify 임시 사이트가 1시간 뒤 삭제될 수 있다고 안내 | 무료 사용량과 정책은 가입할 때 확인하라고 안내 | 확실하지 않은 내용은 '확인 필요'로 표시 |
가장 크게 갈린 건 회사 성과 수치였습니다. 프롬프트에서 정해 주지 않았더니 Claude Sonnet 5.5는 경고를 붙이면서도 HTML에는 수치를 넣었고, GPT-6.1 Sol은 가상 예시로 바꿨습니다. 회사 정보를 넣을지 말지는 AI에게 맡기지 말고 프롬프트에 직접 적어 두세요. 회신 기한을 언제부터 세는지, 어디까지 안내받고 싶은지, AI가 스스로 가정한 부분을 먼저 밝혀 달라는 요청도 함께 적으면 결과가 훨씬 안정적입니다.
통째로 복사하는 템플릿
대괄호 부분만 바꾸면 됩니다. 회사 자료를 넣는다면 회사에서 허용한 범위인지 먼저 확인하세요.
저는 코딩을 모르는 직장인입니다. 한 페이지짜리 서비스 소개 랜딩 페이지를 만들어 무료로 공개하려고 합니다.
[서비스 정보]
- 서비스명: [서비스명]
- 대상 고객: [예: 1인 쇼핑몰 대표]
- 제공 내용: [무엇을 해 주는지]
- 가격과 포함 범위: [예: 1건 15만 원, 페이지 1개, 수정 1회]
- 일정: [예: 주말 작업, 신청 확인 후 첫 주말 작업 시작부터 3일 이내 회신]
- 결제와 환불 기준: [정했으면 적고, 안 정했으면 "미정"이라고 적기]
- 공개할 소개 정보: [활동명, 경력 분야와 연차, 부업용 이메일]
[넣지 말 정보]
회사명, 회사 내부 성과 수치, 출시 전 제품, 집 주소, 생년월일, 개인 휴대폰 번호는 문구와 HTML 어디에도 넣지 마세요. 사례가 없으면 "가상의 예시"라고 표시한 수정 전후 문구로 채워 주세요. 제가 적은 정보 중 공개하면 위험한 것이 있으면 공개/빼기/바꾸기로 나누고, 한국 기준(개인정보 보호법, 회사 겸업 및 보안 규정)으로 이유를 한 줄씩 붙여 주세요.
[요청 순서]
1. 섹션 순서와 각 섹션의 역할을 표로 먼저 정리해 주세요.
2. 섹션별 한국어 문구를 써 주세요. 헤드라인은 3개를 제안하고 하나를 추천해 주세요. 신청 버튼 문구는 누르면 무슨 일이 생기는지 드러나게 2~3개 제안해 주세요. 결과 보장처럼 과장된 약속은 쓰지 마세요.
3. 그 문구를 넣은 HTML 파일 하나를 만들어 주세요.
- CSS까지 한 파일 안에 넣기, 흰 바탕에 포인트 색 1개
- viewport 설정을 넣고, 화면 폭 320, 390, 430px에서 좌우 스크롤이 생기지 않게
- 상단 메뉴를 누르면 해당 섹션으로 이동하게 연결
- 신청 버튼 링크는 "여기에_폼_링크"로 표시하고, 몇 곳에 있는지 알려 주기
4. 저장 방법(메모장, 파일 이름 index.html, UTF-8)과 크롬 휴대폰 미리보기 방법을 알려 주세요.
5. Netlify Drop과 GitHub Pages 공개 방법을 각각 클릭 순서대로 알려 주세요.
6. 구글 폼과 네이버 폼을 버튼에 연결하는 방법과, 로그인 없이 외부인이 제출할 수 있는지 확인하는 방법을 알려 주세요. 개인정보 수집 및 이용 동의 문구 예시(수집 항목, 목적, 보유 기간, 동의 거부 권리와 불이익)도 주세요.
[설명 방식]
- 코딩 용어는 처음 나올 때 괄호로 쉽게 풀어 주세요.
- 정보가 부족해 스스로 가정한 부분은 답 맨 앞에 따로 밝혀 주세요.
- 서비스 메뉴 이름이나 요금처럼 바뀔 수 있는 내용은 "공식 화면에서 확인 필요"라고 표시해 주세요.
[휴대폰에서 깨질 때 추가로 붙일 내용]
스크린샷을 첨부하고, 증상을 번호로 적고, 현재 코드 전체를 붙입니다. "증상마다 원인 코드를 한 줄씩 설명하고, PC 디자인은 유지한 채 고친 전체 코드를 주세요. 바뀐 줄에는 한국어 주석을 달아 주세요."
요금제, 무료 범위, 메뉴 이름은 바뀔 수 있으니 공개 전에 각 서비스의 공식 안내를 한 번 확인하세요.
부록: 실험에 쓴 프롬프트
두 모델에 똑같이 넣은 프롬프트입니다. 인물과 데이터는 모두 가상이고, 연락처, 주소, 회사명 칸의 가상 값만 이 글에서 대괄호로 가렸습니다.
첫 번째 요청 (구성, 문구, HTML, 개인정보 분류)
저는 코딩을 전혀 모르는 직장인입니다. 주말에만 하는 부업 서비스를 소개하는 랜딩 페이지(한 페이지짜리 홈페이지)를 만들고 싶어요. 아래 정보를 바탕으로 단계별로 도와주세요.
[내 정보 — 일단 생각나는 대로 다 적었습니다]
- 이름: 한서윤 (가명 아님, 실명으로 쓸 생각)
- 생년월일: [가상 생년월일]
- 휴대폰: [가상 휴대폰 번호]
- 개인 이메일: [가상 개인 이메일]
- 집 주소: [가상 집 주소, 동·호수까지] (방문 상담도 가능하다고 쓰고 싶음)
- 현재 직장: 중견 화장품 회사 '[가상 회사명]' 브랜드마케팅팀 과장, 7년차
- 대표 경력: 회사에서 맡은 신제품 '수분크림 A' 상세페이지 리뉴얼로 전환율 2.1%→3.4% 개선, 올해 하반기 미출시 신제품 B 런칭 캠페인 기획 중
- 사진: 회사 워크숍에서 찍은 사원증 목걸이가 보이는 사진 1장 있음
[부업 서비스]
- 서비스명: 한 장 카피 클리닉
- 대상: 1인 쇼핑몰 대표, 초기 스타트업
- 내용: 상세페이지·랜딩 페이지 문구 진단 및 수정 (1건 15만 원, 주말 진행, 3일 이내 회신)
- 신청 방법: 구글 폼으로 받을 예정 (링크는 아직 없음, 자리만 만들어 주세요)
[요청]
1. 랜딩 페이지 구성안을 먼저 짜 주세요. 섹션 순서(헤드라인, 소개, 서비스 내용, 사례, 가격, 신청 버튼 등)와 각 섹션의 역할을 표로 정리해 주세요.
2. 각 섹션에 들어갈 실제 한국어 문구를 써 주세요. 헤드라인은 3가지 버전을 제안하고 하나를 추천해 주세요. 신청 버튼 문구도 2~3개 제안해 주세요.
3. 위 문구를 그대로 넣은 HTML 파일 하나를 만들어 주세요. 조건: CSS까지 한 파일 안에 포함, 깔끔하고 신뢰감 있는 디자인(흰 바탕에 포인트 색 1개), 휴대폰에서도 잘 보이게, 신청 버튼은 구글 폼 링크로 연결(지금은 '여기에_구글폼_링크' 로 표시).
4. 제가 적은 개인정보 중 공개해도 되는 것, 빼야 하는 것, 바꿔서 써야 하는 것을 나눠 주세요. 한국 기준(개인정보 보호법, 회사 겸업 금지·영업비밀·보안 규정)에서 왜 그런지 이유도 짧게 붙여 주세요. 대신 쓸 수 있는 표현이 있으면 예시도 주세요.
코딩 용어는 최대한 쉽게 풀어서 설명해 주세요.
두 번째 요청 (휴대폰 수정, 무료 배포, 폼 연결)
AI가 만들어 준 랜딩 페이지를 PC에서 보면 괜찮은데, 제 아이폰으로 열어 보니 화면이 깨집니다. 저는 코딩을 모르는 직장인이에요. 스크린샷을 보고 제가 본 증상을 그대로 적고, 코드도 붙입니다.
[아이폰 화면에서 보이는 증상]
1. 화면이 옆으로 밀려서 손가락으로 좌우로 스크롤해야 전체가 보임
2. 맨 위 헤드라인 글자가 너무 커서 한 단어씩 줄이 바뀌고, 화면 절반을 차지함
3. 상단 메뉴(소개·서비스·가격·문의) 4개가 한 줄에 겹쳐서 글자가 서로 포개짐
4. 서비스 카드 3개가 가로로 나란히 있어서 각 카드가 손가락 하나 너비로 찌그러짐
5. 사례 이미지가 화면 밖으로 튀어나감
6. '무료 상담 신청하기' 버튼 글자가 버튼 밖으로 삐져나옴
[현재 코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>한 장 카피 클리닉</title>
<style>
body { margin: 0; font-family: sans-serif; }
.container { width: 1200px; margin: 0 auto; }
nav { display: flex; justify-content: space-between; width: 1200px; }
nav a { margin: 0 40px; white-space: nowrap; font-size: 18px; }
h1 { font-size: 72px; line-height: 1.1; }
.cards { display: flex; gap: 30px; }
.card { width: 360px; padding: 30px; border: 1px solid #ddd; }
.case img { width: 900px; }
.cta { display: inline-block; width: 160px; height: 48px; line-height: 48px; white-space: nowrap; background: #2f6bff; color: #fff; text-align: center; font-size: 20px; }
</style>
</head>
<body>
<div class="container">
<nav><a href="#about">소개</a><a href="#service">서비스</a><a href="#price">가격</a><a href="#contact">문의</a></nav>
<h1>팔리는 문구는 한 장에서 시작됩니다</h1>
<section id="service" class="cards">
<div class="card"><h3>문구 진단</h3><p>상세페이지의 약한 지점을 찾아드려요.</p></div>
<div class="card"><h3>문구 수정</h3><p>바로 붙여 쓸 수 있는 문장으로 고쳐드려요.</p></div>
<div class="card"><h3>3일 회신</h3><p>주말 작업 후 3일 이내에 보내드려요.</p></div>
</section>
<section class="case"><img src="case.jpg" alt="수정 전후 사례"></section>
<a class="cta" href="여기에_구글폼_링크">무료 상담 신청하기</a>
</div>
</body>
</html>
[요청]
1. 위 6가지 증상이 각각 코드의 어느 부분 때문에 생기는지, 코딩을 모르는 사람도 이해할 수 있게 한 줄씩 설명해 주세요.
2. PC 화면 디자인은 최대한 유지하면서 휴대폰에서도 잘 보이도록 고친 전체 코드를 주세요. 바뀐 줄에는 한국어 주석을 달아 주세요.
3. 고친 뒤 휴대폰 화면을 PC에서 미리 확인하는 방법(크롬 등)을 알려 주세요.
4. 이 파일을 돈 들이지 않고 인터넷에 공개하는 방법을 알려 주세요. Netlify Drop과 GitHub Pages 중 초보에게 더 쉬운 것을 추천하고, 클릭 순서대로 단계별로 설명해 주세요.
5. 신청 버튼에 구글 폼을 연결하는 방법과, 네이버 폼을 쓸 때 다른 점을 알려 주세요. 문의 폼에서 이름·연락처를 받을 때 개인정보 수집·이용 동의 문구를 어떻게 넣어야 하는지 예시 문구도 함께 주세요.