Supabase Auth를 연동하여 Google 소셜 로그인을 구현한 뒤 로그인 버튼을 눌러보면, 구글 로그인 창 상단에 익숙하지 않은 도메인이 표시되는 것을 볼 수 있습니다.
"계정을 선택하세요."
abcdefghijk.supabase.co(으)로 이동
내 서비스 이름(예: Bookmark Assistant)이나 실제 서비스 도메인이 아닌 Supabase 프로젝트 기본 도메인(*.supabase.co) 이 노출되면 사용자에게 신뢰감을 주기 어렵고 피싱 사이트처럼 느껴질 수 있습니다.
이번 글에서는 구글 로그인 창에 서비스 이름과 로고를 정상적으로 표시하는 브랜딩 설정법 과 도메인이 함께 표시되는 보안 원인 및 조치 방법 을 정리합니다.
1. Google Cloud Console에서 서비스 브랜딩 설정 (1분 소요)
로그인 창의 메인 타이틀에 내 서비스 이름과 로고가 크게 나타나도록 Google Cloud Console의 OAuth 동의 화면을 설정합니다.
- Google Cloud Console 에 접속합니다.
- 상단 프로젝트 드롭다운에서 구글 로그인 OAuth 키를 발급받았던 프로젝트를 선택합니다.
- 좌측 메뉴에서
API 및 서비스➔OAuth 동의 화면 (OAuth consent screen)➔브랜딩을 클릭합니다. - 앱 정보(App information) 항목을 서비스에 맞게 수정합니다:
- 앱 이름 (App name): 사용자가 보게 될 서비스 명칭 입력 (예:
Bookmark Assistant,북마크 어시스턴트등) - 사용자 지원 이메일: 본인의 구글 관리자 이메일 선택
- 앱 로고 (선택사항): 로고 이미지를 업로드하면 로그인 창 상단에 브랜드 아이콘이 함께 표시됩니다.
- 앱 이름 (App name): 사용자가 보게 될 서비스 명칭 입력 (예:
- 페이지 하단의
저장 후 계속 (Save and Continue)버튼을 끝까지 클릭하여 변경 사항을 적용합니다.
2. 왜 이름을 설정했는데도 *.supabase.co 도메인이 보일까요?
브랜딩에 앱 이름을 등록하더라도 계정을 선택하세요 바로 아래 보조 안내문으로 *.supabase.co(으)로 이동 문구가 함께 나타납니다.
이는 버그가 아니라 Google OAuth의 피싱 방지 보안 규칙 때문입니다.
- 인증 요청 발신처(도메인) 강제 표시:
브라우저에서 '구글 로그인'을 누르면 실제 OAuth 인증 핸드셰이크를 처리하는 Supabase 인증 서버(*.supabase.co) 를 거쳐 구글 인증 창으로 넘어갑니다. 구글은 보안상 사용자를 보호하기 위해 "이 로그인을 실제로 요청한 서버의 원본 주소" 를 투명하게 함께 명시하도록 강제하고 있습니다. - 화면 표시 위치 구분:
- 메인 타이틀: 1단계에서 등록한 앱 이름(예: Bookmark Assistant) 이 가장 크고 선명하게 표시됩니다.
- 보조 안내문: 기술적인 리다이렉트 서버인
*.supabase.co주소가 서브 텍스트로 병기됩니다.
3. 더 깔끔하고 신뢰도 높은 화면 만들기: 앱 게시 (Publish App)
프로젝트가 현재 테스트 중(Testing) 상태라면 외부 도메인 경고나 주소가 더 두드러져 보일 수 있습니다. 기본 프로필 정보만 사용하는 일반적인 앱은 별도의 복잡한 승인 절차 없이 즉시 프로덕션(정식 출시) 상태로 전환할 수 있습니다.
- Google Cloud Console ➔
API 및 서비스➔OAuth 동의 화면으로 이동합니다. - 상단
대상 (Audience)탭을 클릭합니다. - 게시 상태 (Publishing status) 항목에서
앱 게시 (PUBLISH APP)버튼을 클릭합니다. - 확인 팝업에서 게시를 승인하면 즉시 프로덕션 상태로 전환됩니다.
💡 참고:
민감한 권한(Google Drive 전체 접근, Gmail 읽기 등)을 요구하지 않고 기본profile권한만 요청하는 서비스는 별도의 구글 검수(Verification) 없이 즉시 게시되며, 로그인 창에서 도메인 강조가 완화되고 신뢰도 높은 표준 로그인 팝업으로 변경됩니다.
4. (심화) supabase.co 주소 자체를 완전히 내 도메인으로 바꾸려면?
보조 안내문에 뜨는 주소마저 auth.mydomain.com처럼 완전한 커스텀 도메인으로 변경하고 싶다면 다음 방법을 적용해야 합니다:
- Supabase Custom Domain 기능 사용:
Supabase 유료 플랜(Pro Tier 이상)에서 제공하는 Custom Domains 기능을 설정하여auth.yourdomain.com을 CNAME으로 연결하면, Google Cloud Console의 승인된 리디렉션 URI와 로그인 요청 도메인을 모두 내 도메인으로 일치시킬 수 있습니다. - 자체 인증 프록시 구축:
Next.js 서버 사이드 Route Handler를 프록시로 두어 클라이언트가 직접 Supabase 도메인을 호출하지 않도록 우회 구성합니다.
💡 요약
- 구글 로그인 창의 메인 서비스 명칭과 로고는 Google Cloud Console ➔ OAuth 동의 화면 ➔ 브랜딩 에서 수정할 수 있습니다.
- 하단의
*.supabase.co는 실제 인증 요청 서버를 나타내는 구글의 보안 정책상 표시되는 정상적인 동작입니다. - [앱 게시(Publish App)] 를 진행하면 테스트 경고 없이 깔끔하고 신뢰도 높은 구글 로그인 창을 제공할 수 있습니다.