DAY 03수학의 힘 AI 교육특강

학원 홍보 랜딩페이지 제작

코드를 한 줄도 쓰지 않고, 원하는 페이지를 설명해서 Claude가 만들게 합니다. 목적과 학원 정보를 정리하고, 1페이지 홍보 페이지를 만들어 말로 고친 뒤, 파일질라로 닷홈에 올려 내 휴대폰으로 열어 봅니다.

1.오늘의 수업

PART 2 · AI로 학원 알리기 — 1·2회차가 학원 안의 일(분석·지도·상담)이었다면, 3·4회차는 그 강점을 학원 밖으로 알리는 일입니다.

수업 대상

웹사이트를 직접 만들어 본 적 없는 원장님·강사님

수업방식

기획 → Claude로 만들기 → 말로 고치기 → 인터넷에 올리기

핵심목표

누구에게 무엇을 보여 줄지 먼저 정하고, 고칠 곳을 짚어 말로 페이지를 완성한 뒤, 내 컴퓨터의 파일이 서버에 올라가야 인터넷 주소가 생긴다는 것을 직접 경험하기

오늘 쓰는 도구

Claude, 메모장, 닷홈(무료 호스팅), 파일질라(FileZilla — FTP 프로그램)

미리 해 왔나요?

닷홈 회원가입. 아직이면 9번 실습을 시작할 때 가입부터 합니다 (본인 인증용 휴대폰 필요).

2.오늘 배우는 내용 & 전체 흐름

1목적 · 학원 정보 카드

2페이지 구조 기획

3Claude로 만들기

4index.html로 저장

5말로 고치기

6닷홈 무료 호스팅 신청

7파일질라로 올리기

8내 휴대폰으로 열어 보기

3.랜딩페이지란?

랜딩페이지

한 가지 목적을 위한 한 페이지짜리 웹페이지입니다. 필요한 정보만 담고, 마지막에 상담·신청 같은 하나의 행동으로 이어지게 만듭니다.

겨울방학 특강 모집

예비고1 설명회 신청

신규 반 개설 안내

과정마다 페이지를 하나씩 만들어 문자·SNS에 주소만 보내면 됩니다. 오늘 방법을 익히면 다음 페이지는 요청문만 바꿔 만들 수 있습니다.

4.실습: 목적 정하고 학원 정보 카드 만들기

실습 01

디자인보다 먼저 정할 것은 누구에게 · 무엇을 · 마지막에 무엇을 하게 할지입니다.

다 채운 카드는 복사해서 메모장에 저장해 두세요. 정보가 부족하면 Claude에게 "랜딩페이지에 필요한 정보를 한 번에 하나씩 질문해주세요"라고 해도 됩니다.

5.실습: 페이지 구조 기획

실습 02

표가 나오면 틀린 사실(과정명·연락처)부터 고치고 넘어갑니다.

6.실습: Claude로 1페이지 웹사이트 만들기

실습 03

Claude 화면 오른쪽에 미리보기가 뜹니다. 코드를 한 줄도 쓰지 않았는데 학원 페이지가 나왔습니다.

HTML — 내용과 뼈대

<h1>수학의 힘 학원</h1>
<p>학생의 현재 수준에서 시작하는 수학</p>

h1 큰 제목 · p 문장 · button 버튼

CSS — 보이는 모습

h1 {
  font-size: 42px;
}

글자 크기, 색, 여백, 배치

코드를 외울 필요는 없습니다. 고칠 때 "어디를 말하는지" 알 정도면 충분합니다.

7.실습: index.html로 저장하고 열어 보기

index.html은 인터넷 주소로 들어왔을 때 가장 먼저 열리는 파일 이름입니다. 꼭 이 이름으로 저장합니다.

1바탕화면에 my-page 폴더 만들기
2Claude 코드의 복사 버튼으로 전체 복사 (미리보기에 내려받기 버튼이 있으면 그걸로 저장해도 됨)
3메모장 → 붙여넣기 → 다른 이름으로 저장: 파일 이름 index.html, 파일 형식 모든 파일, 인코딩 UTF-8
4index.html 더블클릭 → 브라우저에서 확인. 창을 좁혀 휴대폰 크기로도 보기

