🌐 90분이면 서비스 하나가 완성됩니다! AI 홈페이지 제작 실습 💻
✅ 난이도: 중급(툴 활용 경험자 대상)
✅ 강의형식: 이론(25%)+실습(75%)
✅ 사용 도구: Claude(클로드), GitHub(깃허브), Vercel(버셀), Supabase(슈파베이스)
□ 강의 내용
• AI로 만드는 웹사이트 이해: 화면만 보여주는 결과물과 실제로 운영되는 서비스의 차이 알아보기
• 회원 정보 관리: Supabase 프로젝트 생성, 이메일 로그인 기능 설정, 접속 주소와 연결 키 확보하기
• Claude 활용법: 소개 페이지, 회원가입, 로그인, 회원 전용 페이지를 만들기 위한 요구사항 프롬프트 작성하기
• 데이터베이스 연결하기: 받은 코드에 내 접속 정보를 넣고 보안 규칙(RLS) 적용하기
• 사이트 배포하기: GitHub에 코드를 올리고 Vercel로 불러와 실제 주소로 배포하기
• 사이트 관리 및 운영하기: 수정하면 자동으로 다시 배포되는 흐름과 로그인 오류 점검 방법 알아보기
□ 강의를 듣고 나면
• Supabase에서 로그인용 프로젝트를 만들고 이메일 회원가입 기능을 설정할 수 있습니다.
• 원하는 홈페이지 구조를 Claude에 요구사항으로 전달해 회원제 페이지 코드를 받아낼 수 있습니다.
• 받은 코드에 내 데이터베이스 정보를 연결하고 회원 정보 보호 규칙을 적용할 수 있습니다.
• GitHub와 Vercel을 연결해 내 홈페이지를 인터넷에 공개하고 주소를 공유할 수 있습니다.
• 공개한 사이트를 수정한 뒤 다시 올리는 과정을 반복할 수 있습니다.
• 로그인이 되지 않는 대표적인 오류 상황을 점검하고 해결할 수 있습니다.
📌 강의 준비물
• Claude, GitHub, Vercel, Supabase 계정(사전가입필수)
• 데스크톱 또는 노트북 필수(태블릿·스마트폰만으로는 실습 진행이 어렵습니다.)
• Chrome 등 최신 브라우저
• Zoom 최신 버전
※ 강사 화면과 작업 화면을 함께 봐야 하므로 듀얼 모니터 또는 넓은 화면을 권장합니다.
📢 실습 전 과정은 각 서비스의 무료 플랜만으로 진행됩니다. 다만 Vercel 무료 플랜은 개인의 비상업적 용도로만 사용할 수 있어, 영리 목적 사이트 운영 시 유료 플랜 전환이 필요할 수 있습니다