ChatGPT로 웹사이트 만들기: 실제로 통하는 세 가지 방법

ChatGPT로 웹사이트를 만드는 방법은 세 가지입니다. 사이트의 HTML과 CSS를 작성하게 한 뒤 직접 호스팅 서비스에 올리거나, 웹사이트 빌더에서 만들기 전에 페이지 기획과 문구 작성에 쓰거나, Mythex 같은 AI 빌더를 ChatGPT 안에 연결해 같은 채팅에서 사이트를 만들고 호스팅하고 게시하는 것입니다. 첫 번째 방법은 무료이고 한 페이지짜리 사이트에 충분합니다. 세 번째 방법은 데이터를 저장하는 양식, 로그인, 정기적인 업데이트가 필요한 사이트에 적합합니다. 이 가이드는 각 방법을 프롬프트와 함께 보여 주고, 어디에서 한계에 부딪히는지도 분명하게 짚습니다.

ChatGPT가 단독으로 할 수 있는 일과 할 수 없는 일

ChatGPT는 코드, 헤드라인, 페이지 문구, 계획을 작성하는 데 매우 뛰어납니다. 하지만 기본 상태에서는 호스팅 회사가 아닙니다. 사이트에 공개 주소를 부여하지 않고, 데이터베이스를 실행하지 않으며, 빌더처럼 프로젝트 사이의 사이트 파일을 보관하지도 않습니다. 아래의 모든 방법은 이 공백을 메우는 서로 다른 방식입니다.

방법 1: ChatGPT가 코드를 쓰고, 직접 호스팅하기

이것은 고전적인 방식이며 포트폴리오, 랜딩 페이지, 청첩장 페이지처럼 단순한 정적 사이트에 잘 맞습니다.

1단계: 완성된 단일 파일 페이지 요청하기

콘텐츠와 레이아웃을 구체적으로 설명하세요.

완성된 한 페이지짜리 웹사이트를 하나의 HTML 파일로 작성해 주세요. CSS는 style 태그 안에 넣어 주세요. 암만에 사는 프리랜서 일러스트레이터 Maya Haddad를 위한 사이트입니다. 섹션은 다음과 같습니다. 이름과 "책과 브랜드를 위한 일러스트" 문구가 있는 헤더, 포트폴리오 이미지 6개로 구성된 그리드(제가 교체할 수 있도록 자리표시자 이미지 경로 사용), 짧은 소개 문단, 시작 가격이 적힌 서비스 3가지 목록, 이메일을 mailto 링크로 넣은 연락처 섹션. 깔끔하고 현대적인 디자인, 여백은 넉넉하게, 휴대폰에서도 잘 보이도록. 자바스크립트 프레임워크는 쓰지 마세요.

파일을 하나로 요청하면 저장하고 업로드하기가 간단해집니다.

2단계: 저장하고 열어 보기

코드를 텍스트 편집기에 붙여 넣고 index.html로 저장한 다음 브라우저에서 여세요. 무언가 이상하면 ChatGPT에 설명하세요. 예: "데스크톱에서 이미지 그리드가 한 열로 나옵니다. 너비 900px 이상에서는 세 열로 바꿔 주세요."

3단계: 자리표시자 교체하기

자리표시자 이미지는 내 이미지로 바꾸고, ChatGPT가 임의로 넣은 문구는 교체하세요. 가격, 이메일, 이름은 특히 꼼꼼히 확인하세요. AI는 빈칸을 자신 있게 채워 넣습니다.

4단계: 온라인에 올리기

파일을 GitHub Pages 같은 무료 정적 호스트나 이미 비용을 내고 있는 웹 호스트에 업로드하세요. 공개 주소가 생깁니다. 자체 도메인을 쓰려면 호스트의 안내를 따르세요. DNS 부분은 커스텀 도메인 연결 가이드에서 설명합니다.

방법 1의 한계

• 데이터를 저장하는 양식. 문의 양식은 제출 내용을 보낼 곳이 필요합니다. 양식 서비스나 서버가 있어야 합니다.
• 로그인과 회원 전용 영역. 백엔드와 데이터베이스가 필요합니다.
• 페이지가 많은 경우. 손으로 붙여 넣은 파일 열 개에서 헤더와 메뉴를 일관되게 유지하는 것은 번거롭습니다.
• 업데이트. 변경할 때마다 새 코드를 요청하고, 붙여 넣고, 다시 업로드해야 합니다.

방법 2: ChatGPT가 기획하고, 빌더가 만들기

여기서 ChatGPT는 생각하고 글을 쓰고, 웹사이트 빌더는 만들고 호스팅합니다.

1단계: ChatGPT와 함께 사이트 기획하기

저는 맨체스터에서 케이크 주문을 받는 작은 가족 베이커리를 운영합니다. 제 웹사이트에 필요한 페이지를 제안하고, 각 페이지에 들어갈 내용과 방문자가 각 페이지에서 취하길 바라는 행동 하나를 알려 주세요. 다섯 페이지 이하로 해 주세요.

2단계: 문구 쓰기

각 페이지의 텍스트를 요청한 다음 내 목소리로 다시 고쳐 쓰세요. ChatGPT가 알 수 없는 실제 정보를 추가하세요. 영업시간, 가격, 배달 지역, 우리 케이크만의 차별점 등이 해당합니다.

