와이즈스톤 와이즈스톤

기술인사이트

기술리포트

모바일 APP의 Native App과 Web View의 차이 및 검증 방법
  • 작성자
    와이즈스톤티 김강표 선임연구원
  • 작성일
    2023-02-22
01. 모바일 APP 개요
2007년 Apple 사의 iPhone 1세대가 발표되면서 스마트폰 대중화 시대가 열렸고, 이후 Google 사의 Android OS 발표로 인해 iOS/Android OS로의 모바일 OS가 양분화되었습니다.

2022년 10월 현재 Apple의 iOS 점유율은 28.4%, Google의 Android OS 점유율은 71.0%로 양사가 사실상 모바일 OS 시장을 지배하고 있는 상황입니다.


모바일 OS 시장 점유율
출처 : https://gs.statcounter.com/


매년 전 세계 제조사의 스마트폰 출하량이 10억대가 넘을 정도로 사실상 1인 1스마트폰 시대가 되었고, 대부분의 기업들이 운영하는 Mobile 전용 웹사이트 이외에 보안 및 UX 등 더 나은 경험을 위한 Native App의 출시 필요성이 대두되었습니다.

Native App(네이티브 앱)이란 모바일 디바이스에 최적화된 언어로 개발된 App으로, 안드로이드 SDK를 이용해 java 언어로 만드는 Android App과, iOS SDK를 이용해 Objective-C 또는 Swift 언어로 개발된 iOS App 등을 말합니다.

Mobile Web(모바일웹)은 PC 브라우저에 실행되는 웹 사이트를 모바일 화면 크기로 줄여 놓은 웹사이트를 말합니다.

Hybrid App(하이브리드 앱)이란 앱의 기반이 되는 콘텐츠 영역은 html 기반의 Web으로 제작하고, 최종 App 배포에 필요한 패키징 처리만 iOS, Android OS 플랫폼 내에서 처리한 App을 말합니다.
오늘 포스팅에서는 Native App과 Web View 영역에 대한 검증 방법을 소개하고자 합니다.
아래 그림은 모바일 웹뷰와 하이브리드앱뷰 이미지입니다. 모바일 웹뷰와 하이브리드 앱은 비슷한 것 같지만 상이합니다.


사진. 네이버와 다음의 모바일 웹 / 하이브리드 앱 비교


02. Native App / Web View 검증 방법
1) Native App & Hybrid App에서는 무엇을 테스트해야 하는가?
• 기능 테스트 - 전체 앱의 기능이 예상대로 작동하는지 테스트
• 성능 테스트 - 실제 테스트를 수행하는 동안 배터리 소비 및 메모리 사용량 모니터링
• Interrupt 테스트- 앱의 동작을 테스트하며 전화 통화, SMS 및 메시지 푸시 알림 등과 같은 모든 interrupt에 대한 테스트
• 호환성 테스트 ( OS 버전 별 )


2) Web View, Mobile Web에서는 무엇을 테스트해야 하는가?
​• UI 테스트 - 모든 UI 요소가 기기 화면에 완전히 표시되고, 미세하게 정렬되는지 확인 필요(디자인 & 퍼블리싱)
• 성능 테스트 – 메모리 및 저장 공간 사용 정도, 데이터 로딩 시의 속도 최적화(이미지 리사이즈, 소스 최적화)
• 호환성 테스트 - 해상도, 비율 등이 기기별로 상이 하므로, 가능한 전체 테스트 기기에서 검증이 필요
• Web App 과 Native App이 동일한 화면으로 출력이 되더라도 Web, Native 각각 화면 검증 필요



사진. 동일한 상품 상세 페이지의 Web App과 Native App의 표시 차이


03. TEST 수행
• Test Case 수행
Checklist와 시나리오를 수행하여 산출물/결함/형상 관리에 중점을 둡니다.
단순 UI 결함이나, Major 결함 중 당장 수정이 불가능한 결함 등은, After job으로 사후 관리합니다. 일부 단말에서(해상도 낮은 단말, 지원하는 최소 spec의 단말 등)는 결함이 많이 발견될 가능성이 높으므로 중점적으로 테스트합니다.

