
요즘 뜨는 AI 인터랙티브 웹 포트폴리오 만들기에 관심 있는 분
개발자가 아니지만 나만의 실험적인 웹을 만들고 싶은 분
바이브 코딩이 뭔지 직접 해보고 싶었던 비개발자/디자이너
웹툴은 써봤지만 진짜 손으로 코딩해보는 경험은 처음인 분
진행 기간: 4주
진행 방식: 온라인 / 매주 1회 / 돌아가며 실습 및 결과 공유
운영 인원: 6~8명 소규모 정예
참여비: 5만 원 → 4주 모두 참여 + SNS 인증시 2.5만 원 환급
“요즘 만든 포트폴리오는 다 움직인다!”
Notion만으론 아쉬운 내 소개를
인터랙티브하고 감각적인 웹사이트로 만들고 싶다면
실제로 JS/HTML 코드를 직접 다루거나
AI 코딩툴과 협업해서 간단한 웹 UI/효과/애니메이션을 구현하는 게 바이브 코딩이에요!
커리큘럼은 리더와 멤버에 따라 변경될 수 있습니다.
주차 주제 내용 1주차 바이브 코딩이란? 최근 포트폴리오/AI 웹 사례 리뷰 + 툴/개념 이해 2주차 코드 없는 코딩? GPT로 웹 페이지 초안 만들기 (HTML/CSS 실습) 3주차 나만의 소개 페이지 만들기 애니메이션, 스크롤 효과, 인터랙션 기초 적용 4주차 완성 & 발표 각자 만든 결과물 공유 + 코드 설명 + 피드백
예시로 나온 툴 외에 다른 툴이나 기술이 있다면 스터디원들에게 공유해주세요
툴 설명 ChatGPT (코딩용 프롬프트) GPT에게 HTML/CSS 코드 초안 요청 및 수정 실습 Framer 노코드로 인터랙티브 웹 구현 가능한 디자인 툴 Vercel / GitHub Pages 간단한 웹 배포 실습 CSS 애니메이션 라이브러리 움직이는 효과, hover, fade-in 등 구현 HTML 기본 태그 구조 텍스트/이미지 넣는 법, div 정렬 등 기초 실습
감각적인 인터랙티브 포트폴리오를 만들고 싶은 디자이너/기획자
나를 소개하는 나만의 웹사이트를 직접 만들어보고 싶은 분
코딩툴과 친해지고 싶은 비전공자
자기 브랜딩이나 서비스 아이디어를 웹으로 실험해보고 싶은 분
🧾 결과물 설명 나만의 웹 소개페이지 코드를 직접 작성하거나 수정한 HTML 기반 소개 웹 간단한 인터랙션 기능 마우스 오버/스크롤 시 전환 등 시각 효과 구현 실습 경험 공유 나처럼 시작한 사람들이 만든 결과물과 실패담 공유
⏰ 신청 마감: 7월 21일(월)
→ 소규모 운영으로 조기 마감될 수 있어요!
📌 스터디 시작일
→ 최소 정원 6명이 모집될 경우,
스터디 참여하는 분들에게 단톡방 링크를 전달드릴 예정입니다
→ 리더가 가능한 날짜를 우선순위로 하되,
멤버 동의하에 스터디 날짜는 조율 가능합니다.