웹 서비스 안드로이드 환경에 제공하기 (WebAPK, TWA)

웹 서비스 안드로이드 환경에서 제공하기 (WebAPK, TWA)

23년도에 웹 서비스가 키오스크와 같은 모습으로 특정 안드로이드 기기에서 설치되어 제공되어야 하는 상황이 발생했습니다. 웹 서비스를 안드로이드 환경에서 앱 처럼 사용자에게 제공할 수 있는 방법을 찾기 위해서 23년도 당시 탐구하고 고민하여 서비스를 제공했던 경험을 공유합니다.

목표

• 안드로이드 태블릿에서 키오스크와 같은 형태로 사용자에게 서비스 제공하기

제한 사항

1. 프론트엔드 인력만 활용 가능
   • 안드로이드 개발자분이 계시긴 하지만, 서비스 자체를 개발하기에는 부족하여 현재 여유가 되는 프론트엔드 개발자 위주로 개발 진행 가능했습니다.
2. 모바일 환경에 대한 전문성 부족
   • 보통 채용 현황이 React 기반의 웹 프론트엔드 개발자로만 구성되어 있는 상태
3. 현재 서비스할 기기를 변경할 수 없음
   • 어떤 이유인지는 모르겠으나, 이미 의사결정이 완료되어 서비스할 기기 자체 변경은 불가능한 상태

요구 사항

1. 오프라인에서도 서비스 표시
2. 키오스크처럼 전체 화면 표시
3. 키오스크처럼 기기 부팅 후 앱 자동 시작
4. 코드 업데이트의 신속 및 유연

안드로이드 환경에서 서비스를 제공하는 방법 (WebAPK, TWA)

1. React Native, Expo
   • React와 비슷한 형식을 사용하여 관리할 수 있지만, 스타일 시스템 등이 많이 다릅니다.
   • 더 많은 네이티브 기능 및 권한을 사용하여 개발할 수 있습니다.
   • 직접 요소들을 작성하지 않고, 웹뷰 방식의 래퍼 형식으로 만들 수도 있습니다.
   • 하지만, 웹이 아닌 기술이기 때문에 개발을 위한 학습 비용 및 자동화 테스트 설계를 위한 기술 탐구, 적응하는 비용 등이 너무나 컸기 때문에 React Native는 선택지에서 제외하였습니다.
   • 물론, React Native는 Hermes engine이 탑재되면서 더욱 최적화된 앱 성능을 자랑하고 있고 해당 생태계는 모바일, 데스크탑, 웹 모든 환경을 크로스 플랫폼 앱을 목적으로 성장하고 있어 흥미롭고 기대되는 기술 영역입니다. 최근에는 Skia 그래픽 엔진이 추가되면서 복잡한 그래픽 처리도 가능한 걸로 알고 있어 더욱 흥미롭네요.

2. WebAPK
   • WebAPK : PWA Android 설치
   • Android Chrome에서 웹 서비스에 접속하여 홈 바로가기 설치(앱 설치)를 진행하면 Google WebAPK 생성 서버가 APK를 생성하여 안드로이드 환경에 앱 형태로 설치되어 앱처럼 사용할 수 있습니다.
   • 트위터, 스타벅스 등의 사이트에서도 제공하고 있는 방식입니다.
   • 설치가 가능하기 때문에 안드로이드 기기에서 부팅 자동 시작 대상으로 설정할 수 있었습니다.
   • 원래 웹 서비스 개발 방식을 그대로 유지할 수 있고, 안드로이드에서 제공하기 위한 설치 파일도 자체적으로 관리해주기 때문에 큰 비용이 발생하지 않았습니다.
   • 최초에 해당 환경으로 서비스를 제공하였으나, 24년 4월 쯤 APK 파일을 만들어 주는 Google 서버에 문제가 있어서 이후 설치된 앱들은 모두 실행 후 바로 꺼지는 비정상 종료(Crash) 현상이 발생하면서 해당 방식에서 APK 빌드도 관리할 수 있는 TWA 방식으로 이전했습니다.
   • 또한, WebAPK 형태의 앱을 통한 설치 방식에 관한 범죄가 발생하면서 Chrome에서 WebAPK의 지속적인 지원이 어려울 것이라고 판단되었습니다.
3. TWA (Trusted Web Activities)
   • 맞춤 탭 (Android Custom Tabs)은 Webview와 다르게 브라우저와 상태를 공유하면서 웹 플랫폼의 모든 기능을 사용할 수 있습니다. 또한 사용자는 브라우저를 실행하는 것이 아니라 앱을 사용하는 느낌의 경험을 제공합니다. 서비스 내부에서 브라우징 경험을 보존하는 방식을 말하는 것 같습니다.
   • 신뢰할 수 있는 웹 활동은 맞춤 탭 기반으로 하는 프로토콜을 사용하여 Android앱에서 PWA와 같은 웹 앱 콘텐츠를 안드로이드 앱과 같은 전체화면으로 사용할 수 있는 경험을 제공합니다.
   • 안드로이드에 설치될 수 있고, 웹 서비스를 성능 저하 없이 온전히 웹 API를 모두 활용할 수 있고 전체화면을 통해서 충분히 앱과 같은 사용자 경험을 제공할 수 있어 아주 좋은 선택지였습니다.
     • 또한, PWA 기반이기 때문에 Service Worker 처리를 통해서 오프라인에서도 웹앱이 깨지지 않아 충분히 사용자에게 안내를 해줄 수 있었고 소스를 재사용 할 수 있기 때문에 더욱 매력적이었습니다.

마치며

사실 개발을 진행하면서, React Native로 이전해야 하나라는 걱정도 많았습니다. 하지만 생각보다 가지고 있는 기술을 최대한 활용하여 최소 비용으로 빠르게 서비스 고객에게 제공할 수 있었던 것 같습니다.

또한, E2E 기반의 자동화 테스트를 작성하거나 시뮬레이션이 필요한 경우에도 빠르고 익숙하게 진행할 수 있었던 것 같습니다.

다만, 결국에는 생소한 모바일 환경이기 때문에 안드로이드 단에서 발생하는 문제 대응이나, 현장 디버깅 등의 대응에는 매우 어려웠던 것 같습니다. 덕분에 잘 모르지만 안드로이드 에뮬레이션 환경을 만들어보기도 하고 adb로 실기기에 연결해서 디버깅도 해보고, logcat으로 crash도 확인하는 등 여러가지 경험을 해본 것 같습니다.

다음 시간에는 WebAPK, TWA 방식의 구체적인 예시를 소개하면서 경험을 공유해보는 시간을 가져보려고 합니다. WebAPK, TWA 방식은 모두 PWA가 전제 조건이기 때문에 PWA에 대해서 먼저 알아보긴 해야겠네요!