Firebase 구글 로그인 연결하는 법 — 코딩 없이 1시간 만에 완성

🔐 구글 로그인 버튼 하나가 왜 이렇게 어렵나

홈페이지에 로그인 기능을 넣고 싶다. 그냥 구글 계정으로 로그인하는 버튼 하나. 개발자한테 맡기면 며칠이 걸린다. 비용도 나온다. 혼자 구현하려면 OAuth, 토큰, 세션 관리 같은 용어들이 등장하면서 막막해진다.

그런데 AI한테 말하면 1시간이면 된다. Firebase라는 구글 서비스와 Claude Code를 조합하면 코드를 직접 이해하지 않아도 작동하는 로그인 기능을 만들 수 있다. 뚝딱닷컴 오른쪽 상단에 있는 로그인 버튼이 그 결과물이다.

💡

지금 이 페이지 오른쪽 상단의 로그인 버튼을 눌러보면 된다. 구글 계정으로 바로 로그인되고, 프로필 사진이 표시된다. 이게 Firebase 구글 로그인이 적용된 모습이다.

🔥 Firebase가 뭔가요?

구글이 만든 백엔드 서비스다. 원래 백엔드는 서버를 직접 만들고 관리해야 한다. 로그인, 데이터 저장, 사용자 관리 — 이걸 전부 개발자가 구현해야 했다. Firebase는 그 복잡한 백엔드를 이미 만들어두고 가져다 쓰게 해주는 서비스다.

로그인 기능을 예로 들면, Firebase Authentication을 쓰면 구글·카카오·이메일 로그인을 코드 몇 줄로 연결할 수 있다. 서버도, 데이터베이스도 직접 만들 필요가 없다.

📌

Firebase 무료 플랜(Spark)으로 개인 사이트 운영에 충분하다. 월 활성 사용자 50,000명까지 무료다. 개인 사이트 수준에서는 한도를 걱정할 필요가 없다.

📦 준비물

딱 두 가지다. 둘 다 이미 있을 가능성이 높다.

구글 계정 — Firebase 콘솔 로그인에 사용한다. Gmail 계정이면 된다.
운영 중인 사이트 — Netlify 등에 배포된 실제 주소가 있어야 한다. 로컬 파일로는 테스트할 수 없다.

💡

아직 사이트를 배포하지 않았다면 Netlify 무료 배포 방법 글을 먼저 보고 오면 된다.

🪜 연결 순서

단계별로 따라가면 1시간 안에 끝난다. AI가 코드를 대신 써주기 때문에 복잡한 부분은 없다.

Firebase 콘솔 접속 firebase.google.com → 구글 계정으로 로그인 → "프로젝트 만들기" 클릭. 프로젝트 이름은 아무거나 입력해도 된다.

구글 로그인 활성화 프로젝트 생성 후 Authentication → 로그인 방법 → Google → 사용 설정. 지원 이메일 입력 후 저장.

도메인 등록 Authentication → 설정 → 승인된 도메인 → 내 사이트 도메인 추가. 이 단계를 빠뜨리면 로그인 창이 열리지 않는다.

AI에게 코드 요청 Claude Code에게 "Firebase 구글 로그인 연결해줘. 프로젝트 설정 값은 이거야"라고 말하면 된다. Firebase 콘솔의 앱 설정값을 복사해서 붙여넣으면 AI가 코드를 완성해준다.

배포 후 확인 코드를 넣은 뒤 Netlify에 재배포한다. 실제 도메인에서 로그인 버튼을 눌러 구글 로그인이 되는지 확인한다.

✨ 실제로 되는 것들

Firebase 구글 로그인을 연결하면 기본으로 다음 기능들이 작동한다. 뚝딱닷컴에 실제 적용돼 있는 것들이다.

🔑

구글 계정 로그인 버튼 하나로 구글 계정을 선택해서 로그인한다. 비밀번호 없이 된다.

🖼️

프로필 사진 표시 로그인하면 구글 프로필 사진이 네비게이션에 자동으로 표시된다.

🔄

로그인 상태 유지 새로고침하거나 탭을 닫았다가 다시 열어도 로그인이 유지된다.

🚪

로그아웃 프로필 클릭 → 로그아웃. 간단하게 세션을 종료할 수 있다.

⚠️ 주의할 점

로컬에서 테스트하면 오류가 나요

Firebase 구글 로그인은 승인된 도메인에서만 작동한다. 내 컴퓨터에서 index.html 파일을 직접 열면 도메인이 없기 때문에 로그인 창이 뜨지 않거나 오류가 난다. 반드시 Netlify 등에 배포한 뒤 실제 주소에서 확인해야 한다.

승인된 도메인을 추가하지 않으면?

로그인 버튼을 눌렀을 때 구글 로그인 창이 열리지 않거나 "이 앱은 승인되지 않았습니다" 오류가 뜬다. Firebase 콘솔 → Authentication → 설정 → 승인된 도메인에서 내 사이트 도메인을 반드시 추가해야 한다. 커스텀 도메인을 연결했다면 두 주소 모두 추가하는 게 좋다.

Firebase 설정값이 코드에 노출돼도 괜찮나요?

Firebase 웹 앱의 설정값(apiKey 등)은 클라이언트에 노출되는 값이다. 이 값 자체는 공개돼도 괜찮다. 보안은 Firebase 보안 규칙(Security Rules)으로 관리한다. 어떤 사용자가 어떤 데이터에 접근할 수 있는지는 규칙으로 제어한다. AI에게 "Firebase 보안 규칙도 같이 설정해줘"라고 말하면 된다.

✅ 마무리 — 로그인이 생기면 서비스가 된다

로그인 기능이 붙으면 단순한 홈페이지가 서비스로 바뀐다. 회원 전용 콘텐츠, 개인화된 화면, 사용자 데이터 저장 — 이런 기능들이 가능해진다. 뚝딱닷컴 커뮤니티 게시판도 로그인 기반으로 작동한다.

로그인 하나를 연결했을 뿐인데 만들 수 있는 것의 폭이 완전히 달라진다. 그 다음은 데이터베이스 연결이다. Firebase Firestore를 쓰면 게시판, 댓글, 좋아요 같은 기능도 코딩 없이 만들 수 있다.

이 글이 도움이 됐나요?

Firebase 로그인 연결 전 과정을 7장 교재에 단계별로 담아뒀어요.

📖 7장 교재 — Firebase 로그인 보기