“AI한테 시켰더니 앱이 만들어졌다. 화면도 예쁘고, 버튼도 클릭된다! 잠깐… 그런데 뭔가 이상하다… 로그인은 안 되고, 데이터도 저장되지 않고, 결제 버튼을 눌러도 아무 일도 일어나지 않는데?!”

AI로 코딩하다 보면, 처음엔 잘되다가 갑자기 막혀서 진도가 안 나갈 때가 있죠?

코딩 몰라도 AI로 웹서비스 만드는 법 - 1부에서 AI 코딩 툴로 앱의 겉모습을 만들고 인터넷에 배포하는 전체 흐름을 다뤘다면, 2부에서는 웹서비스에서 빠질 수 없는 “데이터 저장”과 “로그인” 기능을 추가하는 방법을 함께 알아봅시다.

1. 데이터 저장하기

• To-Do 앱을 만들었는데, 화면을 다시 열었더니 입력했던 내용이 사라짐

• 회원가입 화면을 만들었는데, 실제로 로그인 기능이 작동 안 됨

• 커뮤니티 게시판을 만들었는데, 내가 쓴 글이 다른 사람에게는 안 보임

이 모든 문제의 공통 원인은 하나. 데이터를 저장할 장소가 아직 없기 때문입니다.

화면에 보이는 데이터는 브라우저가 열려 있는 동안만 유지되는 일시적인 상태일 뿐, 어딘가에 영구적으로 기록해두지 않으면 창을 닫는 순간 전부 사라집니다. 이럴 때는 사용자가 입력한 정보를 별도로 저장해두고, 언제 어디서 접속해도 같은 데이터를 볼 수 있게 해주는 데이터베이스가 필요하죠. 데이터베이스는 종류가 다양하지만, 회사에서 자주 사용하는 엑셀 스프레드시트와 비슷하다고 생각하면 이해하기 쉬워요.

---

① Supabase — 뭘 쓸지 고민되면, 일단 이거!

Supabase는 웹서비스를 만들 때 거의 반드시 필요한 데이터 저장, 로그인, 파일 저장 기능을 한 번에 제공하는 플랫폼입니다. 초기 서비스 운영에 충분한 수준까지 거의 무료로 사용할 수 있고, AI 코딩 툴과 연동하면 전문적인 지식이 없어도 쉽게 사용할 수 있다는 점이 큰 강점이죠.

1. 어떨 때 필요할까?

• 상품 목록, 뉴스, 블로그처럼 많은 정보를 저장하고 웹에 표시해야 할 때

• 로그인·마이페이지 기능이 필요할 때

• 게시판, 댓글, 좋아요처럼 여러 사용자가 데이터를 함께 공유해야 할 때

• 파일·이미지 업로드 기능이 필요할 때

• 실시간 채팅·알림처럼 데이터가 화면에 즉시 반영되어야 할 때

2. AI 코딩 툴과 Supabase 연결하기

STEP 1 — Supabase 계정 만들기

supabase.com 접속 → Start your project 클릭 → GitHub 계정 또는 이메일로 가입

STEP 2 — 프로젝트 생성

New project 클릭 → 프로젝트 이름, DB 비밀번호, Region(Asia Pacific 또는 Northeast Asia) 입력 후 생성

STEP 3 — AI 코딩 툴에 MCP 연결

Cursor나 Claude Code 등의 MCP 설정에 아래 URL 한 줄을 추가합니다.

https://mcp.supabase.com/mcp

Claude Code 앱에서는 커넥터 → 커넥터 둘러보기에서 Supabase를 찾을 수 있어요.
저장 후 브라우저가 자동으로 열립니다. Supabase 계정으로 로그인하면 연결 완료.

3. MCP 연결 후 가능한 것

1. 정보 저장하고 웹에 표시

   • ​“Supabase에 상품 테이블 만들어줘. 이름, 가격, 재고, 이미지 URL 컬럼 포함해서”
   • ​“블로그 글 저장할 posts 테이블이랑, 유저 정보 담을 profiles 테이블 만들어줘”

2. 로그인·마이페이지 구현

   • ​“Supabase Auth로 Google 로그인 되고, 로그인한 사람만 마이페이지 볼 수 있는 앱 만들어줘”
   • ​“로그인한 사용자만 본인 글을 수정·삭제할 수 있게 Supabase RLS 설정해줘. 조회는 누구나 가능하게”

3. 여러 사용자가 데이터를 공유

   • ​“게시판 앱 만들어줘. 글 쓰기·수정·삭제는 로그인 후 가능하고, 목록은 누구나 볼 수 있게”
   • ​“좋아요는 로그인한 사람만 누를 수 있고, 중복 클릭은 막아줘”

4. 파일·이미지 업로드

   • ​“내 앱에 Supabase 연결해줘. 필요한 패키지 설치하고, Supabase 접속 정보도 환경 설정 파일에 저장해줘”
   • ​“이미지 업로드 기능 추가해줘. Supabase Storage에 업로드 공간 만들고 앱이랑 연결까지”

