공통 실습 재료
A-1A · 시작과 준비

“신기하다”에서
“나도 만들었다”로.

처음이어도 괜찮습니다. 오늘은 보고, 따라 만들고, 내 것으로 바꿔봅니다.

2026.10.11 일요일 · 14:00–18:00이성진 · 최대 8명
함께 만들기준비된 재료로 쉽게 시작
내 것으로 바꾸기말로 요청하고 직접 확인
밀착 도움받기막힌 화면을 함께 해결

AI로 이런 것도 된다던데, 나는 어디서 시작해야 할까요?
어려운 용어보다 만드는 경험부터. 소수 인원이라 각자의 화면을 보며 도와드립니다.

AI 활용 올인원 · 코덱스 바이브코딩 기초
A-2A · 시작과 준비

제가 만든 것부터 보여드릴게요

이런 것도 만들 수 있구나. 오늘 내가 해보고 싶은 것을 떠올려보세요.

사용자가 제공한 김대리의 일주일 시작 화면
강사 제공 기존 프로그램 화면 · 실제 작동은 현장에서 함께 봅니다.
사례먼저 보여줄 것이어서 들을 이야기
녹음 내용을 글로 바꾸고 분류하는 프로그램녹음을 글로 옮긴 자료를 넣고 주제별로 정리된 결과 보기매번 읽고 정리하던 불편
갤럭시워치 앱손목에서 실제 작동하는 장면필요한 순간에 바로 쓰고 싶었던 기능
김대리의 일주일질문에 답하고 결과 받기생각을 체험형 질문으로 바꾸는 과정
메모
7분 이내. 실제로 열 수 있는 사례 2~3개만 시연합니다. 문제 → 입력 → 결과 → 처음 만들었던 작은 버전 순서로 설명하세요. 실제 링크·프로그램은 강사 제공 대기 상태입니다. 기존 캡처나 콘셉트를 작동 프로그램으로 소개하지 않습니다. 실패 대비 30초 화면 녹화는 강사 자료로 별도 준비합니다.
A-3A · 시작과 준비

오늘은 이렇게 배웁니다

지금은 진행 방법을 함께 봅니다. 첫 요청은 앱과 폴더를 준비한 뒤 보냅니다.

요청하기만들 결과를 말로 설명
열어보기파일과 버튼 직접 확인
고쳐보기한 곳 바꾸고 다시 확인
이어가기저장하고 집에서 다시 열기
A-4A · 시작과 준비

오늘의 4시간

함께 한 번 끝까지 만든 뒤, 내 아이디어에 적용합니다.

단원경험할 것
A · 시작과 준비사례 보기 · 앱과 작업 폴더 준비
B · 미니북8쪽 책 · 표지 수정 · 반복 파일 작업
C · 웹페이지책을 홈페이지로 · 디자인 변경 · 공개 주소
D · 소개영상세 장과 세 문장 · 12초 MP4 저장
E · 개인 제작작은 기획서 · 한 시간 동안 핵심 기능 하나
F · 공유와 다음 시작직접 보여주기 · 다시 열기 · 질문
메모
개인 제작 60분과 공유 시간을 확보합니다. 가입과 렌더 대기는 병행하고 선택 확장부터 줄입니다. 휴식은 현장 판단. 세부 시간 관리는 강사용 운영안에서만 다룹니다.
A-5A · 시작과 준비

공통 실습 재료를 받습니다

같은 재료로 함께 만들고, 제목·색상·문구를 내 것으로 바꿉니다.

유튜브 키우기 · 퇴근 후 10분 실험실

원고와 이미지가 준비된 공통 실습입니다. 유튜브 소재를 사용하지만 강의의 목표는 코덱스로 만들고 고치는 경험입니다.

실습 폴더 다운로드 ↓
A-6A · 시작과 준비

앱을 설치하고 로그인합니다

내 ChatGPT Plus 이상 계정으로 로그인합니다.

Windows 노트북

Microsoft Store의 ChatGPT 페이지를 엽니다.

Windows용 다운로드 ↗

앱 이름 ChatGPT, 게시자 OpenAI를 확인하고 화면 안내에 따라 설치합니다.

MacBook · macOS

ChatGPT 공식 다운로드 페이지를 엽니다.

macOS용 다운로드 ↗

macOS용 파일을 내려받아 열고, 앱을 응용 프로그램 폴더로 옮긴 뒤 실행합니다.

수업에서는 ChatGPT 앱 안의 Codex를 사용합니다

다운로드 페이지의 ChatGPT 데스크톱 앱을 선택하세요. 별도로 표시된 ChatGPT Classic은 이번 수업용 앱이 아닙니다.

  1. 내 컴퓨터에 맞는 다운로드 버튼 선택

    위의 Windows 또는 macOS 버튼을 누르고, 각 안내에 따라 설치합니다.

  2. 앱을 열고 내 ChatGPT 계정으로 로그인

    Plus 이상을 구독 중인 계정으로 로그인합니다.

  3. 강의안과 앱을 나란히 띄우기

    다음 단계에서 앱의 ChatGPT와 Codex 전환 위치를 확인합니다.

공식 앱 다운로드 화면
공식 설치 안내 웹페이지 · 2026.10.10 확인 · 출처 ↗
A-7A · 시작과 준비

ChatGPT ↔ Codex

앱 왼쪽 위, 현재 이름이 표시되는 전환 메뉴를 찾습니다.

ChatGPT

아이디어·글·이미지를 준비할 때

Codex

내 폴더에 결과물을 만들고 고칠 때

공식 문서의 ChatGPT와 Codex 전환 메뉴 설명 그림
공식 문서의 설명용 화면 · 실제 앱 캡처와는 다릅니다. 이미지를 누르면 크게 볼 수 있습니다. · 출처 ↗
  1. 왼쪽 위 ChatGPT 또는 Codex 이름 누르기

    펼쳐진 메뉴에서 Codex를 선택합니다.

  2. Codex 화면에서 실습 시작

    화면 구성이 다르면 강사에게 보여주세요. 두 화면은 필요에 따라 오갈 수 있습니다.

A-8A · 시작과 준비

오늘의 작업 폴더를 엽니다

압축을 풀어 나온 폴더가 오늘의 프로젝트입니다. 새 빈 폴더를 만들 필요는 없습니다.

공식 문서의 프로젝트 목록 설명 그림
공식 프로젝트 설명 화면 · 실제 새 프로젝트 생성 메뉴 캡처는 별도 확인 필요 · 출처 ↗
  1. 압축을 푼 폴더 찾기

    다운로드 폴더에서 AI_Class를 찾습니다. 폴더를 열면 AGENTS.md, input, output이 보여야 합니다. ZIP 안에서 바로 시작하지 않습니다.

  2. Codex에서 이 폴더 열기

    프로젝트 추가 또는 폴더 열기에서 방금 찾은 폴더를 선택합니다. 공식 예시의 Projects 오른쪽 + 위치를 참고하되, 실제 메뉴가 다르면 강사와 확인합니다.

  3. 프로젝트 안에서 새 대화 열기

    선택한 폴더 위치를 확인합니다. 폴더 이름은 달라도 괜찮습니다. 같은 폴더에서 계속 작업합니다.

메모
Codex 앱 직접 캡처가 도구 정책으로 차단되어 현재 버전의 생성 버튼 위치는 미검증입니다. 수업 전 실제 화면에서 프로젝트 추가 → 폴더 선택 경로를 확인하고 캡처를 교체합니다.
A-9A · 시작과 준비

준비된 구조를 이해합니다

안내문 하나, 재료 폴더 하나, 결과 폴더 하나. 이미 ZIP 안에 준비되어 있습니다.

현재 프로젝트 폴더/
AGENTS.mdAI가 참고할 작업 규칙
input/원고와 이미지 · 원본 보존
output/내가 만드는 결과 · 처음에는 비어 있음
참고자료/디자인 예시와 도움말
완성예제/완성 모습 확인 · 막혔을 때 복구
A-10A · 시작과 준비

준비된 재료를 확인합니다

복사나 이름 변경 없이, 지금 열린 프로젝트의 재료를 확인합니다.

