지난번에 웨일브라우저의 장점 중에 하나가 모바일 화면을 볼 수 있는 것이었는데, 서핑 중에 클릭해서 모바일 화면을 볼 수 있다는 것이 장점이긴 하지만, 어떤 기기에 대응하는 화면인지는 확실치 않아서 애매한 점이 있는 것도 사실입니다. 사실 이것보다 더 전문적으로 모바일 화면을 체크할 수 있는 방법에 대해서 소개해드리려고 합니다. 그럼 반응형 홈페이지를 모바일에서 각종 기기별로 어떻게 볼 수 있는지 알아보도록 하겠습니다.
다음 트로이(Troy)로 이동
다음(Daum)에서 만든 트로이라는 서비스가 있습니다. 페이지로 이동하면 위와 같이 생겼구요. 검색해보면 영어로 '반응형웹 테스터(Responsive Web Tester)'라고 소개해 놓았네요. 전체적으로 아래와 같이 5가지 영역으로 나누어 볼 수 있습니다.
(1) 주소(URL)입력창
(2) 멀티스크린 모드 ON/OFF
(3) 모바일 기기 선택 영역
(4) 설정버튼
(5) 모바일 화면뷰
그럼 하나하나씩 상세히 살펴보도록 하겠습니다.
주소(URL) 입력창
모바일 화면 주소입력창은 브라우저 주소 입력창 아래에 위치하고 있습니다. 이게 처음에는 착각해서 위에 있는 브라우저 주소창에 모바일 화면으로 보고자 하는 웹페이지 주소를 입력해서 다른 페이지로 이동하는 경험을 하게 되는 경우가 더러 있습니다. 참고로 나중에 설정화면에서 기기별로 따로 주소를 입력하게끔 설정할 수도 있습니다. 주소를 입력하고 엔터(Enter)키를 누르면, 아래와 같이 모바일 화면이 나타납니다.
멀티스크린 모드 ON/OFF
멀티스크린 모드란, 기기를 중복선택할 수 있는 기능입니다. 계속해서 기기를 추가할 수 있고, 추가된 기기는 우측 화면에 계속 추가되게 됩니다. 즉 각종 기기별로 화면을 비교하기에 아주 유용한 기능입니다.
▲ 왼쪽이 갤럭시노트4 화면, 오른쪽이 갤럭시S5, 노트3 화면 ▲
모바일 기기 선택 영역
위에서 보시다시피 선택할 수 있는 기기의 종류는 매우 많습니다. 대부분의 휴대폰 제조사들이 다 들어가 있습니다. 갤럭시시리즈로 판단하면 S5, 노트4까지 테스트할 수 있습니다. 이정도면 최신형 기기를 제외하고 거의 대부분의 기기를 테스트 할 수 있다고 보면 되겠네요. 무엇보다 한 페이지에서 각종 기기들을 동시에 테스트 해볼 수 있다는 것이 매우 큰 장점이 아닐까 합니다.
설정버튼
다음으로 우측상단에 보면 톱니바퀴 모양의 설정버튼이 있습니다. 해당 버튼을 누르면 위와 같이 3가지 옵션을 보실 수 있습니다.
먼저 시작디바이스 설정은 위 페이지에 접속했을 때 어떤 기기를 가장 처음에 보여줄지를 정하는 것입니다. 단순히 모바일 화면의 모습이 궁금하신 경우 특별히 신경안쓰셔도 되며, 기본설정(Default)은 갤럭시 노트4로 되어 있습니다.
다음은 디바이스별 주소창 기본설정 모드인데, 이 모드를 '주소창 보이기'로 설정하면, 기기별로 상단에 URL을 입력할 수 있는 주소창이 생깁니다. 이 모드를 설정하면 기기별로 각각 다른 화면을 확인할 수 있습니다.
다음으로 언어선택인데 한국어, 영어, 일본어 이렇게 3가지 언어만 지원합니다.
모바일 화면뷰
마지막으로 모바일 화면이 보이는 영역입니다. 멀티스크린 모드를 ON한 경우 화면 크기에 따라 보통 디바이스 갯수가 3개까지 한 줄에 보이게 되는데, Ctrl+마우스 휠 조작으로 브라우저 화면배율을 줄이시면 더 많은 기기를 한 줄에서 확인하실 수 있습니다. 어차피 레이아웃을 확인하는 용도로 사용하는 경우가 많기 때문에 여러 디바이스를 한꺼번에 체크할 수 있는게 좋으니까요. 그럼 유용하게 사용하시기 바래요~
