로그인 기능 붙이기,사용자 개념 첫 경험

로그인 기능 붙이기 — 바이브 코딩으로 사용자 개념 첫 경험

📍 시리즈 위치

6편: Supabase ✓

→

7편: OpenAI API ✓

→

▶ 8편: 로그인 (지금)

→

9편: 코드 복잡해질 때

🔐 인증·세션 개념 — 비유로 3줄로 이해하기

🔀 이번 편이 이전 편들과 다른 이유

1~7편까지 앱

누가 들어와도 같은 화면

모든 사람이 같은 데이터 봄

"내 것"이라는 개념 없음

혼자 쓰는 도구 수준

8편 이후 서비스

로그인한 사람마다 다른 화면

내 데이터는 나만 볼 수 있음

"내 계정 · 내 기록" 존재

다른 사람도 쓰는 서비스

이번 편부터 앱에 "사용자" 개념이 생깁니다 — 기능이 아니라 서비스가 됩니다.

💬 지금까지 만든 앱의 한계

지금까지 만든 앱은 누구나 접속하면 같은 화면을 봅니다.

내가 입력한 메모를 다른 사람도 볼 수 있습니다.
내 AI 요약 결과도 모든 사람 화면에 보입니다.
"내 것"이라는 개념이 없습니다.

로그인이 생기는 순간, "나만의 공간"이 생깁니다. 내가 저장한 메모는 나만 보이고, 다른 사람의 데이터는 보이지 않습니다.

🏷 인증 개념 — 딱 3가지만 이해하면 됩니다

인증

Authentication

"당신이 누구인지 확인하는 것" 도서관 입장 시 회원증을 보여주는 것과 같습니다. 이메일+비밀번호가 맞으면 "맞는 사람"으로 확인됩니다.

세션

Session

"지금 이 브라우저에서 로그인 상태를 기억하는 것" 도서관 일일권처럼, 한 번 확인받으면 그날은 계속 통과됩니다. 새로고침해도 로그인이 유지되는 이유입니다.

사용자

User

"내 서비스에 가입한 사람 하나하나" Supabase가 자동으로 관리합니다. 가입하면 사용자 목록에 추가되고, 각자의 데이터를 따로 관리할 수 있게 됩니다.

코드로 직접 구현할 필요 없습니다.
Supabase Auth가 인증·세션을 전부 처리해줍니다.
AI에게 연결 코드만 요청하면 됩니다.

⚙️ Supabase Auth 활성화 — 클릭 2번

6편에서 이미 Supabase를 연결했습니다. Auth 기능은 별도 설치 없이 Supabase에 내장되어 있습니다. 활성화만 하면 됩니다.

Supabase 대시보드 → Authentication 확인

Supabase 프로젝트 대시보드 → 왼쪽 메뉴 "Authentication" 클릭. 이미 활성화되어 있습니다. 별도 설정 없이 이메일·비밀번호 로그인이 기본 제공됩니다.

✅ Authentication 메뉴가 보이면 — 이미 준비된 것입니다

이메일 인증 설정 확인

Authentication → Providers → Email 항목에서 "Enable Email Signup"이 켜져 있는지 확인합니다. 개발 중에는 "Confirm email"을 끄면 회원가입 즉시 로그인 가능해서 테스트가 편합니다.

💡 지금은 로그인 흐름을 직접 경험하는 것이 목표이기 때문에, 개발 단계에서는 이메일 인증을 잠시 꺼두는 것이 편합니다. 실제 서비스로 전환할 때 다시 켜면 됩니다.

💡 나중에 실제 서비스로 전환할 때는 이메일 인증을 다시 켜는 것을 권장합니다.

🛠 로그인·회원가입 구현 — AI에게 전체 요청

코드는 AI가 전부 작성합니다. 아래 프롬프트를 그대로 사용하세요.

✅ 복붙용 — 로그인·회원가입 전체 구현 요청

현재 내 앱은 Node.js + Express + Supabase가 연결되어 있어. Supabase Auth를 사용해서 이메일 로그인 기능을 추가해줘. 요구사항: 1. 로그인 페이지 (이메일 + 비밀번호 입력) 2. 회원가입 페이지 (이메일 + 비밀번호 + 비밀번호 확인) 3. 로그인 성공 시 메인 페이지로 이동 4. 로그인 상태에서 사용자 이메일 화면에 표시 5. 로그아웃 버튼 클릭 시 세션 종료 후 로그인 페이지로 이동 6. 로그인 안 한 사용자가 메인 페이지 접근 시 로그인 페이지로 리다이렉트 Supabase 클라이언트는 기존 supabase.js 파일 사용. 수정할 파일 목록도 알려줘.

※ 이 요청 하나로 로그인·회원가입·로그아웃·리다이렉트까지 전부 구현됩니다.