지금 함께하기 · 첫 요청
현재 프로젝트 폴더의 AGENTS.md와 input/project.json을 읽어줘.
input/미니북-원고.txt, input/표지요청문.txt, input/영상-문구.txt와 input/scene-01.jpg, input/scene-02.jpg, input/scene-03.jpg가 있는지 확인해줘.
output, 완성예제/소개영상, 참고자료/레퍼런스가 있는지도 확인해줘.
이 재료로 무엇을 만들지 쉬운 말로 세 줄만 설명해줘.
파일이 빠졌으면 빠진 이름과 확인할 위치를 알려줘.
지금은 파일을 만들거나 수정하지 마.
완료 기준

유튜브 실습 원고와 이미지 세 장이 있고, AI가 알려준 파일 위치를 확인했습니다.

A-11A · 시작과 준비

오늘의 모델: 6 Luna · High · Standard

한 번 설정하고 그대로 진행합니다. 모델 변경이 필요하면 강사와 함께 확인합니다.

공식 문서의 모델 선택 메뉴
선택 위치를 보여주는 공식 예시입니다. 그림 속 6 Sol 대신 오늘은 6 Luna를 선택합니다. · 출처 ↗
  1. 입력창 아래 모델 설정 열기

    모델 이름 또는 Power를 누릅니다. Advanced가 보이면 눌러 세부 설정을 엽니다.

  2. 세 가지 선택 확인

    아래 표대로 맞춥니다. 이미 설정했다면 그대로 두세요. 메뉴 이름이나 선택지가 다르면 강사에게 화면을 보여주세요.

화면 항목선택할 값쉽게 말하면
Model · 모델GPT-6 Luna요청을 받아 작업할 AI
Effort · 추론 정도High답하기 전에 충분히 생각하도록 설정
Speed · 처리 속도Standard일반 속도로 작업. High와 별개의 설정입니다.

내 남은 사용량 확인 ↗ · 시작 전과 개인 제작 전에 확인합니다.

메모

수업 기본값은 GPT-6 Luna · High · Standard로 확정. 학생에게 반복해서 모델을 바꾸게 하지 않습니다. 제공 여부와 실제 메뉴는 수업 전 학생 계정에서 확인합니다.

공식 Plus 추정치는 로컬 메시지 5시간당 350–3,000회이며 고정 보장 횟수가 아닙니다. 추론 정도, 긴 대화, 도구와 이미지 생성, 기존 사용량에 따라 달라집니다. 이 강의의 High 완주 사용량은 실측 전입니다.

막힌 작업은 강사가 원인을 확인합니다. 필요한 경우 6.1 Sol 등 대안을 검토하되 모델 전환은 한도 초기화가 아닙니다. 사용량 가정과 예외 대응 ↗

2026.10.10 확인 · 공식 모델 안내 ↗ · 사용량 안내 ↗

A-12A · 시작과 준비

승인이 뜨면 무엇을 보면 되나요?

승인 창이 나타났을 때만 확인합니다. 지금 요청문을 보낼 필요는 없습니다.

  1. 작업 내용을 읽는다

    설치, 인터넷 사용, 폴더 접근 등 무엇을 하려는지 봅니다.

  2. 대상과 범위를 확인한다

    어느 폴더·사이트·파일에 적용되는지 확인합니다.

  3. 맞으면 허용하고 작업을 이어간다

    내용이 이해되지 않으면 AI에게 쉬운 말로 설명해달라고 요청하거나 강사에게 화면을 보여줍니다.

승인 창이 떴을 때만
지금 요청한 승인이 어떤 작업을 위한 것인지 쉬운 말로 설명해줘.
어느 파일이나 서비스에 영향을 주고, 이번 실습에 왜 필요한지도 알려줘.

공식 권한 안내 ↗

A-13A · 시작과 준비

만들고, 열어보고, 한 곳 고치기

첫 문서를 열어보고, 제목 한 줄을 바꾸며 수정하는 방법을 익힙니다.

지금 함께하기
input/project.json을 읽고 output/나의-첫-문서.txt를 만들어줘.
첫 줄 제목은 “나의 첫 AI 결과물”로 하고, 유튜브 실습 주제 이름과 오늘 기대하는 경험을 한 줄씩 적어줘.
내가 직접 열 수 있도록 파일 위치를 알려줘.
파일을 열어본 뒤 · 제목 수정
output/나의-첫-문서.txt의 제목만 “내가 직접 만든 첫 결과물”로 바꿔줘.
나머지 내용은 유지하고 저장해줘.
내가 다시 열어 바뀐 제목을 확인할 수 있게 안내해줘.
완료 기준

파일을 직접 열었고 다시 열었을 때 제목이 바뀌었습니다.

JSON이 뭔가요? 부록에서 쉽게 알아보기 ↗

B-1B · 미니북 만들기

이제 작은 책 한 권을
만들어봅시다

준비된 이야기 → 나만의 표지 → Word와 PDF

이제 작은 책 한 권을 만들어봅시다
이번 단원에서 만들어볼 결과의 분위기 · AI 생성 이미지
B-2B · 미니북 만들기

준비된 재료로 작은 책 한 권

글을 고르는 시간보다 만들고 고치는 경험에 집중합니다.

제공된 8쪽 미니북 완성 예제의 표지
제공된 Word 예제의 표지를 실제로 열어 확인한 화면 · 같은 구조로 내 결과를 만듭니다.
공통 완료확장 실습
표지·제목·머리말·목차·본문이 있는 8쪽 미니북핵심 내용을 PPTX 3장으로 재구성
Word 문서(.docx)와 읽기용 문서(.pdf)를 직접 열기책을 입체로 보여주는 모형·책등·날개 디자인
제목·문구·색상 한 부분 수정개인 자료로 다시 만들기
메모
B 단원 40분 안의 리허설 배분 제안: 재료 확인 3분 / 표지 생성·수정 7분 / 미니북 12분 / 수정·파일 확인 10분 / 파일 자동화 8분. 실제 소요 시간은 미측정입니다. 표지 생성 대기 중에는 원고를 읽습니다. 생성이 계속되면 복구본으로 이동합니다. 책등·날개는 인쇄 규격 확인 전 디자인 시안으로 표시합니다.
B-3B · 미니북 만들기

재료를 먼저 읽어달라고 하기

원고와 이미지의 역할부터 확인합니다.

지금 함께하기
input/미니북-원고.txt, input/project.json과 input의 이미지 파일을 읽어줘.
이것은 수업용 가상 실습 프로젝트야.
8쪽 미니북의 구성과 각 이미지가 들어갈 위치를 짧게 제안해줘.
원고에 없는 실제 채널 성과나 출시 사실을 지어내지 마.
아직 파일을 만들지 말고 구성을 먼저 보여줘.
완료 기준

공통 원고에 맞는 제목과 8쪽 구성을 확인했습니다.

B-4B · 미니북 만들기

내 표지 이미지를 만들고 고치기

분위기를 고르고, 이미지 한 장을 실제로 만들어봅니다.

  1. 표지 그림 요청

    input/표지요청문.txt를 사용합니다. 제목은 문서에서 얹을 수 있도록 그림에는 글자를 빼도 됩니다.

  2. 수정 한 번 요청

    처음 결과를 보고 색·구도·여백 중 하나를 바꿉니다.

  3. 두 버전을 저장

    처음과 수정한 이미지를 output/cover에 저장하고 미니북에는 수정본을 사용합니다.

지금 함께하기
input/project.json과 input/표지요청문.txt를 읽고 미니북 표지 이미지를 생성해줘.
분위기: [차분한 / 경쾌한 / 신비로운 중 하나]
세로 3:4, 제목을 얹을 상단 여백을 두고 글자 없이 그려줘.
실제 이미지 생성 기능을 사용하고 이미지 파일을 output/cover/표지-01.png로 저장해줘.
이 환경에서 이미지 생성이 안 되면 가능한 이미지 생성 화면으로 안내해줘. 코드로 만든 제목 카드를 이미지 생성 결과라고 하지 마.
이미지 수정 요청
방금 만든 표지 이미지를 수정해줘.
주제와 주요 인물·사물은 유지하고 [배경을 밝게 / 상단 여백을 넓게 / 색을 따뜻하게 중 하나] 바꿔줘.
원본도 남기고 output/cover/표지-02.png로 저장해줘.
두 버전을 비교하고 수정한 표지를 미니북에 사용하게 해줘.
완료 기준

