비 개발자를 위한 구글 로그인 & 캘린더 연동 가이드

비개발자도 할 수 있다! 구글 로그인 & 캘린더 연동 완벽 가이드

안녕하세요! 나만의 웹이나 앱을 만들고 싶은데 "Google Cloud Console 설정"부터 막막하신가요?
복잡한 코드는 몰라도 괜찮습니다. 하지만 설정 화면의 메뉴 이름은 정확히 알아야 헤매지 않겠죠?
실제 화면에 보이는 메뉴 이름 그대로, 처음부터 끝까지 차근차근 알려드리겠습니다.

---

🚀 준비물

1. Google 아이디
2. 배포된 사이트 주소 (예: https://my-app.vercel.app)
   • 아직 없다면 http://localhost:3000으로 먼저 설정해도 됩니다.

---

1단계: 프로젝트 만들기 (Google Cloud Console)

모든 설정의 시작입니다.

1. Google Cloud Console에 접속해서 로그인합니다.
2. 왼쪽 상단 로고 옆의 [프로젝트 선택] (또는 현재 프로젝트 이름)을 클릭합니다.
3. 팝업창 오른쪽 위의 [새 프로젝트]를 클릭합니다.
4. 프로젝트 이름을 입력하고 [만들기]를 누릅니다.
   • 알림창에서 "프로젝트 만들기"가 완료되었다고 뜨면, 반드시 [프로젝트 선택]을 눌러 해당 프로젝트로 이동해주세요

---

2단계: Google Calendar API 활성화

앱이 캘린더를 사용할 수 있게 기능을 켜주는 단계입니다.

1. 왼쪽 메뉴(☰)에서 [API 및 서비스] > [라이브러리]를 클릭합니다.
2. 검색창에 Google Calendar API를 입력하고 검색합니다.
3. 검색 결과에서 Google Calendar API를 클릭하고, 파란색 [사용] 버튼을 클릭합니다.

3단계: OAuth 동의 화면 구성

사용자가 로그인할 때 보게 될 동의 화면을 설정합니다.

1. 왼쪽 메뉴에서 [OAuth 동의 화면]을 클릭합니다.
2. User Type은 [외부(External)]를 선택하고 [만들기]를 클릭합니다.
3. 앱 정보 입력:
   • 앱 이름: 사용자에게 보여질 이름 입력
   • 사용자 지원 이메일: 본인 이메일 선택
   • 개발자 연락처 정보: 본인 이메일 입력
   • 나머지는 비워두고 맨 아래 [저장 후 계속] 클릭.
4. 범위(Scopes) 설정:
   • [범위 추가 또는 삭제] 버튼 클릭.
   • 필터에서 calendar를 검색하거나 목록을 내려서 .../auth/calendar.events 항목을 찾아 체크(✅) 합니다.
   • [업데이트] 버튼 클릭 후, [저장 후 계속] 클릭.
5. 테스트 사용자 (Test Users) ⭐중요:
   • 앱 게시 상태가 '테스트'일 때는 여기에 등록된 사람만 로그인할 수 있습니다.
   • [+ ADD USERS]를 클릭하고 본인의 구글 이메일을 입력 후 [추가]합니다.
   • [저장 후 계속]으로 완료합니다.

---

4단계: 인증 정보(Credentials) 생성

앱과 구글 서버가 서로를 확인하기 위한 ID와 비밀번호를 만드는 과정입니다.

왼쪽 메뉴의 [사용자 인증 정보] 탭으로 이동하세요.

1. API 키 (API Key) 생성

1. 상단 [+ 사용자 인증 정보 만들기] > [API 키]를 클릭합니다.
2. 생성된 키(문자열)를 복사해둡니다. (나중에 VITE_GOOGLE_API_KEY로 사용)
   • 보안 팁: 생성된 키를 클릭해서 'API 제한'을 'Google Calendar API'로 설정하면 더 안전합니다.

2. OAuth 클라이언트 ID 생성

1. 다시 상단 [+ 사용자 인증 정보 만들기] > [OAuth 클라이언트 ID]를 클릭합니다.
2. 애플리케이션 유형은 [웹 애플리케이션]을 선택합니다.
3. 이름은 식별하기 편한 대로 입력합니다.
4. 승인된 자바스크립트 원본 (Authorized JavaScript origins):
   • [URI 추가]를 클릭하고 사이트 주소를 입력합니다.
   • 중요: 주소 끝에 슬래시(/)가 없어야 합니다.
   • 예: https://my-app.vercel.app (O), https://my-app.vercel.app/ (X)
   • 로컬 테스트용으로 http://localhost:3000도 추가해두면 좋습니다.
5. [만들기]를 클릭합니다.
6. 생성된 클라이언트 ID를 복사해둡니다. (나중에 VITE_GOOGLE_CLIENT_ID로 사용)

---

5단계: Vercel 환경 변수 (Environment Variables) 설정

이제 발급받은 키를 배포된 앱에 등록할 차례입니다.

1. Vercel 대시보드에서 해당 프로젝트의 [Settings] 탭으로 이동합니다.
2. 왼쪽 메뉴에서 [Environment Variables]를 클릭합니다.
3. 아까 복사해둔 값을 다음과 같이 입력하고 [Save] 합니다.

Key	Value
VITE_GOOGLE_API_KEY	4단계에서 만든 API 키 값
VITE_GOOGLE_CLIENT_ID	4단계에서 만든 OAuth 클라이언트 ID 값

4. 키를 저장한 후에는 반드시 Redeploy(재배포) 해야 적용됩니다. (Deployments 탭 > 점 3개 메뉴 > Redeploy)

---

✅ 체크리스트 (트러블슈팅)

혹시 로그인이 안 되나요? 다음을 확인해보세요.

• 403: access_denied: 3단계의 [테스트 사용자]에 내 이메일이 등록되어 있나요?
• 400: origin_mismatch: 4단계의 [승인된 자바스크립트 원본]에 현재 접속한 주소가 정확히 등록되어 있나요? (https:// 포함, 끝에 / 제거)
• 설정 변경 후에는 구글 서버에 반영되기까지 몇 분에서 최대 1시간 정도 걸릴 수 있습니다.

이제 여러분의 서비스에 멋진 구글 로그인 기능을 활용해보세요!