사이트가 Chrome과 Android에서 원활하게 실행되는 것을 확인했다고 할 일이 끝나는 것은 아닙니다. 기기 모드는 iPhone과 같은 다양한 기기를 시뮬레이션할 수 있지만 다른 브라우저의 에뮬레이션 솔루션을 확인하는 것이 좋습니다.
요약
- 특정 기기가 없거나 무언가를 점검하려는 경우 가장 좋은 방법은 브라우저 내에서 바로 기기를 에뮬레이션하는 것입니다.
- 기기 에뮬레이터와 시뮬레이터를 사용하면 워크스테이션의 다양한 기기에서 개발 사이트를 모방할 수 있습니다.
- 클라우드 기반 에뮬레이터를 사용하면 다양한 플랫폼에서 사이트의 단위 테스트를 자동화할 수 있습니다.
브라우저 에뮬레이터
브라우저 에뮬레이터는 사이트의 응답성을 테스트하는 데 적합하지만 모바일 브라우저에 표시되는 API, CSS 지원 및 특정 동작의 차이를 에뮬레이션하지는 않습니다. 실제 기기에서 실행되는 브라우저에서 사이트를 테스트하여 모든 것이 예상대로 작동하는지 확인하세요.
Firefox의 반응형 디자인 보기
Firefox에는 반응형 디자인 보기가 있어서 사용자가 특정 기기라는 관점에서 생각하지 않고 가장자리를 드래그하여 디자인이 일반 화면 크기나 자체 크기에서 어떻게 변경되는지 살펴볼 수 있습니다.
Edge의 F12 에뮬레이션
Windows Phone을 에뮬레이션하려면 Microsoft Edge의 내장 에뮬레이션을 사용합니다.
Edge는 기존 호환성과 함께 제공되지 않으므로 IE 11의 에뮬레이션을 사용하여 이전 버전의 Internet Explorer에서 페이지가 어떻게 표시되는지 시뮬레이션합니다.
기기 에뮬레이터 및 시뮬레이터
기기 시뮬레이터와 에뮬레이터는 브라우저 환경뿐만 아니라 전체 기기를 시뮬레이션합니다. OS 통합이 필요한 항목을 테스트하는 데 유용합니다(예: 가상 키보드를 사용한 양식 입력).
Android Emulator
Android Emulator의 Stock Browser
현재로서는 Android Emulator에 Chrome을 설치할 수 있는 방법이 없습니다. 하지만 이 가이드의 뒷부분에서 다루는 Android 브라우저, Android용 Chromium Content Shell, Firefox를 사용할 수 있습니다. Chromium Content Shell은 동일한 Chrome 렌더링 엔진을 사용하지만 브라우저별 기능은 제공되지 않습니다.
Android Emulator는 Android SDK와 함께 제공되며 여기에서 다운로드해야 합니다. 그런 다음 안내에 따라 가상 기기를 설정하고 에뮬레이터를 시작합니다.
에뮬레이터가 부팅되면 브라우저 아이콘을 클릭합니다. 그러면 이전 Android용 Stock Browser에서 사이트를 테스트할 수 있습니다.
Android의 Chromium Content Shell
Android Emulator 콘텐츠 셸
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
최신 IE VM
Modern.IE 가상 머신을 사용하면 VirtualBox(또는 VMWare)를 통해 컴퓨터에서 다양한 버전의 IE에 액세스할 수 있습니다. 여기의 다운로드 페이지에서 가상 머신을 선택합니다.
클라우드 기반 에뮬레이터 및 시뮬레이터
에뮬레이터를 사용할 수 없고 실제 기기도 액세스할 수 없다면 클라우드 기반 에뮬레이터를 차선책입니다. 실제 기기 및 로컬 에뮬레이터보다 클라우드 기반 에뮬레이터의 큰 장점은 다양한 플랫폼에서 사이트의 단위 테스트를 자동화할 수 있다는 것입니다.
- BrowserStack (상용)은 수동 테스트에 사용하는 가장 쉬운 방법입니다. 운영체제를 선택하고 브라우저 버전과 기기 유형을 선택한 후 찾아볼 URL을 선택하면 상호작용할 수 있는 호스팅된 가상 머신이 가동됩니다. 동일한 화면에서 여러 에뮬레이터를 실행하여 동시에 여러 기기에서 앱의 디자인과 분위기를 테스트할 수도 있습니다.
- SauceLabs (상업용)를 사용하면 에뮬레이터 내에서 단위 테스트를 실행할 수 있습니다. 이 기능은 사이트를 통한 흐름을 스크립팅하고 나중에 다양한 기기에서 녹화된 동영상을 시청하는 데 매우 유용합니다. 사이트에서 수동 테스트를 실행할 수도 있습니다.
- Device Anywhere (상용)는 에뮬레이터를 사용하지 않고 원격으로 제어할 수 있는 실제 기기를 사용합니다. 이는 특정 기기에서 문제를 재현해야 하고 이전 가이드에 있는 어떤 옵션에서도 버그를 볼 수 없는 경우에 매우 유용합니다.
- LambdaTest (상용)를 사용하면 2,000개가 넘는 브라우저와 운영체제 조합에서 수동 교차 브라우저 테스트를 실행할 수 있습니다. 사용자는 복잡한 버그 동영상을 녹화하고 MS Teams, Slack 등의 통합을 통해 공유할 수 있습니다. 사용자는 테스트를 병렬로 실행하여 테스트 속도를 높일 수 있습니다.