이미지 두 버전을 비교하고 내가 요청한 수정이 반영된 파일을 저장했습니다.

메모
공통 실습입니다. 준비된 AI 이미지는 지연 시 다음 단계용 복구 재료이며 이미지 생성 경험 완료로 세지 않습니다. 생성 대기자는 원고·미니북 구성부터 진행하고 공통 실습 종료 전 다시 확인합니다. 표지 요청문과 확인표는 학생 ZIP에 있습니다.
B-5B · 미니북 만들기

8쪽 미니북 만들기

Office 설치 없이도 이어갈 수 있습니다. 저장한 PDF는 직접 열어 확인합니다.

지금 함께하기
방금 정한 구성으로 output/book에 미니북을 실제 파일로 만들어줘.
표지 1쪽, 머리말과 목차 1쪽, 본문 5쪽, 마무리 1쪽의 8쪽 PDF를 목표로 해줘.
input의 원고와 이미지를 사용하고 한글이 잘 읽히게 해줘.
표지는 output/cover/표지-02.png가 있으면 사용하고, 없으면 input/scene-01.jpg를 임시 표지로 사용해줘.
제목은 크게, 본문은 짧고 여백 있게 배치해줘.
편집용 미니북.docx와 읽기용 미니북.pdf를 만들어줘. 같은 제목·본문·이미지를 사용해줘.
Microsoft Word나 LibreOffice가 없더라도 설치를 요구하지 말고 이미 사용 가능한 제작 도구로 진행해줘.
DOCX에서 PDF로 변환할 수 없다면 PDF를 직접 생성하거나, 8쪽 인쇄용 미니북.html을 만들어 브라우저로 PDF를 저장해줘.
HTML을 만들 때는 이미지와 글꼴을 로컬 파일로 사용하고 A4 세로 인쇄에서 페이지가 나뉘게 해줘.
자동 PDF 저장이 불가능하면 HTML을 여는 위치와 브라우저의 PDF로 저장 방법을 쉬운 말로 안내해줘.
확인 가능한 파일의 페이지 수·글씨 잘림·한글·이미지를 점검해줘. DOCX를 화면으로 확인하지 못했다면 'DOCX 화면 검수 미완료'라고 알려줘.
서로 다른 방식으로 만든 DOCX와 PDF의 배치가 같다고 가정하지 마. 8쪽 여부는 저장된 PDF 기준으로 확인해줘.
생성한 파일과 확인하지 못한 항목을 구분해서 알려줘. 파일이 없는 상태를 완료라고 하지 마.
완성한 책의 제목·본문을 output/book/미니북-원고.txt로도 저장해 다음 웹 실습에서 재사용하게 해줘.
완료 기준

output/book의 미니북.pdf를 직접 열어 8쪽인지, 한글·이미지·페이지 경계가 제대로 보이는지 확인했습니다. 미니북.docx와 미니북-원고.txt도 생성됐는지 확인합니다. DOCX를 열지 못했다면 화면 검수 미완료로 남깁니다.

B-6B · 미니북 만들기

내 취향으로 한 곳 바꾸기

한 번에 하나를 바꾸고, 바뀐 결과를 확인합니다.

지금 함께하기
방금 만든 미니북에서 [제목을 더 짧고 눈에 띄게] 바꿔줘.
주제와 본문 내용은 유지하고, PDF는 전체 8쪽 구성을 유지해줘.
output/book의 DOCX·PDF를 같은 제목과 내용으로 갱신해줘. 인쇄용 HTML을 사용했다면 그 원본도 함께 수정해줘.
Microsoft Word나 LibreOffice 설치 없이 B-5에서 사용한 제작 방식으로 진행해줘.
자동 PDF 저장이 안 되면 수정한 HTML을 다시 PDF로 저장하는 방법을 안내하고, 기존 PDF가 아직 갱신되지 않았다고 알려줘.
수정된 제목·본문도 output/book/미니북-원고.txt로 저장해줘.
변경한 내용과 파일 위치를 알려줘. 화면으로 확인하지 못한 파일은 검수 미완료로 표시해줘.
완료 기준

다시 저장한 PDF를 열어 요청한 수정과 8쪽 구성을 확인했습니다. DOCX·원고 TXT도 같은 제목과 내용으로 갱신됐는지 확인합니다. HTML을 사용했다면 HTML만 수정하고 이전 PDF를 그대로 둔 상태가 아닌지 확인합니다.

PDF가 잘리거나 페이지 수가 달라졌나요? 부록 보기 ↗

B-7B · 미니북 만들기

파일 확인, PPT는 선택 실습

기본 결과를 먼저 열어보고, 시간이 남으면 PPT 3장으로 바꿉니다.

파일직접 확인할 것
DOCX편집 프로그램이 있으면 문장 선택·편집 확인. 없으면 파일 생성 여부만 확인하고 화면 검수 미완료로 기록
PDF표지와 본문이 잘리지 않고 8쪽으로 보이는지
PPTX · 확장핵심 내용이 3장으로 요약되고 편집 가능한지
확장 · PPT 3장
output/book의 미니북 내용을 발표용 PPTX 3장으로 다시 구성해줘.
1장: 제목과 핵심 소개 / 2장: 핵심 아이디어 / 3장: 시작할 행동.
문장을 짧게 줄이고 글씨를 크게 해줘.
편집 가능한 output/slides/소개자료.pptx로 저장해줘.
가능한 도구로 실제 슬라이드 수와 글씨 잘림을 확인해줘. 화면 검수가 불가능하면 미완료로 표시하고, 이 선택 실습 때문에 Office 설치를 요구하지 마.
메모
PPT는 기본 완료를 지연시키지 않습니다. 별도 파일을 만들어야 하며 .html 이름만 .pptx로 바꾸는 것은 변환이 아닙니다.
B-8B · 미니북 만들기

선택 실습: 책 목업·표지 시안

표지 적용 모습을 확인합니다. 실제 인쇄 준비는 별도입니다.

확장 · 3D 목업
미니북의 표지를 사용해 3D 책 목업을 만들어줘.
책 제목과 표지 그림을 유지하고 책이 서 있는 모습을 보여줘.
인쇄 규격 확인 전 시각 예시라고 표시해줘.
output/book에 저장하고 다시 여는 방법을 알려줘.
확장 · 책등과 날개
이 책의 책등과 앞뒤 날개가 포함된 표지 시안을 만들려고 해.
먼저 책의 가로세로 크기, 총 페이지 수, 종이 종류, 책을 묶는 방식, 날개 유무와 인쇄소 규격 중 빠진 정보를 질문해줘.
확정되지 않은 치수를 임의로 정해 인쇄용 완성본이라고 하지 마.
메모
현재 완성예제에는 브라우저에서 여는 CSS 3D 목업이 있습니다. 실제 3D 모델 파일이나 인쇄용 표지 도면으로 설명하지 않습니다.
B-9B · 미니북 만들기

원고 세 개를 한 번에 정리하기

같은 규칙으로 여러 파일을 처리하고, 바뀐 원고로 다시 실행합니다.

  1. 세 원고를 넣는다

    참고자료/파일자동화/input의 TXT 세 개를 사용합니다. 첫 줄은 제목, 다음 줄부터 본문입니다.

  2. 정해진 규칙으로 처리한다

    각 파일의 첫 두 문장을 발췌한 요약문 3개와 통합 목차를 만듭니다.

  3. 원고 하나를 바꾸고 재실행한다

    제목 또는 첫 문장을 바꾼 복사본으로 다시 실행하고 출력도 바뀌었는지 확인합니다.