• 성능 테스트 수행
속도 측정 등 성능 테스트 진행을 위해서는 타겟 단말을 정해 두고, App 버전 업데이트 시 주기적으로 성능 테스트 실시합니다. 인력 자원을 활용한 수동 체크와 마켓에 배포된 속도 측정 App을 활용한 자동 체크를 동시 진행하여 평균값으로 이력 관리를 주/월 단위로 진행합니다. (최초 실행 속도, 메인 화면, 로그인/로그아웃, 결제 진입 속도 등을 측정)

• 주의사항
Chrome 개발자 도구, VM Ware 등의 가상 OS로는 검증하지 않는 것이 좋습니다.
Chrome 개발자 도구에서는 Web View 영역만 확인 가능하고 Native 영역은 확인 불가합니다. 또한 가상 OS에서의 하드웨어 버튼, 애니메이션 동작 등의 검증은 확인 불가하고, 실제로는 퍼블리싱 오류로 인하여 가상 OS에서는 정상 동작 되더라도 실제 기기에서 오류가 나는 경우가 빈번하여 수행 결과의 신뢰성에 부합하지 않기 때문입니다.

• 수행 결과 (현업 기준)
-Web은 주 1회 기획 > 개발 > 퍼블리싱 > QC 검증 > 운영 배포 사이클 운영합니다.
- App은 월 1회 Web 이외 Native를 테스트 별도 수행하여 마켓 업데이트 목표로 진행하고 있습니다.
- App 마켓 검수 요청 2일 전까지 대부분 완료 하나, 긴급 배포 등 추가 수정 시에는 기존 체크리스트 이 외 약식 Checklist 점검과 Regression 테스트, Side Effect 점검을 위한 Ad-hoc 테스트까지 병행하고 있습니다.
- 현재 현업에서는 6개 언어(국문, 중문 간체, 일문, 영문, 중문 번체, 베트남어)에 대한 테스트를 진행하고 있어서, 중국 마켓의 경우 Google 정책을 따르지 않아, 중국행으로 별도의 App 빌드가 필요하고, 글로 분향, 중국행 별도 빌드 및 테스트 기기로 인한 이슈가 빈번한 편입니다.

아래 사진처럼 동일한 설정 화면이지만 Web View와 Native 영역의 화면 구조가 다릅니다.


사진. Web View와 Native 영역의 화면 구조의 차이


04. 결론
1) 각 사이트 별 테스트 방식은 상이하나, App 검증은 마켓 검수라는 별도의 과정이 있으므로 공수 산정에 어려움이 있습니다. Web의 경우, 자체적으로 Web 배포만 하면 운영 배포가 완료되지만, App은 마켓 검수까지 통과해야 최종 배포 후 사용자에게 오픈되기 때문입니다.

2) 단말 파편화가 심하여 전체 단말에 대한 Coverage는 어렵습니다. 지원 OS 버전/해상도를 비교하여 동일 지원 환경의 단말 중 점유율이 높은 단말과 결함 발생이 많은 단말을 선정 대표 단말 및 특이 단말로 테스트 대상 단말을 선정합니다. 파편화가 심하여 전체 단말에 대한 Coverage는 어렵습니다. 점유율이 높은 단말/OS 버전을 추려내어 대표 단말 및 특이 단말로 테스트 대상 단말을 선정해야 합니다.

3) 중국 등 Google 정책을 따르지 않는 국가들에 서비스 중인 App은 One build가 아닌 글로벌, 중국향으로 별도 빌드 하므로 공수가 2배로 산정되므로 주의하여야 합니다.

4) Web View는 Web에서만 별도로 검증이 가능하므로, App 테스트 시에는 Web View 영역보다는 Native 영역을 중점적으로 테스팅 하는데 목표를 둡니다.

5) 위와 같은 내용을 참고하여 APP 검증 시 Native 영역 점검을 진행하면 도움이 될 것이라고 생각합니다
아래 사진과 같이 사이트 전체에서 6개 언어를 지원하고, 중국향(중문간체)는 별로 앱 빌드로 확인해야 하므로 공수 산정에 유의해야 합니다.


사진. 사이트에서 지원하는 6개의 언어를 확인하는 모습 


이상으로 [모바일 APP의 Native/Web View 차이와 검증 방법] 소개를 마칩니다.
읽어주셔서 감사합니다.