brunch

You can make anything
by writing

C.S.Lewis

by Carol Mar 10. 2022

카카오톡 간편로그인의 시대는
오픈API가 만들었다

카카오가 제공하는 오픈API _코드스테이츠 PMB 10기


요즘 어떤 웹사이트를 이용하든 소셜 계정을 이용하여 3초만에 간편하게 로그인을 할 수 있다. 와디즈, 무신사, 왓챠 등 접속하는 페이지는 달라도 "카카오"가 들어간 로그인 버튼을 눌러서 간편하게 로그인이 되는 과정은 동일하다. 그 이유는 모든 플랫폼의 개발자가 "카카오 로그인" 기능을 넣을 때 카카오에서 무료로 제공한 오픈API를 사용하여 개발했기 때문이다.


오픈? API?? 오늘 글에서는 API의 개념과 카카오의 오픈API를 다뤄보고자 한다.  





API는 무엇인가?


Application Programming Interface의 줄임말로

어플리케이션을 프로그래밍 하는데 필요한 인터페이스(상호 정보 소통을 위한 시스템)를 의미한다. 글자만으로 이해하기 어려운 이 개념은 IT아웃소싱 플랫폼 위시켓의 블로그에서 그림 예시로 설명하고 있다.


출처 = 위시켓 블로그 (https://blog.wishket.com/)


점원이 가져다준 메뉴판에서 손님이 스테이크를 고르면, 점원이 주문을 받아 요리사에게 요리를 요청을 한다. 요리사는 주문대로 스테이크를 만들어 점원에게 주고, 손님은 점원이 서빙한 스테이크를 먹을 수 있게 된다. 여기서 점원의 역할이 바로 API이다. 그 역할을 간결하게 정리 해 보자.


점원 =  API  = 손님과 요리사 사이의 상호작용을 도움

1. 손님에게 메뉴를 알려줌 = 클라이언트에게 명령할 목록을 정리하여 전달

2. 손님이 메뉴를 고르고 주문함 = 클라이언트가 목록을 보고 명령을 함

3. 요리사에게 주문받은 요리를 요청함  = 서버에게 명령의 값을 요청함

4. 주방에서 완성된 요리를 손님에게 전달함 = 서버에게 받은 명령의 값을 클라이언트에게 전달함


즉 서버와 클라이언트가 서로 정보를 어떻게 주고받을지 상호작용하는 것을 돕는 매개체인 API로 정의하고 프론트엔드와 백엔드 개발을 진행하는 것이다. 보통 웹서비스는 웹 주소형식(url)을 통해 정보를 요청하고 전달 받는 방식을 사용한다. 여기서 API는 3가지의 역할을 한다.


1. 서버와 데이터베이스의 출입구

2. 기기와 어플리케이션 프로그램의 원활한 통신

3. 모든 접속의 표준화 = 범용 플러그


그런데 API를 아무리 잘 설계해도 개개인이 필요한 방식에 맞게 다양하게 설계하면 유지보수 하는데 어려움이 있을 수 있다. 이런 문제를 해결하기 위해 일정한 아키텍처(*)의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 만들어 사용하기로 했다. 그 중 대표적인 방식이 RESTful API이다.

(*)정해진 목표를 달성하기 위한 전체적인 청사진으로 시스템 구성과 구성환경, 그리고 시나리오 등을 고려하여 시스템 최적화를 목표로함





RESTful ApI는 또 무엇인가?


REST는 REpresentational State Transfer의 약자로,

자원을 표시(representation)하여 해당 자원의 상태를 주고 받는(State Transfer) 것이다. 즉, 자원을 정의하고 자원에 대한 주소를 지정하는 방법이다. REST의 구성요소는 3가지가 있다.


1. 자원(Resource): URI

모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다.

자원을 구별하는 ID는 ‘/groups/:group_id’와 같은 HTTP URI 다.

Client는 URI를 이용해서 자원을 지정하고 해당 자원의 상태(정보)에 대한 조작을 Server에 요청한다.


2. 행위(Verb): HTTP Method

HTTP 프로토콜의 Method를 사용한다.

HTTP 프로토콜은 GET, POST, PUT, DELETE 와 같은 Method를 제공한다.


3. 표현(Representation of Resource)

Client가 자원의 정보에 대한 조작을 요청하면 Server는 이에 적절한 응답(Representation)을 보낸다.

REST에서 하나의 자원은 JSON, XML, TEXT, RSS 등 여러 형태의 Representation으로 나타낸다.

JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다.


유튜브에서 이 개념을 쉽게 설명한 영상이 있어서 첨부해보았다.


REST API를 너무도 잘 설명해주신 유튜버를 소개합니다!



RESTful API는 이러한 REST 특징을 지키면서 API를 제공하는 것이다. 쉽게 말해 다수의 편의성을 위해서 사전에 합의된 규칙으로 쓰여진 API이다. RESTful API의 작동 원리를 그림을 보며 정리해보자.  


① 어떤 자원에 대해 [CRUD:Create, Read, Update, Delete] 연산을 수행하기 위해

② GET/POST/PUT/DELETE 방식(HTTP Method)를 사용하여 URI(Resourse)로 요청을 보내고

③ JASON/XML/HTML 등을 통해 특정한 형태(Representation of Resourse)로 표현하여 응답받는다.





오픈API 도 알아야 하는가?


이렇게 잘 설계한 API를 누구나 쓸 수 있게 오픈하여 제공하는 것을 오픈API라고 한다. 오픈API의 사전적 의미는 플랫폼 기능 또는 콘텐츠를 외부에서 웹 프로토콜(HTTP)로 호출하여 사용할 수 있게 개방한 API이다. 즉 누구나 이용할 수 있도록 공개되어 있는 프로그래밍 인터페이스인 것이다.

카카오의 오픈API 제공 사이트


카카오는 로그인, 메세지, 지도, 채널 등 자사에서 개발한 서비스의 오픈API를 개발자들이 자유롭게 활용할 수 있도록 Kakao Developers 에서 제공하고 있다. 이렇게 기업은 자사가 공개한 API가 다양한 서비스에서 활용되어서 시장을 확대하는 것을 목적으로 운영하고 기상청과 같은 비영리기관은 공공의 목적으로 날씨 정보와 같은 오픈API를 제공하는 경우도 있다. 오늘의 주제인 카카오 로그인 오픈API를 자세히 살펴보자.





카카오 로그인 API의 기능과 구조


디벨롭퍼 페이지에서 카카오 로그인은 Kakao SDK for Android, iOS, JavaScript와 REST API로 제공되며 OAuth 2.0 기반이다. 이 중 REST API 부분을 분석해보고자한다.



카카오 로그인은 카카오 플랫폼에서 제공하는 핵심 기능 중 하나이다. 카카오톡 사용자는 카카오 로그인을 통해 서비스에 쉽고 빠르게 로그인할 수 있고, 이를 통해 기업은 더 많은 고객을 확보할 수 있다. 카카오 로그인기능으로 카카오톡의 닉네임과 프로필 사진, 이메일, 성별, 연령대 등 사용자의 동의 하에 얻는 사용자 정보를 활용하여 개인화된 서비스를 제공할 수 있다.



제공하는 기능

카카오 로그인은 카카오계정과 애플리케이션(이하 앱)을 연결하고 토큰을 발급받아 카카오 API를 사용할 수 있도록 하는 기능이다. 위 표에서 카카오 API가 제공되는 것으로 O표기된 기능은 서비스에서 카카오 API를 사용하여 편리하게 구현할 수 있고, X표기된 기능은 제공하지 않으므로 자체 구현해야한다.

예를 들어 로그인에서 직접 서비스 ID 및 비밀번호를 입력받고 검증하는 과정을 구현하는 대신, 카카오 로그인API로 간편하게 사용자를 인증하고 회원 정보를 수집할 수 있지만 가입 절차에서 사용자를 DB에 등록하는 기능은 자체적으로 개발해야하는 것이다.



카카오 로그인이 진행되는 과정 


위의 로그인 진행 순서를 표현한 이미지에는 카카오 서버가 하나로 표현되어 있지만, 카카오 서버의 호스트는 인증 서버와 API 서버들로 나뉜다. 카카오 로그인은 인증 서버가, 사용자 정보 가져오기 등 다른 기능은 API 서버들이 각각 요청을 받고 작업을 수행한다. 조금 더 풀어서 정리하면 이런 순서이다.


1) 유저의 사전 회원가입 후 로그인 시도