지금 함께하기
참고자료/파일자동화/input의 TXT 세 개와 참고자료/파일자동화/작업규칙.txt를 읽어줘.
각 파일의 제목과 본문 첫 두 문장을 추출해 요약문 3개와 통합 목차를 만드는 재사용 도구를 만들어줘.
의미를 새로 요약하는 AI 기능이 아니라 정해진 문장을 발췌하는 파일 자동화야.
원본을 보존하고 output/파일자동화에 도구와 출력 파일을 남겨줘.
설치가 필요 없는 브라우저 HTML 도구로 만들고 사용방법을 적어줘.
준비된 입력으로 실행하고 요약문 3개·목차 1개가 실제로 저장되는지 확인해줘.
바꾸고 다시 실행하기
입력 원고 하나를 복사해 첫 문장을 [내가 바꾼 문장]으로 바꿔줘.
방금 만든 같은 도구로 다시 실행하고 바뀐 출력과 유지된 출력을 비교해줘.
처음 입력과 결과도 비교할 수 있게 남겨줘.

설치 없이 실행하는 복구본 ↗

완료 기준

파일 3개를 처리해 결과를 저장하고, 입력 하나 변경 후 재실행 결과까지 확인했습니다.

메모
8분: 규칙 확인 1분 / 도구 생성 또는 복구본 실행 3분 / 입력 수정·재실행 3분 / 출력 확인 1분. 생성이 길면 검증된 복구본을 사용하고 학생이 직접 입력을 바꿔 실행합니다. 이메일·예약 알림 연결은 이번 공통 실습 범위에 포함하지 않는다고 사전에 안내합니다.
C-1C · 웹페이지와 게시

이번에는 웹페이지로
만들어봅시다

같은 이야기 → 둘러보는 화면 → 다른 사람에게 보낼 주소

이번에는 웹페이지로 만들어봅시다
이번 단원에서 만들어볼 결과의 분위기 · AI 생성 이미지
C-2C · 웹페이지와 게시

1단계 대화만으로 홈페이지

책의 내용을 사람들이 둘러보는 화면으로 바꿉니다.

지금 함께하기
output/book/미니북-원고.txt의 내용을 사용해 소개 홈페이지를 만들어줘.
위 원고 파일이 없으면 input/미니북-원고.txt를 사용한다고 먼저 알려줘.
output/web/index.html과 assets 폴더로 저장해줘.
제목, 대표 이미지, 프로젝트 소개, 본문을 펼쳐 읽는 버튼을 넣어줘.
마지막에는 “오늘 한 가지 해보기”라는 제목과 원고에 맞는 작은 실천 문장 하나를 넣어줘.
HTML·CSS·JavaScript로 만들고 로그인·서버 없이 브라우저에서 열리게 해줘.
이미지는 output/web/assets로 복사하고, 다른 컴퓨터에서도 열리도록 상대경로(웹파일 기준 이미지 위치)로 연결해줘.
휴대폰에서도 글씨와 버튼이 읽히게 해줘.
완성하면 실제 파일을 열고 버튼을 눌러 확인해줘.
완료 기준

파일이 열리고 본문을 펼치는 버튼이 작동합니다.

C-3C · 웹페이지와 게시

어떤 분위기로 바꿔볼까요?

이미지 세 장을 비교하고, 마음에 드는 특징 하나를 골라 전달합니다.

AI가 생성한 디자인 참고 이미지입니다. 실제 작동하는 웹사이트 화면은 다음 결과에서 확인합니다. 이미지를 누르면 크게 볼 수 있습니다.

지금 함께하기
output/web의 홈페이지 디자인을 바꿔줘.
참고할 파일: 참고자료/레퍼런스/[reference-editorial.png / reference-night.png / reference-notes.png 중 하나]
적용할 특징: [큰 제목과 넓은 여백 등 한 가지]
먼저 참고 이미지를 열어 확인하고 기존 제목·본문·버튼 기능은 유지해줘.
이미지 속 글을 복사하지 말고 내 내용으로 구성해줘.
수정 전 파일을 복구할 수 있게 남기고 수정 결과를 열어줘.
완료 기준

선택한 분위기가 반영되고 기존 버튼도 작동합니다.

C-4C · 웹페이지와 게시

이미지와 모바일 화면 다듬기

작은 화면에서 직접 읽고 눌러봅니다.

제공된 웹페이지 예제의 PC 화면
PC · 제공 예제 실행 화면
제공된 웹페이지 예제의 모바일 화면
모바일 · 같은 예제
PC · 1280px큰 화면에서 읽기
모바일 · 390px글·이미지·버튼 잘림 확인
지금 함께하기
output/web을 휴대폰 폭 390px과 PC 폭 1280px에서 확인해줘.
가로로 밀리는 부분, 잘리는 제목, 찌그러진 이미지, 누르기 작은 버튼을 고쳐줘.
본문과 기능은 유지해줘. 실제로 어느 부분을 확인했는지 알려줘.
이미지를 교체할 때
input에 추가한 [cover.png]를 홈페이지 대표 이미지로 바꿔줘.
비율을 유지하고 제목과 버튼을 가리지 않게 해줘.
게시할 assets 폴더에도 포함하고 상대경로로 연결해줘.
완료 기준

모바일 폭에서 가로 스크롤 없이 제목·본문·버튼이 보입니다.

C-5C · 웹페이지와 게시

내 파일이 공개 주소가 되는 길

Git은 기록, GitHub는 온라인 보관, Pages는 공개입니다.

내 작업 폴더홈페이지 파일 수정
Git바뀐 내용 기록
GitHub온라인 저장소에 반영
GitHub Pages주소로 접속할 수 있게 게시
메모
Git은 버전 기록 도구이며 GitHub와 다른 서비스입니다. 브라우저 업로드 경로도 가능하지만 AI 자동 업데이트는 별도 인증 연결이 필요합니다.

GitHub 로고: 공식 브랜드 자료 · 나머지는 개념 설명용 아이콘입니다.

C-6C · 웹페이지와 게시

GitHub에 가입하고 준비합니다

이미 계정이 있다면 로그인부터 시작하세요.

  1. 가입 화면 열기

    GitHub 가입하기 ↗ · 이메일을 확인할 수 있게 준비합니다.

  2. 이메일·비밀번호·사용자 이름 정하기

    화면 안내에 따라 가입과 이메일 인증을 끝냅니다. 비밀번호와 인증 코드는 직접 입력합니다.

  3. 로그인된 내 계정 확인

    사용자 이름을 메모해두세요. 다음 화면에서 내 홈페이지 저장소를 만듭니다.

공식 가입 안내 ↗

C-7C · 웹페이지와 게시

내 홈페이지를 인터넷에 올립니다

먼저 아래 요청으로 게시용 파일을 준비한 뒤, GitHub에서 순서대로 올립니다.

지금 함께하기
output/web을 공개하려고 해.
웹에 필요한 파일만 output/public에 복사하고 .nojekyll도 만들어줘.
index.html은 public 바로 아래에 두고 이미지·상대경로·링크를 검사해줘.
공개 대상 파일 목록과 GitHub 웹화면에서 업로드하는 방법을 알려줘.
아직 계정 연결이 안 되어 있으면 자동 게시가 됐다고 말하지 마.
GitHub의 새 저장소 메뉴
① 오른쪽 위 + → New repository · GitHub 공식 안내 이미지 · 출처 ↗
  1. 저장소 만들기

    New repository(새 저장소)에서 my-first-project 이름으로 Public(공개) 저장소를 만듭니다. README(저장소 설명 파일) 추가를 켜고 Create repository를 누릅니다. 같은 이름이 이미 있으면 다른 이름을 정하고 이후에도 그 저장소를 사용합니다.

  2. 홈페이지 파일 업로드

    저장소 Code 화면 → Add file → Upload files를 누릅니다. 위 요청으로 준비한 output/public 안의 파일을 올리고 Commit changes(변경 저장)로 저장합니다. public 폴더째 한 겹 더 넣지 않습니다. .nojekyll은 GitHub에 추가 변환 없이 게시하라고 알리는 빈 설정 파일입니다. 숨김 파일이라 안 보이면 강사와 함께 확인합니다.

  3. Pages 설정하기

    Settings(설정) → Pages → Deploy from a branch(브랜치에서 게시) → main → /(root)(저장소 맨 바깥) → Save(저장).

  4. 생성된 주소를 열기

    배포가 끝나면 표시되는 주소를 휴대폰에서도 열어봅니다. 반영까지 시간이 걸릴 수 있습니다.