5. 데이터를 화면에 실시간 반영

   • ​“댓글 작성하면 새로고침 없이 바로 보이게 Supabase Realtime으로 연결해줘”
   • ​“채팅 기능 만들어줘. 메시지 보내면 상대방 화면에 바로 나타나게 Supabase Realtime 써줘”

---

② Upstash — 빠르고 편리한 보조 저장소

Supabase가 모든 데이터를 차곡차곡 쌓아두는 메인 창고라면, Upstash는 자주 꺼내 쓰는 물건을 바로 손에 닿는 곳에 따로 빼둔 선반입니다. 둘은 역할이 다른 독립적인 도구로, 서비스 규모가 커질수록 함께 쓰는 경우가 많죠.

Upstash에는 임시 저장소(Redis)와 시간 예약 작업(QStash) 두 가지의 대표적인 기능이 있어요.

1. 어떨 때 필요할까?

• 조회수·랭킹·인기 목록처럼 자주 읽히는 데이터를 더 빠르게 보여주고 싶을 때

• 같은 사람이 너무 많이 요청하는 것을 막아야 할 때 (접속 횟수 제한)

• 결제 완료 후 영수증 이메일, 매일 알림 같은 예약 작업이 필요할 때

• Vercel·Next.js 환경에서 가벼운 저장소가 필요할 때

2. AI 코딩 툴과 Upstash 연결하기

STEP 1 — Upstash 계정 만들기

console.upstash.com 접속 → Create account → 이메일 또는 Google 계정 등으로 가입

STEP 2 — API 키 발급

console.upstash.com 로그인 후 우측 상단 계정 아이콘 → Developer API → Create API Key → 원하는 이름을 입력하고, No Expiration을 선택 → 생성된 API 키를 복사

STEP 3 — AI 코딩 툴에 MCP 연결

Upstash 가입 이메일과 발급한 API 키를 AI 코딩 툴에 알려주면 연결 완료입니다.
​“Upstash MCP 연결해줘. 이메일은 [내 이메일], API 키는 [복사한 키]야”

3. MCP 연결 후 가능한 것

1. 자주 읽히는 데이터 빠르게 표시

   • ​“상품 목록이나 인기 콘텐츠를 미리 준비해둬서 페이지마다 DB 다시 불러오지 않게 해줘”

2. 접속 횟수 제한

   • ​“같은 사용자가 1분에 10번 이상 요청하면 막아줘. Upstash로 횟수 제한 구현해줘”

3. 결제·가입 후 예약 작업

   • ​“결제 완료 후 5분 뒤 영수증 이메일 자동 발송해줘. Upstash로 예약 설정해줘”
   • ​“매일 오전 9시에 사용자에게 알림 이메일 보내는 기능 만들어줘”

4. 가벼운 임시 저장소

   • ​“Next.js 앱에서 로그인 세션 정보 저장할 가벼운 저장소 필요해. Upstash 연결해줘”

---

2. 로그인 기능 만들기

로그인은 단순한 “기능”이 아니라 보안과 운영까지 포함된 시스템입니다.
예를 들면, 아래와 같은 기술을 모두 고려해야 하죠.

• 비밀번호를 안전하게 변환해서 저장 (유출돼도 원본을 알 수 없게)

• 로그인 상태 유지 (창을 닫아도 로그인이 풀리지 않게)

• 비정상 접속 차단 (같은 계정에 수백 번 로그인 시도하는 해킹 등)

• 이메일 인증/비밀번호 재설정 등 사용자 편의 기능

특히 보안이 허술하면, 개인정보 유출, 계정 탈취 등과 같은 심각한 문제로 이어질 수 있습니다. 그래서 소규모 서비스에서는 직접 구현하기보다 인증(Auth) 서비스를 사용하는 경우가 많아요.

---

2-1. Supabase Auth로 기본 로그인 구현하기

Supabase는 데이터베이스 기능 뿐 아니라, 회원가입·로그인·로그아웃부터 로그인 상태 유지까지 필요한 기능을 묶은 인증 서비스를 제공합니다. 기본적인 이메일/비밀번호 로그인부터 소셜 로그인(SSO)까지 무료로 쉽게 사용할 수 있어서 편리하죠.

STEP 1 — Authentication 활성화

Supabase 대시보드 → Authentication 탭 → Sign In / Providers → Auth Providers → Enable email provider(Email 활성화)

• Confirm email: ON 권장 (가입 후 이메일 인증 필요 → 스팸/봇 가입 방지)

• Secure email change: ON 권장 (이메일 변경 시 기존 주소로 확인 메일 발송)

STEP 2 — 앱에서 가입·로그인 UI 구성

AI 코딩 툴에게 아래와 같이 요청하세요. 전 단계에서 AI와 Supabase를 MCP로 연결했을 때만 작동합니다.

• ​“Supabase Auth로 이메일/비밀번호 회원가입·로그인 UI 만들고, 가입 후 이메일 인증 안내 메시지도 보여줘. 로그인 성공 후에는 마이페이지로 이동하게 해줘”

STEP 3 — 로그인 후 회원 정보 불러오기

