웹뷰 및 인앱 브라우저 환경 고려하기 (WebView, in-app)

# 내용추가 

WebView vs In-App-Browser vs Embedded Browser의 차이점을 좀 찾아봤습니다!

 

내용을 요약해 정리하면,

 

WebView

• 앱 내의 웹 페이지를 표시하는 데 사용하는 기능 (기본적으로 앱 내에 번들로 제공되는 웹 브라우저의 축소판)
• 일반적으로 앱에 내장되어 앱 외부에서 액세스할 수 없음
• 기능이 제한적일 수 있음 (동일한 기능을 지원하지 않거나 특정 유형의 웹 콘텐츠를 렌더링하는데 어려움을 겪을 수 있음)

 

In-AppBrowser

• 사용자를 별도의 웹 브라우저 앱으로 리다이렉트 하지 않고 앱 자체 내에서 웹 페이지를 열 수 있도록 해주는 기능
• 앱 내에서 액세스 할 수 있는 기능이며, 일반적으로 장치의 기본 웹 브라우저를 기반으로 함
• 사용자의 기본 웹 브라우저와 동일한 방식으로 동작하기 때문에 더 일관되고 친숙한 사용자 경험을 제공
• 독립형 브라우저 앱과 동일한 기능을 모두 갖추고 있음

 

Embedded browser

• 더 큰 소프트웨어 통합된 웹 브라우저
• 독립형 웹 브라우저와 동일한 방식으로 작동하지만 다른 앱이나 프로그램 내에서 사용하도록 설계
• 앱이나 프로그램 내에서 웹 콘텐츠를 표시하는 데 사용될 수 있으며, 특정한 추가 기능을 가질 수 있다.

 

위 세 가지 옵션의 주요 차이점 중 하나는 액세스 및 사용 방법입니다. 결국 인앱 브라우저는 앱 내에서 엑세스할 수 있으며 일반적으로 장치의 기본 웹 브라우저를 기반으로 하는 반면 웹뷰는 앱에 내장되어 있어 외부에서 액세스할 수 없습니다. 그리고 임베디드 브라우저는 더 큰 소프트웨어로 통합되어 있으며 그 소프트웨어 내에서 접근하여 사용할 수 있습니다.

 

결국 위 내용을 바탕으로 정리해도 너무 헷갈리네요. 만약 인앱브라우저처럼 브라우저와 동일한 기능을 갖췄다면 아래와 같은 문제가 일어나지 않았을테니까 웹뷰 환경이 맞는 것 같은데 앱이나 프로그램 내에서 웹 콘텐츠를 표시하는 임베디드 브라우저의 설명도 맞는 것 같기도 하고.. 고민이 되네요.

 

일반적으로는 웹뷰나 인앱 브라우저라는 단어로 많이 칭하고 있는 것 같아 일단은 그렇게 부르되, 내용 정리가 더 되면 다시 수정하도록 하겠습니다!!! 혹시 정확한 정보를 알고 있으신 분들은 정보 주시면 감사하겠습니다! 

 

#1 WebView? In-app-browser? Embedded-browser?

안녕하세요.

 

웹뷰 및 인앱 환경 고려하기라는 주제로 포스트를 써볼까 합니다.

WebView vs In-app-browser vs Embedded-browser 구도가 너무 헷갈렸는데 어디서는 WebView 및 Embedded Browser라고 칭하고 또 일반적으로 앱에서 띄어지는 브라우저는 In-app Browser라고 알고 있는데 용어가 정확히 정형화 되어 있는 것 같지 않아 통틀어 웹뷰 및 인앱 환경이라고 칭하겠습니다.

 

웹뷰 및 인앱은 용어 그대로 앱안에서의 브라우저입니다. 앱 안에서 모든 활동이 이루어지죠.

 

저희는 이러한 환경을 고려하지 않고 서비스를 오픈했다가 큰 이슈를 겪은 경험으로 문제와 해결을 어떻게 했는지에 관한 포스트입니다.

#2 문제

저희는 서비스의 이벤트 홍보를 위해서 마케터분에 도움을 받아 인스타나, 페이스북에서 들어올 수 있도록 링크를 달아놓았습니다.

 

그 링크를 타고 들어가 SNS 회원가입이나 로그인을 진행하는 프로세스였습니다.

그러나 마케터분께서 계속해서 회원가입이 안된다, 로그인이 안된다라는 내용이 이벤트를 참여하고자 하는 유저분들에게 계속해서 피드백이 오고 있다는 상황을 전달받았습니다.

 

QA까지 거쳤고, 테스트를 해봐도 잘되는데 왜 안된다는거지? 라는 생각이 가득했지만 딱 하나 다른점이 있었습니다.

 

WebView(웹뷰) 및 In-app(인앱) 브라우저 환경을 고려하지 않았던 것입니다.

 

앱 내에서 진행되는 인앱브라우저이기 때문에 새 창 띄우기가 아닙니다. 

인앱에서 진행되는 앱 같은 경우에는 웹뷰 환경을 고려하지 않으면 SNS 회원가입, 로그인을 하려고 하면 넘어가지 않고 흰 화면에서 머무르는 현상이 발생하는 것이였습니다.

