Codex Sites 실전 입문 ①: 개념부터 첫 제작 프롬프트까지 — 실습으로 배우는 시작 가이드
Codex Sites가 정확히 무엇이고, 왜 지금 쓸 만한지는 「Codex Sites 완전정복」 개관 글에서 다뤘습니다. 이 글은 그 개념을 바로 손으로 만들어보는 실습편입니다.
1. Codex Sites를 한 문장으로 이해하기
Codex Sites는 원하는 웹사이트나 경량 웹앱을 자연어로 설명하면 ChatGPT가 요구사항 이해 → 사이트 제작 → 미리보기 → 자연어 수정 → 테스트 → 버전 저장 → 배포 → 공유의 전 과정을 연결해 주는 기능입니다.
일반적인 코드 생성 도구와 가장 큰 차이는, 코드 조각을 던져주고 끝나는 게 아니라 실제로 접속 가능한 결과물까지 이어준다는 점입니다. 표로 비교하면 아래와 같습니다.
| 구분 | 일반 대화 | 일반 Codex 프로젝트 | Codex Sites |
|---|---|---|---|
| 주요 결과 | 설명과 코드 조각 | 로컬 프로젝트 파일 변경 | 실제 웹사이트·경량 웹앱 |
| 미리보기 | 제한적 | 로컬 실행 필요 | Sites 안에서 확인 |
| 배포 | 별도 도구 필요 | Vercel 등 별도 설정 | 저장한 버전을 Sites에서 배포 |
| 공유 | 문서·코드 공유 | 저장소·배포 URL | Sites URL과 접근 권한 |
| 수정 방식 | 다시 질문 | 코드 변경 요청 | 사이트를 보며 자연어로 수정 |
2. Sites로 무엇을 만들 수 있는가 — 5단계로 보기
Codex Sites로 만들 수 있는 결과물은 복잡도에 따라 5단계로 나눠 생각하면 범위를 정하기 쉽습니다.
수준 1. 정보를 보여 주는 사이트 — 강의 소개 페이지, 행사 안내, 주차별 학습 자료 허브, 교회·기관 소개, 포트폴리오, FAQ, 자료 링크 모음 등. 로그인과 데이터베이스가 없어도 되는, 처음 시작하기 가장 좋은 형태입니다.
수준 2. 상호작용하는 사이트 — 계산기, 선택형 진단 도구, 필터가 있는 자료 목록, 퀴즈, 체크리스트, 일정 플래너, 간단한 게임 등. 클릭·입력에 따라 화면이 바뀝니다. 브라우저를 닫으면 결과가 사라져도 되는지, 다음 방문에도 남아야 하는지를 이 단계에서 반드시 정해야 합니다.
수준 3. 데이터를 기억하는 웹앱 — 학습 진도, 퀴즈 점수, 프로젝트 진행 상태, 게시글·댓글, 사용자별 북마크처럼 다음 방문에도 유지되는 기록입니다. 구조화된 데이터를 저장하는 D1이 필요할 수 있으며, 자세한 내용은 시리즈 3에서 다룹니다.
수준 4. 파일을 보관하는 사이트 — PDF 자료 업로드, 이미지 제출, 문서 자료실, 과제 업로드, 프로필 사진 등. 파일 자체는 R2에 저장하고, 파일명·카테고리 같은 검색 정보는 D1에 저장하는 방식으로 확장할 수 있습니다.
수준 5. 로그인과 개인화 — 공개 안내는 누구나 보게 하면서, 로그인한 사용자에게만 개인별 학습 진도·북마크·맞춤 화면을 제공하는 단계입니다. 첫 프로젝트에는 로그인 기능을 넣지 않는 것을 권장합니다.
3. Sites에 적합한 프로젝트, 별도 개발을 검토할 프로젝트
적합한 프로젝트는 다음 조건에 가깝습니다: 대상이 분명하다 / 해결할 문제가 하나다 / 주요 화면과 행동이 단순하다 / 짧은 기간 안에 첫 버전을 확인해야 한다 / 내부 도구·교육 자료·안내 페이지·프로토타입이 필요하다.
반대로 별도 개발 환경을 검토할 프로젝트는 대규모 회원 관리, 복잡한 조직 권한 체계, 전자상거래와 결제, 금융 거래, 장시간 실행되는 백그라운드 작업, 실시간 고성능 스트리밍, 특수 서버·사설망·전용 데이터베이스, 고도로 규제되는 정보 처리가 필요한 경우입니다.
초보자 원칙은 단순합니다. 첫 버전은 작게 만들고, 기능은 검증된 뒤 한 단계씩 추가합니다.
4. 시작 전에 이용 환경 확인하기
ChatGPT 웹에서는 ①로그인 ②왼쪽 메뉴에서 Work 선택 ③새 대화 열기 ④입력창에 @Sites 입력 순서로 진입합니다.
ChatGPT 데스크톱 앱에서는 ①최신 앱 실행 ②Work 또는 Codex 선택 ③새 대화 열기 ④@Sites 입력 순서입니다.
이전에 만든 Site는 사이드바나 More → Sites에서 열어 수정·배포·공유 설정을 관리합니다. 메뉴 위치와 이름은 앱 버전, 플랜, 워크스페이스 정책에 따라 달라질 수 있으니 메뉴가 보이지 않으면 플랜·앱 버전·로그인한 워크스페이스와 관리자 권한을 먼저 확인하세요.
참고로 알아둘 것: Codex Sites는 OpenAI Help Center(“Creating and managing ChatGPT Sites”, 확인일 2026-07-27) 기준 public beta 상태이며, Free·Go를 제외한 유료 ChatGPT 플랜(개인 Plus·Pro 포함, Business·Enterprise·Edu)이 대상입니다. 다만 플랜별로 시점이 다릅니다 — Pro·Pro Lite·Enterprise·Edu는 지원 지역이면 지금 바로 시도할 수 있는 반면, Plus·Business는 계정에 Sites가 표시된 뒤 가능하며 아직 순차 확대 중이라 계정에 곧바로 안 보일 수 있습니다. 여기에 더해 EEA(유럽경제지역)·스위스·영국은 출시 시점 기준 아직 제공되지 않으며, 플랜별 사용 한도도 존재합니다. 즉 “누구나 바로 복붙해서 쓸 수 있다”기보다는 “유료 구독자이고 해당 지역이면 실습 대상이지만, Plus·Business는 계정에 Sites가 보이는지 먼저 확인하고(Pro 계열은 지금 바로) 실습한다” 정도로 이해하는 편이 정확합니다.
5. 첫 사이트를 만들기 전에 정할 것
디자인부터 고르지 말고, 아래 작성표부터 채우는 것이 순서입니다.
사이트 이름:
누가 사용하는가:
사용자가 겪는 문제:
사이트에서 완료할 핵심 행동:
반드시 포함할 내용:
필요한 페이지:
필요한 기능:
다음 방문에도 저장할 데이터:
최종 공개 범위:
원하는 디자인:
첫 버전에서 제외할 기능:목표를 세울 때는 범위를 좁히는 것이 핵심입니다. “교회와 교육 운영에 필요한 모든 기능을 갖춘 플랫폼을 만들어줘” 같은 목표는 범위가 너무 넓습니다. 반면 “AI를 처음 배우는 성인 학습자가 5주 강의 자료와 준비물을 한곳에서 확인하는 모바일 우선 사이트를 만들어줘”처럼 대상과 행동이 하나로 좁혀진 목표가 좋은 첫 목표입니다.
6. 실습 프로젝트 기획하기 — Wave Academy 5주 강의 자료 허브
이 글에서는 실제로 쓸 수 있는 예제로 아래 프로젝트를 함께 기획합니다.
- 사이트 이름: Wave Academy 5주 강의 자료 허브
- 주요 사용자: AI와 Codex를 처음 배우는 성인 학습자 / 기술 용어에 익숙하지 않은 사용자 / 모바일 접속 비중이 높은 사용자
- 해결할 문제: 주차별 자료, 준비물과 공지가 여러 곳에 흩어져 있어 찾기 어렵다.
- 핵심 행동: 학습자가 전체 과정과 1~5주차 자료를 한곳에서 확인한다.
- 첫 버전에 포함할 페이지: 홈 / 전체 과정 소개 / 1주차~5주차 / 준비물 / 자주 묻는 질문 / 문의 안내
- 첫 버전에 포함할 기능: 상단 메뉴 / 주차별 이동 / 외부 자료 링크 /
준비 중상태 표시 / 모바일 반응형 - 첫 버전에서 제외할 기능: 로그인 / 결제 / 회원 관리 / 댓글 / 개인정보 입력 / 학습 진도 저장 / 복잡한 검색
7. 첫 번째 제작 프롬프트 입력하기 (복사해서 그대로 사용)
위 기획을 그대로 프롬프트로 옮기면 아래와 같습니다. 수정 없이 복사해 @Sites 뒤에 붙여 넣으면 됩니다.
@Sites
Wave Academy 5주 강의 자료 허브 웹사이트를 만들어줘.
[대상]
AI와 Codex를 처음 배우는 성인 학습자야.
기술 용어에 익숙하지 않고 모바일 접속 비중이 높아.
[사이트 목적]
학습자가 전체 과정, 주차별 강의 내용, 준비물,
강의 자료와 공지를 한곳에서 쉽게 확인하게 해줘.
[페이지 구성]
1. 홈
2. 전체 과정 소개
3. 1주차부터 5주차
4. 준비물
5. 자주 묻는 질문
6. 문의 안내
[핵심 기능]
- 상단 메뉴로 각 영역을 쉽게 이동할 수 있게 해줘.
- 외부 자료 링크는 새 창에서 열리게 해줘.
- 자료가 아직 없는 경우 빈 링크를 만들지 말고
"준비 중"이라고 표시해줘.
- 모바일 화면을 우선으로 만들어줘.
- 데스크톱에서도 자연스럽게 보이게 해줘.
[데이터와 기능 제한]
- 로그인 기능은 넣지 마.
- 결제 기능은 넣지 마.
- 회원 관리 기능은 넣지 마.
- 개인정보를 입력하거나 저장하는 기능은 넣지 마.
- 방문자의 진행 상태를 저장하지 마.
[디자인]
- 프리미엄 미니멀 스타일
- 단색 배경
- 넓은 여백
- Pretendard 또는 Noto Sans KR 계열
- 텍스트 위계가 분명한 구성
- 모바일에서 제목과 본문이 쉽게 읽히도록 구성
[사용하지 말아야 할 요소]
- 그라디언트
- AI 느낌의 3D 일러스트
- 불필요한 아이콘
- 반복되는 둥근 카드
- 너무 작은 글씨
- 과도한 애니메이션
[제작 순서]
1. 먼저 사이트 정보구조와 페이지 구성을 제안해줘.
2. 그다음 첫 번째 미리보기를 만들어줘.
3. 메뉴, 링크, 모바일 가독성을 테스트해줘.
4. 문제를 발견하면 수정해줘.
5. 아직 배포하지 마.
6. 내가 승인하기 전에는 공개하지 마.
8. 자료와 파일 제공하기
사이트 제작에 쓸 원고와 파일을 함께 제공하면 결과가 더 정확해집니다. 소개 원고, PDF, 이미지·로고, 스프레드시트, 주차별 강의 자료, 행사 일정, 참고 사이트 링크, 디자인 참고 이미지, 기존 웹 프로젝트 등을 활용할 수 있습니다.
이때 자료 사용 범위를 명확히 말해두는 것이 중요합니다.
첨부한 강의 소개 PDF에서는
과정명, 대상, 1~5주차 주제만 사용해줘.
후기와 개인정보는 사용하지 마.
첨부한 로고는 비율을 변경하지 말고
헤더 왼쪽에 작게 배치해줘.반대로 절대 제공하지 말아야 할 정보도 명확히 구분해야 합니다: API 키, 비밀번호, 인증 토큰, 교인 명부, 연락처와 주소, 심방·상담 기록, 헌금 정보, 건강 정보, 미성년자 개인정보, 공개 권한이 없는 파일.
9. 첫 미리보기 확인하기 — 디자인보다 먼저 볼 것
첫 결과가 나오면 디자인부터 보지 말고 아래 순서로 점검합니다.
- 목적 확인 — 첫 화면에서 사이트의 목적이 5초 안에 이해되는가 / 누구를 위한 사이트인지 알 수 있는가 / 가장 중요한 행동이 분명한가
- 사실 확인 — 과정명과 일정이 정확한가 / 주차별 제목이 정확한가 / 확인되지 않은 내용을 AI가 만들어내지 않았는가 / 중복된 설명이 없는가
- 구조 확인 — 메뉴 이름이 쉬운가 / 필요한 페이지가 빠지지 않았는가 / 첫 버전에 필요 없는 기능이 들어가지 않았는가
- 모바일 확인 — 제목이 화면 밖으로 잘리지 않는가 / 가로 스크롤이 생기지 않는가 / 버튼이 너무 작지 않은가 / 본문 줄이 지나치게 길지 않은가
- 공개 상태 확인 — 아직 배포되지 않았는가 / 공유 범위가 소유자만으로 유지되는가 / 개인정보와 비공개 링크가 없는가
10. 초보자가 자주 하는 실수 5가지
- “예쁜 사이트를 만들어줘”라고만 요청한다 → 대상, 목적, 페이지, 기능, 저장, 공개 범위와 제외 기능을 구체적으로 적습니다.
- 처음부터 모든 기능을 넣는다 → 첫 버전은 핵심 페이지 3~6개와 핵심 행동 하나로 제한합니다.
- 원본 자료가 자동 갱신된다고 생각한다 → 원본이 변경되면 사이트의 새 버전을 만들어 검토하고 다시 배포해야 한다고 가정합니다.
- 첫 결과를 바로 공개한다 → 미리보기, 테스트, 버전 저장, 승인, 배포 순서를 지킵니다.
- 이미지 생성 모델이 만든 작은 글자를 그대로 사용한다 → 중요한 한글 문구와 메뉴는 정확한 텍스트로 직접 입력하도록 요청합니다.
완료 체크리스트
- Sites의 역할과 일반 코드 생성의 차이를 이해했다.
- 첫 프로젝트의 사용자를 정했다.
- 사용자가 완료할 핵심 행동을 한 문장으로 적었다.
- 필요한 페이지를 3~6개로 줄였다.
- 첫 버전에서 제외할 기능을 정했다.
- 개인정보와 비밀값을 분리했다.
-
@Sites제작 프롬프트를 입력했다. - 첫 미리보기를 확인했다.
- 아직 배포하지 않았다.
마무리
여기까지 따라왔다면 첫 사이트의 미리보기까지 만들어본 셈입니다. 다음 편(시리즈 2)에서는 이 미리보기를 자연어로 수정하고, 실제 사용자처럼 테스트하고, 버전으로 저장한 뒤 승인된 결과만 배포하는 실전 흐름을 다룹니다. Codex Sites의 전체 개념과 배경이 궁금하다면 개관 글을 함께 읽어보세요.
관련 강의: Wave Academy에서는 이번 실습처럼 Codex Sites로 첫 사이트를 직접 만들어보는 강의를 진행합니다. 강의 신청·일정 문의는 오픈채팅에서 받고 있습니다.