한글이 깨져 보이면 메모장에서 인코딩을 UTF-8로 다시 저장하세요.

8.실습: 말로 고치기 — 한 번에 한 곳씩

실습 04

외주 업체에 부탁하던 수정을 직접 합니다. 고친 코드를 받으면 index.html에 덮어써 저장하고 브라우저를 새로고침합니다.

어디가 바뀔지 모르는 요청

"전체적으로 더 좋게 만들어줘."

고칠 곳을 짚은 요청

"첫 화면만. 제목은 짧게, 설명은 2줄 이내, 상담 버튼은 제목 아래로. 다른 영역은 그대로."

고쳐 볼 거리 — 2개 이상

문구 — 광고 같은 문장을 차분하게

순서 — 교육 방식을 프로그램 위로

버튼 — "상담 문의하기"로, 더 눈에 띄게

디자인 — 여백 넉넉히, 제목·본문 크기 차이 분명하게

9.실습: 닷홈 무료 호스팅 신청

실습 05

웹 서버 (호스팅)

내 컴퓨터의 파일은 나만 봅니다. 인터넷에 늘 켜져 있는 컴퓨터(웹 서버)에 올려야 누구나 볼 수 있습니다. 닷홈은 그 공간을 무료로 빌려줍니다.

FTP

내 컴퓨터의 파일을 웹 서버로 보내는 방법입니다. 오늘은 무료 프로그램 파일질라로 보냅니다.

1닷홈 로그인 (가입 안 했다면 지금 가입)
2무료 호스팅 신청
3관리 페이지에서 아래 정보를 확인해 적어 두기

FTP 주소 : ____________ / FTP 아이디 : ____________ / 업로드 폴더 : ____________ / 내 웹 주소 : ____________
FTP 비밀번호는 보통 무료 호스팅을 신청할 때 정합니다. 여기에 적지 말고 기억해 두세요.

메뉴 이름·위치는 바뀔 수 있습니다. 막히면 Claude에게 "닷홈 무료 호스팅에서 FTP 접속 정보를 확인하는 순서를 알려줘"라고 물어보세요.

10.실습: 파일질라로 FTP 연결하고 올리기

실습 06

STEP 1 파일질라 설치

1filezilla-project.org 접속 → FileZilla Client 내려받기 (Server가 아니라 Client)
2설치 — 중간에 다른 프로그램을 함께 설치하라는 화면이 나오면 체크 해제

STEP 2 빠른 연결

파일질라를 실행하면 맨 위에 빠른 연결 줄이 있습니다.

칸	넣을 것
호스트	닷홈에서 적어 둔 FTP 주소
사용자명	FTP 아이디
비밀번호	FTP 비밀번호
포트	비워 두기 (기본값 21)

→ 빠른 연결 버튼. 연결되면 아래 창이 둘로 나뉩니다. 왼쪽 = 내 컴퓨터, 오른쪽 = 서버.

FTP 비밀번호는 다른 사람과 공유하지 않고, AI 채팅에도 넣지 않습니다.

기본 FTP 연결은 주고받는 내용이 암호화되지 않으므로 공용 Wi-Fi에서는 접속하지 않습니다. 학원 공용 PC라면 실습 후 빠른 연결 버튼 옆 ▼ → 기록 지우기로 접속 정보를 지우고, 닷홈에서도 로그아웃합니다.

STEP 3 끌어다 놓기

1오른쪽(서버)에서 닷홈 관리 페이지에 적힌 업로드 폴더로 들어가기
2왼쪽(내 컴퓨터)에서 바탕화면 → my-page 폴더 안의 index.html을 찾기
3index.html을 오른쪽 창으로 끌어다 놓기 — 같은 이름이 있다고 물으면 덮어쓰기

STEP 4 내 휴대폰으로 열어 보기

PC 브라우저에서 내 웹 주소가 열린다
내 휴대폰으로도 주소를 열어 봤다
글자가 깨지지 않고 버튼이 보인다

11.안 보일 때 확인할 것

