SemiClass × Claude · 시리즈 3강

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

로그인·내 데이터·AI 챗봇을 코딩 에이전트로 붙이기

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

오늘의 목표

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

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

① 로그인내 사이트에 회원가입/로그인 기능. "나"라는 개념이 생깁니다.

② 내 데이터로그인한 사용자의 정보를 저장하고, 내 것만 나한테 보여줍니다.

③ AI 챗봇Gemini API를 연결해 내 사이트 안에서 AI와 대화할 수 있게 합니다.

정적 = 인쇄된 포스터 (누가 봐도 같은 내용) · 동적 = 손님과 대화하는 가게 (로그인한 사람마다 다른 화면)

완성 데모 미리보기

오늘 수업이 끝나면
이런 흐름이 됩니다

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

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

AI 코너 — 나만의 챗봇

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

코딩 에이전트가 뭐야?

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

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

↑

시리즈 복습 & 오늘 위치

우리는 지금
3강에 있습니다

1강

브랜드 만들기

Claude로 나만의 컨셉·색상·카피 기획

→

2강

정적 사이트 배포

코딩 에이전트로 웹사이트 만들고 Vercel 배포

→

★ 3강 (지금)

동적 기능 붙이기

로그인 · 내 데이터 · AI 챗봇 연결

2강 사이트가 있어야 오늘 실습을 진행합니다. 아직 배포 안 됐다면 강사에게 알려주세요!

Supabase 소개

서버를 직접 만들지
않아도 됩니다

Supabase는 서버·DB·로그인을 대신 제공해주는 서비스입니다. 레고 블록처럼 붙이면 됩니다. 무료로 시작할 수 있습니다.

오늘은 ① Auth(로그인)와 ② Database(데이터 저장)를 사용합니다. 직접 서버를 만들 필요가 없습니다.

🦸

Supabase = 내 사이트의 슈퍼히어로 서버

🔐 Auth (로그인)

🗄️ Database (저장)

📦 Storage (파일)

⚡ 무료 티어 제공

🎮 직접 서버 불필요

비유: "레고처럼 붙이는 백엔드." supabase.com에서 계정만 만들면 DB와 로그인이 준비됩니다.

Supabase 연결

키 두 개,
역할이 완전히 다릅니다

Supabase를 연결하려면 프로젝트를 만들고 키를 가져와야 합니다. 키는 두 종류이고 절대 헷갈리면 안 됩니다.

공개해도 되는 키

anon key

브라우저에 노출돼도 됩니다. RLS 규칙이 보호해줍니다. 코드에 NEXT_PUBLIC_ 접두어로 사용합니다.

절대 노출 금지 🚨

service_role key

서버 전용. 브라우저 코드에 두면 누구나 내 DB 전체를 조작할 수 있습니다. .env에만 보관하세요.

키는 반드시 .env 파일에 보관하고, .gitignore에 .env를 추가해 GitHub에 올라가지 않도록 하세요.

Supabase 연결 3단계 supabase.com → 키 → 코드

① 프로젝트 생성supabase.com에서 무료 계정으로 새 프로젝트를 만듭니다. 잠깐 기다리면 DB가 준비됩니다.

② 키 복사Project Settings → API에서 anon key와 service_role key를 각각 .env 파일에 붙여넣습니다.

③ 클라이언트 셋업코딩 에이전트에게 "Supabase 클라이언트 연결해줘"라고 시키면 설치부터 초기화까지 해줍니다.

Auth 개념

왜 로그인이
필요한가요?

로그인이 있어야 "내 데이터"가 생깁니다. Supabase Auth가 회원가입·로그인·세션을 모두 처리해줍니다.

Supabase Auth가 지원하는 방법: 구글 로그인(클릭 한 번), 이메일/비밀번호. 오늘은 이 두 가지를 씁니다.

로그인이 있으면 무엇이 달라지나요? 없으면 vs 있으면

로그인 없을 때 사이트는 방문자가 누구인지 모릅니다. 데이터를 저장해도 "누구 것"인지 구분할 수 없습니다. 모두가 같은 내용을 봅니다.

