Browser Stack 알아가기

1. Browser Stack이란 ?

Browser Stack은 웹 개발자와 테스터가 다양한 브라우저와 운영 체제에서 웹 애플리케이션을 테스트할 수 있는 클라우드기반 크로스 브라우저 테스팅 플랫폼입니다. 이 플랫폼은 다양한 가상 머신과 실제 장치에 원격으로 액세스하여 사용자가 각종 브라우저 버전과 기기에서 웹 사이트나 웹 애플리케이션의 성능을 테스트할 수 있도록 합니다. 그리고 이러한 테스트를 위해 각 조합마다 물리적 테스트 환경을 구축할 필요 없이 사용할 수 있습니다.

2. 왜 필요한가?

많은 조직에서 테스트폰을 필요로 하고 있으며, 또한 각 조직마다 테스트 할 사항이 다르기 때문에 Browser Stack과 같은 Live Mobile Test Platform을 사용한다면 업무 진행에 많은 도움이 될 것이라고 생각합니다.

• PO : 정책 반영 사항 및 기능 확인
• UX : UX / GUI / 디자인 사용성 테스트
• 개발 : 개발 반영사항 및 성능, 디버깅 확인
• QA : 크로스 디바이스 테스트, 정책 / 기능 / UX 등 테스트

3. Browser Stack 선정 이유

3–1. 플랫폼 특징 비교

• Unlimited Interactive App Testing (무제한 쌍방의 앱 테스팅)
• 20,000+ Real iOS & Android Device Units (실제 iOS, 안드로이드 디바이스)
• Natural Gestures like Tap, Zoom, Scroll, Swipe & More (탭, 줌, 스크롤, 스와이프 등 제스처 입력)
• Easy Debugging with Real Time Device Logs (디바이스 로그가 바로 찍힘)
• Test your App in Development and Staging environments (개발/스테이징 환경의 앱도 테스트 가능)
• Absolute Security, Guaranteed (보증된 완전한 보안)
• Active Support via Chat & emails (챗과 이메일로 지원)
• Increased Productivity with Integrations like Jira, Slack, Github & more (Jira, Slack, Github등 통합)
• IP Geolocation Testing from 100+ different countries (100 개국 이상 IP 위치 테스트 가능)

• Real device cloud (실제 디바이스 클라우드)
• Mobile android emulators & iOS simulators (모바일 안드로이드 에뮬레이터 & iOS 시뮬레이터)
• Mobile app beta testing (모바일 앱 베타 테스팅)
• Error monitoring & reporting (에러 모니터링 & 리포팅)

• Android 및 iOS 장치를 PC에 연결하여 미러링 할 수 있는 소프트웨어
• Vysor pro 사용자의 경우 무선 미러링 가능

3–2. 플랫폼별 장점

• 개인이나 소규모 기업에서 사용하기에 비용적인 측면에서 장점
• 디바이스 로그를 바로 확인 가능
• 통신 환경을 변경하여 테스트 가능
• 리얼 디바이스로 테스트 가능
• 수동 및 자동화 테스트를 모두 지원
• 다른 해상도로 애플리케이션을 테스트

• 유저 제한 없이 병렬로 실행하는 단말의 제한만 있음
• 테스트 시간 제한 없음
• 1000개 이상의 브라우저, real mobile devices, emulators & simulators
• REST API Access

• 가격이 저렴하다.

3–3. 플랫폼별 단점

• 로컬로 설치된 가상 머신인 만큼 응답 시간이 빠르지 않음
• 실제 장치에서 일부 버그 식별 불가

• Browser Stack 대비 $100 이상 비용 추가 발생
• 브라우저 창 형식으로 테스트 가능 (실제 디바이스 모양 X)

• 인증 없이 외부에서 링크만으로 접속 가능하여 안전에 취약
• 관리 계정을 제외하고는 로그인이 없고 접근 시 발생하는 로그도 없어 안전에 취약
• 외부에서 접근 시 지연 현상 발생
• 실제 연결된 테스트 폰이 활성화 상태로 유지

3–4. 플랫폼 비교 후 최종 후보 (Browser Stack으로 최종 결정)

• 저렴한 비용으로 실제 테스트 기기의 모양을 구현한 Browser Stack
• User 제한이 없는 Sauce Labs