로그인이 완료되면 회원 정보(이름, 이메일 등)를 불러와서 마이페이지에 표시합니다.

• ​“로그인한 내 이름이랑 이메일을 마이페이지 상단에 보여줘”

• ​“로그인 안 한 상태에서 마이페이지 주소로 직접 들어오면 로그인 페이지로 이동시켜줘”

STEP 4 — Site URL와 Redirect URL 설정 ⚠️ 중요

Authentication → URL Configuration 메뉴에서 설정합니다.

Site URL (기본 리디렉션 주소)

• 로그인·이메일 인증·비밀번호 재설정 후 사용자가 돌아올 기본 페이지 주소입니다.

• 처음엔 http://localhost:3000으로 되어 있으니, 배포 후 반드시 실제 도메인으로 변경하세요.
  예) https://example.com

Redirect URLs (허용할 추가 주소 목록)

• Site URL 외에 접속을 허용할 주소를 추가합니다.

• 로컬 개발과 배포 환경을 동시에 사용하려면 둘 다 등록해야 합니다.

• /** 와일드카드를 쓰면 해당 도메인의 모든 하위 경로를 허용할 수 있습니다.

환경	추가할 URL 예시
로컬 개발	http://localhost:3000/**
Vercel 프리뷰	https://*-my-project.vercel.app/**
Vercel 프로덕션	https://example.com/**

---

2-2. 소셜 로그인(SSO) 추가하기

기본 로그인 구현 후, Google·Kakao 등 외부 계정으로 로그인하는 소셜 로그인 기능을 추가할 수 있습니다.
소셜 로그인을 사용하려면, 별도로 각 플랫폼에서 인증 절차를 거쳐야 합니다.

소셜 로그인(SSO)에 대한 자세한 내용은 아래 글을 참고하세요.
SSO(Single Sign-On) — 하나의 계정으로 다양한 서비스를 이용하는 방법

① Google

STEP 1. Supabase 대시보드에서 콜백 URL 복사

Authentication → Sign In / Providers → Auth Providers → Google 선택 → 화면에 표시된 Callback URL (for OAuth) 복사

STEP 2. Google Cloud Console에서 OAuth 앱 등록

1. Google Cloud Console 접속 → 프로젝트 생성

2. Google Auth Platform > Branding 에서 앱 이름, 이메일 등 입력

3. Google Auth Platform > Clients > Create Client → 애플리케이션 유형: 웹 애플리케이션

4. Authorized redirect URIs에 1번에서 복사한 Supabase 콜백 URL 입력

5. 생성된 Client ID와 Client secret 복사 ⚠️ secret은 이 화면에서만 확인 가능

STEP 3. Supabase 대시보드에 발급받은 키 입력

Supabase 화면으로 돌아가서 Google에서 발급받은 Client ID와 Client Secret (for OAuth)을 입력한 뒤 Save를 클릭합니다.

② Kakao

STEP 1. 카카오 개발자 등록

1. developers.kakao.com 접속 → 카카오톡 계정으로 로그인

2. 상단 메뉴 앱 클릭 → 앱 생성 버튼

3. 앱 이름 (예: MyProject), 회사명 (개인이면 본인 이름) 등 입력 → 저장

STEP 2. 플랫폼 등록

1. 생성된 앱 클릭 → 좌측 메뉴 앱 설정 > 플랫폼

2. Web 플랫폼 등록 버튼 → 사이트 도메인 입력

   • 개발 중: http://localhost:3000
   • 배포 후: https://내도메인.com

3. 저장

STEP 3. 카카오 로그인 활성화 + Redirect URI 등록

1. 좌측 메뉴 카카오 로그인 클릭

2. 활성화 설정 → ON 으로 변경

3. Redirect URL 항목에 등록 버튼 → 아래 URL 입력

https://[내-supabase-프로젝트-ID].supabase.co/auth/v1/callback

Supabase 프로젝트 ID는 Supabase 대시보드 → Project Settings > General에서 확인

STEP 4. 동의항목 설정

1. 좌측 메뉴 카카오 로그인 > 동의항목

2. 필요한 항목 ON 설정

   • 최소 권장: 닉네임, 프로필 사진, 카카오계정(이메일)
   • 이메일은 선택 동의 → 필요시 필수 동의로 변경 가능

STEP 5. 앱 키 및 Client Secret 확인

1. 좌측 메뉴 앱 설정 > 앱 키

   • REST API 키 복사 → 메모장에 저장

2. 좌측 메뉴 카카오 로그인 > 보안

   • Client Secret → 코드 생성 버튼 → 생성된 코드 복사
   • 활성화 상태 → 사용함으로 변경한 뒤 저장

STEP 6. Supabase에 입력

1. supabase.com 대시보드 접속 → 해당 프로젝트 선택

2. 좌측 메뉴 Authentication > Providers

3. 목록에서 Kakao 찾아서 클릭 → Enable 토글 ON

4. 아래 두 값 입력

   • Client ID (REST API Key): STEP 5에서 복사한 REST API 키
   • Client Secret: STEP 5에서 복사한 Client Secret 코드

5. Save 버튼 클릭