오늘 2시간 뒤,
여러분은 인터넷 주소 하나를
갖고 돌아갑니다.

코드는 한 줄도 쓰지 않습니다. 프로그램도 설치하지 않습니다. 돈도 들지 않습니다.

오늘 쓰는 도구 — 셋뿐입니다

오늘 안 하는 것

• 코드 이해하기 — 읽지 마세요. 오늘 하루 종일 안 읽어도 됩니다.
• 프로그램 설치 — 브라우저와 메모장이면 끝입니다.
• 돈 쓰기 — 전부 무료입니다.
• 외우기 — 이 사이트에 다 있습니다. 안 되면 손 드세요.

오늘의 주제는
「나를 소개하는 한 페이지」

주제는 이거 하나입니다. 대신 그 안에서는 뭘 하든 자유입니다.

'나'는 꼭 사람이 아니어도 됩니다. 내가 하는 일 · 내가 파는 것 · 내가 속한 모임 · 내가 좋아하는 것 — 아무거나 '나'로 잡으면 됩니다.

반드시 들어가야 하는 것 — 딱 3개

주제가 안 잡히는 분께 — 셋 중 하나 고르게 하세요

알아야 할 것은 딱 3개

이 세 문장만 이해시키면 오늘 수업은 끝난 겁니다.

프롬프트 쓰기

프롬프트 = AI에게 시키는 말. 그냥 부탁하는 문장입니다. 오늘 진짜 배우는 기술은 이거 하나입니다.

같은 AI, 다른 결과

좋은 프롬프트에 들어있는 5가지

완성 예시 — 화면에 띄워놓고 같이 보세요

빈칸 채우기 틀 — 참가자는 이걸 종이에 씁니다

만들고, 파일로 저장하기

1. claude.ai 에 프롬프트를 붙여넣고 엔터잠시 후 까만 글자 상자가 주르륵 나옵니다. 이게 웹사이트입니다.
2. 코드 상자 오른쪽 위 [복사] 버튼을 누른다🔴 마우스 드래그 금지! 드래그하면 AI 설명 문장까지 딸려 들어가서 나중에 흰 화면이 됩니다.
3. 바탕화면 우클릭 → 새로 만들기 → 폴더 → 이름은 내사이트
4. 메모장을 열고 Ctrl+V 로 붙여넣기시작 버튼 누르고 "메모장"이라고 치면 나옵니다.
5. 파일 → 다른 이름으로 저장아래 3가지를 반드시 확인하세요.
6. index.html 을 더블클릭브라우저가 열리고 내 웹사이트가 뜹니다. 🎉

저장할 때 확인할 3가지 — 여기서 제일 많이 틀립니다

쉬는 시간 8분

쉬는 시간 시작할 때 이 한마디를 던지세요 — "아직 화면 안 뜬 분, 지금 손 들어주세요. 이따가는 늦어요."

코드를 고치지 않습니다.
AI에게 다시 시킵니다.

고치는 4단계 — 이것만 평생 반복하면 됩니다

새 코드를 복사 → 메모장에서 전체 선택하고 덮어쓰기 → 저장 → 브라우저에서 새로고침. 끝입니다.

3판 같이 돌리기 — 복사해서 나눠주세요

1판 · 모양 바꾸기

2판 · 내용 바꾸기

3판 · 버튼 넣기

더 쓸 만한 수정 문장들

인터넷에 올리기

지금까지 만든 건 내 컴퓨터에만 있습니다. 남에게 보여주려면 올려야 합니다. 무료이고 카드도 필요 없습니다.

올리기 전 30초 점검 — 이거 안 하면 반드시 사고 납니다

파일 이름도 확인하세요. index.html.txt ❌  index (1).html ❌  Index.html ❌

배포 6단계

1. dash.cloudflare.com 접속 → 로그인
2. 왼쪽 메뉴에서 Workers & Pages 찾기화면에 따라 Compute 안에 들어있을 수 있습니다. 위치 말고 단어를 찾으세요.
3. Create → 위쪽 탭 Pages → Upload assets🔴 Workers 아닙니다. Connect to Git 아닙니다 — 그건 개발자용입니다.
4. 이름 정하기 — 이게 곧 내 인터넷 주소가 됩니다영어 소문자·숫자·붙임표만. 띄어쓰기·한글·대문자 ❌. 이미 쓰는 이름이면 뒤에 숫자를 붙이세요.
5. 내사이트 폴더를 통째로 끌어다 놓기파일 하나가 아니라 폴더째입니다. 안 되면 Select from computer → Upload folder.
6. Deploy 클릭 → 30초 → 주소 등장 🎉

