2022. 9. 29. 07:50ㆍUX Engineer 이야기
들어가며
업무를 진행하다 보면 PC 환경이 아닌 모바일 환경의 테스트를 직접 해보고 싶을 때가 많다.
물론 본인이 사용하는 모바일 기기로 테스트를 진행하겠지만 따로 테스트용 모바일 기기를 개인적으로 가지고 있지 않다면 Android/iOS 모두를 확인하기에 어려운 현실이다.
최근 그룹 내 장비를 Mac Book으로 교체 중이라 Mac Book에서 Android와 iOS 에뮬레이터를 쉽게 사용할 수 있게 되어 이런 에뮬레이터를 통한 테스트 방법을 소개하고자 한다.
Android
Android Studio를 이용하면 Android 에뮬레이터를 실행할 수 있다.
Android Studio 설치
당연하겠지만 Android Studio부터 설치해야 한다.
위 링크로 접속하여 설치 파일을 내려받아 설치하도록 하자.
Android Studio 최초 실행
우리의 목적은 Android 개발이 아닌 Android 에뮬레이터 구동이 목적이니 다른 세세한 부분들은 신경 쓰지 말도록 하자.
Android Studio를 실행하면, 아래 순서대로 따라오면 된다.
- Import Android Studio Setting 팝업에서 Do not import settings 선택
- Data sharing 안내 팝업 또한 Don’t send 선택
- Android Studio Wizard 화면은 전부 기본값으로 실행(테마는 취향에 맞는 걸 선택하자)
설치 화면
에뮬레이터 설정
설치가 완료되면 Android Studio의 웰컴 화면이 등장하게 된다.
이제 에뮬레이터를 실행하기 위한 설정을 해보자.
웰컴 화면
- More Actions에서 SDK Manager 선택
- 설치하고 싶은 Android 버전을 선택 후 Apply 선택하면 뜨는 확인 창에서 OK를 누르면 다운로드가 진행된다.
SDK 설치
- 웰컴 화면에서 More Actions의 Virtual Devices Manager 실행
- 왼쪽 위의 Create Device 메뉴에서 Virtual Device 추가
- Select Hardware에서는 적절한 하드웨어를 선택
- 원하는 OS 선택
- Device 설정 정보는 기본 설정 그대로 사용
Virtual Device 생성
에뮬레이터 실행
위와 같은 과정을 거치면 VDM 화면에 추가한 Device가 보인다.
생성된 Virtual Device
여기서 실행하려고 하는 Device 리스트의 > 버튼을 클릭하면 에뮬레이터가 실행되게 된다.
Virtual Device 실행
이제 에뮬레이터에서 크롬 브라우저를 통해 확인하고 싶은 화면을 볼 수 있다.
Virtual Device
Chrome Inspect 사용하기
화면을 확인한다고 하더라도 우리에겐 크롬 개발자 도구를 사용하는 게 중요하다.
에뮬레이터를 실행한 PC에서 크롬을 실행한 뒤 주소창에 chrome://inspect/를 입력 후 접속해보면 아래와 같은 화면이 나오게 된다.
chrome://inspect/ 화면
여기서 아래 Remote Target 부분을 살펴보면 Android Studio에서 실행한 에뮬레이터가 리스트에 보인다.
그러면 아래의 inspect 버튼을 통해 디버깅할 수 있다.
에뮬레이터 개발자도구
iOS
Mac에서 iOS 시뮬레이터를 사용하는 방법은 매우 간단하다.
우선 App Store에서 Xcode를 검색하여 설치하자. 아마도 Mac 장비로 업무를 진행하다 보면 자연스레 설치되어 있을 수 있다.
App Store
설치 후 바로 사용해도 상관이 없으나 우리에겐 몇 가지의 iOS 버전이 필요할 수 있으므로 Xcode를 실행하여 필요한 OS를 내려받도록 하자.
Xcode 메뉴의 Preferences를 누르면 나오는 창에서 Components 탭을 눌러보면 필요한 OS를 내려받을 수 있다.
Xcode
그런 뒤 Xcode 메뉴의 Open Developer Tool에서 Simulator를 실행하거나, Mac의 Spotlight에서 Simulator를 실행하면 iOS 시뮬레이터가 실행된다.
Simulator 실행
만약 다른 OS 버전 및 기종을 확인하고 싶다면 File 메뉴의 Open Simulator에서 원하는 OS 버전의 기종으로 Simulator를 실행할 수 있다.
다른 OS/기종 선택
실행이 완료되면 아래와 같은 화면을 볼 수 있으며, Safari를 실행하여 원하는 사이트를 확인하면 된다.
실행된 시뮬레이터
개발자 도구 사용
iOS 시뮬레이터도 마찬가지로 우리에겐 개발자 도구가 필요하다.
사파리를 실행하여 개발자용 메뉴에서 시뮬레이터를 선택할 수 있고, 이를 눌러주면 끝.
개발자 도구 사용
마치며
그동안 Android Studio는 귀찮았고, iOS 시뮬레이터는 작업 환경이 따라주지 않아 이러한 에뮬레이터를 사용할 생각은 없었다.
그러나 앞서 이야기하였듯이 우리 그룹의 장비가 Mac Book으로 교체되고 있고, Mac 환경에서의 iOS 시뮬레이터의 세팅은 정말 간단하므로 앞으로 에뮬레이터의 활용도가 높아질 거라 예상이 된다.
이 글은 pxd XE Group Blog에서도 보실 수 있습니다.