GitHub Pages 게시 브랜치 선택 화면
② Branch의 None을 눌러 게시할 브랜치를 선택합니다 · GitHub 공식 안내 이미지 · 출처 ↗
완료 기준

실제 공개 주소를 다른 기기에서 열어 제목과 이미지를 확인했습니다.

메모
공식 절차를 반영했으나 학생 계정으로 가입·이메일 인증·게시하는 전체 리허설은 미완료입니다. 첫 공개 주소를 실제로 확인해야 완료로 기록합니다.
C-8C · 웹페이지와 게시

AI가 같은 저장소를 수정하도록 연결

GitHub 로그인과 AI의 저장소 접근 연결은 별도 단계입니다.

지금 함께하기 · 계정 연결 확인
홈페이지 저장소 URL: [내 GitHub 저장소 주소]
현재 이 저장소에 접근하고 변경을 올릴 수 있는 연결이 있는지 먼저 확인해줘.
없으면 이 환경에서 지원하는 로그인·GitHub 연결 절차를 한 단계씩 안내해줘.
인증은 내가 직접 완료할게. 비밀번호나 인증용 비밀키(토큰)을 대화에 붙여넣게 하지 마.
게시용 저장소 작업은 output/deploy에 따로 준비하고 output/public의 웹파일만 같은 내용으로 복사·갱신해줘.
프로젝트 폴더 전체나 input 원본 전체를 업로드하지 마.
현재 저장소와 게시에 사용할 main 브랜치(작업 기록의 갈래)가 맞는지 확인하고, 연결 완료 여부를 알려줘.
메모
연결 메뉴는 설치 환경에 따라 다르므로 계정 연동 수단을 단정하지 않습니다. 강사 실제 계정에서 연결·변경 반영 리허설 필요.
C-9C · 웹페이지와 게시

AI에게 수정과 업데이트 맡기기

같은 공개 링크에서 바뀐 제목을 확인합니다.

지금 함께하기
앞서 확인한 공개 저장소와 페이지에서 제목을 [새 제목]으로 바꿔줘.
output/web에서 원본을 수정하고 output/public 및 output/deploy의 게시 파일도 같은 내용으로 갱신해줘.
기존 버튼과 이미지가 작동하는지 확인하고, 연결된 동일 저장소에 변경을 기록하고 반영해줘.
배포가 끝났는지 확인하고 실제 공개 주소에서 새 제목을 대조해줘.
다른 저장소나 파일은 변경하지 마. 인증이 필요하면 필요한 단계를 알려줘.
완료 기준

처음 받은 공개 링크를 다시 열었을 때 새 제목이 보입니다.

메모
브라우저 업로드만으로 AI 자동 업데이트까지 검증됐다고 처리하지 않습니다. 계정 연결 → commit/push → 배포 성공 → 실제 URL 확인까지 리허설합니다.
D-1D · 소개영상 만들기

이 이야기를 짧은 영상으로
움직여봅시다

세 장 · 세 문장 · 12초 — 직접 재생하는 MP4까지

이 이야기를 짧은 영상으로 움직여봅시다
이번 단원에서 만들어볼 결과의 분위기 · AI 생성 이미지
D-2D · 소개영상 만들기

세 장·세 문장·12초

제공 이미지 세 장을 기본으로 씁니다. 미리 준비한 내 사진이 있다면 대신 사용할 수 있습니다.

0–4초첫인상
4–8초핵심 이야기
8–12초기억할 한 문장
장면길이역할
010–4초주제와 첫인상
024–8초핵심 이야기
038–12초기억할 한 문장
지금 함께하기
재료 선택: [제공 이미지 / 내 사진]
제공 이미지는 input의 scene-01.jpg, scene-02.jpg, scene-03.jpg, 내 사진은 input/my-photos에서 세 장을 사용해줘.
내 문구: [제공 문구 사용 / 첫 문장, 둘째 문장, 셋째 문장]
제공 이미지를 쓰면 input/영상-문구.txt를 읽고, 내 사진이면 위 세 문장을 사용해줘.
세로 9:16, 12초 소개영상을 만들 거야.
한 장면에 이미지 하나와 짧은 한국어 문구 하나씩 배치해줘.
음악 없이 시작하고, 이미지와 글씨를 바꾸기 쉽게 구성해줘.
새 이미지나 음악을 생성하지 말고 내가 선택한 재료를 사용해줘.
사진은 비율을 유지하고 중요한 얼굴·대상이 잘리면 여백을 넣어줘.
사용할 이미지 파일 세 개의 이름·순서·문구를 output/video/영상계획.txt에 저장해줘.
지금은 계획만 세우고, 영상 파일은 다음 요청에서 만들어줘.
메모
공통 재료와 개인 사진 모두 같은 3장·3문장·12초 구조. 사진은 수업 전에 선택하고 현장 검색 시간을 쓰지 않습니다. 원본 음원·웹툰 제작은 2부 선택 사항. 이미지가 실제 작품이라고 설명하지 않습니다.
D-3D · 소개영상 만들기

HyperFrames로 내 소개영상

제공된 프로젝트에서 이미지와 문구를 바꿉니다.

지금 함께하기
완성예제/소개영상을 output/video로 복사하되, 이미 있는 영상계획.txt와 내가 만든 파일은 보존해줘.
제공된 HyperFrames 프로젝트와 사용방법.txt를 읽어줘.
output/video/영상계획.txt에 적힌 이미지 순서와 문구로 12초 세로 소개영상을 수정해줘.
글씨는 크고 대비가 분명하게, 얼굴이나 핵심 그림을 가리지 않게 배치해줘.
미리보기를 열고 한글·이미지·전환을 확인한 다음 output/video/내-소개영상.mp4로 저장해줘.
실행 환경이 부족하면 진단 결과와 필요한 설치만 안내해줘.
한 문장 수정
두 번째 장면 문구를 [내가 고른 짧은 문장]으로 바꿔줘.
글씨가 넘치지 않게 줄바꿈하고 전체 12초와 이미지 순서는 유지해줘.
미리보기와 output/video/내-소개영상.mp4를 다시 만들어 바뀐 장면을 확인해줘.
메모
영상 환경은 참고자료/실행환경-확인.txt로 사전 확인. 설치·렌더 시간을 기기별로 측정합니다. 실패하면 프로젝트 복구본을 사용하되 학생이 자기 MP4를 저장해야 완료입니다.
D-4D · 소개영상 만들기

MP4를 열어야 영상 완료

미리보기 주소와 실제 영상 파일을 구분합니다.

  1. MP4 파일이 생겼는지

    output/video/내-소개영상.mp4가 있는지 확인합니다. 파일이 여러 개면 마지막으로 수정한 시각도 봅니다.

  2. 일반 동영상 플레이어로 재생

    12초 전체를 보고 이미지와 한국어 문구를 확인합니다.

  3. 수정한 장면 다시 보기

    내가 바꾼 문구가 마지막으로 저장한 MP4에 있는지 봅니다.

지금 함께하기
output/video/내-소개영상.mp4의 위치·길이·가로세로 크기를 확인해줘.
일반 동영상 플레이어로 열 수 있게 안내해줘.
처음·중간·마지막 장면의 한글과 이미지가 정상인지 확인해줘.
HTML 미리보기만 있으면 완료라고 하지 마.
완료 기준

수정한 내 MP4 파일을 직접 재생했습니다.

E-1E · 나만의 프로그램

이제 내가 만들고 싶은 것을
만들어봅시다

주제는 자유롭게. 오늘은 작동하는 핵심 기능 하나부터.

이제 내가 만들고 싶은 것을 만들어봅시다
이번 단원에서 만들어볼 결과의 분위기 · AI 생성 이미지
E-2E · 나만의 프로그램

주제는 자유롭게, 기능은 하나로

1부에서 익힌 요청과 수정을 내 문제에 적용합니다.

