AI HOMEPAGE SCHOOL CURRICULUM

4주 동안,
내 사업의 공식 홈페이지를
직접 만들고 배포합니다

ChatGPT로 기획하고, Claude Design과 Codex로 제작하고,
GitHub·Vercel로 배포하고, 네이버·구글 검색 등록과 AIO 최적화까지 연결합니다.

3시간 × 4회

총 12시간 실전과정

ChatGPT 기획

Claude Design 제작

GitHub·Vercel 배포

SEO·GEO·AIO 점검

네이버·구글 등록

수강 신청하기 → 홈으로 돌아가기

4주 로드맵

1주차

기획

ChatGPT

2주차

제작

Claude Design

Codex

3주차

배포

GitHub

Vercel

schemaWorks

4주차

등록·자산화

네이버 서치어드바이저

구글 서치콘솔

OVERVIEW

전체 구조 한눈에 보기

4주 과정은 기획, 제작, 배포, 등록·자산화의 흐름으로 진행됩니다. 매주 하나의 핵심 산출물이 남도록 설계되어 있습니다.

1주차

기획·리서치·이미지 제작

ChatGPT

핵심 도구

ChatGPT

산출물

기획안 + 목업 이미지 + 실사 이미지 + 브랜드 톤앤매너

2주차

실제 페이지 제작, 멀티페이지 구현

Claude Design

Codex

핵심 도구

Claude Design / Codex

산출물

반응형 다페이지 웹사이트 + 파비콘 + OG 이미지

3주차

배포 & 기술 최적화

GitHub

Vercel

schemaWorks

핵심 도구

GitHub, Vercel, schemaWorks

산출물

실서비스 URL + 커스텀 도메인 + sitemap·robots 점검 + GA4 설치 + schemaWorks 1차 진단

4주차

검색엔진 등록 & 브랜딩 & 자산화

네이버 서치어드바이저

구글 서치콘솔

핵심 도구

네이버 서치어드바이저, 구글 서치콘솔

산출물

검색엔진 등록 + GA4 실시간 방문자 확인 + schemaWorks 재진단 + 운영 점검표

PREPARATION

수업 전, 이것만 준비해 오세요

AI홈페이지스쿨은 실제 홈페이지 완성을 목표로 하는 과정입니다. 수업 효과를 높이기 위해 아래 자료를 미리 준비하면 좋습니다.

1

사업 소개 자료

회사명, 대표자명, 서비스 소개, 고객 대상, 가격 정보, 연락처

2

기존 콘텐츠

블로그, 인스타그램, 유튜브, 상세페이지, 후기, 포트폴리오 자료

3

브랜드 자료

로고, 대표 컬러, 기존 명함, 소개서, 사진 자료

4

계정 준비

ChatGPT, Claude, GitHub, Vercel, 구글 계정

5

연결 자료

구글폼, 카카오톡 채널, 네이버 플레이스, 구글 비즈니스 프로필

6

도메인 준비

도메인이 있다면 기존 도메인 정보, 없다면 수업 중 구매와 연결 방법을 안내합니다

7

신뢰 자료

고객 후기, 수강 후기, 구매 후기, Before/After 사례, 언론 보도, 자격증, 수상 이력, 협업 사례

8

신청·상담 흐름

상담 신청 방식, 신청서 문항, 결제 안내, 상담 가능 시간, 자주 묻는 질문, 수강 후 안내 메시지

자료가 완벽하지 않아도 괜찮습니다. 수업 중 ChatGPT와 Claude를 활용해 부족한 기획과 카피, 이미지, 구조를 함께 완성합니다.

1주차

3시간

기획·리서치·이미지 제작 — ChatGPT 하나로 끝내기

ChatGPT

목표

무엇을, 누구에게, 왜 보여줄 것인가부터 실제 홈페이지에 들어갈 이미지까지 ChatGPT로 완성합니다.

1H

AI 홈페이지 기획의 이해

·홈페이지와 랜딩페이지의 차이

·목적별 구조 선택: 브랜딩형·리드수집형·포트폴리오형·판매형

·타깃 고객과 홈페이지 목적 정의

·홈페이지가 AIO 시대 공식 기준점이 되는 이유

함께 다룰 프롬프트

— 타깃 페르소나 분석 프롬프트

— 경쟁사 3곳 벤치마킹 프롬프트

— 문제-해결(PAS) 메시지 도출 프롬프트

2H

정보구조와 카피 설계

·사이트맵 만들기: 메인·서브페이지 구성

·섹션별 목적 정의: Hero, 문제, 해결, 신뢰, CTA

·헤드라인, 서브카피, CTA 문구 작성

·FAQ와 고객 불안 해소 문구 설계

3H

목업 이미지·실사 이미지·브랜드 톤 정리

·ChatGPT 이미지 생성으로 레이아웃 목업 시안 뽑기