이럴 때	확인할 것
파일질라 연결이 안 돼요	호스트·아이디·비밀번호 오타, 무료 호스팅 신청이 끝났는지 확인
페이지가 안 보여요	파일 이름이 정확히 index.html인가, 올바른 업로드 폴더에 올렸나
고쳤는데 그대로예요	다시 저장 → 파일질라로 다시 올려 덮어쓰기 → 새로고침
한글이 깨져요	메모장에서 UTF-8로 다시 저장해 올리기

12.더 해 보기 (선택)

필수는 아닙니다. 시간이 남을 때 골라서 해 보세요.

로고·사진 넣기, 두 번째 페이지, 다시 쓸 요청문 클릭해서 펼치기 ▾

로고·사진 — my-page 안에 images 폴더를 만들고 사진을 넣은 뒤 "images 폴더의 academy.jpg를 학원 소개 영역에 넣어 주세요. 휴대폰에서도 넘치지 않게." 올릴 때 images 폴더도 함께 끌어다 놓기. 파일 이름은 영어 소문자로.

두 번째 페이지 — 학원 정보 카드의 목적만 바꿔서(예: 설명회 신청) 같은 순서로 만들어 보기

다시 쓸 요청문 — "수학학원 홍보용 1페이지 랜딩페이지를 만들어주세요. [학원 정보 카드] 순서: 첫 화면 / 소개 / 특징 / 프로그램 / 상담. HTML 파일 하나, 휴대폰에서도 편하게, 과장 없이, 한국어 주석, 전체 코드."

13.프롬프트 역설계 — 결과에 남은 요청의 흔적 읽기

실습 · 진도에 맞춰 하고 싶은 만큼

AI가 만든 결과를 먼저 보고, 그 결과가 나오려면 어떤 프롬프트가 필요했을지 거꾸로 설계해 보는 연습입니다. 3·4회차에는 두 문제씩, 5회차에는 지금까지를 모아 네 문제가 나옵니다. 회차마다 조금씩 더 깊이 생각하게 됩니다.

결과를 읽고, 이 결과가 나오려면 무엇을 요청했어야 할지 생각합니다
"내 프롬프트" 칸에 쓰고, Claude 새 채팅에 보내 봅니다
내 결과와 문제의 결과를 비교합니다 — 문장이 똑같을 필요는 없고, 빠진 요소가 없으면 됩니다
마지막에 예시 답안을 펼쳐 내 프롬프트와 비교합니다

예시 답안은 정답이 아니라 한 가지 예입니다. 문제는 진도에 맞춰 하고 싶은 만큼 풀면 됩니다.

오늘의 생각 훈련

AI가 만든 결과의 특징 하나하나는 누군가 요청한 흔적입니다. 누구를 위한 페이지인지, 어떤 순서인지, 어떤 내용이 꼭 들어갔고 무엇이 빠졌는지를 찾아보세요. 학원 이름·대상·수업 방식 같은 사실은 AI가 알 수 없습니다. 결과에 사실이 있다면, 그건 요청에 들어 있었던 것입니다.

역설계 ① 학원 홍보 페이지 구성안

상황 — 중등 수학 소수 정예반을 알리는 1페이지 홍보 페이지를 만들기 전에, Claude에게 구성안부터 받았습니다.

AI가 만든 결과

[홍보 페이지 구성안] 바른수학학원 — 중등 소수 정예반 1. 첫 화면 제목: 개념부터 다시, 중등 수학 소수 정예반 한 줄: 한 반 8명, 선생님이 한 명 한 명의 풀이를 직접 봅니다 버튼: [상담 신청하기] 2. 이런 학생에게 맞아요 - 문제는 푸는데 왜 그런지 설명을 못 하는 학생 - 시험 때마다 같은 단원에서 틀리는 학생 3. 수업은 이렇게 해요 - 개념 설명 → 대표 유형 → 오답 다시 풀기 - 매주 단원 확인 테스트 4. 상담 신청 - 전화: [전화번호] - 운영 시간: [확인 후 기재] ※ 성적 향상을 약속하는 표현은 넣지 않았습니다.

이 결과가 나오도록 내 프롬프트를 써 보세요.

예시 프롬프트 (정답이 아니라 한 가지 예)