📋 AI가 만들어주는 핵심 코드 구조

Supabase Auth 핵심 함수 — 이 3가지가 전부입니다

// 1. 회원가입 const { data, error } = await supabase.auth.signUp({ email: 'user@example.com', password: 'password123' }); // 2. 로그인 const { data, error } = await supabase.auth.signInWithPassword({ email: 'user@example.com', password: 'password123' }); // 3. 로그아웃 await supabase.auth.signOut(); // 현재 로그인된 사용자 확인 const { data: { user } } = await supabase.auth.getUser();

코드를 이해하지 않아도 됩니다.
AI가 이 함수들을 실제 화면과 연결해서 완성된 코드를 만들어줍니다.
이해할 것은 단 하나 — "signUp, signIn, signOut 세 줄이 로그인 기능의 전부"입니다.

바이브 코딩 앱에 추가된 로그인·회원가입 화면 예시 — Supabase Auth

🎉 Supabase에서 사용자 확인 — 첫 회원 순간

로그인 기능이 완성됐다면 실제로 회원가입을 해봅니다.

내 앱에서 회원가입 해보기

localhost:3000/signup 또는 회원가입 페이지 접속 → 이메일과 비밀번호 입력 → 가입 버튼 클릭 → 메인 페이지로 이동되면 성공.

✅ 확인: 화면에 로그인된 이메일이 표시되면 회원가입 + 로그인 모두 성공

Supabase에서 사용자 목록 확인

Supabase 대시보드 → Authentication → Users 메뉴 클릭. 방금 가입한 이메일이 목록에 보이면 완전 성공입니다.

✅ 내 이메일이 목록에 보인다면 — 이게 첫 번째 사용자입니다

👤

Supabase에서 내 이메일이 보인다면

당신은 지금 서비스를 운영하는 사람이 됐습니다.
"사용자 목록"이 있는 서비스를 만들었습니다.
앞으로 이 목록에 진짜 사용자들이 추가될 수 있습니다.

Vercel URL을 친구에게 보내고 가입을 요청해보세요.
친구 이메일이 목록에 추가되는 순간 — 진짜 서비스가 됩니다.

🔄

브라우저를 새로고침해도 로그인이 유지된다면 — 완전 성공입니다

F5를 눌러도 로그인 상태가 그대로라면, Supabase Auth가 세션을 브라우저에 저장하고 있는 것입니다. "내 서비스에 계정 시스템이 생겼다"는 감각이 처음으로 만들어지는 순간입니다.

⚠️ 로그인 기능은 처음엔 한 번에 완벽하게 동작하지 않는 경우가 많습니다.
비밀번호 오류, 리다이렉트 문제, 세션 꼬임 — 전부 흔한 일입니다.
에러 메시지를 그대로 AI에게 전달하면 대부분 해결됩니다. 2편에서 배운 방식 그대로입니다.

🔒 사용자별 데이터 분리 — 내 메모만 보이게

지금 상태에서는 모든 사용자가 모든 메모를 볼 수 있습니다. 로그인한 사용자가 자신의 메모만 볼 수 있도록 설정해야 합니다. 이걸 RLS(Row Level Security)라고 합니다.

😌

처음엔 RLS 설정이 낯설게 느껴질 수 있습니다. 하지만 핵심은 단 하나입니다. "로그인한 사람은 자기 데이터만 본다" — 이 규칙을 만드는 것입니다. SQL 몰라도 됩니다. AI에게 맡기면 됩니다.

🔒 RLS — 비유로 이해하기

각 행에 "이 사용자만 볼 수 있다"는 자물쇠 거는 것

엑셀 시트에서 특정 행은 A씨만 볼 수 있고, 다른 행은 B씨만 볼 수 있게 권한을 설정하는 것과 같습니다. SQL을 몰라도 됩니다. AI에게 요청하면 됩니다.

✅ 복붙용 — RLS 설정 요청

Supabase memos 테이블에 Row Level Security를 설정해줘. 로그인한 사용자는 자신이 저장한 메모만 볼 수 있게 해줘. 조건: - memos 테이블에 user_id 컬럼 추가 (없다면) - 메모 저장 시 현재 로그인한 사용자의 id를 user_id에 자동 저장 - SELECT, INSERT, UPDATE, DELETE 모두 user_id 기준으로 본인 데이터만 접근 가능 Supabase SQL Editor에 실행할 SQL 코드로 줘.

📖 RLS 설정이 너무 복잡하게 느껴진다면:
일단 로그인 기능만 완성하고 RLS는 나중에 추가해도 됩니다. 개인 연습 앱에서는 RLS 없이도 작동합니다. 실제 사용자가 생기기 시작할 때 적용해도 충분합니다.