3단계: 빌더에서 만들기

기획과 문구를 웹사이트 빌더에 붙여 넣으세요. 드래그 앤 드롭 도구에서는 템플릿에 텍스트를 배치합니다. AI 빌더에서는 전체 기획을 한 번의 메시지로 주면 페이지를 만들어 줍니다. 예를 들어 Mythex 웹사이트 빌더에서는 다음처럼 요청할 수 있습니다.

다음 기획과 문구를 사용해 맨체스터의 가족 베이커리 웹사이트를 만들어 주세요: [붙여 넣기]. 주문 요청 양식을 포함해 주세요. 양식은 각 요청(이름, 전화번호, 케이크 종류, 필요한 날짜, 메시지)을 저장해서, 저만 로그인할 수 있는 관리자 페이지에서 확인할 수 있어야 합니다. 따뜻하고 가정적인 디자인, 휴대폰에서도 잘 보이도록.

여기서 주문 양식은 실제 데이터베이스에 저장되며, 붙여 넣은 HTML 파일로는 할 수 없는 일입니다. 이 경로에 대해 더 알고 싶다면 AI로 웹사이트 만드는 법을 참고하세요.

방법 3: ChatGPT 안에서 만들고 게시하기

가장 새로운 방법은 빌더를 ChatGPT에 연결해서 ChatGPT가 빌더의 도구를 직접 사용하게 하는 것입니다. ChatGPT 대화는 그대로 유지하고, 프로젝트, 미리보기, 데이터베이스, 호스팅은 빌더가 제공합니다.

Mythex는 ChatGPT 앱(MCP 커넥터)을 통해 이렇게 동작합니다. Mythex의 계정 설정에서 연결할 수 있으며, 연결은 모든 요금제에서 가능합니다. 프로젝트 샌드박스를 실행하는 도구는 Pro 요금제가 필요합니다. 연결한 뒤에는 다음과 같이 요청할 수 있습니다.

Mythex를 사용해서 제 베이커리 웹사이트를 새로 만들어 주세요. 홈 페이지, 케이크와 가격이 있는 메뉴 페이지, 데이터베이스에 저장되는 주문 요청 양식이 필요합니다. 미리보기를 보여 주시고, 괜찮다고 하면 게시해 주세요.

그러면 ChatGPT가 프로젝트를 만들고, 코드를 작성하고, 실행하고, 승인하면 공개 URL로 게시합니다. 이후의 변경도 같은 채팅에서 메시지를 보내는 것으로 충분합니다. 같은 커넥터 방식은 Claude, Cursor, Codex에서도 작동합니다. 이 방식의 원리와 어떤 빌더가 이를 지원하는지는 MCP를 지원하는 AI 앱 빌더를 참고하세요.

어떤 방법을 선택해야 할까요?

모든 방법에 통하는 프롬프트 팁

• 실제 정보를 먼저 주세요. 이름, 위치, 서비스, 가격, 연락처. 임의로 만들어진 세부 사항이 적을수록 정리할 것도 줄어듭니다.
• 방문자와 목표를 설명하세요. "생일 케이크를 찾는 부모가 주문 요청을 보내게 되는 사이트."
• 휴대폰 우선 레이아웃을 요청하세요. 대부분의 방문자는 휴대폰을 사용합니다.
• 첫 버전이 나온 뒤에는 메시지 하나에 한 가지만 바꾸세요.
• SEO 기본 사항을 명시적으로 요청하세요. 페이지마다 고유한 제목과 설명, 실제 제목 태그, 이미지 대체 텍스트. AI로 만든 웹사이트의 SEO를 참고하세요.

AI 앱 빌더용 프롬프트 작성법에 대한 더 많은 패턴은 AI 앱 빌더를 위한 프롬프트 작성법 가이드에 있습니다.

자주 생기는 문제와 해결 방법

• 디자인이 평범해 보입니다. 참고 예시를 주세요. 예: "차분한 북유럽풍 카페처럼, 흰색을 많이 쓰고 음소거된 초록색 하나를 포인트로."
• 코드가 잘렸습니다. ChatGPT에 마지막 줄부터 이어서 작성해 달라고 하거나, 페이지를 섹션으로 나눠 한 번에 하나씩 받으세요.
• 후기나 통계를 지어냈습니다. 삭제하세요. 가짜 후기는 신뢰를 무너뜨리고, 많은 곳에서 소비자 보호 규정 위반입니다.
• 변경 후 사이트가 깨집니다. 새 코드를 붙여 넣기 전에 마지막으로 잘 작동하던 버전을 보관하세요. Mythex 같은 빌더는 체크포인트를 저장해서 되돌릴 수 있게 해 줍니다.

게시하기 전에

모든 페이지의 모든 문장을 읽으세요. 연락처가 제대로 작동하는지 확인하세요. 휴대폰에서 사이트를 열어 보세요. 이미지가 내 것이거나 적법하게 라이선스된 것인지 확인하세요. 그다음 게시하고, 방문자가 이미 있는 곳에 공유하세요. 전부 무료로 하고 싶다면 무료 웹사이트 만드는 법에서 무료 호스팅 옵션을 더 자세히 다룹니다.

자주 묻는 질문