만들고 싶은 것오늘의 작은 버전
30문항 진단 앱5문항·결과 3종·다시 하기
블로그 글을 강의 PPT로글 하나 → 실제 PPTX 3장
사진으로 제품 가격 알아보기사진 한 장 → 제품명·특징 분석. 가격 검색은 다음 단계
새 음악·웹툰 만들기짧은 곡 하나 또는 장면 하나. 계정·도구부터 확인
아직 아이디어가 없다면준비된 5문항 테스트 또는 내 자료로 공통 결과물 다시 만들기
E-3E · 나만의 프로그램

짧은 기획서로 범위 정하기

아이디어가 있으면 아래 요청을, 없으면 다음 화면의 예제 요청 하나를 고르세요. 모두 기획서부터 확인합니다.

지금 함께하기
내가 만들고 싶은 것은 [아이디어]야.
앞으로 60분 안에 작동하는 첫 버전을 만들 수 있게 범위를 줄여줘.
내가 겪는 불편, 사용할 사람, 입력 하나, 핵심 기능 하나, 결과 하나, 확인 예제, 오늘 제외할 기능을 정리해줘.
외부 계정·API·MCP가 필요한지와 준비 상태도 확인해줘.
20분·40분·60분에 무엇을 확인할지 포함해 output/personal/기획서.txt로 저장해줘.
아직 만들지 말고 강사와 함께 볼 수 있게 짧게 보여줘.
완료 기준

강사와 핵심 기능·입력·결과·완료 기준을 확인했습니다.

메모
8명×짧은 범위 확인. 준비 안 된 외부 연결이 핵심이면 로컬 처리나 사전 검증 예제로 범위를 조정합니다. 기획서가 긴 학생은 “입력 하나, 결과 하나”부터 다시 정합니다.
E-4E · 나만의 프로그램

아이디어가 없으면 여기서 시작

아이디어가 없다면 아래 두 요청 중 하나만 보냅니다. 이미 기획서를 만들었다면 다음 단계로 이동하세요.

선택 1 · 취향 테스트 기획
5문항 취향 테스트의 첫 버전을 기획해줘.
주제: [나의 작업 방식]
질문 5개, 선택지 3개, 결과 3종, 진행률, 다시 하기만 포함해줘.
로그인이나 외부 AI 연결 없이 브라우저에서 실행하는 범위로 정해줘.
답과 결과 연결, 동점일 때의 처리 방법, 세 결과를 확인할 입력 예제를 포함해줘.
입력 하나, 핵심 기능 하나, 결과 하나, 오늘 제외할 기능과 60분 안의 작업 순서를 output/personal/기획서.txt로 저장해줘.
아직 프로그램을 만들지 말고 강사와 함께 볼 수 있게 짧게 보여줘.
선택 2 · 내 자료로 다시 만들기 기획
오늘 만든 유튜브 키우기 결과물의 구조를 내 자료에 적용하는 첫 버전을 기획해줘.
내 자료 위치: [input/my-materials 등 실제 자료 폴더]
바꿀 결과물: [미니북 / 웹페이지 / 소개영상 중 하나]
먼저 자료가 있는지 확인하고, 없으면 어디에 넣어야 할지 안내해줘.
한 시간 안에 바꿀 핵심 기능 하나, 입력 하나, 결과 하나, 확인 예제와 오늘 제외할 기능을 정해줘.
계획은 output/personal/기획서.txt로 저장하고 아직 제작하지 마.
기존 공통 실습 결과는 보존하고 새 결과는 output/personal 안에 따로 만들도록 계획해줘.

5문항 테스트 완성 예제 열기 ↗

E-5E · 나만의 프로그램

내 기획서로 직접 만들어봅시다

처음부터 완벽하지 않아도 됩니다. 한 번 실행하고, 한 곳씩 고쳐봅니다.

지금 함께하기
output/personal/기획서.txt를 기준으로 첫 버전을 실제 파일로 만들어줘.
핵심 기능 하나부터 구현하고 예제 입력으로 실행해줘.
완성되지 않은 기능을 작동하는 것처럼 표시하지 마.
입력과 첫 화면 → 핵심 동작 → 저장과 다시 열기 순서로 진행해줘.
막히면 원인과 가장 작은 해결 방법을 제안해줘.
완료 기준

내 입력으로 핵심 기능 하나를 실제로 실행했습니다.

E-6E · 나만의 프로그램

막혔을 때 다음 행동

강사를 기다리는 동안 현재 상태와 기대 결과를 정리합니다.

지금 겪는 문제먼저 해볼 것
파일이 어디 있는지 모르겠어요AI가 알려준 경로를 확인하고 프로젝트 폴더의 output부터 찾습니다. 없으면 파일 생성이 끝났는지 물어봅니다.
요청문에 대괄호가 남아 있어요보내기 전에 내 선택으로 바꿉니다. 이미 보냈다면 무엇을 선택했는지 짧게 알려줍니다.
문서가 안 열리거나 글씨가 깨져요파일 이름 끝(.docx/.pdf)과 여는 프로그램을 확인합니다. PDF도 같은지 보고 오류 화면을 강사에게 보여줍니다.
웹페이지에 그림이 없어요index.html과 assets가 함께 있는지 확인합니다. 게시한 저장소에도 assets가 올라갔는지 봅니다.
영상은 보이는데 MP4가 없어요미리보기만 만들어졌을 수 있습니다. 저장 오류와 출력 폴더를 확인하고, 실제 MP4 저장부터 해결합니다.
사용량 제한 안내가 떠요남은 사용량과 재설정 시각을 강사와 확인합니다. 모델을 바꿔도 초기화되지 않습니다. 준비 예제로 열기·수정점 정리·공유를 이어갈 수 있습니다.
실제로 막혔을 때만
현재 상태: [어디까지 됐는지]
문제: [무엇을 눌렀는데 어떻게 됐는지]
원하는 결과: [원래 기대한 모습]
오류 문구: [보이는 내용을 그대로, 없으면 없음]
새 기능을 추가하지 말고 이 문제부터 확인해줘.
메모
막힌 학생은 화면·입력·기대한 결과를 같이 보여주게 합니다. 한 학생에게 오래 붙잡히면 정상 복구본을 먼저 연결하고 다음 학생으로 이동합니다.

파일로 보관하는 문제 해결 안내 ↗

F-1F · 공유와 다음 시작

서로 만든 것을
함께 보겠습니다

작동한 순간, 고친 부분, 다음에 만들고 싶은 것까지 나눠봅니다.

저장지금 결과 보관
다시 열기내 손으로 재실행
공유작동하는 부분 보여주기
F-2F · 공유와 다음 시작

집에서도 다시 열 수 있게

결과 파일과 다음 요청을 함께 챙깁니다.

지금 함께하기
현재 결과를 저장하고 집에서 이어서 작업할 수 있게 정리해줘.
완료한 기능과 아직 안 되는 기능을 구분해줘.
다시 여는 파일, 필요한 실행 방법, 결과 파일 위치, 공개 링크, 다음 요청문을 프로젝트 폴더 바로 안의 이어서_하기.txt에 남겨줘.
내가 직접 닫았다 다시 열어 확인할 수 있게 안내해줘.
완료 기준

작업을 닫고 다시 열었으며 이어서_하기.txt를 저장했습니다.

F-3F · 공유와 다음 시작

각자 만든 것을 소개해봅시다

완성도보다 직접 만들고 고쳐본 경험을 나눠주세요.

무엇을 만들었나요?내가 해보고 싶었던 것
어떻게 작동하나요?직접 입력하고 실행
무엇을 고쳤나요?처음과 달라진 부분
다음은 무엇인가요?이어서 바꿀 한 가지
메모
최대 8명, 1인 약 2분을 기준으로 진행합니다. 질문은 공통 질의응답에서 이어갑니다.
F-4F · 공유와 다음 시작

집에서 이어가는 첫 요청

집에서 같은 작업 폴더를 열고 이어갈 때 사용하는 요청문입니다.

집에서 다시 시작할 때
이 프로젝트의 AGENTS.md와 이어서_하기.txt를 먼저 읽어줘.
현재 작동하는 기능과 미완성 부분을 정리해줘.
오늘은 [다음에 바꿀 한 가지]를 수정하고 싶어.
기존 기능을 확인한 뒤 작은 변경부터 진행해줘.
이제, 내가 만들어보는 시간

