로그인은 어떻게 동작할까? Supabase로 로그인 만들기
회원가입부터 로그아웃까지, 로그인 뒤에서 일어나는 일을 단계별로 따라가 보고 Supabase로 내 사이트에 로그인을 붙여요.
🎯 이번 레슨을 마치면
- 회원가입 → 이메일 인증 → 로그인 → 출입증(세션) → 로그아웃 절차를 설명할 수 있다
- 인증(누구인지)과 권한(무엇을 할 수 있는지)의 차이를 안다
- Codex에게 Supabase 로그인 기능을 맡기고 검수할 수 있다
로그인은 놀이공원 손목밴드
| 개념 | 질문 | 놀이공원으로 치면 |
|---|---|---|
| 인증인증 (Authentication)"당신이 누구인지" 확인하는 일이에요. 로그인이 대표적이에요. (Authentication) | 당신은 누구인가요? | 입구에서 티켓·신분증 확인 |
| 세션세션 (Session)로그인한 뒤 "이 사람은 로그인한 상태"임을 기억해 두는 것이에요. 브라우저가 출입증(토큰)을 보관해서 새로고침해도 로그인이 유지돼요. · 토큰토큰 (Token)로그인에 성공하면 받는 디지털 출입증이에요. 데이터를 요청할 때 함께 보내서 내가 누구인지 증명해요. | 로그인한 상태를 어떻게 기억하나요? | 손목밴드 |
| 권한권한 (Authorization)로그인한 사람이 "무엇을 할 수 있는지" 정하는 것이에요. 예: 일반 회원은 글쓰기만, 관리자는 삭제까지. (Authorization) | 무엇을 할 수 있나요? | 밴드 색에 따라 탈 수 있는 기구 |
로그인 절차, 한 단계씩 따라가기
다음 단계 버튼을 눌러 회원가입부터 로그아웃까지 따라가 보세요.
체험로그인은 어떻게 동작할까? — 한 단계씩
나 (브라우저)회원
내 사이트로그인 화면
Supabase Auth출입 관리소
이메일함인증 메일
데이터베이스RLS 경비원
1단계 · 회원가입: 이메일과 비밀번호 입력
회원가입 화면에 이메일과 비밀번호를 입력하고 [가입하기]를 눌러요. 내 사이트는 이 정보를 직접 저장하지 않고 Supabase Auth(출입 관리소)에게 그대로 넘겨요.
출입증 없음
어떤 로그인 방식을 쓸까?
| 방식 | 사용자는 이렇게 | 장점 | 주의할 점 |
|---|---|---|---|
| 이메일 + 비밀번호 | 이메일과 비밀번호로 가입 | 가장 익숙하고 만들기 쉬워요 | 비밀번호 찾기(재설정) 기능도 함께 필요 |
| 매직 링크 | 이메일만 입력 → 메일 속 링크 클릭 | 비밀번호를 외울 필요가 없어요 | 로그인할 때마다 메일함을 열어야 해요 |
| 소셜 로그인소셜 로그인 (Social Login)구글, 카카오 같은 다른 서비스 계정으로 로그인하는 방식이에요. 비밀번호를 새로 만들 필요가 없어요. (구글, 카카오 등) | [카카오로 시작하기] 버튼 클릭 | 가입이 가장 빨라요. 국내 서비스라면 카카오가 인기 | 각 서비스의 개발자 사이트에서 앱 등록이 필요해요 |
1단계: Supabase 설정 확인하기 (직접)
5-3 레슨에서 만든 Supabase 프로젝트를 열고 두 가지를 확인해요.
| 어디서 | 무엇을 | 왜? |
|---|---|---|
| Authentication → Sign In / Providers | Email이 켜져 있는지 확인 | 이메일 로그인을 쓰려면 켜져 있어야 해요 |
| Authentication → URL Configuration | Site URL에 내 사이트 주소(예: https://minji-site.pages.dev), Redirect URLs에 내 컴퓨터에서 확인할 주소도 추가 | 인증 메일의 링크를 눌렀을 때 돌아올 주소예요. 틀리면 링크를 눌러도 엉뚱한 곳으로 가요 |
2단계: Codex에게 계획 받기
내 사이트에 Supabase로 이메일 로그인 기능을 붙이고 싶어. (5-3에서 만든 방명록이 있는 프로젝트야) - 회원가입, 로그인, 로그아웃, 비밀번호 재설정 화면이 필요해. - 화면 위쪽에 로그인 상태를 보여 줘. (로그인하면 "○○님" + 로그아웃 버튼) - 방명록 글쓰기는 로그인한 사람만 할 수 있고, 내가 쓴 글은 나만 삭제할 수 있게 해 줘. - 비밀번호가 틀리거나 이메일 인증을 안 했을 때 초보자도 알아듣는 안내 문구를 보여 줘. 코드를 바꾸기 전에 1) 바꿀 파일 2) 로그인 흐름 3) 방명록 테이블과 RLS 규칙을 어떻게 바꿀지 먼저 설명해 줘.
3단계: 만들고 직접 써 보기
계획이 괜찮으면 진행해요. 데이터베이스 규칙을 바꾸는 SQL이 나오면 Supabase의 SQL Editor에서 실행해요.
계정 B로 로그인했는데 계정 A가 쓴 방명록 글의 삭제 버튼이 보이고, 누르면 실제로 지워져. 화면 문제인지 RLS 규칙 문제인지 먼저 확인하고, 데이터베이스에서도 막히도록 고쳐 줘.
정식 서비스 전에 챙길 것
퀴즈
로그인한 뒤 새로고침해도 로그인 상태가 유지되는 이유는?
퀴즈
'다른 사람의 글은 삭제할 수 없게' 하는 규칙은 어디서 지켜야 가장 안전할까요?
📝 정리해 볼까요?
- 로그인은 "회원가입 → 이메일 인증 → 로그인 → 출입증(세션) 발급 → 출입증으로 데이터 요청 → 로그아웃" 순서로 동작해요.
- 인증은 "누구인지 확인", 권한은 "무엇을 할 수 있는지"예요. 권한은 데이터베이스의 RLS가 출입증을 보고 지켜요.
- 비밀번호 저장, 출입증 발급·갱신은 Supabase가 해 줘요. 나는 로그인 방식을 고르고, 주소 설정과 검수를 맡아요.
📖 새로 나온 용어
- 인증 Authentication
- "당신이 누구인지" 확인하는 일이에요. 로그인이 대표적이에요. 비유: 출입증 확인
- 권한 Authorization
- 로그인한 사람이 "무엇을 할 수 있는지" 정하는 것이에요. 예: 일반 회원은 글쓰기만, 관리자는 삭제까지. 비유: 출입증 등급 (일반 / 직원 전용)
- 세션 Session
- 로그인한 뒤 "이 사람은 로그인한 상태"임을 기억해 두는 것이에요. 브라우저가 출입증(토큰)을 보관해서 새로고침해도 로그인이 유지돼요. 비유: 놀이공원 손목밴드
- 토큰 Token
- 로그인에 성공하면 받는 디지털 출입증이에요. 데이터를 요청할 때 함께 보내서 내가 누구인지 증명해요. 비유: 출입증 카드
- 해시 Hash
- 비밀번호를 원래대로 되돌릴 수 없는 암호문으로 바꾸는 방법이에요. 그래서 서비스 운영자도 비밀번호를 볼 수 없어요. 비유: 믹서기에 간 과일 (다시 과일로 못 돌림)
- 소셜 로그인 Social Login
- 구글, 카카오 같은 다른 서비스 계정으로 로그인하는 방식이에요. 비밀번호를 새로 만들 필요가 없어요. 비유: 신분증 대신 회사 사원증으로 출입
- RLS Row Level Security
- 데이터베이스의 한 줄 한 줄마다 "누가 보고 고칠 수 있는지" 정하는 보안 규칙이에요. 비유: 사물함마다 주인만 여는 자물쇠
잘했어요! 완료 표시는 이 브라우저에 저장돼요.