안녕하세요! 오늘은 카카오 로그인 문서를 읽다가 알게된 카카오 SDK와 Rest API 방식의 차이점에 대해서 글을 작성해봅니다. 😀

1. 알아보게된 계기 🔍

오늘 오후에 친구랑 같이하는 프로젝트에 관해서 카카오 로그인 설정 관련 이야기가 톡방에서 나왔었다. 그리고 어쩌다가 나는 카카오 로그인 공식 개발문서를 보게 되었는데, 공식 개발문서를 보는건 되게 오랜만이었다.

그러다가 JavaScript를 사용한 구현 방법 문서를 보게되었는데, 평소에 회사에서도 그렇고 REST API 방식만을 사용한 나는 거의 처음보는 문서였다. 왜냐하면 REST API 방식으로 사용하면서 단 한번도 문제가 없었기 때문이었다.

1-1. REST API 방식이란? 📌

카카오 로그인의 REST API 방식은 카카오 인가 코드를 받기위해서 쿼리 파라미터에 필수값들을 넣어서 만들어진 URL에 직접 접속후, 리다이렉트 된 페이지에서 인가 코드를 얻는 방식이다. 여기서의 핵심은 URL에 직접 접속한다는점이다.

예시 코드는 아래와 같다.

const KakaoLoginButton = (): JSX.Element => {
  const BASE_URL = 'https://kauth.kakao.com/oauth/authorize';

  const CLIENT_ID = 'My Kakao Client ID';
  const REDIRECT_URI = 'http://localhost:3000/kakao-login';

  return (
    <button
      onClick={() =>
        window.open(
          `${BASE_URL}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`,
        )
      }
    >
      카카오 로그인하기
    </button>
  );
};

export default KakaoLoginButton;

아래는 요청 주소의 형식이다.

https://kauth.kakao.com/oauth/authorize?client_id=(클라이언트 ID)&redirect_uri=(리다이렉트 URI)&response_type=code

1-2. 카카오 SDK 방식이란? 📌

코드상에서 불러온 자바스크립트 SDK의 전역 카카오 객체를 사용하여 로그인을 진행하는 방식이다. 이렇게만 보면 어떤뜻인지 잘 감이 안오니 코드를 통해서 봐보자.

import { useEffect } from 'react';

const KakaoLoginButton = (): JSX.Element => {
  const KAKAO_JS_KEY = 'My Kakao JavaScript Key';

  const kakaoSDKLogin = () => {
    const kakao = (window as any)?.Kakao;
    const redirectUri = 'http://localhost:3000/kakao-login';

    kakao?.Auth?.authorize({
      redirectUri, // 리다이렉트 URI만 넘겨주고, 해당 주소에서 인가 코드를 받아서 처리
    });
  };

  useEffect(() => {
    const kakao = (window as any)?.Kakao;

    // 카카오 객체를 초기화 (필수)
    if (!kakao?.isInitialized()) {
      kakao?.init(KAKAO_JS_KEY);
    }
  }, []);

  return <button onClick={kakaoSDKLogin}>카카오 로그인하기</button>;
};

export default KakaoLoginButton;

SDK를 활용한 로그인 방식도, REST API와 똑같이 리다이렉트된 페이지에서 인가 코드를 받아서 처리하는 방식으로 동일하다.

2. 그래서 차이점이 뭘까? 🤔

참고로 PC에서 각 방법들을 실행할때는 아무런 차이가 없이 동일하게 동작한다. 하지만 모바일에서 실행해보면 어떨까?

먼저, Rest API 방식의 로그인 실행 화면이다.

그 다음은 Kakao SDK 방식의 로그인 실행화면이다.

사진으로 눈치를 챘을수도 있지만, 정리하면 아래와 같다.

Rest API: 카카오 로그인 페이지를 먼저 접속한 후, 카카오톡으로 로그인 버튼을 통해서 카카오톡 앱에서 로그인을 할 수 있도록 제공한다.

Kakao SDK: 휴대폰에 카카오톡 앱이 설치되어있다면 바로 카카오톡 앱을 실행하여 로그인을 할 수 있도록 제공한다. 만약 카카오톡 앱이 설치가 안되어있다면, Rest API 방식에서 본 로그인 페이지가 나타난다.

곧바로 카카오톡 앱을 실행하여 로그인을 진행한다는 점이 사용자의 전환율을 이끌어내는데 더 도움이 될 수 있는 장점이 있다.

그러나 카카오 쿠키가 존재하면 빠르게 로그인 페이지를 넘어가는 Rest API 방식에 비해, Kakao SDK 방식은 쿠키가 존재하더라도 무조건 카카오톡 앱을 실행하여 로그인하므로 약~간의 단점이 될 수도 있다. (카카오톡 잠금화면 사용자의 경우에만 해당, 잠금화면을 설정하지 않은 사용자는 그냥 물흐르듯이 넘어간다.)

3. 마치며 ⏰

현재 회사 프로젝트의 카카오 로그인 코드는 Rest API 방식으로 구현이 되어있는데, 이를 Kakao SDK를 사용하는 방식으로 교체할지 고민해봐야겠다.

타입스크립트를 사용하는 나에게는 Kakao SDK 방식이 조금 불편하긴 하다만, 모듈화를 잘해놓으면 큰 문제는 없다고 본다.

혹시나 글에서 잘못된 부분이 있다면, 피드백 주시면 감사드리겠습니다! 😀 이상으로 글을 마치도록 하겠습니다. 감사합니다.