Monochrome로 맥에서 아이폰 화면 크기로 웹을 본다

맥에서 아이폰 Safari로 접속한 것처럼 웹사이트를 보여 주는 브라우저가 나왔습니다. Monochrome은 작은 창에서 모바일 화면을 살펴보려는 맥 사용자를 위한 오픈소스입니다. 저는 기기를 바꾸지 않고도 데스크톱 화면과 다른 모바일 배치를 확인할 수 있다는 점이 눈에 들어왔습니다.

Light Touch는 구형 아이폰과 아이팟 터치를 맥에서 재현하며 앱 탐색과 구형 웹 브라우징까지 다룹니다. Monochrome은 기기 전체가 아니라 iPhone Safari로 웹사이트를 확인하는 데 초점을 둡니다. 맥에서 아이폰 경험을 살피는 도구가 기기 재현과 웹 화면 점검으로 나뉜다는 점에서 두 프로젝트는 이어집니다.

반가운 점은 창만 좁히는 데서 끝나지 않는다는 것입니다. Monochrome은 사이트에 아이폰 Safari로 접속했다고 알리는 사용자 에이전트(user agent)를 씁니다. 여섯 가지 화면 크기로 전환할 수도 있습니다. 화면 폭만 줄이는 방식보다 모바일 화면을 빠르게 살피기 쉽습니다.

기본 크기는 375×667이고, 창은 320×480부터 440×956까지 조절할 수 있습니다. 화면 폭에 따라 메뉴와 본문 배치가 달라지는 사이트라면 고른 크기가 확인 결과를 바꿉니다. 이 브라우저가 바꾸는 것은 사이트에 보내는 브라우저 정보와 창 크기입니다. 이 설정만으로 실제 아이폰의 터치 반응이나 성능까지 확인할 수는 없습니다.

Monochrome에서 본인 사이트를 열고 기본 크기에서 메뉴와 본문 폭을 살펴보십시오. 이어서 화면을 좁히고 넓혀 같은 요소가 밀리거나 사라지는지 확인하면 배치가 바뀌는 지점을 찾을 수 있습니다. 실제 기기에서의 동작이 중요한 화면은 아이폰 Safari에서도 대조하십시오.

모바일 웹을 점검할 때, 화면 크기별 배치와 실제 아이폰 Safari 동작 가운데 무엇부터 확인하시겠습니까?