AI 바이브코딩을 활용한 웹사이트 제작 실무

과정 개요

AI와 함께 웹사이트를 기획하고 직접 제작하는 바이브코딩 실무 과정.
도메인 구입·웹호스팅 설정·SSL 보안인증·FTP 연결부터 HTML·CSS·JavaScript·PHP·MySQL 연동, 파비콘 적용, 구글 검색 등록까지 홈페이지 제작 전 과정을 프로젝트 수행

1.Overview / 과정 운영 개요

교육 목표

AI(바이브코딩)와 협업하여 웹사이트 제작 전 과정을 직접 수행할 수 있다
AI와 함께 실전 프로젝트를 완수할 수 있다

과정 특징

AI(바이브코딩) 방식으로 코드 생성 — 문법 암기 없이 대화로 개발
도메인~검색등록까지 웹사이트 제작 전 과정을 한 번에 실습
공무원 실무에 바로 적용 가능한 기관 소개형 홈페이지 제작
실습 결과물(홈페이지)을 당일 서버에 배포까지 완성

수강 대상

시·자치구·투자출연기관 직원 (코딩 경험 불필요, AI 기본 사용 경험 권장)

2.Curriculum / 교육 내용 총 14h

세부 내용

시간

비고

—

계

3.Timetable / 상세 시간표

1일차

시간	교육주제	세부 내용
1	과정 Overview 및 웹사이트 기획	바이브코딩 개념·AI 협업 대화법·웹사이트 제작 전체 흐름(기획→업로드→DB→검색등록) 이해
2	도메인·웹호스팅·SSL 세팅	도메인 개념·구입 방법·웹호스팅 신청·도메인↔호스팅 연결 구조·SSL 보안인증 적용
3	FTP·코드편집기 사용방법	FTP 설치·접속·파일 업로드·다운로드 실습·서버 폴더 구조 확인·EditPlus(VS Code) 기본 사용법
4	HTML 기초 실습	기본 HTML 문서 구조·주요 태그 실습·AI로 HTML 코드 생성 요청·서버 업로드 확인
5	CSS 디자인 실습	CSS 색상·폰트·레이아웃 구성·AI로 CSS 코드 생성·메인 페이지 디자인 적용
6	JavaScript 동적 페이지 기초 실습	JS 역할 이해·버튼 클릭·메뉴 동작 등 동적 기능 구현·AI로 JS 코드 생성 후 적용
7	반응형 웹페이지 제작	반응형 개념·미디어쿼리·모바일 화면 대응 실습·소개·문의 서브페이지 제작

2일차

시간	교육주제	세부 내용
1	파비콘 제작 및 적용	파비콘 제작 도구 활용·파비콘 적용 코드·로고·대표 이미지 적용·이미지 최적화 기초
2	PHP 기초 실습	PHP 개념·서버사이드 언어 이해·기본 구조 실습·AI로 PHP 코드 생성·간단한 출력 페이지 실습
3	MySQL·phpMyAdmin 사용방법	데이터베이스 개념·phpMyAdmin으로 DB·테이블 생성·AI에게 테이블 구조 설계 요청
4	PHP + MySQL 연동 페이지 제작	문의·신청 입력 폼 제작·PHP로 데이터 저장하기·저장 데이터 출력 페이지 구성
5	PHP + MySQL 연동 페이지 제작	간단한 관리자 페이지 구성·데이터 목록 출력·삭제 기능
6	메타태그·SEO 기초	메타태그 의미·설정 방법·OPEN메타 태그·기본 SEO 구조·사이트맵·robots.txt 개념·AI로 메타태그 자동 생성
7	구글 검색 등록·백업·보안 점검	구글 서치콘솔 등록·사이트맵 제출·파일·DB 백업·웹사이트 점검 체크리스트·Q&A

4.Target & Effect / 수강 대상 및 기대 효과

수강 대상

기대 효과

마지막 과정입니다