사이트가 Chrome과 Android에서 모두 잘 실행되는 것을 확인했다고 해서 할 일이 끝난 것은 아닙니다. Device Mode로 iPhone과 같은 여러 다른 기기를 시뮬레이션할 수 있지만, 그래도 에뮬레이션을 위한 다른 브라우저의 솔루션을 확인해보는 것이 좋습니다.
요약
- 특정한 기기를 염두에 둔 것이 아니거나 부분 점검할 항목이 있는 경우, 최선의 선택지는 해당 기기를 브라우저 자체 내에서 에뮬레이트하는 것입니다.
- 기기 에뮬레이터와 시뮬레이터를 사용하면 자신의 워크스테이션을 사용하여 광범위한 기기에서 개발 사이트를 흉내낼 수 있습니다.
- 클라우드 기반 에뮬레이터를 사용하면 다양한 플랫폼에서 사이트의 단위 테스트를 자동화할 수 있습니다.
브라우저 에뮬레이터
브라우저 에뮬레이터는 사이트의 반응성을 테스트하기엔 좋지만 모바일 브라우저에 표시되는 API, CSS 지원, 특정 동작의 차이를 에뮬레이트할 수 없습니다. 사이트를 실제 기기에서 실행되는 브라우저에서 테스트하여 모든 것이 예상대로 작동하는지 확인합니다.
Firefox의 반응형 디자인 뷰
Firefox에는 반응형 디자인 뷰가 있어 특정 기기 관점에서 생각하던 것을 멈추고 대신 가장자리를 드래그하여 디자인이 일반 화면 크기나 개발자가 설정한 크기에서 어떻게 변하는지 살펴볼 수 있습니다.
Edge의 F12 에뮬레이션
Windows Phone을 에뮬레이트하려면 Microsoft Edge의 기본 제공 에뮬레이션을 사용하세요.
Edge는 레거시 호환성이 탑재되지 않았으므로, 이전 버전의 Internet Explorer에서 페이지가 어떤 모습일지 시뮬레이션하려면 IE 11의 에뮬레이션을 사용해야 합니다.
기기 에뮬레이터 및 시뮬레이터
기기 시뮬레이터와 에뮬레이터는 브라우저 환경만이 아니라 전체 기기를 시뮬레이션합니다. 이들은 OS 통합이 필요한 요소를 테스트하는 데 유용합니다(예를 들어 가상 키보드로 양식 입력).
Android Emulator
Android Emulator의 Stock Browser
지금으로서는 Android Emulator에 Chrome을 설치할 방도가 없습니다. 하지만 Android 브라우저, Chromium Content Shell, Firefox for Android를 사용할 수 있습니다. 이에 대한 내용은 이 가이드의 뒷부분에서 다룹니다. Chromium Content Shell은 동일한 Chrome 렌더링 엔진을 사용하지만 브라우저별 기능은 전혀 제공되지 않습니다.
Android Emulator는 Android SDK와 함께 제공되며 여기에서 다운로드해야 합니다. 그런 다음 안내에 따라 가상 기기를 설정하고 에뮬레이터를 시작합니다.
에뮬레이터가 부팅되면 브라우저 아이콘을 클릭합니다. 그러면 구버전의 Android용 Stock Browser에서 사이트를 테스트할 수 있습니다.
Android에서 Chromium Content Shell 사용
Android Emulator Content Shell
Android용 Chromium Content Shell을 설치하려면 에뮬레이터를 실행 중인 상태로 두고 명령 프롬프트에서 다음 명령어를 실행합니다.
git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh
이제 Chromium Content Shell로 사이트를 테스트할 수 있습니다.
Android용 Firefox
Android Emulator의 Firefox 아이콘
Chromium의 Content Shell과 마찬가지로, 에뮬레이터에 Firefox를 설치하기 위해 APK를 가져올 수도 있습니다.
https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/에서 올바른.apk 파일을 다운로드합니다.
여기에서 다음 명령을 사용하여 열려 있는 에뮬레이터 또는 연결된 Android 기기에 파일을 설치할 수 있습니다.
adb install <path to APK>/fennec-XX.X.XX.android-arm.apk
iOS 시뮬레이터
Mac OS X용 iOS 시뮬레이터는 Xcode가 함께 제공되며, App Store에서 설치할 수 있습니다.
설치를 마친 후 Apple 문서를 통해 시뮬레이터를 사용하는 방법을 알아봅니다.
Modern.IE
Modern IE VM
Modern.IE 가상 머신을 사용하면 VirtualBox(또는 VMWare)를 통해 사용자의 컴퓨터에서 여러 가지 버전의 IE에 액세스할 수 있습니다. 여기의 다운로드 페이지에서 가상 머신을 선택합니다.
클라우드 기반 에뮬레이터 및 시뮬레이터
에뮬레이터를 사용할 수 없고 실제 기기도 이용할 수 없는 경우라면, 차선책으로 클라우드 기반 에뮬레이터를 사용하면 됩니다. 실제 기기와 로컬 에뮬레이터에 비해 클라우드 기반 에뮬레이터의 가장 큰 장점은 다양한 플랫폼에 걸쳐 사이트의 단위 테스트를 자동화할 수 있다는 점입니다.
- BrowserStack (상용)은 수동 테스트에 사용되는 가장 간편한 방법입니다. 운영체제를 선택하고 브라우저 버전과 기기 유형을 선택한 다음, 탐색할 URL을 선택하면 사용자와 상호작용할 수 있는 호스팅된 가상 머신이 나타납니다. 또한 같은 화면에서 여러 에뮬레이터를 실행할 수 있으므로 동시에 여러 기기에서 앱의 디자인을 테스트할 수 있습니다.
- SauceLabs (상용)를 사용하면 에뮬레이터 내부에서 단위 테스트를 실행할 수 있고, 사이트의 흐름을 스크립팅하는 데 무척 유용합니다. 또한 나중에 이 과정을 녹화한 동영상을 다양한 기기에서 볼 수도 있습니다. 사이트에서 수동 테스트를 진행할 수도 있습니다.
- Device Anywhere (상용)는 에뮬레이터가 아니라 원격으로 제어할 수 있는 실제 기기를 사용합니다. 특정 기기에서 문제를 재현해야 하며, 이전 가이드에 소개된 여러 선택지 중 어느 것을 통해서도 버그를 확인할 수 없는 경우 매우 유용합니다.
- LambdaTest (상용)를 사용하면 2,000개 이상의 브라우저와 운영체제 조합에서 수동 교차 브라우저 테스트를 실행할 수 있습니다. 사용자는 복잡한 버그의 동영상을 녹화하고 MS Teams, Slack 등의 통합을 통해 공유할 수 있습니다. 사용자는 테스트를 동시에 실행하여 테스트 속도를 높일 수 있습니다.