AI 빌더스랩LEARNING STUDIO

WORKBOOK · 직접 만들기

생각을 적고,
화면으로 확인하세요.

요청부터 직접 실행까지요청 → 계획 확인 → 제작 → 직접 실행

입력은 이 페이지에만 있습니다. 닫기 전에 ‘기록 내려받기’를 누르세요.

시작 파일 받기 ↓완성 예제 보기 ↗실습 ZIP ↓

01 · 수업 전 준비

Codex 사용 가능한 계정과 로컬 파일 저장까지 준비한 상태에서 시작합니다. 제품 메뉴가 다르면 공식 Quickstart를 확인하세요.

할 일MacWindows
공식 앱 준비공식 Quickstart에서 운영체제에 맞는 앱 다운로드 → 설치 → 본인 계정 로그인. 신규 통합 앱에서는 Codex 선택. 계정의 실제 사용 가능 여부 확인.
폴더 만들기Finder → 문서 → 새 폴더파일 탐색기 → 문서 → 새로 만들기 → 폴더
작업 위치 선택my-first-homepage 폴더를 앱의 작업 폴더로 선택. “이 폴더에 hello.txt로 준비 완료라고 저장해줘”를 요청해 실제 파일 확인.
HTML 열기파일 우클릭 → 다음으로 열기 → Chrome파일 우클릭 → 연결 프로그램 → Chrome
확장자 확인Finder 설정 → 고급 → 모든 파일 확장자 보기파일 탐색기 보기 메뉴 → 표시 → 파일 이름 확장명
새로고침⌘RCtrl+R

공식 문서 확인: 2026.09.13. 최소 OS·계정 제공 조건은 해당 다운로드 화면에서 확인합니다. Windows 실제 기기 설치는 이번 제작에서 미검증입니다.

02 · 나의 한 페이지 기획

03 · 순서대로 실습하기

  1. 시작 파일 또는 빈 폴더 중 하나로 시작합니다.
  2. 계획 요청문을 보내고 세 영역을 확인합니다.
  3. 제작 요청문으로 실제 파일을 저장합니다.
  4. Chrome에서 파일을 열고 목차와 연락 링크를 확인합니다.
  5. 수정 전 파일을 복사하고 제목 하나만 수정합니다.
  6. 새로고침 후 제목과 링크를 다시 확인합니다.
  7. 창을 좁혀 보고, 닫았다 다시 열어봅니다.

04 · 선택형 공개 안내

공개는 필수 실습이 아닙니다. 개인 정보와 사용한 이미지의 공개 가능 여부를 먼저 정합니다.

  1. 본인이 GitHub에 로그인하고 공개 범위를 이해한 뒤 저장소를 준비합니다.
  2. index.html을 포함한 홈페이지 파일을 저장소에 올립니다.
  3. 저장소 Settings → Pages에서 배포 원본과 브랜치를 선택합니다. 메뉴와 이용 조건은 공식 Quickstart를 따릅니다.
  4. 배포 처리 후 제공된 주소를 새 창에서 열어 실제 화면과 링크를 확인합니다.
  5. 아직 열리지 않으면 처리 상태·파일 위치·설정을 확인하고 ‘공개 확인 전’으로 기록합니다.

05 · 마지막 확인

교재로 돌아가기