AI가 처음이라면 여기서 시작하세요 → 입문 1. ChatGPT와 Codex, 무엇이 다를까요?

마지막 확인: 2026년 11월 10일

Codex로 첫 웹페이지 만들기

한 줄 요약

Codex로 만드는 나의 첫 독서 기록 페이지
빈 폴더에서 시작해, 내 브라우저에서 열어보기까지 해 봐요.

개념 그림

🖍️ 그림이에요 (실제 화면과 조금 다를 수 있어요)

따라 하기

설치와 폴더 선택부터 확인하세요

이 수업은 데스크톱 Codex와 내 컴퓨터의 빈 폴더를 사용해요. 웹의 Codex Cloud 실습과는 달라요. 먼저 그림으로 보는 설치·폴더 선택 안내를 완료하세요.

• 학습 폴더: codex-practice
• 결과 파일: index.html 하나
• 별도 패키지 설치·외부 API·회원가입 없이 실행
• 기능: 책 제목 추가, 읽음 표시, 삭제

완성 예제 먼저 열어보기 ↗

파일을 만드는 첫 요청을 보내세요

1. Codex와 작업 폴더가 맞는지 확인하세요

제품 메뉴에서 Codex를 선택하고 작업 폴더를 codex-practice로 지정하세요. 기존 회사 자료가 있는 폴더에서는 연습하지 마세요.

2. 계획을 읽고 파일 생성을 요청하세요

아래 첫 프롬프트를 붙여넣으세요. 우선 계획만 설명하게 해요. 계획이 index.html 하나로 가능한지 확인한 뒤 “이 계획대로 파일을 만들어줘”라고 이어서 요청하세요.

3. Finder 또는 파일 탐색기에서 파일을 여세요

Mac은 Finder, Windows는 파일 탐색기를 열고 codex-practice로 이동하세요. index.html을 두 번 누르면 기본 브라우저에서 열려요. 편집기가 열린다면 파일을 우클릭하고 연결 프로그램에서 브라우저를 선택하세요.

파일이 안 보이면 Codex에 “실제로 저장한 파일의 전체 경로를 알려줘”라고 물어보세요. .txt가 붙은 파일로 잘못 저장되지 않았는지도 확인하세요.

직접 눌러서 세 가지를 확인하세요

1. 제목에 “처음 배우는 AI”를 입력하고 추가를 누르세요. 목록에 한 줄이 생겨야 해요.
2. 빈 입력으로 추가를 눌러보세요. 빈 책이 목록에 생기면 수정이 필요해요.
3. 읽음 표시와 삭제가 해당 책에만 적용되는지 확인하세요.

🖍️ 그림이에요 (실제 화면과 조금 다를 수 있어요)

아래 프롬프트는 브라우저 저장을 요청해요. 새로고침해도 같은 환경에서 목록이 남는지 확인하세요. 로컬 파일과 브라우저 환경에 따라 저장이 제한될 수 있고, 다른 기기로 자동 동기화되지는 않아요.

오류가 나면 증상과 재현 순서를 전달하세요

“안 돼” 대신 “제목 입력 → 추가 클릭을 했는데 목록에 아무것도 나타나지 않아”라고 설명하세요. 화면에 보이는 오류 문구를 함께 주고, 관련 부분만 수정하게 요청하세요.

파일을 수정한 뒤에는 브라우저를 새로고침해야 변경 내용이 보여요. 주소가 수정한 파일과 같은지도 확인하세요.

복사해서 쓰는 요청

대괄호 안을 내 상황으로 바꾸고 실제 ChatGPT·Codex 화면에 붙여넣으세요.

독서 기록 페이지 계획하기

동작하지 않는 부분 수정하기

자주 막히는 부분

확인 문제: index.html을 컴퓨터에서 열었어요. 이제 다른 사람이 인터넷으로 접속할 수 있나요?

답: “아니요, 인터넷 공개에는 별도 배포가 필요하다”
내 컴퓨터의 파일을 여는 것과 서버에 배포하는 것은 달라요. 외부 접속에는 별도의 호스팅·배포가 필요해요.

참고한 공식 자료

• Codex 공식 시작 안내 · 한국어