말로 다 되는 세상-코딩1도 모르는 학원 원장이 ChatGPT와 홈페이지를 만들어봤습니다

저는 학원운영밖에는 모르던 20년차 학원원장입니다.

23기에는 정말 1도 몰랐구요. 23기를 통해 신세계를 경험하고 다시 등록한 24기에서는 중급과정에 도전했습니다.

[24기 GEO실험실]

Ai, 코딩도 낯선 저에게 GEO는 말해 무엇하겠습니까만은, 스터디장님이신 체크님과 버디님이신 엔지님의 도움으로 제가 운영하는 에이블에듀 홈페이지를 AI와 함께 직접 만들어보고 있습니다.

아직 최종 완성본은 아니지만,

기획 → 브랜드 정리 → 실제 홈페이지 제작 → Netlify 배포 → 기존 자료조사 → 사진·영상 촬영계획까지 진행했습니다.

처음에는 단순히 “홈페이지 하나 만들어보자”였는데,

하다 보니 오히려 우리 회사를 다시 정리하는 프로젝트가 되었습니다.

1. 홈페이지부터 만들지 않고, 먼저 AI에게 인터뷰를 받았습니다

엔지님의 강의를 듣고 그대로 얻은 꿀팁과 프롬프트로, 처음 ChatGPT에게 이렇게 요청했습니다.

> 나는 코딩을 전혀 모르는 학원원장이야.

> 우리 학원 홈페이지를 만들고 싶어.

> 바로 만들지 말고 먼저 나를 인터뷰해줘.

> 질문은 한 번에 하나씩 해줘.

제가 운영하는 에이블에듀에는

- 서창EiE

- 유치부 영어 EKE

- 개별맞춤 Spring 영어학원

- 글샘국어학원

이 있습니다.

지역에서는 서창EiE라는 이름은 많이 알려져 있지만,

정작 에이블에듀라는 이름은 아직 익숙하지 않았습니다.

그래서 홈페이지의 목표를 이렇게 정했습니다.

“서창EiE의 기존 신뢰를 입구로 사용하되,

궁극적으로는 에이블에듀라는 이름을 각인시키자.”

AI와 인터뷰를 계속하다 보니

왜 여러 학원을 운영하게 되었는지도 다시 정리가 됐습니다.

클래스 수업이 맞는 아이는 EiE,

자기 속도가 필요한 아이는 Spring,

6~7세는 영어를 즐겁게 시작하는 EKE,

읽고 생각하고 표현하는 힘이 필요한 아이는 글샘국어.

결국 핵심은 하나였습니다.

아이마다 필요한 교육이 다르다.

그래서 지금 홈페이지의 메인 문구도 이렇게 정했습니다.

아이마다 다른 길, 하나의 목표.

제대로 된 교육.

2. 코딩 없이 실제 홈페이지를 만들었습니다

기획이 정리된 뒤 ChatGPT가 실제 HTML 홈페이지를 만들어줬습니다.

저는 코드를 한 줄도 작성하지 않았습니다.

홈페이지에는

- 4개 교육 브랜드 소개

- 우리 아이 교육 방향 찾기

- 상담 프로세스

- 원장·TEAM 소개

- 성과와 성장스토리

- 상담신청

- 모바일 전화 버튼

등을 넣었습니다.

처음 제 이야기가 실제 화면으로 만들어진 걸 봤을 때

“말로 설명한 게 정말 홈페이지가 되네?”라는 게 꽤 신기했습니다.

📌 ChatGPT와 인터뷰한 내용을 바탕으로 처음 만든 에이블에듀 홈페이지

한국어로 된 웹사이트의 홈페이지

3. Netlify로 실제 인터넷 주소까지 만들었습니다

HTML 파일만 있으면 제 컴퓨터에서는 볼 수 있지만

다른 사람에게 카카오톡으로 공유하기가 어렵습니다.

스터티 때 실질적으로 내 홈페이지로 실험을 하기 위해서는 공유가 필요했습니다.

그래서 Netlify에 올렸습니다.

ChatGPT가 업로드할 파일을 ZIP으로 정리해줬고,

화면을 보면서 하나씩 따라가며 사이트를 공개했습니다.

결국 실제 주소도 생겼습니다.

ableedu.netlify.app

이제 카카오톡으로 링크를 보내면

상대방이 휴대폰에서 바로 홈페이지를 볼 수 있습니다.

코딩을 모르는 저에게는

“내가 만든 홈페이지가 진짜 인터넷에 올라갔다”는 것 자체가 꽤 큰 경험이었습니다.

📌 Netlify를 이용해 실제 공유 가능한 웹주소까지 만들었습니다.

한국어 텍스트가 있는 웹사이트의 스크린샷

4. 그런데 첫 결과는 마음에 들지 않았습니다

홈페이지는 만들어졌지만,

제가 보기에는 뭔가 부족했습니다.

정보는 잘 정리되어 있었지만

“잘 만든 학원 안내문”

같았습니다.

제가 원했던 건

“세련되고 규모감 있는 교육 브랜드 홈페이지”

였습니다.

