바이브 코딩 스터디: 인터랙티브 웹 만들기

💻 바이브 코딩 스터디

“디자이너도, 기획자도, 초보자도 직접 인터랙티브 웹을 만든다”

✨ 이런 분들을 위한 실전형 커뮤니티

• 요즘 뜨는 AI 인터랙티브 웹 포트폴리오 만들기에 관심 있는 분

• 개발자가 아니지만 나만의 실험적인 웹을 만들고 싶은 분

• 바이브 코딩이 뭔지 직접 해보고 싶었던 비개발자/디자이너

• 웹툴은 써봤지만 진짜 손으로 코딩해보는 경험은 처음인 분

📌 스터디 개요

• 진행 기간: 4주

• 진행 방식: 온라인 / 매주 1회 / 돌아가며 실습 및 결과 공유

• 운영 인원: 6~8명 소규모 정예

• 참여비: 5만 원 → 4주 모두 참여 + SNS 인증시 2.5만 원 환급

🧠 바이브 코딩이 뭐예요?

• “요즘 만든 포트폴리오는 다 움직인다!”

• Notion만으론 아쉬운 내 소개를
  인터랙티브하고 감각적인 웹사이트로 만들고 싶다면

• 실제로 JS/HTML 코드를 직접 다루거나
  AI 코딩툴과 협업해서 간단한 웹 UI/효과/애니메이션을 구현하는 게 바이브 코딩이에요!

📚 커리큘럼 예시 (4주 구성)

• 커리큘럼은 리더와 멤버에 따라 변경될 수 있습니다.

주차 주제 내용 1주차 바이브 코딩이란? 최근 포트폴리오/AI 웹 사례 리뷰 + 툴/개념 이해 2주차 코드 없는 코딩? GPT로 웹 페이지 초안 만들기 (HTML/CSS 실습) 3주차 나만의 소개 페이지 만들기 애니메이션, 스크롤 효과, 인터랙션 기초 적용 4주차 완성 & 발표 각자 만든 결과물 공유 + 코드 설명 + 피드백

🛠 바이브코딩을 다룰 수 있는 툴/기술

• 예시로 나온 툴 외에 다른 툴이나 기술이 있다면 스터디원들에게 공유해주세요

툴 설명 ChatGPT (코딩용 프롬프트) GPT에게 HTML/CSS 코드 초안 요청 및 수정 실습 Framer 노코드로 인터랙티브 웹 구현 가능한 디자인 툴 Vercel / GitHub Pages 간단한 웹 배포 실습 CSS 애니메이션 라이브러리 움직이는 효과, hover, fade-in 등 구현 HTML 기본 태그 구조 텍스트/이미지 넣는 법, div 정렬 등 기초 실습

🙋 이런 분께 추천해요

• 감각적인 인터랙티브 포트폴리오를 만들고 싶은 디자이너/기획자

• 나를 소개하는 나만의 웹사이트를 직접 만들어보고 싶은 분

• 코딩툴과 친해지고 싶은 비전공자

• 자기 브랜딩이나 서비스 아이디어를 웹으로 실험해보고 싶은 분

🎁 4주 후, 이렇게 바뀝니다

🧾 결과물 설명 나만의 웹 소개페이지 코드를 직접 작성하거나 수정한 HTML 기반 소개 웹 간단한 인터랙션 기능 마우스 오버/스크롤 시 전환 등 시각 효과 구현 실습 경험 공유 나처럼 시작한 사람들이 만든 결과물과 실패담 공유

📩 신청 방법

• 📄 [운영 방식 자세히 보기 (노션)]

• ⏰ 신청 마감: 7월 21일(월)
  → 소규모 운영으로 조기 마감될 수 있어요!

• 📌 스터디 시작일
  → 최소 정원 6명이 모집될 경우,
      스터디 참여하는 분들에게 단톡방 링크를 전달드릴 예정입니다
  → 리더가 가능한 날짜를 우선순위로 하되, 
      멤버 동의하에 스터디 날짜는 조율 가능합니다.