🌐 웹(Web)

브라우저에서 실행되는 독립 서비스

실행 환경

PC 브라우저(Chrome, Safari, Edge 등)나 모바일 브라우저에서 동작

특징

• 서버에 배포하면 모든 브라우저에서 접근 가능
• 표준 HTML, CSS, JavaScript 기반
• 브라우저가 제공하는 기능(API)에 의존 (예: 카메라 권한은 제한적)

장점

• 배포가 빠름 → 서버에서 업데이트하면 즉시 반영
• 플랫폼 독립적 (Android/iOS/PC 모두 접근 가능)

단점

• 디바이스 기능 활용이 제한적
• 네이티브 앱 대비 성능(속도, 애니메이션, 반응성) 떨어질 수 있음

📱 웹뷰(WebView)

네이티브 앱 안에 포함된 브라우저 컴포넌트로 웹 콘텐츠를 불러오는 방식

실행 환경

네이티브 앱 안에 삽입된 브라우저 엔진 (Android: WebView, iOS: WKWebView)

특징

• 앱 안에서 웹 페이지를 불러와 실행 (앱 안에 작은 브라우저 창이 있는 셈)
• 네이티브 코드 ↔ 웹 코드 간 브릿지(Bridge) 통신 가능
• 예: 결제 화면, 고객센터, 약관 동의 등 자주 바뀌는 영역을 웹뷰로 구현

장점

• 앱 업데이트 없이 서버에서 웹만 수정해도 화면 반영 가능
• 웹과 네이티브 기능을 혼합 가능 (ex. WebView에서 결제창 열고, 결과는 네이티브 앱 기능으로 처리)

단점

• 네이티브와 웹 연결 구간에서 오류 발생 가능
• 성능 저하(로딩 지연, 스크롤/제스처 충돌)
• QA 테스트가 복잡해짐 (WebView 내부 DOM 인식, 컨텍스트 전환 필요)

QA관점에서의 웹 VS 웹뷰

웹(Web) 테스트

테스트 환경

-PC/Mobile 브라우저별 크로스 브라우징

• 브라우저 버전, OS별 호환성 확인

주요 포인트

• 반응형 UI/UX (해상도·기기별 레이아웃)
• 브라우저별 렌더링 차이 (CSS, JS 동작)
• 캐시/쿠키/세션 관리 검증
• 네트워크 환경(3G, LTE, Wi-Fi)에 따른 성능

테스트 도구

• Selenium, Cypress 같은 웹 자동화 툴
• Chrome DevTools, Lighthouse로 성능/접근성 점검

웹뷰(WebView) 테스트

테스트 환경

• 앱(Android/iOS) 빌드 필요 → 앱 설치 후 확인
• WebView 엔진 버전(Android System WebView, WKWebView)에 영향

주요 포인트

• 네이티브 ↔ 웹 간 브릿지 통신 (데이터 전달, 콜백 처리)
• WebView 로딩 지연/중단, 스크롤 끊김, 화면 확대/축소 제스처
• 로그인 세션 공유 문제 (앱 세션 vs 웹 세션 불일치)
• 앱 업데이트 없이 서버에서 웹만 변경될 경우 예상치 못한 UI 깨짐
• WebView → 외부 브라우저 전환 시 흐름 정상 동작 여부

테스트 도구

• Appium, Espresso, XCUITest 같은 모바일 UI 자동화 툴
• Charles, mitmproxy로 네트워크 패킷 분석
• 개발자 도구(Inspector) 연결: iOS Safari Web Inspector, Android Chrome Remote Debugging