로그인 있을 때 사이트가 user_id(사용자 고유번호)를 알게 됩니다. 내 데이터를 내 계정에 저장하고, 남의 데이터는 볼 수 없게 됩니다.

Supabase Auth가 해주는 것 회원가입 · 이메일 인증 · 비밀번호 재설정 · Google OAuth · 세션 유지 — 이 모든 것을 Supabase가 처리합니다. 우리는 UI만 만들면 됩니다.

로그인 = user_id 발급. 이 ID가 모든 "내 데이터"의 주인 표시가 됩니다.

실습 1 · Auth

로그인 기능을
에이전트에게 시켜봅니다

결과물우상단에 "로그인/내 정보" 버튼이 생기고, 로그인한 이메일이 표시됩니다.

방식이메일/비밀번호 또는 Google 로그인 버튼. Supabase Auth가 전부 처리합니다.

확인 포인트로그인 후 user 정보가 콘솔에 찍히는지, 세션이 새로고침 후에도 유지되는지 확인합니다.

🤖 에이전트에게 이렇게 시키세요

Supabase Auth로 이메일/비밀번호 로그인과 회원가입 기능을 추가해줘. 로그인되면 우상단에 사용자 이메일을 보여주고, 로그아웃 버튼도 만들어줘. 로그인 안 된 상태면 "로그인" 버튼을 보여줘.

Google 소셜 로그인 버튼도 추가해줘. Supabase의 signInWithOAuth를 사용하면 돼. 버튼 스타일은 기존 디자인과 맞춰줘.

에이전트가 Supabase 클라이언트 설치, 초기화, 로그인 폼 UI까지 한 번에 만들어줍니다.

DB & RLS 개념

내 사물함에는
내 열쇠만 씁니다

DB는 표(table)입니다. 행 하나가 데이터 하나. RLS = 이 행은 주인만 볼 수 있다는 규칙입니다.

RLS가 없으면 다른 사람이 내 데이터를 볼 수 있습니다. 반드시 켜야 합니다. 보안의 핵심입니다.

RLS란 무엇인가요? Row Level Security

DB = 표(Table) 행(row)이 하나의 데이터입니다. 예: "user_id=abc, 메모='오늘 할 일'". 표에 행이 쌓일수록 데이터가 늘어납니다.

RLS 없을 때 🚨 로그인한 사용자가 SELECT * FROM messages 하면 다른 사람 메시지까지 다 나옵니다. 큰일 납니다.

RLS 켜면 ✅ 정책(Policy): "user_id = auth.uid() 인 행만 허용". 내 user_id인 행만 보입니다. 사물함에 내 열쇠만 맞는 것처럼요.

RLS Policy = auth.uid() 비교. 로그인한 내 ID와 행의 user_id가 같을 때만 접근 허용.

실습 2 · Database

내 데이터를
테이블에 저장해봅니다

테이블 구조 예시messages 테이블: id, user_id, content, created_at. user_id는 Supabase Auth의 uid()와 연결합니다.

RLS 정책Supabase 대시보드 → Authentication → Policies에서 "user_id = auth.uid() 행만" 정책을 추가합니다.

확인 포인트다른 계정으로 로그인했을 때 내 데이터가 보이지 않는지 반드시 테스트합니다.

🤖 에이전트에게 이렇게 시키세요

Supabase에 messages 테이블을 만들고 싶어. 컬럼은 id(uuid), user_id(auth.uid 연결), content(text), created_at(timestamp). RLS를 켜고 "내 user_id 행만 select/insert 가능"한 정책을 만들어줘. 그리고 로그인된 사용자가 메시지를 저장하고 불러오는 코드도 작성해줘.

Supabase 대시보드에서 직접 테이블을 만들거나, SQL 에디터에서 CREATE TABLE을 써도 됩니다. 에이전트가 코드를 안내해줍니다.

외부 API 개념

API 키는
절대 브라우저에
두지 마세요

