웹사이트 하나를 새로 만들려면 마크업 언어인 HTML과 스타일을 담당하는 CSS, 동작을 붙이는 JavaScript를 익히거나 기존 빌더 도구의 구조부터 배워야 한다는 인식이 오래 자리 잡고 있습니다. ChatGPT Sites는 이 전제를 대화로 바꿉니다. 만들고 싶은 사이트를 문장으로 설명하고 로고 파일 한 장을 붙이면 페이지 구성과 색상, 제품 사진, 문의 폼, 공개 주소, 방문자 통계까지 한 흐름 안에서 처리됩니다. 쿠키를 파는 작은 사업체를 예로 들면, 몇 년 전 도구로 만들어 지금은 디자인이 낡아 보이는 페이지를 처음부터 다시 세우는 일이 대화 몇 번으로 끝납니다.
시작은 짧은 설명과 로고 한 장
ChatGPT 왼쪽 사이드바에서 More 항목을 펼치면 Sites가 있습니다. 이를 선택하면 만든 사이트 목록이 있는 대시보드가 열리고, 오른쪽 위의 Create Site 버튼으로 새 프로젝트를 시작합니다. 이때 인터페이스는 Work 모드로 전환되고 입력창에는 사이트 빌더를 호출하는 @Sites 명령이 자동으로 붙습니다. 직접 ’@’를 입력해 플러그인 목록에서 Sites를 고르는 방법도 있습니다.
첫 요청에는 홈페이지, 쿠키 메뉴, 브랜드 소개, 문의 수단, 따뜻한 베이커리 분위기 정도만 담으면 충분합니다. 처음부터 모든 세부를 확정할 필요는 없고 결과를 보면서 대화로 다듬는 편이 빠릅니다. 입력창 아래 더하기 아이콘으로 로고 PNG 파일을 첨부하면 브랜드 자산이 함께 전달됩니다. 이 작업에는 GPT-5.6 Sol Light 모델이 쓰였고, 첫 사이트가 만들어지기까지 걸린 시간은 3분 57초였습니다.
첫 결과물에서 확인할 것
생성이 끝나면 대화창에 미리보기 카드가 나타나고, 이를 열면 화면이 좌우로 나뉩니다. 왼쪽은 대화, 오른쪽은 사이트 미리보기이며 가운데 구분선을 드래그하면 어느 한쪽에 더 넓은 공간을 줄 수 있습니다. 오른쪽 위 전체 화면 아이콘을 누르면 실제 비율로 레이아웃과 요소 간격을 점검할 수 있습니다.
첫 결과물에는 상단에 첨부한 로고, 홈과 메뉴, 브랜드 이야기, 문의로 이어지는 내비게이션, 쿠키를 강조하는 큰 배너, 개당 $4인 쿠키 세 종류를 담은 메뉴 카드, 소개 문단, 어두운 배경의 문의 폼이 들어 있었습니다. 눈에 띄는 부분은 색상입니다. 금색과 크림색, 갈색 계열의 배색이 첨부한 로고 이미지에서 그대로 추출되어 사이트 전체에 적용되었습니다.
숫자로 정리하면 이렇습니다.
| 항목 | 값 |
|---|---|
| 첫 사이트 생성 | 3분 57초 |
| 문의 폼 기능 구현 | 37초 |
| 쿠키 한 개 가격 | $4 |
| 분석 기간 선택 | 7일, 30일 |
| 예시 분석 결과 | 순 방문자 1명, 페이지 조회수 51회 |
디자인 수정: 반복되는 로고를 걷어내고 제품 사진 채우기
전체 화면에서 나와 대화창으로 돌아와 피드백을 입력합니다. 첫 결과물에서 지적된 문제는 같은 로고가 배너와 소개 영역에 반복해서 등장한다는 점이었습니다. 상단 내비게이션의 로고만 남기고 나머지 반복 배치를 제거해 달라고 요청하면서, 갓 구운 쿠키 사진을 페이지 곳곳에 자연스럽게 넣어 달라고 함께 지시했습니다.
음식처럼 눈으로 먼저 판단하는 제품을 파는 사이트에서는 완성도 높은 제품 사진이 구매 결정에 더 크게 작용합니다. 수정 후 배너에 있던 원형 로고 자리는 초콜릿 칩 쿠키 사진으로 바뀌었고, 세 가지 메뉴 카드에는 각 제품과 어울리는 사진이 따로 들어갔으며, 소개 영역에는 김이 올라오는 갓 구운 쿠키 사진이 배치되었습니다. 이미지를 직접 검색하고 크기를 맞추고 위치를 잡을 필요 없이 문맥에 맞는 사진이 자동으로 채워진 셈입니다.
▲ 채팅과 미리보기 분할 화면
문의 폼을 실제로 동작하게 만들기
문의 폼은 처음에는 모양만 있고 제출 내용을 어디에도 저장하지 못하는 상태였습니다. 폼을 실제로 동작하게 만들고 들어온 내용을 나중에 확인할 수 있게 저장해 달라고 요청하면 입력값 검증, 오류 처리, 전송 완료 안내, 제출 내용의 영구 저장까지 한 번에 구성됩니다. 이 작업에 걸린 시간은 37초였습니다.
동작을 확인하는 방법은 단순합니다. 사이트를 별도 창에서 열어 문의 영역으로 이동해 이름과 이메일, 메시지를 입력하고 전송합니다. 전송이 되었다는 안내가 뜨면 관리자 화면의 저장된 제출 보기 버튼을 눌러 목록에 항목이 들어왔는지 확인합니다. 이때 제출 시각과 보낸 사람 정보, 메시지 본문이 함께 기록됩니다. 폼을 만들었다고 끝내지 않고 직접 한 건을 넣어 보는 것이 핵심입니다.
공개 설정과 주소 연결
디자인과 기능이 정리되면 공개할 차례입니다. 대화창의 공유 버튼이나 대시보드의 점 세 개 메뉴에서 공유를 선택하면 접근 권한을 정하는 창이 열립니다. 기본값은 초대한 사람만 볼 수 있는 비공개 상태이며, 링크를 아는 누구나 볼 수 있게 바꿔야 실제로 공개됩니다.
설정의 기어 아이콘에서는 사이트 이름과 주소 경로를 다룹니다. 기본 주소는 하위 도메인 형태로 자동 배정되고 변경 버튼으로 원하는 문자열로 바꿀 수 있습니다. 보유한 도메인을 연결하는 기능도 있어 필요한 DNS 레코드와 절차가 자동으로 안내됩니다. 다만 도메인 등록 기관마다 화면과 절차가 조금씩 다를 수 있습니다. 공개 링크를 일반 브라우저 탭에서 열어 ChatGPT 밖에서도 레이아웃이 깨지지 않는지 확인하는 단계는 반드시 거치는 편이 좋습니다.
내장 분석으로 성과 확인하기
관리 대시보드에서 사이트 카드 옆 점 세 개 메뉴를 열면 편집, 설정과 함께 분석 항목이 있습니다. 이 화면에서는 순 방문자 수와 총 페이지 조회수, 기간별 추이를 볼 수 있고 7일과 30일 단위로 기간을 바꿀 수 있습니다. 상위 페이지 목록과 조회수도 함께 표시됩니다. 예시로 확인한 화면에서는 순 방문자 1명, 페이지 조회수 51회가 잡혀 있었습니다. 외부 추적 스크립트를 따로 설치하지 않아도 바로 확인할 수 있다는 점이 장점이고, 기능 자체는 단순한 편입니다. 빠르게 상황을 보는 용도로는 충분하지만 더 정교한 분석이 필요하면 별도 도구를 검토하게 될 것입니다.
▲ 문의 폼 제출 내역과 방문 통계
정리: AI가 처리하는 일과 사람이 확인할 일
대화형 빌더가 맡는 범위는 생각보다 넓습니다. 페이지 구조 생성, 로고에서 색상 추출, 문맥에 맞는 이미지 배치, 폼 검증과 저장, 호스팅 주소 부여, 방문자 통계까지 한 대화 안에서 이어집니다. 사람이 개입할 지점도 분명합니다. 어떤 사이트를 만들지 방향을 정하는 첫 설명, 로고 같은 브랜드 자산 준비, 결과물을 실제 비율로 보고 여백과 반복 요소를 판단하는 일, 공개 범위와 주소를 확정하는 결정입니다.
바로 시작하려는 독자라면 다음 순서를 권합니다.
- 원하는 페이지와 분위기를 짧게 적고 로고 PNG를 첨부해 첫 생성을 요청합니다.
- 분할 화면과 전체 화면을 오가며 상단 내비게이션, 배너, 메뉴 카드, 소개, 문의 영역의 비율을 점검합니다.
- 같은 로고가 반복되는 곳이 없는지 확인하고 제품 사진을 넣어 달라고 명시적으로 요청합니다.
- 문의 폼은 동작과 저장을 요청한 뒤 직접 한 건을 제출해 관리자 목록에서 확인합니다.
- 공유 창에서 접근 권한을 링크 보유자로 바꾸고 주소 문자열을 정리한 뒤 필요하면 보유 도메인을 연결합니다.
- 공개 후에는 분석 화면을 주기적으로 열어 방문자 수와 조회수를 확인합니다.
코딩을 몰라도 사이트 한 개를 띄우는 데 필요한 대부분의 단계가 대화로 대체됩니다. 다만 무엇을 만들지 정하고 결과를 판단하는 일은 여전히 사람의 몫이며, 그 판단이 결과물의 완성도를 가릅니다.