브라우저 웹과 웹뷰가 동시에 동작하는 앱을 만들기는 생각보다 어렵다. 특히 팝업 같은 경우는 웹뷰에서 브라우저 웹에서 처럼 동작이 잘 안된다.
웹뷰 카카오 로그인은 기본적으로 native로 로그인을 개발하도록 권장하고 있다. 그런데, 회사에 native 개발자가 부족하거나 없고, native로 개발하는 데 어려움이 있다면 웹뷰에서도 브라우저 웹처럼 SNS로그인을 해야할 상황이 있다고 생각해보자.
일단, 카카오 로그인 버튼을 누를 때, 팝업이 뜨는 데 native 코드(안드로이드 스튜디오) 쪽에서 강제로 팝업이 열릴 주소를 잡아 그 주소로 리디렉션 해줘야한다. 그리고 웹쪽 코드에서는 팝업이 아닌 리디렉션 용 로직을 따로 잡아줘야한다. 이 때, 팝업인지 리디렉션인지 판단해주는 근거는 다음과 같다.
function isWebview() {
if (typeof window === undefined) { return false };
let navigator = window.navigator;
const standalone = navigator.standalone;
const userAgent = navigator.userAgent.toLowerCase();
const safari = /safari/.test(userAgent);
const ios = /iphone|ipod|ipad|macintosh/.test(userAgent);
const ios_ipad_webview = ios && !safari;
return ios ? ( (!standalone && !safari) || ios_ipad_webview ) : userAgent.includes('wv');
}이렇게 isWebview로 SNS 로그인 로직을 분기해서 웹뷰일 때와 브라우저 웹일 때 로직을 다르게 해준다. 그런데, 이 때 정말 조심해야할 점이 있다.
카카오 로그인 SDK는 UserAgent에 “Android”, “wv” 문자열 둘 중 하나라도 포함하고 있다면 웹뷰라고 판단하여 카카오 앱을 구동한다. 그렇게 되면, 웹뷰는 비정상적으로 종료될 것이다. 우리는 native로 개발하지 않을 것이다. 그래서 native 코드에서 카카오 로그인시에만 UserAgent에 “Android”, “wv”를 제거해주면 된다.
이 때 반드시 카카오 로그인시에만 UserAgent를 수정해줘야한다. 로그인 후에만 원래대로 UserAgent를 복구해놓아야한다. 왜냐하면 나중에 결제 시, 결제 모듈이 UserAgent를 받아 구동되고 있는 휴대폰이 어떤 기종인지 판단해야하기 때문이다. 만약에 “Android”, “wv”를 지운다면, 은행 결제시 “지원하지 않는 기기입니다.”라는 메시지를 보게 될 것이다.
이렇게 안드로이드 웹뷰에서 카카오 로그인을 native하지 않게 구현하는 방법을 알아보았다. 이 방법은 절대 권장되지 않는다. 회사에서 급한 일이 발생해 이 글과 비슷한 상황일 때 말고는 이런 방법은 사용되지 않아야한다. 기본적으로 카카오 로그인과 대부분의 SNS로그인 제공 업체들은 웹뷰에서 native하게 SNS 로그인을 구현하도록 되어 있다.
이 글이 정말 그대로 사용될 일은 거의 없겠지만, 이런 방식으로 구현해보는 방법도 있다는 것을 알면 좋을 것같다. 그리고 이러한 정석적이지 않은 방법에서 개념적으로 얻어갈 수 있는 것들이 있었으면 좋겠다.
