카카오톡 로그인과 LINE 앱 로그인의 동작 방식 차이

카카오와 LINE 두 가지 소셜 로그인을 함께 개발하다가, 인앱브라우저 환경에서만 동작이 갈리는 현상을 마주했다. 같은 OAuth 흐름처럼 보이는데 한쪽은 잘 되고 다른 한쪽은 안 되는 이유가 궁금해 직접 네트워크 요청을 뜯어보았다.

카카오와 LINE에서는 두 가지 방식을 함께 제공한다.

• 이메일 로그인: 브라우저에서 아이디/비밀번호로 인증
• 앱 로그인: 설치된 카카오톡, LINE 앱을 통해 인증

이메일 로그인은 카카오와 LINE 모두 인앱브라우저에서 정상 동작한다. 일반적인 OAuth 웹 흐름이라 외부 앱을 거치지 않기 때문이다. 문제는 앱을 통한 로그인에서 발생했다.

• 카카오톡으로 로그인: 인앱브라우저에서 정상 동작 🙆🏻‍♂️
• LINE으로 로그인: 인증 후 원래 화면으로 돌아오지 못함 🙅🏻‍♂️

앱 로그인은 다음과 같은 흐름으로 진행된다.

1. 사용자가 로그인 버튼을 누른다
2. 카카오톡/LINE 앱이 실행되어 사용자가 인증한다
3. 인증 결과(redirect URL)를 받아 원래 서비스로 돌아온다

핵심은 3번에서 원래 떠 있던 인앱브라우저로 결과가 돌아와야 한다는 점이다. 그런데 LINE은 이 과정에서 인증 결과를 사용자 기기의 기본 브라우저로 넘겨버린다. 결과적으로 인앱브라우저에 떠 있던 원래 화면은 인증이 끝난 사실조차 알 수 없게 되버린다.

이슈가 모바일 환경에서 앱을 통해 로그인할 경우에만 재현되기 때문에, 데스크톱 브라우저의 개발자 도구로는 확인할 수 없었다. 그래서 Proxyman을 사용해 모바일 기기의 네트워크 요청을 가로채서 분석했다.

카카오톡으로 로그인 버튼을 누르면, 아래와 같은 동작이 순서대로 일어난다.

1. /web_talk/create_token.json 요청 (토큰 생성)
2. /web_talk/poll.json 반복 요청 (polling)
3. 카카오톡 앱에서 사용자 인증 완료
4. /web_talk/poll.json 응답에 redirect_url 포함되어 도착
5. account.kakao.com이 redirect_url로 이동

여기서 핵심은 2번의 polling이다. 인앱브라우저는 카카오톡 앱과 직접 통신할 수 없다. 그래서 카카오는 중간에 서버를 두고, 인앱브라우저는 서버에 계속 "인증 끝났어?"라고 물어보는 방식으로 우회한것으로 보인다. 카카오톡 앱은 인증이 끝나면 그 결과를 서버에 전달하고, 다음 polling 응답에 redirect URL이 실려 돌아오게 된다.

이 구조 덕분에 인증의 주도권은 카카오톡 앱이 가져가지만, redirect는 처음부터 끝까지 인앱브라우저 안에서 일어나게 된다.

LINE 앱 로그인의 흐름은 훨씬 단순하지만, 인앱브라우저 환경에서는 그게 오히려 발목을 잡았다.

1. 인앱브라우저가 access.line.me로 이동
2. LINE 앱이 실행되어 사용자 인증
3. LINE 앱이 redirect URL을 새 창으로 연다

문제는 3번이다. LINE 앱은 redirect URL을 사용자 기기의 기본 브라우저로 넘긴다. 원래 인앱브라우저에 있던 사용자는 갑자기 Chrome이나 Safari로 튕겨 나가게 되고, 인앱브라우저 안의 원래 서비스는 인증 결과를 받지 못하게 되는 것이다.

같은 "앱으로 인증한 뒤 웹으로 돌아온다"는 목적이지만, 카카오는 polling으로 인앱브라우저의 컨텍스트를 끝까지 유지하는 반면, LINE은 redirect를 직접 수행하기 때문에 컨텍스트가 끊기게 된다.

카카오의 polling 방식은 네트워크 요청이 더 많고 구조도 복잡하다. 그럼에도 이 방식을 택한 이유는, 인앱브라우저처럼 세션이 격리된 환경에서도 일관된 사용자 경험을 제공하기 위해서라고 추정해 본다.