바이브코딩으로 로그인 기능을 만들다 보면 어느 순간 이런 문제가 생깁니다.
- 로그인은 됐는데 새로고침하면 풀립니다.
- 로컬에서는 되는데 배포하면 로그인이 안 됩니다.
- 로그아웃했는데 다시 들어가면 로그인 상태가 남아 있습니다.
- 일반 사용자가 관리자 페이지에 접근합니다.
이럴 때 AI에게 “로그인 고쳐줘”라고만 하면 코드는 바뀌는데, 왜 문제가 생겼는지는 알기 어렵습니다.
그래서 최소한 쿠키와 세션이 무엇을 하는지는 알아두는 것이 좋습니다.
핵심만 먼저 말하면
쿠키는 브라우저가 들고 다니는 작은 출입증이고, 세션은 서버가 관리하는 로그인 기록입니다.
왜 쿠키를 알아야 할까요?
로그인 기능은 한 번 성공했다고 끝나는 기능이 아닙니다.
사용자가 다른 페이지로 이동하거나 새로고침해도 서버는 계속 같은 사람인지 알아봐야 합니다.
그 역할을 도와주는 것이 쿠키입니다.
사용자가 로그인하면 서버는 브라우저에 작은 값을 하나 전달합니다.
예를 들면 이런 형태입니다.
session_token=abc123
브라우저는 이후 서버에 요청을 보낼 때 이 값을 함께 보냅니다.
그러면 서버는 이렇게 판단할 수 있습니다.
“이 출입증을 가진 사람은 조금 전에 로그인한 사용자구나.”
즉, 쿠키는 사용자가 페이지를 이동해도 로그인 상태를 이어주는 데 자주 사용됩니다.
쿠키와 세션은 어떻게 연결될까요?
쿠키와 세션은 서로 경쟁하는 방식이 아닙니다.
보통 함께 사용합니다.
| 구분 | 역할 |
|---|---|
| 쿠키 | 브라우저가 들고 다니는 출입증 |
| 세션 | 서버가 관리하는 로그인 기록 |
| 서버 | 출입증과 로그인 기록을 비교하는 곳 |
흐름은 단순합니다.
- 사용자가 로그인합니다.
- 서버가 로그인 기록을 만듭니다.
- 브라우저에는 그 기록을 찾기 위한 값을 쿠키로 줍니다.
- 브라우저는 이후 요청마다 쿠키를 보냅니다.
- 서버는 쿠키를 보고 로그인 사용자를 확인합니다.
쉽게 비유하면 이렇습니다.
- 쿠키: 출입증
- 세션: 출입 명부
- 서버: 출입을 확인하는 관리실
출입증만 있다고 끝나는 것이 아닙니다.
관리실에 해당 출입 기록이 있어야 실제로 통과할 수 있습니다.
이걸 모르면 어떤 문제가 생길까요?
로그인은 됐는데 새로고침하면 풀리는 경우를 생각해보겠습니다.
문제는 크게 두 곳 중 하나일 수 있습니다.
1. 쿠키가 제대로 저장되지 않은 경우
로그인에는 성공했지만 브라우저에 출입증이 저장되지 않은 상태입니다.
이 경우 첫 화면에서는 로그인된 것처럼 보여도, 새로고침하면 서버가 사용자를 알아보지 못합니다.
2. 세션이 제대로 저장되지 않은 경우
브라우저에는 쿠키가 있지만 서버 쪽 로그인 기록이 사라진 상태입니다.
특히 세션을 서버 메모리에만 저장하면 서버가 재시작될 때 로그인 기록이 사라질 수 있습니다.
그래서 로컬에서는 잘되는데 배포 환경에서는 자꾸 로그인이 풀리는 일이 생깁니다.
Better Auth를 쓰면 몰라도 되지 않나요?
Better Auth 같은 인증 라이브러리를 사용하면 쿠키와 세션 처리를 직접 처음부터 만들 필요는 없습니다.
그래도 완전히 몰라도 되는 것은 아닙니다.
AI가 Better Auth로 로그인 기능을 구현해도 최소한 다음은 확인할 수 있어야 합니다.
- 로그인 후 쿠키가 만들어지는가?
- 실제 세션은 어디에 저장되는가?
- 새로고침 후에도 로그인이 유지되는가?
- 로그아웃하면 쿠키와 세션이 모두 사라지는가?
- 배포 환경에서도 정상적으로 동작하는가?
AI는 코드를 만들어줄 수 있습니다.
하지만 문제가 생겼을 때 쿠키 문제인지, 세션 문제인지 구분하려면 기본 구조는 알아야 합니다.
localStorage와 sessionStorage는 무엇인가요?
이 둘도 브라우저에 정보를 저장하는 공간입니다.
하지만 쿠키와는 역할이 다릅니다.
| 구분 | 쉽게 말하면 | 서버에 자동 전송 |
|---|---|---|
| 쿠키 | 서버에 들고 가는 작은 쪽지 | 가능 |
| localStorage | 브라우저의 장기 보관함 | 불가능 |
| sessionStorage | 현재 탭의 임시 보관함 | 불가능 |
localStorage
브라우저를 닫았다가 다시 열어도 값이 남아 있습니다.
다음과 같은 정보에 잘 어울립니다.
- 다크 모드
- 마지막으로 선택한 메뉴
- 화면 정렬 방식
- 작성 중인 임시 글
다만 로그인에 필요한 중요한 값을 저장하는 용도로는 신중해야 합니다.
자바스크립트에서 직접 읽을 수 있기 때문입니다.
sessionStorage
현재 탭에서만 잠깐 사용하는 저장 공간입니다.
새로고침해도 남아 있지만, 탭을 닫으면 보통 사라집니다.
다음과 같은 곳에 잘 어울립니다.
- 여러 단계 입력 폼
- 현재 탭의 검색 조건
- 잠시 유지할 화면 상태
여기서 중요한 점이 있습니다.
sessionStorage와 로그인 세션은 전혀 다른 것입니다.
이름만 비슷합니다.
sessionStorage: 브라우저 임시 저장 공간- 로그인 세션: 서버가 관리하는 로그인 상태
일반적인 웹서비스에서는 어떻게 구성하나요?
바이브코딩으로 일반적인 웹서비스를 만든다면 다음 구조가 이해하기 쉽습니다.
| 위치 | 역할 |
|---|---|
| 브라우저 | 로그인 확인용 쿠키 보관 |
| 서버 | 쿠키를 확인하고 세션 조회 |
| 데이터베이스 | 실제 세션 정보 저장 |
즉,
브라우저에는 출입증을 두고, 서버에는 출입 기록을 둡니다.
Better Auth를 쓴다면 이런 구조를 기본으로 생각하면 됩니다.
- 브라우저: 로그인 쿠키
- Better Auth: 쿠키 확인
- 데이터베이스: 사용자와 세션 정보
처음부터 복잡한 인증 구조를 만들 필요는 없습니다.
작은 서비스라면 쿠키 + DB 세션 구조로 시작해도 충분합니다.
로그인 문제는 이렇게 구분하면 쉽습니다
로그인이 풀릴 때는 무작정 코드를 고치기보다 흐름을 따라가면 됩니다.
첫 번째: 쿠키가 만들어졌는가?
로그인 후 브라우저에 쿠키가 없다면 출입증이 발급되지 않은 것입니다.
두 번째: 다음 요청에 쿠키가 실려 가는가?
쿠키는 만들어졌지만 서버 요청에 포함되지 않을 수도 있습니다.
세 번째: 서버에 세션이 있는가?
쿠키는 있지만 서버에 로그인 기록이 없다면 사용자를 확인할 수 없습니다.
네 번째: 서버가 세션을 제대로 읽는가?
세션은 있어도 서버 설정이나 환경변수가 잘못되면 조회하지 못할 수 있습니다.
정리하면 다음 순서입니다.
쿠키 생성 → 쿠키 전송 → 세션 저장 → 세션 조회
이 네 단계 중 어디에서 끊기는지 찾으면 됩니다.
로그인이 됐다고 인증이 끝난 것은 아닙니다
로그인 화면을 통과했다고 인증 기능이 완성된 것은 아닙니다.
다음도 확인해야 합니다.
- 새로고침 후에도 로그인 유지
- 로그아웃 후 세션 제거
- 일반 사용자와 관리자 권한 분리
- 서버에서의 권한 검사
- 탈퇴한 사용자의 세션 폐기
특히 관리자 버튼을 화면에서 숨겼다고 권한 관리가 끝난 것은 아닙니다.
사용자는 주소나 API를 직접 호출할 수 있습니다.
그래서 권한 확인은 반드시 서버에서도 해야 합니다.
AI에게 처음부터 이렇게 지시해보세요
아래 프롬프트는 Better Auth로 로그인 기능을 만들 때 사용할 수 있습니다.
Better Auth를 사용해 로그인 기능을 구현해주세요.
일반적인 웹서비스 기준으로 구성하고,
브라우저에는 로그인 확인용 쿠키를 사용해주세요.
세션은 서버 메모리가 아니라 데이터베이스에 저장하고,
새로고침과 재접속 후에도 로그인 상태가 유지되게 해주세요.
로그아웃할 때 브라우저 쿠키와 서버 세션이 모두 제거되어야 합니다.
관리자 권한은 화면에서만 확인하지 말고
서버에서도 반드시 검사해주세요.
구현 전에 다음 내용을 먼저 설명해주세요.
1. 쿠키가 어디에서 생성되는지
2. 세션이 어디에 저장되는지
3. 필요한 환경변수
4. 수정할 파일
로그인이 풀리면 이렇게 확인하세요
Better Auth 로그인은 성공하지만
새로고침하거나 배포 환경에서 로그인이 풀립니다.
코드를 바로 수정하지 말고 다음 순서로 확인해주세요.
1. 로그인 후 쿠키가 생성되는지
2. 다음 요청에 쿠키가 포함되는지
3. 세션이 데이터베이스에 저장되는지
4. 서버가 해당 세션을 정상적으로 조회하는지
5. 로컬과 배포 환경의 인증 설정이 다른지
문제가 의심되는 위치와 관련 파일을 먼저 설명한 뒤
최소 수정안만 제시해주세요.
인증과 관련 없는 파일은 수정하지 마세요.
한 문장으로 정리
쿠키는 브라우저가 들고 다니는 출입증이고, 세션은 서버가 관리하는 로그인 기록입니다.
바이브코딩으로 인증을 AI에게 맡기더라도 이것만은 확인하세요.
- 쿠키는 만들어졌는가?
- 쿠키는 서버로 전달되는가?
- 세션은 저장됐는가?
- 서버는 세션을 읽을 수 있는가?
이 흐름만 이해해도 로그인 문제가 생겼을 때 훨씬 덜 막히게 됩니다.