🎯 1차시: 오리엔테이션
10분 만에 첫 웹사이트 만들기
✨ 즉시 성취감 극대화!
복잡한 이론 설명은 NO! 바로 결과물부터 만들어서 "나도 할 수 있다!" 느끼기
10분: "따라만 하세요!"
복사붙여넣기로 첫 웹사이트 완성
10분: ChatGPT 기본 사용법
왜 이렇게 쉬워졌는지 설명
10분: 최종 프로젝트 미리보기
동기부여 극대화
🎉 학습 목표
🤖 2차시: ChatGPT 마법사 되기
말로 코드 만들기
🎯 마법 주문 모음집
"자기소개 웹사이트 HTML 코드 만들어줘"
"배경을 그라데이션으로 바꿔줘"
"버튼 클릭 시 메시지 나오게 해줘"
📋 세부 구성
🔮 실습 데모
📝 3차시: HTML/CSS 기초
코드 읽는 법만 알면 끝!
🎯 핵심 개념
암기보다는 "읽고 수정하는" 능력에 집중!
📋 세부 구성
💻 코드 해석 연습
🎨 4차시: 나만의 랜딩페이지 만들기
진짜 웹사이트 완성!
✨ 2025년 트렌드 반영
트렌디한 디자인과 실용적인 콘텐츠로 구성
📋 세부 구성
🌟 랜딩페이지 미리보기
홍길동
웹 개발 도전자 💪
📱 5차시: 모바일 완벽 대응
어디서나 예쁘게!
🎯 핵심 개념
복잡한 미디어쿼리 대신 ChatGPT 활용법 집중
화면 크기에 따라 자동으로 레이아웃이 변하는 웹사이트
📋 세부 구성
💻 반응형 개념
📱 기기별 미리보기
태블릿 뷰
홍길동
웹 개발자
모바일 뷰
홍길동
개발자
홍길동
웹 개발자
📧 hello@example.com
🌐 portfolio.com
⚡ 6차시: 웹사이트에 생명 불어넣기
클릭하면 움직여요!
✨ 최신 인터랙션 트렌드
ChatGPT 활용 극대화로 쉽게 구현
📋 세부 구성
🎮 인터랙티브 데모
💡 학습 포인트
🔧 7차시: 문제 해결사 되기
에러도 ChatGPT가 고쳐줘요!
🚨 자주 발생하는 에러 TOP 5
ChatGPT: "이미지 경로 오류 해결 방법 알려줘"
ChatGPT: "반응형 CSS 버그 수정해줘"
ChatGPT: "JavaScript 클릭 이벤트 오류 찾아줘"
📋 세부 구성
🛠️ 디버깅 도구
// 에러 발생 시 ChatGPT 질문 예시
"이 코드에서 에러가 발생합니다:
[에러 코드 붙여넣기]
에러 메시지:
[에러 메시지 붙여넣기]
어떻게 수정하면 될까요?"🌐 8차시: 세상에 공개하기
내 웹사이트 인터넷 주소 만들기!
🚀 GitHub Pages 배포
⚡ Netlify 배포
더 쉬운 방법!
📋 세부 구성
🚀 9차시: 실무 생산성 폭발시키기
ChatGPT 고수 되기!
💡 실무 생산성 ChatGPT 명령어
"카페 홈페이지 와이어프레임과 필요한 페이지 구조 만들어줘"
"이 CSS 코드를 더 효율적으로 리팩토링해줘"
"검색엔진 최적화를 위한 meta 태그 만들어줘"