배포에서 자주 나는 문제

고쳐서 다시 올리기

"이제 이 주소는 영원히 여러분 겁니다. 내용은 언제든 바꿀 수 있고요."

1. AI에게 아무거나 하나 더 고쳐달라고 하기물론 "전체 코드를 통째로 주세요"를 붙여서.
2. 메모장에 덮어쓰고 저장Ctrl+A → Ctrl+V → Ctrl+S
3. Cloudflare → 내 프로젝트 → Create new deployment
4. 폴더를 또 통째로 드래그 → Deploy → 30초
5. 휴대폰에서 새로고침 → 바뀐 게 보인다안 바뀌면 Ctrl+Shift+R (강력 새로고침)

서로 열어보기

1. 각자 주소를 단톡방에 올린다
2. 서로 휴대폰으로 열어본다2~3개를 화면에 띄워 다 같이 봅니다.
3. 마무리 질문을 던진다

가기 전에 — 안전 수칙 4가지

• 비밀번호·주민번호·계좌번호를 페이지에 쓰지 마세요. 주소를 아는 사람은 전부 봅니다.
• 남의 사진과 글을 함부로 올리지 마세요. 인터넷에 공개되는 겁니다.
• AI가 알려준 번호·주소·가격은 직접 확인하세요. AI는 그럴듯하게 틀립니다.
• 지우고 싶으면 Cloudflare 프로젝트 → Settings → 맨 아래 Delete project.

시간이 밀렸을 때 버리는 순서

안 될 때 대처법

여기 나오는 건 전부 정상입니다. 처음 하면 다 겪습니다.

집에서 이어서 하기

이번 주에 해볼 것

• 색깔 바꿔보기 — "전체를 흑백으로 세련되게 바꿔주세요"
• 내용 늘리기 — 소개 3가지를 5가지로
• 소개 문구 다듬기 — "제 소개 문구를 더 인상적으로 5가지 버전으로 제안해 주세요"
• 가족·친구에게 주소 보내기 — 반응 보는 게 제일 재밌습니다
• 휴대폰 화면 점검 — "휴대폰에서 글자가 잘리지 않게 고쳐주세요"

조금 더 욕심내기

AI에게 시킬 때 오래 쓰는 요령 5가지

1. "저는 개발을 전혀 모릅니다"를 먼저 말하기 — 답변이 완전히 쉬워집니다.
2. "전체 코드를 통째로 주세요"를 매번 붙이기 — 부분 코드는 우리에게 독입니다.
3. 한 번에 하나씩 고치기 — 다섯 개를 한꺼번에 시키면 엉뚱한 게 같이 바뀝니다.
4. 잘 나온 코드는 따로 저장해 두기 — index_백업.html처럼. 망가져도 돌아올 수 있습니다.
5. "3가지 안을 보여주세요"라고 하기 — 고르는 게 설명하는 것보다 쉽습니다.

수업 전에 할 것

수업 2~3일 전 보낼 문자 · 카톡 (그대로 복사)

당일 아침 리마인더

당일 준비물 체크리스트

• 사전 안내 문자 발송 (최소 2일 전)
• 이 페이지를 Cloudflare에 올려두고 참가자에게 알려줄 주소 확보
• 예제 사이트를 내 계정으로 미리 배포 → 실제 주소 준비
• 배포를 직접 한 번 미리 해보기 (화면이 어떻게 생겼는지 몸으로 알기)
• 와이파이 비밀번호 크게 써 붙이기
• 단톡방 개설 (주소 공유용)
• 멀티탭 (2시간이면 배터리 나가는 사람 반드시 나옵니다)
• 시작 10분 전 도착자부터 로그인 되는지 확인

강사가 반드시 기억할 3가지

이 교육자료 자체를 인터넷에 올리려면

이 index.html이 들어있는 폴더를 그대로 Cloudflare Pages에 드래그하면 됩니다. 수업에서 가르치는 방법과 똑같습니다. 시연용으로 써도 좋습니다 — "이 교육자료 사이트도 이렇게 만들어서 올린 겁니다."