Google 소셜 로그인 구현 중 마주친 이슈: 일반 회원가입과 소셜 로그인의 데이터 처리 차이

들어가며

React Native로 어플리케이션을 개발하던 중, Google 소셜 로그인을 구현하면서 흥미로운 상황을 마주쳤습니다.
기존의 일반 회원가입 방식과 소셜 로그인의 데이터 처리 방식이 달라야 한다는 것을 깨달았죠.

현재 상황

현재 우리 앱의 일반 회원가입 과정은 다음과 같습니다:

type TSignupForm = {
  email: string;
  password: string;
  nickname: string;
  height: number;
  weight: number;
  position: string;
  level: string;
};

사용자가 이 모든 정보를 입력하면, 서버로 전송하여 회원가입을 처리하고, 성공하면 자동으로 로그인까지 진행됩니다.

마주친 문제

Google 소셜 로그인을 구현하면서 문제가 생겼습니다. Google에서는 다음과 같은 정보만 제공합니다:

• 이메일
• 이름
• 프로필 이미지

그러나 우리 앱에서는 농구와 관련된 추가 정보들(키, 몸무게, 포지션, 레벨)이 필수입니다. 이 차이를 어떻게 해결해야 할까요?

해결 방향 고민

1. 일반적인 소셜 로그인 Flow

보통의 소셜 로그인은 간단합니다:
1. Google 로그인
2. 토큰 받기
3. 서버에 토큰 전송
4. 끝!

2. 우리 앱의 필요한 Flow

하지만 우리는 추가 정보가 필요해서 더 복잡한 Flow가 필요합니다:
1. Google 로그인
2. 토큰 받기
3. 서버에 토큰 전송
4. 신규 사용자인지 확인
5. 신규 사용자라면 추가 정보 입력 화면으로 이동
6. 추가 정보 입력 후 최종 회원가입 완료

백엔드와의 협업 필요성

이 문제를 해결하기 위해서는 백엔드와의 협업이 필요합니다. 다음과 같은 API 구조가 필요할 것 같습니다:

1. 첫 번째 API: 소셜 로그인 인증

POST /auth/google
Request: { idToken, accessToken }
Response: { 
  isNewUser: boolean,
  requiresAdditionalInfo: boolean 
}

2. 두 번째 API: 추가 정보 저장

POST /auth/google/complete
Request: {
  height: number,
  weight: number,
  position: string,
  level: string
}

배운 점

이번 경험을 통해 몇 가지 중요한 점을 깨달았습니다:

1. 소셜 로그인도 서비스의 특성에 맞게 커스터마이징이 필요하다
2. 기존 회원가입 로직과 소셜 로그인 로직은 다르게 설계해야 한다
3. 프론트엔드와 백엔드의 긴밀한 협업이 필요하다

앞으로 할 일

1. 백엔드 개발자와 API 구조 논의
2. 추가 정보 입력 화면 구현
3. 전체 Flow 테스트

이러한 고민들을 통해 더 나은 사용자 경험을 제공할 수 있는 소셜 로그인을 구현할 수 있을 것 같습니다.

마치며

처음에는 단순히 "소셜 로그인 붙이기"라고 생각했던 작업이 생각보다 복잡한 고민거리를 안겨주었네요.
하지만 이런 고민을 통해 더 탄탄한 서비스를 만들 수 있다고 생각합니다.

다음에는 이 구현의 실제 코드와 결과물을 공유해보도록 하겠습니다!