2) 소셜 로그인 인증 API 호출 -> 인증코드 받음
3) 접근 토큰 Access_token 요청 with 인증 코드 -> 접근 토큰 받음
4) 회원정보 API 호출 with Access token -> 회원 정보 받음

5) 로그인 with 회원 정보


여기서 등장한 token이라는 새로운 개념이 있다. 서버에서는 권한이 중요하기 때문에 토큰은 본인 확인 수단이라고 볼 수 있다. 예를 들어 로그인 할 때 ID와 PW를 넣고 로그인하면 서버가 그것을 확인한 뒤 ID와 PW가 맞으면 이 사용자가 유효한 사용자라는 토큰을 발행해준다. 사용자는 이 토큰으로 해당사이트의 여러 서비스를 이용할 수 있는 것이다.




카카오 로그인 API의 구조 



카카오 로그인 API기능은 인가코드받기 부터 동의철회하기로 구성 되어 있다. 이 중 REST API 카카오 로그인은 인가코드받기토큰받기 두 단계를 거치는데 먼저 인가코드를 받고, 그 인가코드로 토큰을 요청한다. 인가코드 요청 단계에서 클라이언트에 카카오계정 정보 또는 카카오톡을 통해 사용자를 인증하는 과정을 거친다. 이후 동의 화면을 출력하고 사용자로부터 제3자 정보제공 등의 동의를 받아 인가 코드를 발급하는 구조이다. 이렇게 일부 과정에서만 REST API를 활용하므로 카카오 로그인 기능은 RESTful API는 아니다.