외부 API(AI, 날씨, 지도 등)를 쓰려면 키가 필요합니다. 이 키를 브라우저 코드에 넣으면 누구나 훔칠 수 있습니다.

브라우저(프론트엔드) 코드는 "소스 보기"로 누구나 읽을 수 있습니다. API 키가 거기 있으면 다른 사람이 내 quota와 요금을 쓸 수 있습니다.

올바른 API 호출 방법 브라우저 → 내 서버 → 외부 API

❌ 잘못된 방법 (키 노출 위험)

브라우저

→

Gemini API
키 노출!

🚨

✅ 올바른 방법 (키 안전)

브라우저

→

내 서버
함수

→

Gemini API
키는 서버에만

브라우저는 내 서버 함수를 부릅니다 → 서버 함수가 키를 숨긴 채 Gemini를 부릅니다 → 결과만 브라우저로 돌려줍니다.

AI API 키 발급

Gemini API 키를
무료로 발급받습니다

Google AI Studioaistudio.google.com에 접속해서 "Get API key"를 클릭하면 바로 키가 발급됩니다. 구글 계정만 있으면 됩니다.

무료 quotaGemini 1.5 Flash는 분당 15회, 일 1,500회 무료입니다. 수업 실습에는 충분합니다. 비용 걱정 없이 연습하세요.

키 보관.env 파일에 GEMINI_API_KEY=키 형태로 저장합니다. NEXT_PUBLIC_ 없이, 서버 전용으로 사용합니다.

01

aistudio.google.com 접속구글 계정으로 로그인 후 "Get API key" 클릭

02

키 복사 → .env 저장GEMINI_API_KEY=AIzaSy... 형식으로 .env 파일에 붙여넣기

03

.gitignore 확인.env 파일이 .gitignore에 있는지 확인. 없으면 추가. 키가 GitHub에 올라가면 안 됩니다.

GEMINI_API_KEY는 NEXT_PUBLIC_ 없이 서버 전용으로만 씁니다. 절대 브라우저 코드에 넣지 마세요.

실습 3 · AI 챗봇

서버가 키를 숨긴 채
Gemini를 대신 부릅니다

비밀브라우저가 직접 Gemini를 부르지 않습니다. 내 사이트의 서버 함수(Next.js API route)가 키를 숨긴 채 Gemini를 부르고 결과만 돌려줍니다.

구조채팅 입력창(UI) → /api/chat 서버 라우트 → Gemini API 호출 → 응답을 브라우저에 반환

사용 모델gemini-1.5-flash (무료 quota 충분). @google/generative-ai npm 패키지를 사용합니다.

🤖 에이전트에게 이렇게 시키세요

Next.js API route를 /api/chat 경로로 만들어줘. 클라이언트에서 message를 POST로 보내면, 서버에서 GEMINI_API_KEY 환경변수를 사용해 Gemini 1.5 Flash API를 호출하고 응답 텍스트를 JSON으로 돌려주는 라우트야. @google/generative-ai 패키지를 설치하고 사용해줘.

위에서 만든 /api/chat을 호출하는 채팅 UI 컴포넌트를 만들어줘. 입력창, 전송 버튼, 대화 내역이 위로 쌓이는 형태. AI 응답이 오는 동안 "생각 중..." 표시도 넣어줘.

실습 4 · 통합

로그인 + DB + AI를
하나로 연결합니다

통합의 흐름로그인된 사용자가 AI와 대화하면, 그 대화 내역이 messages 테이블에 내 user_id로 저장됩니다. RLS 덕분에 남의 대화는 안 보입니다.

저장 시점AI 응답을 받은 직후 user_id + 질문 + 답변을 DB에 insert합니다. 다음 접속 때 이전 대화를 불러올 수도 있습니다.

완성 기준로그인 → AI 채팅 → Supabase 대시보드에서 내 user_id로 행이 저장되는 것을 눈으로 확인합니다.

🤖 에이전트에게 이렇게 시키세요

채팅 UI에서 AI 응답을 받은 직후, Supabase의 messages 테이블에 user_id(현재 로그인한 사용자), user_message(내 질문), ai_response(AI 답변), created_at을 insert하는 코드를 추가해줘. RLS 정책이 있으니 insert는 클라이언트에서 anon key로 해도 되고, 서버 라우트에서 처리해도 돼. 어떤 방법이 더 적합한지 추천해줘.

Auth + DB + 외부 AI API가 합쳐지는 순간입니다. 이 패턴만 이해하면 어떤 기능이든 같은 방식으로 붙일 수 있습니다.

보안 체크 & 배포

배포 전
반드시 확인합니다

🔑

service_role / API 키 노출 확인코드에서 grep으로 키를 검색해봅니다. NEXT_PUBLIC_ 변수에 비밀 키가 없는지 확인합니다.

🛡️

RLS 켜짐 확인Supabase 대시보드 → Authentication → Policies에서 각 테이블의 RLS가 enabled인지 확인합니다.

📁

.env가 git에 올라가지 않았나 확인git status 또는 GitHub에서 .env 파일이 보이면 즉시 삭제하고 키를 재발급합니다.

01

Vercel 환경변수 설정Vercel 대시보드 → Settings → Environment Variables에 .env 키를 모두 입력합니다.

02

재배포환경변수 추가 후 Vercel에서 "Redeploy"를 눌러야 적용됩니다.

⚠️

무료 quota 인지Gemini: 일 1,500회. Supabase 무료: 500MB DB, 50MB storage. 초과하면 기능이 멈출 수 있습니다.

확장 & 마무리

오늘 배운 패턴은
어디든 재사용됩니다

Auth + DB + 서버 경유 외부 API — 이 세 가지 조합으로 대부분의 동적 기능을 만들 수 있습니다.

📅

예약 시스템 로그인 후 날짜 선택 → DB 저장 → 관리자에게 알림

📝

방명록/댓글 로그인한 사람만 쓸 수 있는 방명록, RLS로 내용 보호

💳

결제 연동 로그인 + 결제 API(서버 경유) + 결제 내역 DB 저장

🔔

알림 기능 내 계정의 이벤트를 이메일/슬랙으로 알려주는 서버 함수

📊

내 대시보드 로그인한 나만 볼 수 있는 통계/현황 페이지

🤖

나만의 AI 도구 Gemini를 커스텀 프롬프트로 감싸서 나만의 AI 서비스

수고하셨습니다! 오늘 만든 것을 친구나 가족에게 공유해보세요. 질문이 있으면 편하게 물어봐 주세요. 🎉

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

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

오늘 수업이 끝나면이런 흐름이 됩니다

우리는 지금3강에 있습니다

서버를 직접 만들지않아도 됩니다

키 두 개,역할이 완전히 다릅니다

왜 로그인이필요한가요?

로그인 기능을에이전트에게 시켜봅니다

내 사물함에는내 열쇠만 씁니다

내 데이터를테이블에 저장해봅니다

API 키는절대 브라우저에두지 마세요

Gemini API 키를무료로 발급받습니다

서버가 키를 숨긴 채Gemini를 대신 부릅니다

로그인 + DB + AI를하나로 연결합니다

배포 전반드시 확인합니다

오늘 배운 패턴은어디든 재사용됩니다

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

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

오늘 수업이 끝나면
이런 흐름이 됩니다

우리는 지금
3강에 있습니다

서버를 직접 만들지
않아도 됩니다

키 두 개,
역할이 완전히 다릅니다

왜 로그인이
필요한가요?

로그인 기능을
에이전트에게 시켜봅니다

내 사물함에는
내 열쇠만 씁니다

내 데이터를
테이블에 저장해봅니다

API 키는
절대 브라우저에
두지 마세요

Gemini API 키를
무료로 발급받습니다

서버가 키를 숨긴 채
Gemini를 대신 부릅니다

로그인 + DB + AI를
하나로 연결합니다

배포 전
반드시 확인합니다

오늘 배운 패턴은
어디든 재사용됩니다