그래서 AI에게 다시 말했습니다.

> 글자체도 그렇고 임팩트가 부족해.

> 문자만 나열된 느낌이야.

> 학원 전단지가 아니라 교육 브랜드 홈페이지처럼 만들고 싶어.

그 후 디자인 방향을

BOLD / PREMIUM / HUMAN / ENERGETIC

으로 다시 잡았습니다.

큰 타이포,

과감한 여백,

큰 실제 사진,

네이비·화이트·크림슨 컬러,

ABLE이라는 브랜드 이미지를 활용하는 방향으로 수정하고 있습니다.

이 과정에서 느낀 건,

AI의 첫 결과는 완성본이 아니라

내 생각을 눈으로 확인할 수 있게 해주는 첫 시안

이라는 점입니다.

화면을 보고

“이건 너무 평범해.”

“사진을 더 크게.”

“이 문장은 줄이자.”

라고 피드백할수록 점점 제가 원하는 방향으로 바뀌었습니다.

5. 기존 블로그와 밴드 자료도 AI로 정리했습니다

문제는 사진과 실제 자료였습니다.

몇 년간 쌓인 자료가

네이버 블로그와 밴드에 흩어져 있었습니다.

제가 하나씩 찾으려면 꽤 시간이 많이 걸리는 작업입니다.

그래서 Codex/Work를 이용해

기존 블로그와 밴드를 조사했습니다.

홈페이지 후보 자료로

- 게시물 31건

- 이미지 34장

을 정리했고,

- EKE

- 서창EiE

- Spring

- 글샘

- 공간

- 상담 시스템

- 성과

- 학부모 신뢰 요소

등으로 분류했습니다.

사진마다

어느 게시물에서 나온 것인지,

어디에 활용하면 좋은지,

현재 운영 여부 확인이 필요한지도 같이 정리했습니다.

📌 블로그와 밴드에 흩어져 있던 홈페이지 후보 자료를 AI가 분류했습니다.

사람들의 사진이 포함된 한국 웹사이트의 스크린샷

6. AI가 찾아온 자료도 사람이 최종 확인해야 했습니다

자료조사를 하면서 중요한 점도 알게 됐습니다.

과거 게시물에 있다고 해서 지금도 운영하는 것은 아니었습니다.

예를 들어 Spring의 예전 자료에는

원어민 Monthly Report가 있었지만

현재는 운영하지 않습니다.

반면

- 온라인 복습

- Unit Test

- 영역별 월별평가

- Listening 수업

은 지금도 운영하고 있습니다.

그래서 AI가 자료를 찾아주는 것과

그 자료가 지금도 사실인지 확인하는 일은 완전히 다른 문제였습니다.

최종 확인은 결국 실제 사업을 운영하는 사람이 해야 합니다.

7. 부족한 사진은 촬영 체크리스트까지 만들었습니다

홈페이지를 실제로 만들고 나니

어떤 사진이 부족한지도 명확하게 보였습니다.

예를 들면

- EiE 실제 클래스 수업

- Spring 개별학습 장면

- 글샘 독서수업

- 원장 상담 장면

- TEAM 사진

- 차량운행

- 찾아오는 길

등입니다.

그런데 제가 모든 장면을 사진으로 잘 찍어야 한다고 생각하니

오히려 부담이 됐습니다.

그래서 방식을 바꿨습니다.

공간과 수업은 동영상으로 천천히 촬영해서 AI에게 주고,

AI가 홈페이지에 필요한 순간을 정지사진으로 뽑는 방식입니다.

촬영 방법도 정했습니다.

- 4K / 30fps

- 가로 영상 우선

- 1배 렌즈

- 천천히 이동

- 장면마다 2~3초 멈춤

- 15~30초 정도 촬영

그리고 ChatGPT에게

사진 체크리스트 + 동영상 체크리스트 + 촬영 가이드

를 엑셀로 만들어달라고 했습니다.

저는 출력해서

찍은 것부터 하나씩 체크하면 됩니다.

📌 홈페이지에 필요한 사진과 영상을 체크리스트로 만들어 하나씩 채우는 중입니다.

한국어 버전 한국어 버전 한국어 버전 한국어 버전

[가장 크게 느낀 점]

처음에는 그냥 홈페이지를 만들고 싶었습니다.

그런데 AI와 인터뷰하고 홈페이지를 만들다 보니

“나는 왜 이 학원을 만들었지?”

“우리가 정말 잘하는 것은 무엇이지?”

“왜 학원이 여러 개가 되었지?”

“앞으로 어떤 교육기관이 되고 싶은가?”

를 다시 생각하게 됐습니다.

결국 이번 프로젝트는

홈페이지 제작이면서 동시에

AI와 함께 우리 회사를 다시 정의하는 과정

이 되고 있습니다.

AI에게 홈페이지를 만들어달라고 했는데,

결국 AI와 함께 우리 회사를 다시 정의하고 있었습니다.

3
7개의 답글
지피터스 뉴스레터

이번 주 AI, 딱 쓸 것만

매주 월요일 오후,
읽고 바로 써먹을 AI 소식만