1. 사건의 시발점

나는 외주 업체에서 받은 모바일 웹을 모두 다 구현하고, 디버깅까지 모두 마쳤다. 가장 까다로웠던 것은 SNS로그인과 결제 부분이었다.

이 2가지가 가장 까다롭고 복잡했다. 만약 잘 구현이 되었다면 쉬웠을 것 같다. 그런데, 어렵게 구현이 되어있어서 코드를 수정하고 디버깅하는 데, 힘들었다.

안그래도 힘들었는 데!

Jikang아 웹뷰에서 결제랑 SNS 로그인이 안된다. 고쳐줘.

처음의 내 반응은 ‘앵? 갑자기 웹뷰? 우리 회사에서 앱도 만드나요?’

알고 보니 모바일 웹사이트를 AOS/IOS 앱에서 접속하도록 웹뷰를 만드는 계약이 따로 있다고 전달받았다.

하 근데, 이미 모바일 웹에 맞춰 다 만들어진 웹사이트를 앱에 끼워 맞추다보니깐 당연히 안되는 거지. 이건 고쳐달라고 하는 게 아니라 “시간을 넉넉히 줄 테니 웹뷰에서 잘 돌아가도록 해주라. “이런 식으로 진행되어야하는 게 아닌가?

~라는 생각은 마음 속으로 했고 나는 아무런 힘도 없고 팀장, 선배 개발자가 없는 사원 나부랭이였다.

2. 모바일 웹에서는 되고 웹뷰에서는 어려운 것

모바일 웹에서는 현재 기획팀의 요청에 의해 SNS 로그인과 결제 시 무조건 팝업 창이 뜨도록 하고 있다. SNS로그인과 결제 시 팝업 창이 뜨도록 하느냐 or 리디렉션으로 하느냐는 그 서비스를 제공하는 업체의 메뉴얼데로 해야한다. 큰 서비스를 제공하는 웹사이트들 모두 다 이렇게 한다. 예를 들어 29cm가 있다.

그런데, 웹뷰에서는 일반적으로 팝업이 불가능하다. 그래서 나는 강제로 팝업으로 만든 모바일 페이지를 모바일의 앱으로 접근했을 때를 if문으로 나눠서 보여줘야했다. 쉽게 말해서 하나의 소스에서 원래 잘되던 모바일 페이지는 그대로 되게 끔하고 앱에서는 리디렉션 로직을 붙이라는 것이었다.

3. 이것은 웹인가 웹뷰인가

휴대폰 or 데스크톱을 판단하는 것이 아닌 앱(APP)이냐 웹(WEB)이냐를 판단해야한다.

결론은 이렇다. StackOverFlow에서 찾았다.

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');
}

안드로이드 웹뷰일 때는 정말 심플하다. ‘userAgent에 wv문자열이 있느냐 없느냐’를 확인하면 된다. wv문자열이 있으면 웹뷰 즉, 앱(APP)이 된다.

ios 웹이냐 앱이냐 판단할 때는 정말 복잡하다.

  • standalone이 아님과 동시에 safari가 아닐 때
  • ios이고 safari가 아닐 때

여기서 의문이 들 수 있다. ios기기에서 safari가 아닌 chrome을 사용하면 webview로 판단할 수도 있지 않을까?

여기서 놀라운 사실을 알려드리자면, ios기기에서 Chrome을 사용하더라도 UserAgent에 Safari가 붙는다.

UserAgent는 어떤 브라우저에서 접속했는 지 식별하기 위한 것 뿐만 아니라 브라우저간의 호환성을 위한 정보도 붙기 때문이다.

4. 결론

결국, 나는 웹인지 앱인지를 if문으로 구별하여 웹에서의 팝업 부분을 리디렉션으로 처리하여 SNS로그인과 결제를 처리하였다.

이 부분에서 정말 문제가 많았는 데, 앱 핸들링하시는 개발자분과 잘 협의하여 끝낼 수 있었다.

하지만, 원래 SNS로그인과 결제가 정말 복잡해서 다양한 버그들이 있었고 이 부분에 대해서 처리하는 데 비용이 많이 들었다.

이것을 해결하기 위해서는 강도 높은 리팩토링과 테스트가 필요로 하는 데, 파도처럼 밀려오는 업무 + 다른 프로젝트 때문에 일을 하지 못하고 있다.

Categorized in:

Technology,