크롬 아이폰 모드, 실제 사파리와 왜 다를까?
크롬에서 iPhone을 골라 화면을 다 맞췄는데, 실제 폰에서 열자 버튼이 밀려 있다. 진짜 Safari에서 생긴 차이는 어디서 열어 검사할까?
- 크롬에서 iPhone을 선택해도 Safari가 실행되는 것은 아니다.
- Device Mode는 화면 크기·픽셀 비율·입력 조건을 바꿔 반응형 배치를 점검하는 데 쓴다.
- 실제 아이폰의 차이는 Mac Safari의 Develop 메뉴에서 해당 기기 페이지를 열어 검사한다.
iPhone 프리셋을 골라도 실행 중인 브라우저는 크롬이다
크롬의 iPhone 모드는 Safari 호환성 검사를 대신하지 못한다. Device Mode 공식 문서는 이 기능을 데스크톱에서 모바일의 사용 조건을 흉내 내는 도구로 설명한다. 실제 iPhone에서 코드를 실행하는 방식이 아니다.
사용자 에이전트를 Safari처럼 바꿔도 마찬가지다. Chrome의 사용자 에이전트 문서에 따르면 이 설정은 서버에 브라우저를 어떻게 알리는지를 바꾸며, Chrome 내부 동작을 바꾸지는 않는다. 서버가 다른 콘텐츠를 보내는지는 시험할 수 있지만, Safari에서 같은 CSS와 자바스크립트가 어떻게 실행되는지까지 증명하지는 못한다.
따라서 크롬에서는 맞고 아이폰에서는 어긋난다는 사실만으로 프리셋의 가로 폭이 틀렸다고 결론 내릴 수 없다. 표시 조건과 실제 브라우저 동작을 나눠 확인해야 한다.
기기 목록은 출발점이고, 화면 조건은 각각 확인한다
10월 DevTools 업데이트는 iPhone 16·Pixel 9·Pixel 10 등의 프리셋 추가와 기기군별 목록 정리를 알렸다. 기기 선택은 편해졌지만, 최신 모델 이름이 Safari 실행 환경까지 포함한다는 뜻은 아니다.
| 크롬에서 바꿀 조건 | 먼저 확인할 질문 |
|---|---|
| Dimensions의 폭·높이와 회전 | 좁은 화면과 가로 화면에서 요소가 올바르게 배치되는가? |
| Device pixel ratio(DPR) | CSS 픽셀과 화면 픽셀의 비율을 어떤 값으로 시험하고 있는가? |
| Device type의 Mobile·Desktop 및 touch 설정 | 이번 검사가 터치 입력인지 마우스 클릭 조건인지 구분했는가? |
| 사용자 에이전트 | 서버가 브라우저 식별값에 따라 다른 콘텐츠를 보내는가? |
DevTools를 열고 Toggle device toolbar를 켠 뒤 Dimensions에서 기기를 고른다. 반응형 분기점을 확인하려면 Responsive에서 폭을 바꿔 본다. 표의 질문은 각 기능을 실제 화면 검증에 적용한 순서다. 여기서 레이아웃을 고친 다음 Safari에서 같은 동작을 다시 재현한다.
Mac에서 실제 아이폰의 Safari 페이지를 연다
아이폰과 Mac을 연결하면 아이폰에서 실행 중인 페이지를 Mac의 Web Inspector로 검사할 수 있다. 준비는 양쪽에서 한다.
- Mac Safari에서
Settings → Advanced로 들어가Show features for web developers를 켠다. - 아이폰의
설정 → 앱 → Safari → 고급에서웹 속성(Web Inspector)을 켠다. - 아이폰을 케이블로 Mac에 연결한다. 기기에 Mac 신뢰 요청이 나오면 연결할 Mac인지 확인한다.
- 아이폰 Safari에서 문제 페이지를 연다.
- Mac Safari의
Develop메뉴에서 아이폰과 해당 페이지를 선택한다.
Mac의 개발자 기능은 WebKit 안내, 아이폰 설정의 앱 → Safari 경로와 페이지 선택은 Apple의 iOS 검사 문서를 따른다. 검사 중인 아이폰 탭을 닫으면 해당 Web Inspector 창도 사라진다.
예를 들어 가로 모드에서만 버튼이 밀린다면 아이폰을 가로로 돌린 상태에서 해당 버튼의 적용 스타일을 본다. 크롬 스크린샷과 모양만 비교하는 대신, 문제가 생기는 환경에서 원인을 좁힐 수 있다.
시뮬레이터는 선택지지만 기기 이름만으로 검사를 끝내지 않는다
실제 아이폰이 없을 때는 Mac의 iOS Simulator도 사용할 수 있다. Apple은 실행 중인 시뮬레이터 역시 Safari의 Develop 메뉴에 나타나며 Web Inspector가 활성화돼 있다고 설명한다. Windows의 Chrome iPhone 프리셋을 선택하는 것과는 다른 검사 경로다.
반응형 배치를 고치는 단계에서는 Chrome Device Mode가 유용하다. Safari에서만 나는 차이가 남으면 Safari 환경으로 옮겨 같은 URL·화면 방향·문제 동작을 확인한다. 검사의 끝은 프리셋 이름을 맞추는 것이 아니라, 독자가 쓰는 브라우저에서 문제가 사라졌는지 보는 데 있다.