AI로 만드는 '나만의 웹사이트' 라이브 배포

🚀 [강의 기획안] AI로 만드는 '나만의 웹사이트' 라이브 배포

"코딩 한 줄 몰라도 OK! AI Studio로 디자인·개발하고, 클릭 몇 번으로 실제 인터넷에 내 사이트를 띄웁니다."

📌 강의 개요

• 강의 목적: AI Studio로 프론트엔드 웹 앱을 자동 생성하고, VS Code를 통해 빌드 후 카페24 호스팅에 실제 배포해 보는 실습형 워크숍
• 수강 대상:
  • 코딩을 전혀 못 하지만 나만의 웹사이트/포트폴리오를 빠르게 만들고 싶은 비전공자
  • AI 툴로 웹 서비스를 제작해 보고 싶은 기획자 및 마케터
  • 복잡한 빌드·배포 프로세스를 가장 쉬운 경로로 익히고 싶은 초급 개발자
• 준비물: 개인 노트북, Google 계정, (선택) 카페24 계정

🎯 수강 후 얻게 되는 3가지 핵심 결과물 (Key Takeaways)

1. 내 손으로 완성한 진짜 웹사이트 URL ([http://내아이디.cafe24.com](http://내아이디.cafe24.com))
2. AI를 활용한 기획 $\rightarrow$ 코드 생성 $\rightarrow$ 빌드 $\rightarrow$ 웹 호스팅 배포 전 과정 경험
3. 새로운 수정 사항이 생겼을 때 혼자서 5분 만에 갱신(업데이트)하는 노하우

⏱️ 커리큘럼 & 상세 내용

Plaintext

 

[오프닝] 배포 지형도 이해 & 전체 로드맵
   │
[1단계] 카페24 세팅 & Stitch/AI Studio 접속
   │
[2단계] AI Studio로 웹사이트 완성 및 ZIP 추출
   │
[3단계] VS Code 환경 세팅 & Magic 명령어 (npm build)
   │
[4단계] 카페24 SFTP 업로드 & 대망의 Live 오픈
   │
[Q&A] 유지보수 및 5분 업데이트 꿀팁

1. 오프닝 & 전체 로드맵 그리기

• 강의 소개: 1시간 뒤 여러분의 웹사이트가 실제 인터넷 주소로 열립니다.
• 전체 프로세스 5단계 안내: 카페24 준비 $\rightarrow$ Stitch/AI Studio 프롬프팅 $\rightarrow$ ZIP 다운로드 $\rightarrow$ VS Code 빌드 $\rightarrow$ 카페24 배포

2. 내 무대 준비하기: 카페24 & AI Studio 접속

• 카페24 웹호스팅 세팅: FTP/SFTP 접속 정보(아이디, 비번, 서버주소) 확인법
• Stitch 및 AI Studio 접속: 개발용 구글 계정 준비 및 화면 구조 빠르게 훑기

3. 프롬프트 한 줄로 웹사이트 3분 만에 찍어내기

• AI 프롬프팅 작성법: 내가 원하는 서비스(포트폴리오, 랜딩페이지, 랜선 상점 등) 구조 요청하기
• 화면 실시간 수정: AI Studio 내에서 텍스트/디자인 즉시 보완하기
• 프로젝트 추출: [Get Code] $\rightarrow$ Export를 거쳐 프로젝트를 .zip 파일로 내 컴퓨터에 다운로드하기

4. 클릭 3번으로 끝내는 VS Code 빌드 마술

• 압축 해제 및 VS Code 열기: package.json 파일이 있는 위치 잡기
• 터미널 Magic 명령어 2개:
  1. npm install (필요한 부품 한 번에 다운로드하기)
  2. npm run dev (내 컴퓨터에서 미리보기)
  3. npm run build (배포용 dist 폴더 1초 만에 뽑아내기!)

5. 세상에 내 사이트 공개하기! 카페24 SFTP 배포

• SFTP 연결하기: VS Code 확장 프로그램(SFTP) 또는 FileZilla를 이용해 카페24 서버 접속
• dist 폴더 전송: 빌드된 dist 폴더 내부 파일들을 카페24 www/ 폴더로 끌어다 놓기
• 실제 접속 테스트: 스마트폰과 PC 주소창에 내 카페24 URL을 치고 접속 확인! 🎉

6. 라이브 Q&A & 5분 갱신(업데이트) 꿀팁

• AI Studio에서 새로 수정본 받았을 때 빠르게 덮어씌우는 노하우
• 질의응답 및 마무리

📢 강의 수강생 모객용 홍보 문구 (카피라이팅 예시)

💡 "복잡한 서버? 백엔드? 몰라도 됩니다."

AI Studio + VS Code + 카페24 조합으로 완성하는 초고속 배포 클래스!

• ❌ 매달 몇 만 원씩 나가는 해외 호스팅 비용이 부담스러우셨나요?
• ❌ AI가 짜준 좋은 코드가 있는데 배포하는 방법을 몰라 내 컴퓨터에만 썩혀두셨나요?

가장 가성비 높고 확실한 **'카페24 배포 공식'**을 딱 1시간 만에 완벽히 전수해 드립니다.

오늘 수업이 끝나면, 여러분만의 웹사이트 주소가 생깁니다!