강의 소개
커리큘럼
90% 국비지원으로 부담 없이 시작하세요!
이런 고민이 있나요?
비전공자인데 웹개발자의 업무를 경험해보고 적성에 맞는지 확인하고 싶어요

커리어 탐색자
웹개발 이해가 부족해서 개발자와 원활하게 소통하기 어려워요

디자이너 / 기획자
나만의 아이디어를 담은 웹사이트를 직접 만들어보고 싶어요

창업 준비자
코드를 잘 몰라서 내가 만든 이미지나 작업물을 웹사이트로 구현하기 어려워요

크리에이터
이렇게 성장할 수 있어요!
HTML, CSS를 배우며 전반적인 웹개발 이해도를 높여요

커리어 탐색자
상상만 했던 나만의 사이트를 내 손으로 직접 만들어낼 수 있어요

디자이너 / 기획자
AI 이미지 툴을 활용해 독창적인 이미지가 담긴 반응형 웹사이트를 제작해요

창업 준비자
챗GPT의 도움으로 AI 이미지와 웹 요소를 결합해 나만의 반응형 웹사이트를 완성할 수 있어요

크리에이터
강의 맛보기
실습 도구 안내
본 강의에서는 다양한 AI 도구 활용 사례를 제공하고 있습니다.
이에 따라 일부 실습 도구는 유료 구독이 필요하지만,
무료 도구들로도 충분히 실습이 가능하도록 안내하고 있습니다.
당장 유료 도구 결제가 어렵다면, 무료 도구를 활용하는 것으로도 충분한 도움이 되니 참고해주세요.
수강생 전용 커뮤니티 입장하기
모두의연구소 바이브 코딩 소통방에서
다른 수강생들과 자유롭게 콘텐츠를 공유하고,
수강 중 어려운 점도 함께 질문하며 해결해보세요!
함께 배우고 성장하는 커뮤니티가 여러분을 기다리고 있어요 🙌
크리에이터

권두영 교수
• 현) 서울미디어대학원대학교 융합미디어학부 부교수
• 현) 한국컴퓨터그래픽스학회 이사
• 스위스 취리히공과대학(ETHZ) 컴퓨터공학 박사 졸업
• 워싱턴주립대학교 공간 컴퓨팅 석사 졸업
커리큘럼
입문
11시간 10분
노드 01
프로젝트 소개 및 웹 개발 기초
웹 포트폴리오의 목적과 구성을 소개하고, HTML, CSS JavaScript 및 개발 환경 도구를 살펴봅니다.
1-1
노드를 여행하는 히치하이커를 위한 안내서
5분
1-2
학습교안
1시간
1-3
들어가며
5분
1-4
프로젝트 소개: 웹 포트폴리오 목표 및 구성
10분
1-5
웹 개발 기초: HTML, CSS, JavaScript 소개
10분
1-6
개발 환경 설정 및 필요한 도구들
15분
1-7
마무리하며
5분
노드 02
HTML 기초와 챗GPT 적용
HTML 코드를 챗GPT로 분석해 보면서 HTML 문법을 간단히 살펴 보고, 챗GPT를 이용하여 HTML 코드를 생성합니다.
2-1
들어가며
5분
2-2
웹 포트폴리오 HTML 챗GPT 분석
15분
2-3
HTML 문서 구조 및 기본 태그
15분
2-4
챗GPT로 HTML 코드 생성하기
10분
2-5
마무리하며
5분
노드 03
CSS 기초와 챗GPT 적용
CSS 코드를 챗GPT로 분석해 보면서 CSS 문법을 간단히 살펴 보고, 챗GPT를 이용하여 CSS 코드를 생성합니다.
3-1
들어가며
5분
3-2
웹 포트폴리오 CSS 챗GPT 분석
25분
3-3
CSS 기초: 선택자, 속성, 값
10분
3-4
챗GPT로 CSS 코드 생성하기
15분
3-5
마무리하며
5분
노드 04
JavaScript 기초와 챗GPT 적용
JavaScript 코드를 챗GPT로 분석해 보면서 JavaScript 문법을 간단히 살펴 보고, 챗GPT를 이용하여 JavaScript 코드를 생성합니다.
4-1
들어가며
5분
4-2
JavaScript 코드 챗GPT 분석
20분
4-3
JavaScript 이해하기: 변수, 함수, 조건문, 반복문
15분
4-4
챗GPT로 JavaScript 코드 생성하기
15분
4-5
마무리하며
5분
노드 05
반응형 웹페이지 디자인 기초
반응형 웹디자인의 개요와 원칙을 알아보고 챗GPT로 웹디자인을 해 봅니다.
5-1
들어가며
5분
5-2
반응형 웹 디자인 챗GPT 분석
20분
5-3
반응형 웹 디자인 개요 및 원칙
15분
5-4
챗GPT를 활용한 반응형 웹페이지 디자인
15분
5-5
마무리하며
5분
노드 06
AI 이미지 생성기를 활용한 이미지 제작
AI 이미지 생성기를 이용하여 이미지를 제작하고 최적화하여 웹페이지에 적용합니다.
6-1
들어가며
5분
6-2
AI 이미지 생성기 소개
25분
6-3
이미지 생성기를 이용한 웹 포트폴리오 이미지 제작
15분
6-4
이미지 최적화 및 웹페이지에 적용하기
10분
6-5
마무리하며
5분
노드 07
Processing JavaScript를 활용한 반응형 웹페이지 제작
Processing JavaScript를 이용하여 애니메이션과 인터랙션이 포함된 반응형(인터렉티브) 웹페이지를 구현해 봅니다.
7-1
들어가며
5분
7-2
Processing JavaScript 소개
20분
7-3
반응형 웹페이지 아이디어 및 구현 예시
20분
7-4
간단한 애니메이션 및 인터랙션 구현
10분
7-5
마무리하며
5분
노드 08
웹 사이트 배포 및 마무리
웹 호스팅 서비스를 선택하여 웹 사이트를 배포해 봅니다.
8-1
들어가며
5분
8-2
웹 호스팅 서비스 선택 및 도메인 설정
20분
8-3
웹사이트 배포 절차
10분
8-4
강좌 정리 및 추가 학습 자료
10분
8-5
마무리하며
5분
노드 09
부록: 웹사이트와 DB 연결하기
웹사이트와 연결된 DB를 구축합니다.
9-1
폼(Form)과 구글 스프레드 시트 연결하기
20분
9-2
챗GPT를 사용하여 코드 분석하기
15분
9-3
Google Apps Script
15분
노드 10
프로젝트: 나만의 웹사이트 만들기
배웠던 내용을 토대로 나만의 반응형 웹사이트를 만들어 봅니다.
10-1
프로젝트 가이드
10분
10-2
나만의 반응형 웹사이트 만들기
50분
노드 11
심화탐구 프로젝트: 애니메이션 및 인터랙션 추가하기
나만의 웹사이트에 애니메이션과 인터랙션을 추가해 봅니다.
11-1
프로젝트 가이드
10분
11-2
애니메이션 및 인터랙션 추가하기
40분
90% 국비지원 이번 달 종료 예정!
⏳ 12월 31일까지 놓치지 마세요.







