바이브코딩 원데이클래스 커리큘럼

방문자의 첫 시선을 잡는 화면과 클릭으로 이끄는 버튼을 직접 디자인합니다. 텍스트, 컬러, 사진 한 장으로 핵심 메시지를 전달하는 패턴을 익히고 본인 업종에 적용합니다.

• 업종별 헤드라인 공식 3가지
• CTA 버튼 카피 + 색 대비 규칙
• 히어로 이미지 즉석 생성 (AI 활용)

이름·전화번호·문의 내용이 데이터베이스(Supabase)에 자동 저장되는 폼을 만듭니다. 코드 한 줄을 외우지 않아도 됩니다 — 복사·붙여넣기와 값만 바꾸는 수준으로 진행합니다.

• Supabase 계정 생성 + 테이블 만들기
• 폼 필드 추가/삭제
• 제출 후 SMS 자동 발송 옵션

한국 트래픽의 약 90%를 차지하는 모바일에서 잘 보이게 만듭니다. 카카오톡 인앱 브라우저, 인스타 인앱 등 까다로운 환경까지 점검합니다.

• 뷰포트 + 반응형 그리드
• 터치 영역 최소 44px 규칙
• 카톡 인앱에서 동작 확인하는 3가지 방법

완성한 페이지를 Vercel에 무료 배포해 본인 URL을 가져갑니다. 카톡·SMS·SNS로 즉시 공유 가능한 상태로 마무리합니다.

• GitHub 없이도 배포 가능한 경로
• 커스텀 도메인 연결(보유 시)
• 수정 후 재배포 1분 워크플로우

업종별 카피 템플릿을 받아 본인 비즈니스 톤으로 다듬는 실습입니다. ChatGPT/Claude/Gemini의 다른 강점을 비교하며 어디에 어떤 도구를 쓰는지 배웁니다.

• 업종별 카피 템플릿 8종 제공
• "고객이 자기 언어로 말하게" 만드는 프롬프트
• FAQ 자동 생성

신청·문의가 들어왔는지 한 화면에서 확인하는 어드민 페이지를 만듭니다. 비밀번호로 보호되며, 본인만 접근 가능한 상태로 배포합니다.

• 신청 목록 + 검색
• CSV 내보내기
• 방문·전환 트래킹 (GA4 + UTM)