구글 로그인 : 기기 간 동기화를 위한 소셜 로그인

FocusTogether를 사용하면서 개인적으로 가장 불편했던 점은 오직 하나의 기기에서만 기록을 수집할 수 있다는 점이었다. 

 

지금까지의 FocusTogether는 회원가입/로그인 기능이 없었다. 집중하는 시간을 기록하고 관리하는데 개인 정보가 필요 없었기 때문이다. 대부분의 데이터는 브라우저 안에서 기록을 하고 있었고, 현재 몇 명이 이용하는지만 따로 서버에 보내어 수집하고 있었다. 

 

하지만 문제가 있었다. 만약, 내가 데스크탑으로 FocusTogether를 이용하다가 종료하지 않은 채 외출을 한다면? 혹은 외부 활동이나 이동 중에 시간을 기록하고 싶다면? 이런 경우에 데스크탑과 모바일에서 각각 기록을 할 수밖에 없었고 이는 별도의 사용자로 인식되었다.

 

내 기록을 한 곳에서 모아볼 수 없는 것은 치명적이었고 서비스 이탈의 요인 중 하나라고 판단했다.

 

 

구글 로그인 구현

기존에는 사용자가 접속하면 임의의 user key(id)를 생성해 브라우저 단위로 사용자를 관리했다. 하지만 위와 같은 문제 상황을 해결하기 위해, 즉 어디서든 한 곳에서 내 집중 시간을 관리하기 위해서는 개인 계정 로그인이 필요했다.

 

때문에 가장 대중적인 플랫폼이자 소셜 로그인 기능을 제공하는 구글 로그인을 FocusTogether에 적용하기로 했다.

 

다행히도 요즘은 GPT에 물어보면 구현 방법을 잘 설명해 주더라. 단계별로 차근차근 알려달라고 하니 아래처럼 답변을 주었다.

 

위의 이미지는 답변의 일부이다. 물론 틀린 내용도 중간중간 나오지만 그런 부분을 눈치껏 다시 묻거나 구글링 하며 해결했다. 

 

나의 경우 Supabase 를 사용하기 때문에 더 수월했던 것도 있다. Supabase에서 몇 가지 설정하는 것만으로 소셜 로그인의 복잡한 구현 절차가 쉽게 해결되었다.

 

그렇게 적용한 로그인 기능은 다음과 같다.

 

기존의 햄버거 버튼을 빈 프로필 형태로 바꾸었다. 이제 사용자는 빈 프로필을 누르면 로그인 메뉴를 포함한 메뉴들을 볼 수 있다. 

 

 

로그인 메뉴를 눌러 구글 로그인을 하면 아래처럼 자신의 구글 계정으로 로그인할 수 있다. 이때 기존 로그인 메뉴는 로그아웃 메뉴로 전환된다.

 

로그인 구현까지는 정말 쉬웠다. 한 30분 걸렸나???

 

하지만 문제는 그 다음이었다. 

 

 

계정 데이터 연동

기존 브라우저에 기록하던 데이터들과 소셜 로그인 계정을 서로 연결시켜주어야 했다. 

 

기존에는 익명(비로그인) 사용자의 임의의 프로필을 서버로 보내고 있었고, 익명 사용자의 user key(id)와 소셜 로그인 계정의 uid(소셜 계정 식별자)를 서로 연결시켜 주었다. 그리고 계정 사용자는 하나의 익명 사용자와만 연동되도록 제약을 걸어주었다. 

 

사용자 입장에서는 기존 브라우저에서 비로그인으로 기록하던 데이터를 로그인을 통해 자동으로 연동하는 구조였다. 단, 첫 번째 로그인 시 1회에 한해 연동이 되고, 이후 다른 브라우저에서 로그인을 할 경우에는 이전에 연동한 데이터를 가져와서 보여주었다.

 

사실 이를 구현할 때, 사용자에게 데이터를 연동할 것인지 안내하는 모달을 구현했었다. 또한 다른 브라우저에서 로그인할 때 기존 익명(비로그인) 데이터가 있다면 계정 데이터로 덮어쓸 것인지 안내하는 모달도 구현했었다. 참 친절하지 않은가!?

 

하지만 지금에 와서는 모두 제거했다. 사용자가 현재 상황을 이해하기 쉽게 안내하는 것은 중요하다고 생각한다. 하지만 이를 구현하기 위해 모든 경우의 수를 생각하고, 계정 전환에 대한 이벤트를 모두 핸들링하기는 쉽지 않았다. 설령 구현하더라도 다른 이벤트가 추가되거나 수정을 하다 보면 *사이드 이펙트가 발생하곤 했다. 

 

*사이드 이펙트란? 

어떤 함수나 연산의 수행 결과로 시스템의 상태가 예상치 못하게 변경되는 현상. 주로 예측하기 어려운 부작용을 의미한다.

 

결국 선택과 집중.. 안내 메시지는 제거하고 앞서 말한 대로 첫 로그인 시 연동, 이후 덮어쓰기 형태로 구현하였다. 대다수 사용자는 자신이 주로 사용하던 기기에서 로그인을 할 테니 큰 문제가 없을 거란 생각도 있었다. 

 

이렇게 계정 데이터 연동까지 구현을 완료했다. 이제는 사용자가 어떤 기기에서도 자신의 집중과 시간을 관리할 수 있도록 '기기 간 동기화'를 구현할 차례였다. (다음 글에 계속)

 

 

작업 후기

이번 작업에서는 바이브 코딩이 쉽지 않았다. 서비스를 고도화할수록 MVP 개발 단계에서는 느껴보지 못한 어려움이 생겼다. AI는 구현 자체는 빠르지만 프로젝트의 복잡도가 올라갈수록 코드의 오류가 많아졌다. 이에 따라 내 작업 시간도 늘어났다.

 

나는 원래 프론트 개발자가 아니었기 때문에 AI가 짜준 코드를 이해하기가 쉽지 않았고, 결국 내가 코드를 이해하고 다룰 수 있어야 한다는 걸 절실히 느꼈다. 한 줄 한 줄 기술적으로 깊이 있게 이해할 필요는 없지만 적어도 내가 코드의 흐름을 알고 어디가 문제가 될 것 같은지 정도는 추측할 수 있어야 했다.

 

이를 위해, 이번 작업에서 몇 가지 개발 팁을 적용했는데 요약해 보자면 다음과 같다.

 

1. 주기적으로 내가 이해하기 쉬운 형태로 코드 구조를 리팩터링 하자.

2. 문제가 될 법한 지점에 디버깅용 로그를 추가하여 원인을 정확히 파악하자.

3. 문제를 해결했다면 테스트 코드를 추가하여 같은 문제가 발생하지 않도록 하자.

 

 

 

당신도 함께 집중하고 싶다면?👇

https://www.focustogether.live/