이성진 · 윤자동 AI 활용 컨설턴트 · 포텐셜인사이트 대표

LG계열사 책임연구원 · 에너지공학 박사 / 2026.10.10 개정
부록 · 필요할 때 찾아보기

궁금한 점과 막혔을 때

필요할 때 찾아보는 부록입니다. 모든 도움말 요청문을 순서대로 실행할 필요는 없습니다.

궁금한 점 · 쉬운 용어 설명

JSON이 뭔가요?

정보를 항목별로 정리해 저장하는 파일 형식입니다. 예를 들어 제목, 주제, 사용할 이미지 이름을 이름표와 함께 적어둔 자료입니다.

이번 실습의 input/project.json은 AI가 준비된 재료를 이해하도록 돕는 안내 파일입니다. 직접 작성하거나 외울 필요 없이 AI에게 읽어달라고 하면 됩니다.

← A-13 실습으로 돌아가기

AGENTS.md는 왜 있나요?

이 프로젝트에서 AI가 따라야 할 작업 안내문입니다. 원본 보존, 결과를 output에 저장하기, 초보자에게 쉽게 설명하기 같은 약속을 적어둡니다.

이번 ZIP에는 미리 들어 있습니다. 새 폴더에서 혼자 시작할 때도 이 약속을 적어두면 도움이 됩니다. AGENTS.md만 있다고 모든 요청이 자동 실행되는 것은 아니며 원하는 작업은 대화로 요청합니다.

← A-9 실습으로 돌아가기

input과 output은 꼭 이 이름이어야 하나요?

수업에서 정한 이름입니다. Codex가 반드시 요구하는 폴더 이름은 아닙니다. input은 재료, output은 새 결과, 완성예제는 확인·복구용 파일입니다.

이번 요청문은 이 이름을 사용하므로 수업 중에는 그대로 둡니다. 프로젝트의 맨 바깥 폴더 이름은 달라도 괜찮습니다. input/미니북-원고.txt는 현재 프로젝트의 input 폴더 안에 있는 파일이라는 뜻입니다.

← A-9 실습으로 돌아가기

프로젝트와 일반 폴더는 어떻게 다른가요?

폴더는 파일을 담는 공간이고, 여기서 프로젝트는 AI와 함께 작업할 폴더를 Codex에 연결한 것입니다. AI는 열린 프로젝트를 기준으로 재료를 읽고 결과를 만듭니다.

ZIP 자체나 그 위의 다운로드 폴더가 아니라 AGENTS.md·input·output이 함께 있는 폴더를 엽니다. 작업을 이어갈 때도 같은 폴더를 다시 엽니다.

← A-8 실습으로 돌아가기

HTML 파일과 인터넷에 게시한 웹페이지는 어떻게 다른가요?

HTML은 웹페이지의 글·그림 배치를 담는 파일입니다. 내 컴퓨터에서 열면 나만 보는 파일이고, 웹 호스팅에 올리면 다른 사람도 주소로 접속할 수 있습니다.

file://은 내 컴퓨터 파일, localhost는 내 컴퓨터에서 실행 중인 서버 주소입니다. 다른 사람이 볼 주소로 대신 공유하지 않습니다. 게시 후에는 https://로 시작하는 공개 주소를 휴대폰에서도 열어봅니다.

← C-6 실습으로 돌아가기

Git과 GitHub는 각각 무엇인가요?

Git은 파일 수정 이력을 남기는 도구이고, GitHub는 그 파일과 이력을 온라인에 보관하는 서비스입니다. GitHub Pages는 그중 웹파일을 홈페이지 주소로 보여주는 기능입니다.

파일을 수정하는 것과 인터넷에 업데이트하는 것은 별도 단계입니다. 이번 실습에서는 웹파일만 게시하고 원고·개인 자료·인증 정보는 올리지 않습니다.

← C-6 실습으로 돌아가기

막혔을 때 · 증상으로 찾기

실제 발생 사례는 Word·LibreOffice 실행파일을 찾지 못한 문제입니다. 나머지는 예상 도움말입니다. 해결 방법은 내 환경에서 실행하고 확인해야 하며, 자동 검사 통과만으로 실습 해결이 검증된 것은 아닙니다.

예상 도움말파일이나 재료가 없다고 나와요
  1. ZIP을 압축 해제했는지 확인합니다. Windows는 마우스 오른쪽 버튼 → 모두 추출입니다.
  2. 열린 프로젝트 바로 안에 AGENTS.md와 input이 함께 있는지 확인합니다.
  3. 파일을 옮기거나 이름을 바꾸기 전에 강사와 폴더 위치를 확인합니다.

해결 확인: AI가 실제로 찾은 원고와 이미지 세 장의 위치를 알려줍니다.

이 문제가 있을 때만 · 해결 요청
현재 열린 프로젝트에서 AGENTS.md, input/project.json, input/미니북-원고.txt와 input/scene-01.jpg, input/scene-02.jpg, input/scene-03.jpg가 있는지 확인해줘.
파일을 만들거나 옮기지 말고, 실제 위치와 빠진 파일 이름을 알려줘.
프로젝트를 다른 위치에서 열었다면 내가 어떤 폴더를 열어야 할지 쉬운 말로 설명해줘.

← A-10 실습으로 돌아가기

예상 도움말복사한 요청문에서 뭘 바꿔야 하나요?

[대괄호] 안만 내 선택이나 문구로 바꾸고 대괄호는 지웁니다. 예를 들어 [제목을 더 짧고 눈에 띄게]를 제목을 ‘퇴근 후 나만의 채널’로 바꿉니다.

파일 경로는 임의로 바꾸지 않습니다. 대괄호가 없다면 해당 단계에서는 그대로 보냅니다. 선택 실습이나 오류 해결 요청문까지 모두 전송할 필요는 없습니다.

← B-6 실습으로 돌아가기

예상 도움말결과물이 어디에 저장됐는지 모르겠어요

현재 프로젝트의 output 폴더를 엽니다. 미니북은 book, 웹은 web, 영상은 video, 개인 제작은 personal 안을 먼저 봅니다. Windows는 파일 탐색기, Mac은 Finder에서 확인합니다.

해결 확인: AI 답변의 위치에서 파일을 직접 열 수 있습니다. ‘만들었다’는 말만 있고 파일이 없으면 완료가 아닙니다.

이 문제가 있을 때만 · 해결 요청
현재 프로젝트의 output에서 지금까지 만든 결과물의 실제 파일을 확인해줘.
존재하는 파일만 이름·위치·다시 여는 방법으로 짧게 정리해줘.
생성되지 않은 결과나 확인하지 못한 항목은 따로 알려줘. 새 파일은 만들지 마.

← F-2 실습으로 돌아가기

예상 도움말웹페이지에서 이미지가 안 보여요
  1. output/web/index.html과 assets 폴더를 함께 보관했는지 확인합니다.
  2. 게시할 때 HTML만 올리고 이미지 폴더를 빠뜨리지 않았는지 확인합니다.
  3. 깨진 이미지와 오류 문구가 있으면 강사에게 보여줍니다.

해결 확인: 새로고침 후 이미지가 보이고, 공개 주소에서도 같은 이미지를 확인합니다.

이 문제가 있을 때만 · 해결 요청
현재 문제: output/web/index.html에서 [어느 이미지가 안 보이는지]가 안 보여.
오류 문구: [그대로 적기 / 없음]
HTML의 이미지 경로와 실제 파일 이름·위치를 비교해서 원인을 확인해줘.
현재 프로젝트 밖의 절대경로 없이 로컬 열기와 웹 게시에 함께 사용할 수 있게 고쳐줘.
원본 input은 보존하고 변경한 파일과 다시 확인할 방법을 알려줘.

← C-4 실습으로 돌아가기

실제 발생 사례Word나 LibreOffice를 설치하라고 나와요

