Ai.zip④ iyo.coding.lab - 여행자를 위한 웹사이트 만들기
동일한 커리큘럼이 월요반과 수요반으로 나뉘어 진행됩니다.
Ai.zip④ iyo.coding.lab - 여행자를 위한 웹사이트 만들기는 여행지에서의 기억을 글과 사진, 코드로 다시 풀어내는 워크숍입니다. 간단한 코딩 실습을 통해 웹사이트의 기본 구조와 스타일, 인터랙션을 익히고, 각자의 개성을 담은 여행 기록 웹사이트를 완성해 봅니다.
각자의 여행 사연을 나누고, 지도와 다양한 웹사이트를 통해 기억 속 여행지를 재탐색합니다. 그 과정에서 떠오른 장소와 장면, 기억에 남는 일화들을 짧은 기행문으로 정리한 뒤, 글과 사진을 웹사이트의 주요 콘텐츠로 발전시킵니다.
HTML, CSS, JavaScript의 기초를 배우는 동시에 Claude, Gemini, ChatGPT와 같은 생성형 AI와 Cursor, Antigravity 등의 AI 기반 에디터를 활용합니다. 여행 이야기를 기획하고 글로 정리하는 단계부터 웹사이트의 구조를 설계하고 실제로 구현하는 과정까지 차근차근 경험합니다.
Tutor. 준 @djwns1234
준은 코딩과 웹을 중심으로 예술과 기술 사이의 실험을 이어가는 디자이너로 웹사이트 제작과 인터랙션 구현, 생성형 AI를 활용한 제작 방식을 탐구하며, 간단한 코드부터 시작해 구조, 스타일, 인터랙션을 직접 설계한다. AI 기반 에디터와 생성형 AI를 활용한 동시대 웹 제작 방식에 관심을 두고 있다.
CURRICULUM
1주 차 (8/10, 8/12 | 3시간) “여행 사진을 활용하여 핸드메이드 웹 만들기”
- 각자의 여행 사연 소개
- Google Maps, Radio Garden, Drive from Home 등을 활용하여 사연 속 여행지 탐사
- 코드 에디터 구조 이해
- Visual Studio Code / Cursor / Antigravity 기본 사용법 소개
- HTML / CSS / JavaScript의 역할 이해
- 웹사이트 기본 파일 구조 이해
- HTML과 CSS를 이용한 기본 웹사이트 제작
2주 차 (8/17, 8/19 | 3시간)“기행문을 활용하여 바이브 코딩 웹 만들기”
- 기행문 쓰기
- 흥미로운 JavaScript 라이브러리 예제(matter.js / p5 / three.js 등) 소개
- 자바스크립트 라이브러리 활용 방식 이해
- 30분 분량의 간단한 웹 프로토타입 제작
- MD 파일, 에이전트 스킬 작성, 활용법
- 개인 웹사이트 아이디어 공유
- 개인 웹사이트 구현 방향 설정 및 제작 시작
3주 차 (8/24, 8/26 | 3시간)“나만의 여행 기록 웹사이트 완성하기”
- 개인 웹사이트 중간 결과물 공유
- 코드 구조 및 구현 방식 피드백
- 적절한 코드 사용 여부 검토
- Netlify를 활용하여 웹사이트 배포
4주 차 (9/2 | 1시간)“내 웹사이트를 소개합니다”
두 분반이 함께 온라인으로 모여 각자의 웹사이트를 소개하고, 서로의 작업을 둘러보는 시간을 가집니다.