4. Browser Stack 사용법

4–1. 테스트 디바이스 선택하기

• Browser Stack 사이트에 접속합니다. 링크 : https://www.browserstack.com/

• 우측 상단 Sign in > 가입(사용 가능) 계정으로 로그인을 합니다.

• OS (Android / iOS) 및 디바이스를 선택합니다.

4–2. 테스트 앱 설치하기

• 테스트 앱을 설치합니다.

[ SELECT SOURCE ]

ⅰ) Uploaded Apps : iOS는 ipa / AOS는 apk, aab 파일을 로컬에서 업로드 후 앱 테스트 가능 (두 계정이 한 팀으로 초대된 경우, 하나의 계정에서 파일을 한 번 업로드 하면 다른 계정에서도 동일 파일로 테스트 가능)

ⅱ) Sync with App Center : App Center에서 파일 다운로드 후 테스트 가능

ⅲ) Install via TestFlight : iOS의 경우 TestFlight 로그인 / 파일 다운로드 후 테스트 가능

ⅳ) Install via Play Store : Android 스토어에 등록된 앱 설치 시 사용하며, 소스 선택 후 Android 디바이스 선택하여 앱 설치 / 테스트 가능

ⅴ) Install via App Store : iOS 스토어에 등록된 앱 설치 시 사용하며, 소스 선택 후 iOS 디바이스 선택하여 앱 설치 / 테스트 가능

• 앱 실행 후 테스트를 진행합니다.

4–3. Tool Bar 기능 사용하기

• Tool Bar 항목들을 선택하여 여러 가지 기능을 사용 할 수 있습니다

[좌측 Tool Bar]

ⅰ) Show Home Screen : 테스트 디바이스의 홈 버튼과 동일한 기능

ⅱ) Volume : 사운드를 조절할 수 있는 기능

ⅲ) View Open Apps : 열려있는 창 보기 기능

ⅳ) Install New App : 업로드 중인 다른 앱을 재설치 할 수 있는 기능

ⅴ) Capture Screenshot : 스크린샷을 찍고 저장할 수 있는 기능

ⅵ) Kill/Uninstall : 설치한 앱 초기화 / 삭제할 수 있는 기능

ⅶ) Android / iOS Settings : 디바이스 암호 및 앱 방향을 설정할 수 있는 기능

ⅷ) Rotate : 가로 모드, 세로 모드로 변경할 수 있는 기능

ⅸ) Change Location : 디바이스 GPS를 변경할 수 있는 기능

ⅹ) Throttle Network : 연결된 네트워크 성능 변경 / 타임아웃 등 테스트 가능

ⅹⅰ) Files & Media : 사진/동영상/파일 등을 디바이스에 저장하는 기능

ⅹⅱ) Change Language : 언어를 변경할 수 있는 기능 (Remember for all Android / iOS sessions 체크하여 OS에 따라 다음 실행 시에도 사용 가능)

ⅹⅲ) Screen Reader : 디바이스 포커스 된 항목을 음성으로 안내하는 기능

ⅹⅳ) Device Name : 테스트 디바이스의 스펙을 확인할 수 있는 기능

QA 검증을 하게 될 때에는 빌드에 따라 테스트 및 비교 확인을 해야 하는 경우가 많고, 또한 이슈 발생 시 해당 현상을 사진이나 영상으로 남겨야 하는 작업이 수반됩니다. 따라서 실제로 검증을 진행할 때 Install New App 과 Capture Screenshot 기능이 생각보다 유용하다고 느껴졌습니다. 해당 기능들을 간단히 살펴보자면

▶ Install New App 선택 시 설치된 업로드 앱 리스트 노출되어 새로 앱 설치를 할 수 있습니다.

▶ Capture Screenshot 선택 시에는 화면 캡쳐 후 저장 경로 설정 화면이 노출되고, 원하는 경로에 캡쳐한 파일을 저장할 수 있습니다.

[상단 Tool Bar]

ⅰ) Switch Device : 다른 테스트 디바이스로 변경할 수 있는 기능

ⅱ) Local testing : 연결되어 있는 로컬 네트워크에 접속할 수 있게 하는 기능

ⅲ) Zoom : 디바이스 화면을 확대 또는 축소할 수 있는 기능