(인앱이 지원해주는 경우도 있습니다. 카카오 인앱에서 카카오 로그인은 정상적으로 되었습니다.)

 

그래서 저희는 근본적인 해결은 아니지만 일단 급한불을 끄기 위해 인앱에서 외부 브라우저를 띄우는 방향으로 설정을 하기로 하였습니다.

 

  window.onload = function() {
    if (navigator.userAgent.match
    	(/inapp|NAVER|KAKAOTALK|Snapchat|Line|
        WirtschaftsWoche|Thunderbird|Instagram|
        everytimeApp|WhatsApp|Electron|wadiz|AliApp|
        zumapp|iPhone(.*)Whale|Android(.*)Whale|kakaostory|
        band|twitter|DaumApps|DaumDevice\/mobile|
        FB_IAB|FB4A|FBAN|FBIOS|FBSS|SamsungBrowser\/[^1]/i,)
       ) 
    {
      document.body.innerHTML = "";
      if (navigator.userAgent.match(/iPhone|iPad/i)) {
        // IOS
        location.href = "ftp://도메인/bridge.html?_targeturl=" 
        + location.href;
        /*
        FTP - File Transfer Protocol 
        (서버와 클라이언트 사이의 파일 전송을 하기 위한 프로토콜)
        
        ios에서는 FTP 프로토콜을 호출하여 자동으로 사파리가 열리게 되는 현상 
        (익명이 접근 가능해야 함)
        
        FTP 프로토콜을 웹에서 실행함으로써 ios 운영체제에서 
        강제로 사파리를 실행시키게 되며,
        사파리가 FTP 내 html을 읽어서 강제로 페이지를 이동시킴
        */
      } else {
        // 안드로이드
        location.href = "intent://" + 
        location.href.replace(/https?:\/\//i, "") + 
        "#Intent;scheme=https;package=com.android.chrome;end";
        /*
          페이지를 강제 이동시켜서 크롬으로 URL을 열 수 있게 가능
      	  안드로이드의 intent 속성
          안드로이드폰에 크롬이 이미 내장되어 있어 브라우저를 크롬 패키지로 설정
        */
      }
    }
  };
  
  - [참조 블로그](https://www.burndogfather.com/201)

이렇게 해서 테스트를 해봤는데 안드로이드는 정상적으로 잘 되나, 아이폰은 되는 사람이 있고 안되는 사람이 있었습니다.

알고보니 아이폰은 15버전 이후로 업데이트 하는 경우는 보안패치로 인해서 막힌 것이였습니다....(역시 꼼수를 부리면 안되나봅니다.)

어차피 인앱 환경을 고려해 프로세스를 변경하려고 했기 때문에 근본적인 문제 해결을 위해 방향을 다시 잡았습니다.

#3 과정

그러나 여전히 인앱 환경에서는 아직 안되기 때문에 급하게 임시 페이지가 필요했습니다.

페이스북, 인스타 등에서 들어오는 경우 + 아이폰인 유저분들에게는 메뉴를 눌러 직접 Safari 브라우저로 들어오게 하는 방식입니다.

 

임시페이지

이렇게 임시페이지로 땜빵을 하고, 근본적인 문제 해결을 위해 회의를 하였습니다.

 

다른 웹사이트를 직접 이용하거나 보기도 하고, 가이드 문서를 보면서 찾아본 결과 저희가 제대로 된 방법으로 구현을 하고 있지 않았습니다.

 

카카오톡 로그인 Docs

일단 저희는 라이브러리를 썼고, 페이지 전환 형식이 아닌 팝업 형태로 SNS를 구현하였습니다.

SNS 회원가입 / 로그인 -> 인증코드 발급 -> 프로필 조회를 팝업창을 띄워 클라이언트에서 하고 있었습니다.

 

그러나 다른 사이트 같은 경우에 페이지 전환을 해서 처리를 하고 있었고, 카카오 로그인 Docs를 살펴보면 클라이언트에서 코드를 던져주면 그 코드로 토큰을 발급하고 프로필 조회를 해서 클라이언트에 넘겨주는 방식으로 처리를 하라고 되어 있었습니다.

 

즉, 팝업이 아닌 페이지를 이동해서 Redirect로 처리를 해야했는데 잘못된 방향으로 구현을 했었던 것이죠.

 

정리해보면, 기존 방식은

 

1. SNS 회원가입 / 로그인
2. 토큰 발급
3. 프로필 조회

2, 3번 과정을 프론트에서 팝업창을 띄어 구현

 

해결하려고 하는 방식

 

1. 클라이언트에서 302로 리다이렉트 되며, 인가 코드를 서버에 전달
2. 토큰 발급
3. 프로필 조회

먼저 회원가입, 로그인 버튼을 누르면 페이지 전환이 되면서 2, 3번 과정을 서버에서 하고 클라이언트에 전달하는 방식으로 구현

 

이렇게 해서 인앱 환경을 고려한 프로세스로 작업을 다시 하기로 결론이 났습니다.

 

정말 서비스를 오픈하면서 생기는 문제들은 정말 다양하구나를 느끼고,

이러한 점을 해결하면서 얼마나 많은 상황을 고려해야 하는지 다시금 깨닫게 되는 계기가 되는 것 같습니다.