웹뷰 속도 문제를 이렇게 풀 수도 있군요.
- 당근마켓의 주요화면은 네이티브 UI로 개발되었고 예전엔 극히 일부인 웹 화면을 위해 전용 인프라를 유지하기 보단 API를 담당하는 레일즈 서버에서 함께 처리하고 있었어요.
- 레일즈 서버에 부하가 커져서 서버가 느려질 때 화면 로딩이 함께 느려졌어요
- 이런 문제점들을 개선해보기 위해 그 당시 조심스럽게 SPA(Single Page Application) 방식을 검토했었고, 중고거래 서비스의 “신고하기” 기능을 Vue 기반 SPA로 분리한 것이 당근마켓 웹 프론트엔드의 첫 시작이였어요.
- 웹뷰 기반 화면은 네이티브 화면과 다르게 추가적인 다운로드가 필요해요. SPA 방식은 화면을 그리는 코드를 한 번에 다운로드 받기 때문에 네비게이션 할 때 마다 다운로드를 추가로 기다릴 필요가 없지만 모든 화면 코드를 한 번에 받는 만큼 첫 로딩 시간이 길어질 수 밖에 없어요.
- 앱을 실행했을 때 백그라운드에서 미리 웹 파일들을 다운로드 받고, 진입할 때는 네트워크가 아니라 파일로(file://) 웹뷰를 실행하면 추가 로딩 없이 화면 전환을 할 수 있어요.
- 이 때 새버전이 배포되었는지 여부를 먼저 확인해서, 항상 파일을 다운로드 받지 않아도, 이전에 받아 둔 파일을 캐싱해뒀다가 사용할 수 있어요.
- 필요한 파일들만 한 번에 로딩하기 위해서, 컨텐츠를 ZIP 파일로 묶어서 배포하고 클라이언트에서 푸는 방식을 선택했어요. 이렇게 하면 배포의 원자성(Atomicity)을 쉽게 보장할 수 있어요.
- 당근마켓 프론트엔드 챕터에선 이 방식을 로컬 웹뷰라고 부르고 있어요.
- (단점은) 웹 플랫폼 API들은 모두 “출처”(Origin) 기반 보안 모델을 따르고 있어요. 출처가 없는 파일 프토토콜(file://) 기반 브라우징 컨텍스트에서는 일부 API에 접근할 수 없는 문제가 있었어요. (예시: WebWorker 사용 불가)
# 요약글입니다. 원문은 아래 링크에서 확인하세요
의견을 남겨주세요