ⅳ) Record session : 화면을 녹화하여 테스트할 수 있는 기능

ⅴ) DevTool : 우측 DevTool Bar 노출할 수 있는 기능

ⅵ) Report on Jira : Jira에 바로 이슈 등록할 수 있는 기능 (Jira 연동 필요)

ⅶ) Settings : Idle Session 시간을 설정할 수 있는 기능 (15분 / 10분 / 5분)

ⅷ) Stop Session : 테스트를 중단할 수 있는 기능

※ Local testing 세팅 방법 (중요)

PC에 연결되어 있는 로컬 네트워크로 앱 테스트 서버에 접속하려면 반드시 Force Local 설정 필요하기 때문에 검증 시 매우 중요한 설정 단계입니다.

a. 최초 Local 테스트 시에는 Windows / Mac > Browser Stack App 설치

b. 설치 시 noti 영역에 Browser Stack App 생성

c. 메뉴 > Options > Service Accounts > Access Key 입력

d. Access key : Browser Stack 로그인 후 초기 페이지에서 프로필 아이콘 > Settings 클릭 > Access Key 복사 > Service Accounts > Access key 입력/저장

e. Local testing > General > Resolve all URLs through my network 체크박스 선택 시 Force Local : ON으로 설정 변경

[우측 DevTool Bar]

ⅰ) Logcat : 앱 실행 시 Debug 할 수 있는 기능

ⅱ) Inspect : Xpath 등으로 페이지에서 UI 레이아웃 등 계층별로 위치와 컬러 등의 개발 상태를 확인할 수 있는 기능 (일부 웹뷰 페이지의 경우 확인이 불가할 수 있음)

ⅲ) Network : Proxy로 앱과 서버의 통신을 확인할 수 있는 기능

4–4. Browser Stack으로 검증하기

QA팀에서는 Browser Stack을 통해 한정된 자원 속에서도 다양한 OS와 디바이스로 테스팅을 수행할 수 있습니다. 이를 통해 호환성 테스팅, UI 테스팅 등 검증 커버리지를 높이고, 계속해서 변화하고 있는 소프트웨어 환경에 대응하여 더욱 높은 품질의 서비스를 제공하기 위해 노력하고 있습니다.

5. 사용 후기

우선 제가 Browser Stack을 실제로 사용하면서 느꼈던 단점부터 말씀드리자면, 실제 디바이스로 테스트를 할 때보다 느린 동작 때문에 빠르게 검증이나 확인이 필요할 때에는 조금 답답하다는 느낌을 받았습니다. 또한 동작 없이 일정 시간이 지나면 세션 타임아웃으로 앱을 재설치해야 했습니다. 이러한 이유로 실제 디바이스로 직접 테스팅 하는 것 보다는 소요되는 시간이 조금 더 필요하다는 불편함도 존재했지만 검증에 영향이 있을 정도는 아니었던 반면, 장점은 더 많았습니다.

검증 업무를 하다보면 발생하는 이슈가 단말 특성에 따라 그 현상이 다르게 나타날 수 있습니다. 이런 경우 실제 디바이스를 보유하고 있지 않음에도 여러가지 디바이스를 활용하여 테스트하며 각자 특성에 따라 다르게 발현하는 현상을 모두 확인할 수 있는 부분이 매우 큰 장점이라고 생각합니다. 또한 저렴한 비용으로 다양한 테스팅이 가능하기 때문에 검증 커버리지를 높여 품질 높은 서비스를 제공할 수 있습니다. 그 외에도 테스트에 필요한 지원 기능들이 Tool Bar의 적재적소에 잘 갖추어져 있고, 사용 방법이 어렵지 않아 다소 생소해 보이더라도 우선 접근해 쉽게 사용해 볼 수 있었습니다.

6. 소개를 마치며…

지금까지 Browser Stack를 저희 회사에 도입하게 된 배경과 검토 과정, 간단한 소개, 그 활용 방법에 대해 말씀드렸습니다. 이후에 저는 자동화 테스트까지 가능할 수 있도록 계획을 설정하고 적극 활용하여 QA 엔지니어로서 제가 담당하는 프로덕트의 품질 보증과 사용성 증대라는 목표에 한 발 더 다가갈 수 있도록 업무를 수행해 나가겠습니다.

감사합니다.