ChatGPT로 랜딩페이지 만들고
30초 만에 공유하기
기획안을 들고 개발자를 찾아다니던 시대가 끝났다. ChatGPT에게 제품 설명 한 단락을 주면 랜딩페이지 HTML이 나온다. 문제는 그 결과물을 팀원, 클라이언트, 투자자에게 보여주는 방법이다. 파일을 첨부하거나 코드를 붙여넣으면 상대방은 직접 렌더링해야 한다. 이 가이드는 프롬프트 작성부터 링크 공유까지, 기획자·마케터가 실제로 쓰는 전체 흐름을 다룬다.
필요한 것
- AI 도구 — ChatGPT (GPT-4o 이상 권장), Claude, Gemini 중 하나. 계정만 있으면 충분하다.
- html.to (
htmlto.puzl.co.kr) — 계정 불필요. 브라우저만 있으면 된다. - 제품/서비스 설명 텍스트 — 한 문단이면 충분하다. 키카피, CTA 문구, 주요 기능 3가지 정도를 미리 정리해두면 결과물 품질이 올라간다.
단계별 가이드
-
ChatGPT에 접속해 새 대화를 연다.
모델은 GPT-4o를 선택한다. o3-mini처럼 추론 중심 모델보다 GPT-4o가 HTML 생성에 더 적합하다. -
프롬프트를 입력한다.
아래 형식을 그대로 복사해 괄호 안만 채운다:
단일 파일 HTML 랜딩페이지를 만들어줘. 제품명: [제품명]. 핵심 가치: [한 줄 설명]. CTA 버튼 문구: [문구]. 색상 톤: [다크/라이트/브랜드 컬러]. CSS는 <style> 태그 안에, JS는 <script> 태그 안에 모두 포함해줘. 외부 라이브러리 없이.
외부 라이브러리 없이를 명시하는 게 핵심이다. CDN에 의존하면 html.to에서 렌더링할 때 일부 리소스가 차단될 수 있다. -
생성된 HTML 코드 블록 전체를 복사한다.
ChatGPT가```html로 시작하는 코드 블록을 출력하면, 그 안의 내용을 전부 선택해 복사한다.<!DOCTYPE html>부터</html>까지 빠짐없이. -
html.to(
htmlto.puzl.co.kr)를 새 탭에서 연다.
별도 설치나 회원가입 없이 바로 사용 가능하다. -
복사한 코드를 에디터에 붙여넣는다.
화면 왼쪽 에디터 영역에 붙여넣으면 오른쪽 미리보기 패널에 랜딩페이지가 즉시 렌더링된다. 원하는 결과가 아니라면 ChatGPT로 돌아가 수정 요청 후 다시 붙여넣는다. -
SHARE버튼을 클릭한다.
짧은 공유 링크가 자동으로 클립보드에 복사된다. 이 링크를 열면 누구나 계정 없이 랜딩페이지를 볼 수 있다. -
링크를 공유한다.
카카오톡, 슬랙, 이메일, 노션 — 어디든 붙여넣으면 된다. 받는 사람은 클릭 한 번으로 완성된 화면을 본다.
전체 과정에서 코드를 직접 수정할 일은 없다. 결과가 마음에 들지 않으면 ChatGPT에 추가 요청을 해서 새 코드를 받아 다시 붙여넣는다.
Pro Tips
- 이미지 대신 SVG나 CSS 그라데이션을 요청한다. 외부 이미지 URL은 깨질 수 있다. "이미지 없이 SVG 아이콘과 CSS만으로 구성해줘"라고 명시하면 어디서나 동일하게 보인다.
- 비밀번호 보호를 켠다. 공개하기 전 내부 검토가 필요하다면 공유 전 비밀번호를 설정한다. html.to는 AES-256 암호화로 링크를 보호하며, 추가 비용이나 계정이 필요 없다.
- 프롬프트에 섹션 구조를 명시한다. "히어로 → 기능 3가지 → 후기 2개 → CTA" 처럼 원하는 섹션을 순서대로 적으면 ChatGPT가 구조를 임의로 바꾸지 않는다.
- 결과물을 반복 개선할 때 대화를 이어간다. 새 대화를 열지 말고 같은 대화에서 "버튼 색상을 검정으로 바꾸고, 히어로 카피를 더 짧게 다듬어줘"처럼 이어서 요청한다. 컨텍스트가 유지되므로 전체를 다시 쓰지 않아도 된다.
- 링크는 영구 저장된다. html.to 링크는 별도로 삭제하지 않는 한 만료되지 않는다. 공유 후 수정이 필요하면 코드를 수정한 뒤 새 링크를 만들어 재공유하면 된다.
자주 쓰는 시나리오
- 사이드 프로젝트 초기 검증. 아이디어를 한 문단으로 정리해 ChatGPT에게 랜딩페이지를 만들게 한 뒤, html.to 링크를 잠재 사용자 커뮤니티에 올린다. 실제 개발 전에 관심도를 측정한다.
- 클라이언트 시안 공유. 에이전시나 프리랜서가 디자인 방향을 논의하기 전, AI로 빠르게 레이아웃 시안을 만들어 링크로 보낸다. 화면 캡처보다 실제 반응형 페이지를 보여주는 편이 피드백이 구체적으로 나온다.
- 내부 제안서 첨부 대체. 기획서에 랜딩페이지 링크를 붙이면 임원 보고 시 슬라이드보다 직관적으로 제품을 보여줄 수 있다. 링크 하나로 "이렇게 생겼습니다"를 전달한다.
FAQ
Q. html.to에 올린 링크는 얼마나 유지되나요?
영구 저장이 기본이다. 별도로 삭제하지 않는 한 링크는 만료되지 않는다.
Q. 회원가입 없이 사용할 수 있나요?
계정 없이 바로 업로드하고 링크를 만들 수 있다. 비밀번호 보호 기능까지 가입 없이 사용 가능하다. 가입하면 내가 만든 링크 목록을 대시보드에서 관리할 수 있다.
Q. ChatGPT 말고 다른 AI가 만든 HTML도 올릴 수 있나요?
Claude, Gemini, Cursor, v0, GitHub Copilot 등 어떤 도구가 생성한 HTML이든 올릴 수 있다. 유효한 HTML이면 도구를 가리지 않는다.
지금 바로 만들기 →