파이썬 Selenium 모바일 에뮬레이션 Emulation.setDeviceMetricsOverride와 UA 변경 방법

🔗 Selenium 모바일 에뮬레이션의 필요성

오늘날 대부분의 사용자는 스마트폰을 통해 웹사이트에 접속합니다.
따라서 웹사이트의 품질을 확인할 때 데스크톱 환경만 고려하면 큰 문제가 생길 수 있습니다.
특히 반응형 웹 디자인, 모바일 전용 레이아웃, 터치 기반의 인터페이스가 정상적으로 작동하는지 반드시 확인해야 하죠.
실제 기기를 일일이 준비하는 것은 시간과 비용이 많이 들기 때문에, Selenium의 모바일 에뮬레이션 기능은 효율적인 대안이 됩니다.

이 기능을 사용하면 브라우저가 특정 모바일 기기의 화면 크기와 해상도를 모방하도록 설정할 수 있습니다.
또한 UA(User Agent) 문자열까지 변경하면 서버가 해당 요청을 모바일 기기에서 온 것으로 인식하기 때문에, 실제 스마트폰으로 접속했을 때와 거의 동일한 결과를 얻을 수 있습니다.
즉, 모바일 뷰에서의 오류나 버그를 빠르게 발견할 수 있고, QA 과정에서도 중요한 역할을 합니다.

📱 모바일 환경에서 테스트해야 하는 이유

• 📊전체 웹 트래픽의 절반 이상이 모바일 기기에서 발생
• 🖼️반응형 레이아웃에서 디자인 깨짐이나 UI 오류 발견 가능
• ⚡웹 성능과 로딩 속도를 실제 환경과 가깝게 검증
• 🔍모바일 전용 기능(예: 위치 기반 서비스, 뷰포트 전환 등) 확인 가능

특히 쇼핑몰, 예약 서비스, 뉴스 사이트처럼 트래픽이 많은 서비스에서는 모바일 사용성 테스트가 필수적입니다.
Selenium 에뮬레이션 기능을 사용하면 별도의 기기를 구매하거나 세팅하지 않고도 손쉽게 다양한 환경을 검증할 수 있어 개발자와 QA 담당자 모두에게 효율적인 솔루션이 됩니다.

🛠️ Emulation.setDeviceMetricsOverride 설정 방법

Selenium은 기본적으로 데스크톱 브라우저 환경을 기반으로 동작합니다.
하지만 크롬 드라이버(ChromeDriver)와 함께 Chrome DevTools Protocol (CDP)을 활용하면 모바일 기기 환경을 흉내낼 수 있습니다.
그 핵심 API가 바로 Emulation.setDeviceMetricsOverride 입니다.
이 메서드는 브라우저 뷰포트의 해상도, 비율, 터치 지원 여부 등을 지정할 수 있어 특정 기기의 화면 특성을 재현할 수 있습니다.

⚙️ 기본 설정 코드 예제

from selenium import webdriver

options = webdriver.ChromeOptions()
driver = webdriver.Chrome(options=options)

# CDP 실행
driver.execute_cdp_cmd("Emulation.setDeviceMetricsOverride", {
    "width": 390,       # 기기 화면 너비
    "height": 844,      # 기기 화면 높이
    "deviceScaleFactor": 3,  # 픽셀 밀도
    "mobile": True      # 모바일 환경 여부
})

driver.get("https://www.example.com")

위 코드는 iPhone 12와 유사한 해상도와 밀도를 설정한 예시입니다.
width, height, deviceScaleFactor 값을 조절하면 다양한 기기를 재현할 수 있습니다.
또한 mobile=True 옵션을 주면 브라우저가 모바일 모드로 전환되어 터치 이벤트가 활성화됩니다.

📌 주요 파라미터 설명

이처럼 CDP를 통해 뷰포트와 밀도를 변경하면 다양한 모바일 기기의 화면 환경을 손쉽게 테스트할 수 있습니다.
단순히 브라우저 크기를 줄이는 것과 달리, 기기 스펙을 반영하기 때문에 실제 모바일과 더욱 유사한 결과를 얻을 수 있습니다.

⚙️ User Agent 변경으로 모바일 브라우저 흉내내기

