AI Agent로 홈페이지를 만들고 실제 URL까지 배포하는 교육
프롬프트 문구를 외우는 교육이 아니라, 업무 맥락과 프로젝트 지침을 정리하고 AI Agent CLI로 실제 파일을 만든 뒤 배포 URL까지 확인하는 실습형 교육입니다.
과정 핵심 설명
이 과정은 ChatGPT 답변을 복사해 쓰는 수업이 아닙니다. 만들 홈페이지의 목적, 대상, 문구 기준을 정리하고 Codex·Claude Code 같은 Agent CLI가 프로젝트 폴더 안에서 파일을 읽고 수정하도록 작업 구조를 만듭니다. 마지막에는 GitHub와 Cloudflare Pages를 거쳐 실제로 열리는 주소를 확인합니다.
3시간 특강은 AI Agent 작업 흐름과 배포 구조를 빠르게 확인하는 구성입니다. 2일 부트캠프형은 수강자가 직접 홈페이지를 만들고 실제 접속 가능한 URL까지 남기는 구성입니다.
이런 분께 추천합니다
기업·기관의 AI 실무 교육과 창업 과정에서 홈페이지 제작·배포 프로젝트로 운영할 수 있습니다. 수강 대상은 AI에게 실제 프로젝트 작업을 맡기고 배포까지 경험하고 싶은 실무자입니다.
ChatGPT는 써봤지만 파일 생성, GitHub, 배포, 도메인 연결에서 막히는 분께 적합합니다.
교육 후 실제 URL이 남는 결과물 중심 AI 교육을 구성할 때 활용할 수 있습니다.
자기 서비스나 사업 소개용 홈페이지를 AI Agent와 함께 만들어보고 싶은 분께 적합합니다.
프롬프트 교육 다음 단계로 실제 프로젝트 제작과 배포 흐름을 경험하게 할 때 적합합니다.
코드를 받았지만 홈페이지가 되지 않는 3단계
AI가 코드를 만들어줘도 바로 공개 홈페이지가 되지는 않습니다. 파일을 확인하고, 저장소에 올리고, 배포 주소를 만드는 과정이 연결되어야 실제 고객이 열 수 있습니다.
프롬프트, 컨텍스트, 하네스, Agent CLI, 배포 구분
실제 결과물은 한 문장 프롬프트만으로 만들어지지 않습니다. 요청문, 업무 배경, 반복 구조, 실행 도구, 배포 기준을 함께 정리해야 수업 후에도 같은 방식으로 수정할 수 있습니다.
AI에게 맡길 일, 목적, 원하는 결과 형식을 담아 보내는 요청문입니다.
서비스 소개와 문의 버튼이 있는 1페이지 홈페이지를 만들어줘
AI가 판단할 때 필요한 배경정보입니다.
대상은 비개발 실무자
톤은 신뢰감 있게
과장 표현은 제외
반복 작업을 같은 기준으로 처리하는 작업 순서와 점검 구조입니다.
초안 → 검토 → 수정
→ 배포 → 모바일 확인
사람은 알고 있지만 아직 설명하지 않은 기준입니다.
너무 홍보처럼 보이면 안 됨
초보자도 이해해야 함
실제 URL이 남아야 함
명령어 창에서 프로젝트 폴더의 파일을 읽고 수정하는 AI 실행 환경입니다.
index.html을 읽고
Hero 문구와 CTA를 수정해줘
로컬 파일을 공개 주소로 전환하는 과정입니다.
GitHub → Cloudflare Pages
→ 기본 URL → 내 도메인
교육 구성 예시
2일 18시간 과정은 Day 1 9시간, Day 2 9시간으로 구성합니다. 첫날은 AI에게 일 시키는 구조를 만들고, 둘째 날은 배포와 운영 기준을 정리합니다.
수업 후 남길 홈페이지 URL과 작업 범위를 먼저 정합니다.
프롬프트에서 Agent CLI로 넘어가는 흐름과 역할을 정리합니다.
AI가 판단할 기준과 사람이 알고 있는 숨은 기준을 나눕니다.
단발 요청이 실패하는 이유와 반복 구조의 필요성을 사례로 확인합니다.
VS Code, Git, Node.js, Codex 또는 Claude Code 사용 환경을 맞춥니다.
프로젝트 폴더 안에서 AI가 읽고 수정할 기본 구조를 만듭니다.
AGENTS.md 또는 CLAUDE.md에 작업 기준을 남깁니다.
정적 홈페이지 초안을 만들고 브라우저에서 화면을 확인합니다.
문구, 구조, 모바일 화면, CTA 위치를 검토합니다.
초안을 기준으로 부족한 컨텍스트와 수정 기준을 보강합니다.
저장소를 만들고 변경 이력을 남긴 뒤 배포 주소를 생성합니다.
배포 로그와 공개 URL을 기준으로 화면이 정상 노출되는지 확인합니다.
기본 주소와 내 도메인 또는 서브도메인의 연결 상태를 확인합니다.
검색 노출에 필요한 기본 제목, 설명, 링크 구조도 함께 점검합니다.
모바일에서도 AI에게 수정 요청하는 운영 흐름을 정리합니다.
최종 URL을 열어보고 다음 수정에 쓸 운영 하네스를 남깁니다.
진행 방식 예시
- 개념, 시연, 개인 실습, 피드백
- GitHub와 Cloudflare Pages 배포
- 실제 배포된 홈페이지 URL 확인
- 핵심 개념 짧게 정리
- 정적 홈페이지 제작
- Cloudflare Pages 기본 URL 배포
- AI Agent 작업 흐름 이해
- Agent CLI 데모 확인
- 실습용 템플릿 제공
- 수강자 수준에 맞춘 구성
- 내부 문서 기반 하네스 제작
- 조직 업무에 맞춘 실습 자료
- 개인 사업 또는 서비스 기준 진행
- 기획, 문구, 제작, 배포 연결
- 운영 프로세스 정리
교육에서 해보는 실습
- 프로젝트 폴더 만들기
- VS Code와 터미널 연결
- Codex 또는 Claude Code 실행
- AGENTS.md 또는 CLAUDE.md 작성
- 대상, 톤, 금지 표현 정리
- 검토 기준을 문장으로 남기기
- 정적 HTML/CSS 페이지 생성
- 메인 문구와 CTA 배치
- 브라우저에서 로컬 확인
- 애매한 피드백을 기준으로 바꾸기
- 문구, 구조, 모바일 화면 수정
- 초안과 수정본 비교
- GitHub 저장소 생성
- Cloudflare Pages 연결
- 공개 배포 URL 확인
- 직접 만든 정적 홈페이지
- GitHub 저장소와 배포 URL
- 내 업무용 AI 작업 하네스
최종 산출물
실습형 과정은 설명으로 끝나지 않습니다. 수강자는 직접 만든 홈페이지 파일, 저장소, 배포 주소, 이후 수정에 쓸 운영 기준을 남깁니다.
Codex 또는 Claude Code가 프로젝트 폴더에서 파일을 읽고 수정할 수 있는 기본 환경
AGENTS.md 또는 CLAUDE.md에 정리한 작업 기준, 말투, 금지 표현, 검토 방식
수강자가 직접 확인하고 수정한 HTML/CSS 기반 홈페이지 파일
작업 파일과 변경 이력을 관리하는 저장소
수업 종료 후 실제로 접속 가능한 홈페이지 주소
모바일 또는 데스크톱에서 AI에게 수정 요청하고 검토하는 반복 작업 구조
AI Agent 작업 요청 템플릿
아래 예시는 교육 중 직접 수정해 가져갈 수 있는 기본 템플릿입니다. 한 번의 요청이 아니라 생성, 검토, 수정, 배포까지 이어지는 작업 흐름으로 사용합니다.
FAQ
코딩을 모르는 수강자도 따라올 수 있나요?
가능합니다. 교육은 코드를 외우는 방식이 아니라 폴더, 파일, 브라우저, 배포 흐름을 순서대로 따라가는 방식입니다.
수업이 끝나면 실제 URL이 남나요?
실습형 과정에서는 Cloudflare Pages 기본 주소 또는 도메인 연결 주소로 실제 접속 가능한 URL을 확인하는 것을 목표로 합니다.
GitHub나 Cloudflare 계정이 꼭 필요한가요?
배포 실습에는 필요합니다. 교육 전 준비사항으로 계정 생성과 설치 체크리스트를 안내합니다.
기관 보안 환경에서도 진행할 수 있나요?
가능 범위는 기관 정책에 따라 조정합니다. 외부 계정 사용, 코드 저장소 공개 범위, 도메인 연결 방식은 교육 전 확인합니다.
제공 자료와 관련 학습자료
수업 이후에도 같은 과정을 반복할 수 있도록 설치 체크리스트, 지침 파일 템플릿, 배포 체크리스트와 수정 요청 예시를 제공합니다.
제공 자료
- 사전 설치 체크리스트
- AGENTS.md 템플릿
- CLAUDE.md 템플릿
- 정적 홈페이지 구성 템플릿
- Cloudflare Pages 배포 체크리스트
- 도메인 연결 체크리스트
- SEO/GEO 기본 점검표
- 모바일 Codex 작업 요청 예시
- 배포 전 최종 점검표
관련 학습자료
AI에게 맡길 일과 사람이 판단할 기준을 먼저 정리할 때 연결합니다.
CSS 디자인 용어집“답답함”, “촌스러움” 같은 피드백을 화면 언어로 바꿀 때 참고합니다.
A4 PDF & 발표자료 가이드최종 산출물과 검토 기준을 문서·발표자료 자동화로 연결합니다.
관련 실습 노트
프로젝트 폴더, 지침 파일, 권한과 확인 명령을 처음부터 순서대로 정리합니다.
AI 코딩 CLI로 첫 홈페이지 만들기index.html 하나를 만들고 브라우저에서 직접 확인하는 입문 실습입니다.
Cloudflare Pages 배포하기로컬 홈페이지를 GitHub에 올리고 실제 접속 가능한 배포 주소를 만드는 순서입니다.
Windows Codex CLI 설치Node.js 확인부터 Codex 실행까지 초보자 기준으로 안내합니다.
Windows Claude Code 설치터미널 준비, 설치, 로그인과 첫 실행 흐름을 확인합니다.
Windows Antigravity CLI 설치설치 전 준비사항과 프로젝트 폴더에서 실행하는 순서를 정리합니다.
AI Agent 교육을 준비하고 있다면
수강자 수준, 사용할 도구, 만들고 싶은 홈페이지 유형, 배포 목표를 알려주시면 교육 시간과 실습 범위, 준비사항을 안내합니다.