그럼 REST API인 '인가코드받기' 기능의 상세 코드를 보면서 API의 역할과 입출력 구조를 파악해보자.




인가코드 받기 API 


인가코드 받기는 카카오 로그인을 시작하는 단계로써, 카카오 로그인 동의 화면을 호출하고, 사용자 동의를 거쳐 인가코드 발급을 요청한다. 동의 화면은 [내 애플리케이션] > [카카오 로그인] > [동의 항목]의 설정을 반영한다


사용자는 동의 화면에서 서비스 이용 시 필요한 사용자 정보 및 권한 제공에 동의하고 로그인을 요청하거나 로그인을 취소할 수 있다. 필수 동의 항목에 모두 동의한 뒤 [동의하고 계속하기] 버튼을 누르면, 카카오 인증 서버는 해당 사용자에 대한 인가코드를 발급해 서비스의 redirect_uri에 전달하게 된다. 카카오는 개발자를 위해 친절하게 요청하고 응답받는 샘플을 제공하여 안내하고 있다.


Request 부분에서는 Request URL과 Parameter에서 Required 될 수 있는 값을 안내한다.

URL을 살펴보자.


GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code HTTP/1.1

Host: kauth.kakao.com


GET Method를 사용하여 어떤 요청을 할 것인지를 표기했다.

client_id, redirect_uri, response_type 으로 요청받을 값을 지정했다.

Host는 요청할 정보의 서버이다.  


이렇게 깔끔하게 정리해서 서버에 요청하면 서버는 이 값만 찾아서 응답해주면 된다.


Response부분에서는 Request에서 요청을 받고 Response 해줄 수 있는 값을 안내한다. 에러가 나는 경우도 있기 때문에 Required 될 수 없는 에러상황도 설계가 되어 있다. 에러 없이 code값으로 응답을 할 경우의 Request와 Response코드 샘플을 살펴보자.



▶Request Sample

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}


요청URL과 액션 : https ://kauth.kakao.com/oauth/authorize?

클라이언트의 ID요청 : response_type=code&client_id=${REST_API_KEY}

인가코드가 리다이랙트 될 URI : redirect_uri=${REDIRECT_URI}


이렇게 URL에서 찾아야 할 값들을 지정하여 요청을 보내면 응답을 받을 수 있게 된다.



Response : 사용자가 [동의하고 계속하기] 선택, 로그인 진행

HTTP/1.1 302 Found

Content-Length: 0

Location: ${REDIRECT_URI}?code=${AUTHORIZE_CODE}


앞서 response type =  HTTP/1.1로 지정한 것처럼, 지정한 표기 값을 지켜서 찾은 코드(302) 와 찾은 여부(Found) 를 먼저 안내하고 요청받은 값을 찾아서 {REDIRECT_URI}{AUTHORIZE_CODE} 로 응답해주고 있다. 이 과정을 통해 받은 인가코드는 다음 단계인 "토큰 받기"에 사용할 수 있게 된다.



이렇게 에러가 뜰 경우를 안내해서 사용자의 행동패턴에 따른 상황별 대처법을 알 수 있다. 필자는 전문 개발자가 아니라 이 에러가 무엇을 의미하는지, 어떤 대처가 필요한지 정확히 알 수는 없지만 오픈API이기 때문에 기존 서비스가 개발된 환경과 사용자의 환경, 그리고 카카오가 제공하는 환경의 차이로 생기는 문제가 아닌가 예측해 본다. 오픈API를 제품개발에 사용하면 그 부분을 별도로 개발할 필요 없이 카카오가 사전에 잘 설계해둔 서비스를 그대로 가져와서 편리하게 사용하고 시간을 절약할 수 있으며 고객에게 익숙한 환경을 제공할 수 있다. 그러나 카카오가 정한 규칙을 활용하는 것이기 때문에 기존 서비스와 잘 호환하기 위한 노력이 필요할 수 있다고 판단되었다.  






좋은 기획자가 되려면 개발자와 함께 호흡할 수 있어야 기초부터 탄탄히 쌓인 완성도 높은 서비스를 기획해 나갈 수 있어서 이렇게 개념을 이해하는 시간이 소중한 것 같다. 그러나 초보이기에 부딪히는 벽이 있다. 오늘 알아본 개념은 며칠을 들여다보고 공부했지만 100% 이해하고 소화할 수 없어서 아쉬웠다. 개발이라는 산을 뛰어넘고 싶고, 더 잘 이해하고 싶어서 공부를 지속할 생각이다.


문제를 기막히게 해결하는 유익한 기획자.
코드스테이츠 PM 부트캠프로 획기적인 프로덕트 매니저가 되어 가다.
기막힌 생각과 획기적인 방법론자, PM이야기 #17.  끝.

참고자료


매거진의 이전글 기획자가 알아야할 앱서비스의 4가지 유형과 장단점

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari