카카오·네이버 로그인이 로컬에선 되는데 배포 후 안 될 때
AI로 붙인 카카오·네이버 소셜 로그인이 로컬에서는 잘 돌아가다가 배포한 운영 도메인에서만 실패할 때, Redirect URI, 환경 변수, 동의 항목, 쿠키까지 점검할 순서를 정리했습니다.
AI로 카카오 로그인이나 네이버 로그인을 붙이고 로컬에서 테스트하면 보통 잘 됩니다. 인가 코드도 받아오고, 사용자 정보도 가져오고, 로그인 후 화면 이동까지 매끄럽게 흘러가죠.
그런데 배포한 운영 도메인에서 같은 동작을 하면 어디로도 못 갑니다. "카카오에서 보낸 페이지로 돌아오지 못했습니다" 라는 메시지가 뜨거나, 흰 화면이 나오거나, localhost:3000으로 엉뚱한 리다이렉트가 일어납니다.
이건 코드 문제가 아니라 거의 100% 설정 문제입니다. 그것도 카카오·네이버 개발자 콘솔과 우리 서비스 양쪽을 같이 봐야 풀리는 문제입니다.
Redirect URI는 한 글자도 어긋나면 안 된다
OAuth 로그인이 동작하는 핵심은 Redirect URI입니다. 카카오나 네이버에 등록된 주소와, 우리 코드가 보내는 주소가 글자 단위로 일치해야 합니다.
자주 보이는 미스매치:
- 등록은 https://lastfix.kr/auth/callback / 코드는 https://www.lastfix.kr/auth/callback (www 차이)
- 등록은 http://localhost:3000/auth/callback / 코드는 https://lastfix.kr/auth/callback (프로토콜과 도메인 둘 다 다름)
- 등록 주소 끝에는 슬래시가 있는데 코드에서 보내는 주소에는 슬래시가 없음
이 중 하나만 어긋나도 카카오는 인가 코드를 돌려주지 않습니다. AI는 코드 안의 redirect URI까지는 잘 만들지만, 카카오 개발자 콘솔에 직접 접속해 등록하는 일은 사람이 해야 합니다.
배포 도메인에서만 안 된다면 가장 먼저 의심할 곳입니다.
운영 도메인이 콘솔에 등록되어 있는지
개발 초기에는 보통 localhost:3000을 Redirect URI로 등록해두고 시작합니다. 그 상태로 배포하면 운영 도메인은 카카오·네이버 입장에서 처음 보는 주소입니다.
해야 할 일:
- 카카오 개발자 콘솔에서 Redirect URI에 운영 도메인을 추가합니다 (localhost는 빼지 말고 함께 둬도 됩니다)
- 네이버 개발자센터에서는 API 설정의 Callback URL에 운영 도메인을 추가합니다
- 카카오의 경우 "플랫폼 → Web"의 사이트 도메인 항목에도 운영 도메인을 별도로 등록해야 합니다
특히 카카오는 "플랫폼"과 "Redirect URI" 두 군데에 모두 운영 도메인이 들어가 있어야 합니다. 한쪽만 있고 다른 쪽이 비어 있으면 응답을 받지 못합니다. 이게 가장 자주 빠지는 부분입니다.
환경 변수의 도메인이 운영 기준인지
두 번째로 많이 보이는 원인입니다. 환경 변수에 적힌 도메인이 아직 localhost거나, 옛날 미리보기 주소로 남아 있는 경우입니다.
코드에서는 보통 NEXT_PUBLIC_BASE_URL 같은 환경 변수에 도메인을 담고, 그 값에 /auth/callback 을 붙여서 redirect URI를 만듭니다. 이 환경 변수가 http://localhost:3000으로 남아 있으면, 운영 사이트는 카카오에 "localhost로 돌려보내달라" 고 요청하는 셈입니다. 카카오는 그 주소를 등록된 운영 주소로 인식하지 못해 거부합니다.
확인할 곳:
- Vercel 환경 변수의 NEXT_PUBLIC_BASE_URL 또는 비슷한 이름의 변수
- 코드 안에 'localhost' 라는 문자열이 남아 있지 않은지 (Cmd+F로 검색)
- AI가 임시로 박아둔 redirect_uri 값이 다른 도메인으로 하드코딩되어 있지 않은지
Vercel 환경 변수를 고쳤다면 재배포까지 해야 적용됩니다.
동의 항목과 검수 단계
카카오 로그인은 다른 OAuth보다 한 단계가 더 있습니다. 동의 항목 설정입니다.
이메일이나 프로필 정보 같은 항목 중 일부는 비즈니스 앱으로 전환해야만 받을 수 있습니다. AI가 만든 코드에서 user.email을 가져다 쓰는데 카카오에서 이메일 동의가 막혀 있으면, 사용자 정보는 받아오지만 이메일이 빈 값으로 돌아옵니다.
증상:
- 로그인은 되는데 user.email이 undefined
- 회원가입에서 이메일을 못 읽어 다음 단계로 넘어가지 못함
- 카카오 동의 화면에 이메일 항목이 아예 표시되지 않음
해결은 카카오 개발자 콘솔의 "내 애플리케이션 → 카카오 로그인 → 동의 항목" 에서 필요한 항목을 활성화하는 것입니다. 일부 항목은 비즈 앱 전환 후 검수가 필요합니다.
네이버는 검수 요청이라는 단계가 별도로 있습니다. 검수 전에는 등록된 테스트 계정만 로그인할 수 있고, 일반 사용자는 막힙니다. 운영을 시작했는데 본인 계정만 되고 다른 사람은 안 된다면 이걸 의심하세요.
쿠키와 세션 도메인
여기까지 다 맞췄는데도 운영에서만 로그인이 풀리거나 세션이 잡히지 않는 경우가 있습니다.
이때는 쿠키 설정을 봐야 합니다.
- 쿠키의 domain이 localhost 기준으로 되어 있다
- secure 옵션이 false라 https에서 쿠키가 잡히지 않는다
- SameSite 옵션이 잘못 설정되어 OAuth 리다이렉트 후 쿠키가 사라진다
증상은 보통 "로그인이 됐다고 화면은 뜨는데, 새로고침하면 다시 로그아웃 상태" 입니다. 카카오 동의까지 정상적으로 끝났는데도 이런 증상이 나오면 쿠키 흐름을 의심해야 합니다.
이 영역은 비개발자가 직접 만지기에는 까다로운 편입니다. AI에게 "운영 도메인 기준으로 세션 쿠키 옵션을 점검해줘" 라고 요청하면서, 실제로 쿠키가 어떤 옵션으로 발급되는지 확인해 달라고 하는 게 안전합니다.
정리하면
카카오·네이버 로그인이 배포 후에만 안 되는 문제는 코드를 의심하면 답이 잘 안 나옵니다. 거의 항상 다음 네 가지 중 하나입니다.
- 카카오·네이버 콘솔 Redirect URI에 운영 도메인이 없다
- 환경 변수에 운영 도메인이 들어가 있지 않다
- 동의 항목이나 검수 단계가 빠져 있다
- 쿠키 설정이 운영 환경에 맞지 않다
이 흐름을 먼저 확인하고, 코드는 그 다음입니다. AI에게 "코드부터 고쳐달라" 고 하면 멀쩡한 OAuth 코드를 새로 짜기 시작해서 더 꼬이는 경우가 많습니다.
관련 글: Vercel 환경변수가 적용 안 될 때, 비개발자가 점검할 5가지, Cursor가 같은 에러를 반복할 때: AI 코딩 버그 수정 기준