모바일 기기를 흉내 내기 위해 화면 해상도만 바꾸는 것은 충분하지 않습니다.
웹 서버는 종종 User Agent(UA)를 확인하여 모바일 또는 데스크톱 페이지를 구분합니다.
따라서 UA를 함께 변경해야 실제 모바일 접속 환경과 가까운 결과를 얻을 수 있습니다.

예를 들어 데스크톱 크롬 UA로 요청을 보내면 반응형 웹이더라도 데스크톱 전용 페이지가 응답될 수 있습니다.
하지만 iPhone이나 Galaxy UA로 설정하면 서버가 이를 모바일로 인식하여 모바일 전용 페이지를 보여주게 됩니다.
이는 특히 네이버, 구글, 쇼핑몰 사이트와 같이 모바일 전용 레이아웃이 있는 사이트를 테스트할 때 반드시 필요한 과정입니다.

📝 UA 변경 코드 예제

from selenium import webdriver

options = webdriver.ChromeOptions()
options.add_argument("--user-agent=Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) "
                     "AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1")

driver = webdriver.Chrome(options=options)
driver.get("https://www.whatismybrowser.com/")

위 코드는 iPhone Safari UA를 지정한 예시입니다.
테스트 페이지에 접속하면 브라우저가 실제 모바일 기기처럼 인식되는 것을 확인할 수 있습니다.
이 방식은 Emulation.setDeviceMetricsOverride와 병행하면 더욱 정밀한 모바일 시뮬레이션이 가능합니다.

📌 UA 변경 시 주의할 점

또한 일부 사이트는 UA만으로는 충분하지 않고, 실제 모바일 전용 쿠키나 헤더를 요구하기도 합니다.
따라서 실무에서는 UA 변경과 함께 화면 크기, DPR 설정을 동시에 적용하는 것이 가장 권장되는 접근 방식입니다.

🔌 자주 쓰이는 모바일 디바이스 프로필 예시

모바일 환경을 테스트할 때 매번 해상도와 UA를 직접 입력하는 것은 번거로울 수 있습니다.
따라서 대표적인 스마트폰 기기의 해상도와 UA를 미리 준비해 두면 훨씬 편리하게 테스트할 수 있습니다.
특히 자주 사용되는 iPhone, Galaxy, Pixel 등의 프로필은 Selenium 스크립트에 바로 적용하기 좋습니다.

📱 대표 디바이스별 설정값

이처럼 여러 디바이스 프로필을 준비해 두면 상황에 따라 쉽게 전환하면서 테스트할 수 있습니다.
예를 들어 특정 쇼핑몰이 iOS Safari에서 결제 버튼이 사라지는 문제를 보이는지, 안드로이드 크롬에서 광고 배너가 정상 표시되는지 등을 빠르게 확인할 수 있습니다.

📌 활용 팁

💡 모바일 에뮬레이션 활용 팁과 주의사항

Selenium의 모바일 에뮬레이션은 매우 강력한 기능이지만, 몇 가지 주의할 점도 있습니다.
실제 기기를 완벽하게 대체할 수는 없으며, 브라우저 환경을 흉내 내는 것에 불과하다는 점을 기억해야 합니다.
그럼에도 불구하고 효율적인 QA와 개발 환경을 구축하는 데는 충분히 도움이 되므로, 적절한 활용법을 익혀두는 것이 중요합니다.

⚠️ 자주 발생하는 문제와 해결 방법

• 🖥️모바일 전용 기능(예: 터치 제스처, 센서 연동)은 에뮬레이션에서 제한적으로만 동작
• 📡네트워크 속도는 실제 모바일 환경과 다를 수 있으므로 Network.setConditions 기능 병행 필요
• 🔐일부 웹사이트는 UA만 바꿔서는 부족하고, 쿠키·헤더까지 세팅해야 정상 동작
• 🧪실제 기기와 100% 동일한 테스트가 필요하다면 반드시 실물 기기에서도 검증

📌 실무 활용 팁

정리하자면, 모바일 에뮬레이션은 빠른 테스트와 효율적인 디버깅에 큰 도움을 주지만, 한계도 존재합니다.
따라서 개발 단계에서는 Selenium 에뮬레이션을 적극 활용하고, 배포 전에는 반드시 실제 기기를 통해 크로스체크하는 방식이 가장 이상적인 접근법이라 할 수 있습니다.

❓ 자주 묻는 질문 (FAQ)