Windows 실습에서 Word·LibreOffice 실행파일을 찾지 못한 사례가 있습니다. 문서 파일 생성과 화면 검수는 별개입니다. DOCX 생성이 가능해도 그 파일의 페이지 배치를 눈으로 확인하지 못할 수 있습니다.

Office를 설치하는 대신 B-5의 방식으로 진행합니다. PDF 직접 생성이 어렵다면 인쇄용 HTML을 만들고 브라우저에서 PDF로 저장합니다.

  1. output/book/미니북.html을 Chrome 또는 Edge로 엽니다.
  2. Windows Ctrl+P / Mac ⌘+P → PDF로 저장. A4·세로·배율 100%·머리글/바닥글 끄기. 색상·이미지가 빠지면 배경 그래픽을 켭니다.
  3. 미리보기에서 8쪽과 잘림 여부를 확인하고 output/book/미니북.pdf로 저장합니다.

해결 확인: 저장한 PDF를 직접 열어 한글·이미지·8쪽 구성을 확인합니다. DOCX를 열지 못했다면 화면 검수 미완료로 남깁니다. 두 파일의 배치가 같다고 가정하지 않습니다.

실제 오류는 수강생 환경 리허설에서 보고됨. 설치 없는 대체 절차의 Windows 전체 실행은 재확인이 필요합니다.

이 문제가 있을 때만 · 해결 요청
Microsoft Word나 LibreOffice 설치 없이 이어서 진행해줘.
편집용 DOCX를 만들 수 있으면 생성하고, 화면으로 검수하지 못했다면 그 사실을 알려줘.
PDF 변환이 안 되면 같은 원고와 이미지로 output/book/미니북.html을 만들어줘.
A4 세로 인쇄에서 표지 1쪽, 머리말·목차 1쪽, 본문 5쪽, 마무리 1쪽으로 나눠줘.
이미 있는 도구로 PDF를 저장할 수 있으면 output/book/미니북.pdf로 저장해줘.
자동 저장이 안 되면 내가 브라우저에서 PDF로 저장하는 방법을 안내해줘.
다음 실습에 필요한 output/book/미니북-원고.txt도 저장해줘.
확인하지 않은 파일을 검수 완료라고 하지 마.

← B-5 실습으로 돌아가기

예상 도움말PDF가 잘리거나 페이지 수가 달라졌어요

먼저 PDF 저장 때 A4·세로·배율 100%와 머리글/바닥글 끄기를 확인합니다. 그래도 잘리면 실제 페이지 번호와 잘린 내용을 AI에게 알려줍니다.

HTML만 고친 경우에는 PDF를 다시 저장해야 합니다. DOCX와 PDF를 서로 다른 도구로 만들었다면 줄바꿈과 페이지 수가 다를 수 있습니다.

해결 확인: 새 PDF 파일을 다시 열어 8쪽, 한글, 글씨 잘림, 이미지 표시를 확인합니다. DOCX가 안 열리는 경우까지 PDF 확인으로 대신 검수했다고 표시하지 않습니다.

이 문제가 있을 때만 · 해결 요청
output/book/미니북.pdf에서 [페이지 번호와 잘리거나 이상한 내용] 문제가 있어.
사용한 PDF 제작 방식과 인쇄 설정을 먼저 확인해줘.
제목·본문을 보존하면서 PDF가 8쪽이 되도록 글자 크기·여백·페이지 나눔을 조정해줘.
HTML이 원본이라면 HTML도 수정하고 PDF를 다시 저장해줘. 자동 저장이 안 되면 내가 다시 저장하는 방법을 안내해줘.
같은 수정이 DOCX와 미니북-원고.txt의 내용에도 반영되게 해줘.
확인한 파일과 검수하지 못한 파일을 구분해서 알려줘.

← B-6 실습으로 돌아가기

예상 도움말고쳤는데 공개 홈페이지는 그대로이거나 404가 떠요
  1. 내 컴퓨터 파일과 실제 공개 주소를 구분합니다. HTML 수정만으로 인터넷 파일이 바뀌지는 않습니다.
  2. GitHub 저장소와 Settings → Pages에서 게시 상태·주소를 확인합니다. 아직 게시 중이면 완료될 때까지 기다립니다.
  3. index.html과 assets가 게시 위치에 함께 있는지 확인하고, 배포가 끝난 뒤 새로고침합니다.

해결 확인: 공개 주소를 휴대폰이나 새 브라우저에서 열어 변경된 문구와 이미지를 봅니다. 로그인·인증이 필요하면 본인이 처리하고 비밀번호나 인증값은 요청문에 적지 않습니다.

이 문제가 있을 때만 · 해결 요청
웹페이지의 공개 주소: [실제 공개 URL]
현재 문제: [이전 내용이 보임 / 404 / 다른 오류]
오류 문구: [그대로 적기 / 없음]
output/web, output/public, output/deploy 중 실제로 존재하는 폴더와 게시용 파일을 먼저 확인해줘.
내가 게시한 저장소·브랜치·Pages 설정과 비교해서 어디까지 반영됐는지 확인해줘.
인증이 필요하면 내가 처리할 단계를 알려줘. 새 저장소나 새 사이트를 임의로 만들지 마.
프로젝트 전체나 input은 올리지 말고 웹파일만 갱신해줘.
수정한 파일과 실제 게시 여부를 구분해서 알려줘.

← C-9 실습으로 돌아가기

예상 도움말영상은 보이는데 MP4 파일이 없거나 예전 문구예요

브라우저 미리보기와 MP4 저장은 다릅니다. output/video/내-소개영상.mp4가 실제로 있는지, 수정 시각이 최신인지 확인합니다.

문구를 고친 뒤에는 MP4를 다시 렌더해야 합니다. ‘렌더’는 영상 프로젝트를 재생 가능한 영상 파일로 만드는 과정입니다.

해결 확인: 새 MP4를 일반 동영상 플레이어로 열어 처음·중간·끝의 문구를 봅니다. 제공된 예제 MP4를 재생한 것은 내 영상 제작 완료와 구분합니다.

이 문제가 있을 때만 · 해결 요청
output/video의 영상 프로젝트와 내-소개영상.mp4가 실제로 있는지 확인해줘.
현재 상태: [미리보기만 있음 / MP4 없음 / 수정 전 문구가 보임]
오류 문구: [그대로 적기 / 없음]
영상계획.txt와 최신 문구를 확인하고 새 이미지나 음악 생성 없이 현재 프로젝트를 MP4로 다시 렌더해줘.
저장 위치는 output/video/내-소개영상.mp4야. 영상 프로젝트의 원본은 보존해줘.
12초, 720×1280, 30fps인지 확인하고 실제 저장에 실패하면 원인과 다음 행동을 알려줘.
브라우저 미리보기를 MP4 저장 완료라고 하지 마.

← D-4 실습으로 돌아가기

예상 도움말AI가 오래 멈춰 있거나 사용량 제한이 떠요

먼저 현재 작업이 실행 중인지, 승인 대기인지, 오류나 사용량 제한인지 화면의 안내를 확인합니다. 같은 요청을 연속해서 보내지 말고 강사에게 상태를 보여줍니다.

사용량 제한이면 앱에 표시된 재개 가능 시간을 확인합니다. 모델을 바꾼다고 공유 한도가 초기화되는 것은 아니므로 임의로 반복 전환하지 않습니다. 대기 중에는 완성예제로 파일 확인·수정 위치 찾기를 이어갈 수 있습니다.

해결 확인: 실제 작업이 다시 진행되는지 확인합니다. 예제 확인과 직접 생성 완료는 구분해 기록합니다.

← A-11 실습으로 돌아가기

예상 도움말집에서 이어서 하려면 어떻게 시작하나요?
  1. 프로젝트 폴더 전체를 보관합니다. HTML 파일만 따로 옮기면 이미지가 빠질 수 있습니다.
  2. Codex에서 같은 폴더를 다시 엽니다.
  3. AGENTS.md와 이어서_하기.txt를 읽고 이어달라고 요청합니다. 파일이 없으면 현재 output부터 확인하도록 알려줍니다.

해결 확인: 기존 결과가 열리고 원하는 내용 한 곳을 수정해 다시 저장할 수 있습니다.

← F-4 실습으로 돌아가기