·업종별 실사 스타일 이미지 생성 프롬프트

·인물·제품·공간 컷 이미지 구성

·컬러 팔레트와 폰트 조합 결정

·브랜드 톤앤매너 확정: 전문적·친근함·고급스러움

·콘텐츠 소재 수집 체크리스트 정리

1주차 결과물

홈페이지 기획안

카피 초안

목업 이미지

ChatGPT 생성 실사 이미지 세트

브랜드 톤앤매너 정의서

2주차

3시간

실제 페이지 제작 — 멀티페이지 구현

Claude Design

Codex

목표

1주차 기획안을 실제 작동하는 반응형 멀티페이지 웹사이트로 구현합니다.

1H

Claude Design 실전 제작

·프롬프트로 메인페이지 뼈대 생성

·Hero·소개·서비스·후기·CTA 섹션 순차 제작

·컬러, 폰트, 간격 미세 조정

·이미지와 카피를 실제 페이지에 반영

2H

멀티페이지 확장과 반응형 점검

·소개·서비스·포트폴리오·문의 서브페이지 제작

·페이지 간 네비게이션과 링크 연결

·공통 헤더·푸터 구성

·모바일·태블릿·데스크톱 반응형 점검

·버튼, 호버 효과, 스크롤 애니메이션 점검

·이미지 용량과 비율 최적화

3H

폼·브랜드 요소·Codex 보조 활용

·구글폼 또는 카카오톡 채널 문의 연결

·전화·오픈채팅 버튼 연결

·네이버지도 또는 구글맵 임베드

·파비콘 제작과 적용

·OG 이미지 제작과 적용

·메타 타이틀과 디스크립션 초안 작성

·Codex로 세부 기능 수정과 버그 픽스

·Claude와 Codex의 역할 분담 이해

2주차 결과물

반응형 멀티페이지 웹사이트

파비콘

OG 이미지

문의 폼 또는 카카오톡 연결

메타 타이틀·디스크립션 초안

로컬·미리보기 상태의 완성 사이트

3주차

3시간

배포 & 기술 최적화 — AIO·SEO·GEO

GitHub

Vercel

schemaWorks

목표

완성된 홈페이지를 실제 URL로 배포하고, 검색엔진과 생성형 AI가 이해하기 쉬운 구조로 점검·개선합니다.

1H

GitHub 저장과 Vercel 배포

·GitHub 계정 생성과 저장소 만들기

·코드 커밋과 버전 관리 개념

·롤백, 이전 버전으로 되돌리기 이해

·GitHub와 Vercel 연동

·Vercel 원클릭 배포

·HTTPS 적용 확인

·배포 URL 공개 테스트

2H

커스텀 도메인과 필수 기술 파일 세팅

·도메인 구매 흐름 이해 (가비아 등)

·Vercel에 커스텀 도메인 연결

·DNS 설정 기본 이해

·이메일·도메인 기반 연결 안내

·sitemap.xml 세팅

·robots.txt 세팅

·개인정보처리방침 페이지 추가

·카카오톡 공유용 OG 이미지 최종 확인

3H

schemaWorks 진단과 AIO 최적화 점검

·Schema.org 구조화 데이터 적용

·메타 태그 점검

·H1·H2·H3 헤딩 구조 점검

·성공·경고·오류 항목별 수정

·GPTBot 등 AI 크롤러 대응 설정

·페이지 속도와 이미지 용량 재점검

·전체 링크와 버튼 동작 테스트

schemaWorks 진단 기준 90점 이상을 목표로 AIO 최적화 항목을 점검하고 개선합니다.

3주차 결과물

실서비스 배포 URL

커스텀 도메인 연결

sitemap.xml

robots.txt

개인정보처리방침 페이지

schemaWorks AIO 최적화 점검 결과

전체 링크·버튼 테스트 완료

4주차

3시간

검색엔진 등록 & 브랜딩 극대화 & 자산화

네이버 서치어드바이저

구글 서치콘솔

목표

사람과 AI 모두에게 발견되는 홈페이지로 완성하고, 스스로 유지·확장할 수 있는 자산으로 만듭니다.

1H

검색엔진 등록

·네이버 서치어드바이저 등록

·사이트맵 제출

·구글 서치콘솔 등록

·색인 요청

·네이버 스마트플레이스 연계

·검색엔진 등록 후 확인 방법

2H

브랜딩 극대화와 신뢰 요소 강화

·인스타그램·블로그·스레드 프로필 링크 연결

·명함과 카드뉴스에 QR/URL 반영

·기존 블로그·유튜브 콘텐츠와 홈페이지 연결 구조 만들기

·고객 후기와 포트폴리오 섹션 업데이트 방법

·사업자정보와 연락처 명확화

·신뢰 요소 배치 전략

3H

유지보수, 자산화, 확장 로드맵

