실습: AI로 웹 발표 자료 만들고 배포하기

ChatGPT 데스크톱 앱의 Codex에게 지침을 주고, 웹 발표 자료를 만들어 인터넷 주소로 공유합니다.

진행 순서

1. 사전 준비 (10분)

ChatGPT 데스크톱 앱

chatgpt.com/download에서 macOS 또는 Windows용 앱을 받아 설치하고, ChatGPT 계정으로 로그인하세요.

Node.js

배포 도구(Vercel)를 실행하는 데 필요합니다. nodejs.org에서 LTS 버전을 받아 설치하세요.

Vercel 가입

vercel.com/signup에서 Hobby(무료)로 가입하세요.

✅ 확인: ChatGPT 앱에 로그인되어 있고, Node.js 설치가 끝났고, Vercel에 로그인되어 있으면 됩니다.

2. 시스템 프롬프트와 지침 세팅 (10분)

작업 폴더 열기

1. 바탕화면에 my-slides 폴더를 만드세요.
2. ChatGPT 앱에서 Codex를 선택하고, 작업할 곳으로 my-slides 폴더를 여세요.

이제부터 Codex는 이 폴더 안에서 파일을 만들고 고칩니다.

시스템 프롬프트: AGENTS.md

AGENTS.md는 Codex가 이 폴더에서 일할 때 항상 먼저 읽는 파일입니다. 매번 반복할 부탁을 여기에 적어 둡니다.

Codex에게 아래처럼 보내세요. 원하는 규칙이 있으면 자유롭게 더하세요.

이 폴더에 AGENTS.md 파일을 만들고 아래 내용을 그대로 넣어 줘.

# 작업 규칙

- 한국어로 답한다.
- 명령을 실행하기 전에 무엇을 하는지 한 문장으로 설명한다.
- 배포처럼 인터넷에 올리는 작업은 실행 전에 나에게 확인받는다.

지침: frontend-slides

스킬은 특정 작업을 어떤 순서와 기준으로 할지 적어 둔 지침 묶음입니다. frontend-slides는 웹 발표 자료를 만드는 스킬입니다.

Codex에게 아래처럼 보내세요.

https://github.com/zarazhangrui/frontend-slides 저장소를 이 폴더의 .agents/skills/frontend-slides 에 내려받아 줘.

Codex가 명령 실행을 허락해 달라고 하면 내용을 읽고 허용하세요.

확인

새 대화를 열고 입력창에 @를 입력하세요. 쓸 수 있는 스킬 목록이 나옵니다.

✅ 확인: 목록에 frontend-slides가 보이면 세팅 끝입니다.

3. 워크플로우 구상 (5분)

바로 만들어 달라고 하기 전에, 무엇을 어떤 순서로 만들지 먼저 정합니다.

발표 내용

메모장에 장표별로 한두 줄씩 적으세요. 5~7장이 적당합니다. 문장은 거칠어도 됩니다.

주제:
발표 상황: (예: 수업 자기소개, 동아리 홍보, 과제 발표)

1. 표지:
2.
3.
4.
5.
6. 마무리:

작업 순서

오늘은 아래 순서로 진행합니다.

1. 내용 전달 → 2. 스타일 고르기 → 3. 완성본 확인 → 4. 한 곳씩 고치기 → 5. 배포

한 번에 다 해 달라고 하지 않고 단계를 나누면, 중간 결과를 보고 방향을 바로잡을 수 있습니다.

4. 만들고 다듬기 (15분)

만들기

입력창에 @를 입력해 frontend-slides를 고른 뒤, 아래처럼 이어서 보내세요. 3단계에서 적은 내용을 붙여 넣습니다.

웹 발표 자료를 새로 만들어 줘. 내용은 아래와 같아.

(3단계에서 적은 내용)

Codex가 질문하면 답하고, 스타일 후보를 보여 주면 마음에 드는 것을 고르세요.

완성되면 my-slides 폴더에 생긴 HTML 파일을 더블클릭해 브라우저로 열어 확인합니다.

다듬기

마음에 안 드는 곳을 한 번에 하나씩 요청하세요. 여러 개를 한꺼번에 부탁하면 일부를 빠뜨리기 쉽습니다.

3번 장표 글자가 너무 많아. 핵심만 남겨 줘.

말로 설명하기 어려우면 화면을 캡처해서 첨부하고 어디가 문제인지 말하세요.

5. 배포와 공유 (10분)

배포

Codex에게 보내세요.

Vercel로 배포해 줘.

처음이면 Vercel 로그인을 위해 브라우저가 열립니다. 1단계에서 가입한 계정으로 로그인하세요. 배포가 끝나면 https://...vercel.app 형태의 주소가 나옵니다.

⚠️ 이 주소는 누구나 볼 수 있습니다. 내리고 싶으면 Vercel 대시보드에서 프로젝트를 삭제하세요.

공유

1. 주소를 내 휴대폰으로 보내서 열어 보세요.
2. 옆 사람과 주소를 바꿔서 서로의 발표 자료를 보세요.
3. 받은 의견으로 고친 뒤 다시 배포해 보세요.

막혔을 때