우리 학원 홍보용 1페이지 웹페이지의 구성안을 먼저 짜줘. 아직 코드는 만들지 마. 학원: 바른수학학원, 중등 수학 소수 정예반 (한 반 8명) 보는 사람: 중학생 자녀를 둔 학부모 우리 학원의 특징: 선생님이 풀이를 직접 확인, 개념 → 대표 유형 → 오답 다시 풀기, 매주 단원 확인 테스트 구성: 첫 화면(제목·한 줄·상담 버튼) → 이런 학생에게 맞아요(2개) → 수업 방식 → 상담 신청 전화번호와 운영 시간은 내가 나중에 넣을 테니 빈칸으로 둬. 성적 향상을 약속하는 표현은 쓰지 마.

결과의 이 부분은 → 요청의 이 부분에서 나왔습니다

결과에서 보이는 것	요청에 들어 있던 것
학원 이름·한 반 8명·수업 방식	내가 준 학원 정보
학부모가 읽는 말투	보는 사람을 알려 줌
네 덩어리의 순서	구성 지정
[전화번호] [확인 후 기재]	빈칸으로 두라는 조건
"약속하는 표현은 넣지 않았습니다"	쓰지 말라는 조건
"아직 코드는 만들지 마"	구성안부터 받는 순서

결과에 학원만의 사실이 들어 있다면 그건 요청에 있었던 것입니다. 사실을 주지 않으면 AI는 그럴듯한 학원을 지어냅니다.

역설계 ② 고치기 전·후를 보고 고치기 요청 맞히기

상황 — 완성한 페이지에서 한 곳만 고쳤습니다. 나머지는 하나도 바뀌지 않았습니다.

고치기 전 — 첫 화면

최고의 강사진이 만드는 확실한 성적 향상!
지금 바로 상담하세요
[상담 신청하기]

AI가 만든 결과

첫 화면 (고친 후) 개념부터 다시, 중등 수학 소수 정예반 한 반 8명, 선생님이 한 명 한 명의 풀이를 직접 봅니다 [상담 신청하기] (나머지 부분, 글자 크기, 색은 그대로)

이 결과가 나오도록 내 프롬프트를 써 보세요.

예시 프롬프트 (정답이 아니라 한 가지 예)

첫 화면 문구만 고쳐줘. 나머지 부분과 디자인(글자 크기·색·버튼)은 그대로 둬. "최고의", "확실한 성적 향상"처럼 과장되거나 결과를 약속하는 말은 빼줘. 제목에는 누구를 위한 반인지(중등, 소수 정예)가 보이게 하고, 그 아래 한 줄에는 우리 학원만의 특징(한 반 8명, 풀이 직접 확인)을 넣어줘.

결과의 이 부분은 → 요청의 이 부분에서 나왔습니다

결과에서 보이는 것	요청에 들어 있던 것
첫 화면만 바뀜	고칠 곳 지정
디자인이 그대로	그대로 둘 곳 지정
"최고의·확실한" 사라짐	빼야 할 표현 지정
"중등 소수 정예반"	제목에 대상이 보이게
"한 반 8명, 풀이 직접"	넣을 특징 지정

고칠 때는 "바꿀 곳"과 함께 "그대로 둘 곳"을 말해야 합니다. 범위를 정하지 않으면 AI는 잘된 디자인까지 바꿉니다.

14.오늘의 결과물

1학원 정보 카드

2학원 홍보용 1페이지 웹사이트

3인터넷 주소로 열리는 게시 결과

15.오늘의 핵심 & 다음 수업

Claude가 맡는 것문구 정리, 코드 작성, 수정

내가 맡는 것목적 정하기, 사실 확인, 고칠 곳 짚기, 게시 확인

핵심 — 코드를 외우는 것보다 원하는 결과를 설명하고 고치는 방법이 중요합니다.

다음 수업

DAY 04 — PPT·마케팅 콘텐츠 제작

오늘 만든 학원 정보 카드로 설명회 PPT 시안을 받아 레퍼런스로 쓰는 법, 모집·SNS 문구, 홍보 영상용 Flow 프롬프트를 다룹니다. 학원 정보 카드를 저장해 두세요.

수강생 확인이 필요합니다