🔐 처음으로 "내 데이터만 보이는 순간" — 이렇게 확인하세요

RLS 설정 후 두 계정으로 직접 확인하는 흐름

① 계정1 로그인

test1@example.com으로 로그인 → 메모 "나만의 메모" 저장 → 로그아웃

② 계정2 로그인

test2@example.com으로 로그인 → 메모 목록 확인

③ 결과 확인

test1의 "나만의 메모"가 보이지 않음
→ 각자의 데이터가 완전히 분리된 것입니다

✅ 여기서 처음으로 "와… 진짜 서비스 같다"는 감각이 생깁니다 🎉

📌 핵심 요약

🔐인증은 "당신이 누구인지 확인하는 것", 세션은 "로그인 상태를 기억하는 것"입니다. Supabase Auth가 이 모든 것을 처리해줍니다.
⚙️Supabase Auth는 6편에서 연결한 Supabase 프로젝트에 이미 내장되어 있습니다. 별도 설치 없이 Authentication 메뉴에서 바로 활성화됩니다.
🛠로그인 기능 구현은 AI에게 "Supabase Auth로 이메일 로그인 추가해줘"로 요청하면 됩니다. signUp, signIn, signOut 세 함수가 전부입니다.
👤회원가입 후 Supabase Authentication → Users에서 사용자 목록을 확인할 수 있습니다. 이 목록에 첫 이메일이 보이는 순간이 "내 서비스의 첫 회원"이 생기는 순간입니다.
🔒사용자별 데이터 분리는 Supabase RLS 기능으로 구현합니다. AI에게 "memos 테이블에 RLS 설정해줘, 로그인한 사용자는 자신의 메모만 보이게"로 요청하면 됩니다.
➡️다음 9편에서는 AI 코드가 복잡해졌을 때 당황하지 않는 법을 다룹니다. "처음엔 쉬웠는데 갑자기 못 읽겠다" 상태의 대처법입니다.

❓ 자주 묻는 질문

바이브 코딩 앱에 로그인을 붙이려면 무엇이 필요한가요?

6편에서 이미 Supabase를 연결했다면 추가 설치 없이 Supabase Auth를 바로 사용할 수 있습니다. Supabase Auth는 이메일·비밀번호 로그인을 기본으로 제공하고, 구글·GitHub 소셜 로그인도 설정 몇 번으로 추가할 수 있습니다. AI에게 "이 앱에 Supabase Auth로 이메일 로그인 추가해줘"라고 요청하면 코드 전체를 만들어줍니다.

세션이 뭔가요? 로그인 상태가 어떻게 유지되나요?

세션은 "지금 이 브라우저에서 로그인된 상태"를 기억하는 것입니다. 마치 도서관 일일권처럼, 한 번 확인받으면 그날은 계속 통과됩니다. Supabase Auth는 로그인 성공 시 자동으로 세션을 생성하고 브라우저에 저장합니다. 새로고침해도 로그인 상태가 유지되는 이유입니다.

로그인한 사용자별로 다른 데이터를 보여주려면 어떻게 하나요?

Supabase의 Row Level Security(RLS) 기능을 사용하면 됩니다. 쉽게 말해 "이 행은 이 사용자만 볼 수 있다"는 규칙을 테이블에 설정하는 것입니다. AI에게 "Supabase memos 테이블에 RLS를 설정해줘. 로그인한 사용자는 자신의 메모만 볼 수 있게 해줘"라고 요청하면 SQL 코드를 만들어줍니다.

구글 소셜 로그인은 어떻게 추가하나요?

Supabase 대시보드 → Authentication → Providers에서 Google을 활성화하고, Google Cloud Console에서 OAuth 클라이언트를 만들어서 Client ID와 Secret을 입력하면 됩니다. 이 과정이 복잡하게 느껴진다면 AI에게 "Supabase에서 구글 소셜 로그인 설정하는 방법 단계별로 알려줘"라고 요청하면 최신 기준으로 안내해줍니다.

내 서비스에 사용자가 생겼습니다 — 거의 다 왔습니다 🏁

1편부터 8편까지 왔습니다.
앱 완성 → 에러 극복 → 배포 → 백업
→ 보안 → DB → AI 기능 → 로그인까지.

9편에서는 AI 코드가 복잡해졌을 때 당황하지 않는 법을 다룹니다.
"처음엔 쉬웠는데 갑자기 못 읽겠다" — 그 상태의 대처법입니다.

▶ 다음 편 — 9편

AI 코드가 복잡해졌을 때 — 당황하지 않는 법

코드 복잡도 증가 대처, 리팩토링 요청법

이전 편

OpenAI API 첫 연결, 진짜 AI 서비스 만들기

로그인 기능 붙이기,사용자 개념 첫 경험 — 바이브 코딩 시즌1 #8