·Claude로 홈페이지 텍스트 지속 업데이트하는 법

·이미지 교체와 섹션 수정 프롬프트 만들기

·내 홈페이지 전용 수정 프롬프트 라이브러리 정리

·상세페이지와 이벤트페이지 추가 제작 방법

·블로그 연동, 결제 연동 등 다음 단계 방향

·완성 사이트를 신규 사업 제안과 포트폴리오로 활용하는 법

4주차 결과물

네이버·구글 등록 완료

브랜딩 연결 구조

고객 후기·포트폴리오 업데이트 구조

내 홈페이지 전용 수정 프롬프트 라이브러리

유지보수 가능한 완성 홈페이지

확장 로드맵

RESULT

4주 후, 이런 결과물이 남습니다

1

홈페이지 기획안

사이트맵, 카피, 브랜드 톤앤매너가 정리된 홈페이지 설계 문서

2

ChatGPT 이미지 세트

목업 이미지와 업종별 실사 이미지 세트

3

반응형 멀티페이지 웹사이트

Claude Design 또는 Codex로 제작한 실제 웹사이트

4

GitHub 저장소

수정 이력과 버전 관리가 가능한 코드 저장소

5

Vercel 배포 URL과 커스텀 도메인

실제로 외부에 공유할 수 있는 공식 홈페이지 주소

6

SEO·GEO·AIO 최적화 점검 결과

schemaWorks를 활용한 구조, 메타, 헤딩, 구조화 데이터 점검 결과

7

네이버·구글 검색엔진 등록

네이버 서치어드바이저와 구글 서치콘솔 등록 및 색인 요청

8

유지보수 프롬프트 라이브러리

스스로 홈페이지를 수정하고 확장할 수 있는 내 홈페이지 전용 프롬프트 모음

TOOLS

각 도구는 이런 역할을 합니다

ChatGPT

기획, 리서치, 카피, 목업 이미지, 실사 이미지 제작

Claude Design

홈페이지 화면 구성, 섹션 제작, 멀티페이지 구현, 디자인 수정

Codex

세부 기능 수정, 코드 보완, 버그 픽스, 배포 전 기술 점검

GitHub

코드 저장, 버전 관리, 수정 이력 관리

Vercel

홈페이지 배포, HTTPS 적용, 커스텀 도메인 연결

schemaWorks

AIO 최적화 항목 진단, 구조화 데이터, 메타, 헤딩 구조 점검

네이버 서치어드바이저

네이버 검색 등록, 사이트맵 제출, 색인 확인

구글 서치콘솔

구글 검색 등록, 색인 요청, 검색 노출 상태 확인

CHANGE

수강 후, 이런 상태가 됩니다

BEFORE

✕홈페이지가 없거나 오래되었습니다.

✕블로그와 SNS에 정보가 흩어져 있습니다.

✕고객에게 보낼 공식 링크가 없습니다.

✕홈페이지 제작과 배포가 막막합니다.

✕도메인과 검색 등록이 어렵게 느껴집니다.

✕AI가 내 사업을 이해할 구조가 부족합니다.

AFTER

✔내 사업 공식 홈페이지가 생깁니다.

✔서비스, 후기, 문의 CTA가 한곳에 정리됩니다.

✔고객에게 보낼 수 있는 공식 URL이 생깁니다.

✔GitHub와 Vercel로 직접 배포할 수 있습니다.

✔도메인, OG 이미지, 검색 등록 흐름을 이해합니다.

✔schemaWorks로 AIO 최적화 상태를 점검할 수 있습니다.

✔이후에도 Claude와 Codex로 직접 수정할 수 있습니다.

4주 동안,
내 사업의 공식 홈페이지를 직접 완성해 보세요

AI홈페이지스쿨은 강의를 듣고 끝나는 과정이 아닙니다. 4주 동안 직접 기획하고, 만들고, 배포하고, 등록하고, 개선하면서 내 사업의 공식 디지털 자산을 완성하는 실전 과정입니다.

수강 신청하기 → 홈으로 돌아가기

4주 동안,내 사업의 공식 홈페이지를직접 만들고 배포합니다

전체 구조 한눈에 보기

수업 전, 이것만 준비해 오세요

기획·리서치·이미지 제작 — ChatGPT 하나로 끝내기

실제 페이지 제작 — 멀티페이지 구현

배포 & 기술 최적화 — AIO·SEO·GEO

검색엔진 등록 & 브랜딩 극대화 & 자산화

4주 후, 이런 결과물이 남습니다

각 도구는 이런 역할을 합니다

수강 후, 이런 상태가 됩니다

4주 동안,내 사업의 공식 홈페이지를 직접 완성해 보세요

4주 동안,
내 사업의 공식 홈페이지를
직접 만들고 배포합니다

4주 동안,
내 사업의 공식 홈페이지를 직접 완성해 보세요