SemiClass × Claude · 3강 예고편

[Claude]
내 사이트에 생명
불어넣기

2강에서 만든 정적 사이트에 로그인·내 데이터·AI 챗봇을 붙이는 2시간 입문 실전

Auth · DB · AI API — 코딩 에이전트와 함께

완성 데모 미리보기

수업이 끝나면
이게 생깁니다

내 사이트에서 로그인하고, AI 챗봇과 대화하고, 그 대화가 내 계정에 저장되는 완전한 흐름.

세 기능(Auth + DB + AI)이 합쳐지면 진짜 "살아있는 서비스"가 됩니다. 오늘 이걸 직접 만들어봅니다.

AI 코너 — 나만의 챗봇

안녕하세요! 오늘 궁금한 게 있으신가요?

코딩 에이전트가 뭐야?

코딩 에이전트는 프로젝트 파일을 읽고 코드를 직접 수정해주는 AI입니다. 채팅 AI와 달리 실제 파일을 바꿔줘요!

💾 이 대화, 내 계정에 저장됨

↑

오늘 붙일 3가지

정적 포스터에서
살아있는 가게로

2강에서 만든 사이트는 "인쇄된 포스터"입니다. 오늘은 손님과 대화하는 가게로 만들어봅니다.

① 로그인 내 사이트에 회원가입/로그인 기능. "나"라는 개념이 생깁니다. Supabase Auth로 Google + 이메일 모두 지원.

② 내 데이터 로그인한 사용자의 정보를 저장하고, 내 것만 나한테 보여줍니다. RLS(행 단위 보안)가 핵심입니다.

③ AI 챗봇 Google Gemini 무료 API를 서버에서 안전하게 호출. 내 사이트만의 AI 코너를 만듭니다.

정적 = 누가 봐도 같은 내용 · 동적 = 로그인한 사람마다 다른 화면, 내 데이터 보존

왜 중요한가

진짜 서비스는
회원을 기억합니다

1강·2강

정적 사이트 브랜드·디자인·레이아웃. 모두에게 동일한 화면. "인쇄된 포스터".

3강 (지금)

동적 기능 추가 로그인·내 데이터·AI. 사람마다 다른 경험. "손님과 대화하는 가게".

그 이후

진짜 서비스 커머스, 구독, 관리자 페이지, 알림. 오늘이 그 출발점입니다.

로그인이 있으면 "내 계정 대시보드", "좋아요 목록", "구매 내역" 같은 기능을 만들 수 있습니다. 오늘이 그 첫 걸음입니다.

누구를 위한 강의인가요

이런 분께
딱 맞습니다

✓

2강 수료자 또는 정적 사이트를 갖고 계신 분 Next.js/Vite로 만든 사이트가 있으면 오늘 바로 붙일 수 있습니다. 2강 스타터도 제공합니다.

✓

코드를 직접 쓰지 않아도 되는 입문자 코딩 에이전트(Claude Code/Codex)에게 프롬프트로 시키는 방식으로 진행합니다. 복사·붙여넣기면 충분합니다.

✓

"내 사이트에 뭔가 더 붙이고 싶은데 어떻게 하는지 모르겠다"는 분 로그인·DB·AI API 세 가지를 실제로 붙여보며 동적 기능의 구조를 몸으로 익힙니다.

수업 전 준비물

4가지만
준비해 오세요

Supabase 무료 계정 supabase.com에서 가입합니다. 신용카드 불필요. 프로젝트를 미리 생성해두면 좋습니다.

Google AI Studio 무료 키 aistudio.google.com에서 API 키를 발급받습니다. Gemini 2.0 Flash는 무료 quota가 넉넉합니다.

코딩 에이전트 Claude Code 또는 Codex CLI. 둘 중 하나면 됩니다. 설치 가이드를 사전 공유드립니다.

2강 사이트 또는 스타터 2강에서 만든 Vercel 배포 사이트를 가져오세요. 없으면 3강 스타터 템플릿을 제공합니다.

Vercel 계정도 준비해두면 수업 중 바로 배포해볼 수 있습니다. 모두 무료 플랜으로 충분합니다.

같이 만들어요

오늘 수업 끝에
당신만의 살아있는
사이트가 생깁니다

코딩을 몰라도 괜찮습니다. 에이전트에게 시키는 법을 배우는 수업입니다.

신청 링크는 강의 페이지에서 확인하세요. 수강생 수가 적어 질문·피드백을 충분히 드릴 수 있습니다. 함께해요!

🚀

🔐

로그인 · 회원가입 Google + 이메일, Supabase Auth

🗄️

내 데이터 저장 DB + RLS, 내 행만 내가 봄

🤖

AI 챗봇 Gemini API, 서버에서 안전하게 호출

[Claude]내 사이트에 생명불어넣기

수업이 끝나면이게 생깁니다

정적 포스터에서살아있는 가게로

진짜 서비스는회원을 기억합니다

이런 분께딱 맞습니다

4가지만준비해 오세요