모바일웹 & 반응형웹 테스트 툴 - 트로이(Troy) *스마트폰 기기별 시뮬레이션*

내가 만든 모바일웹 또는 반응형웹 사이트가 다른 기기에서는 어떻게 뜰까? 굉장히 궁금한데요. 모바일웹 & 반응형웹을 PC에서 시뮬레이션 해볼 수 있는 웹사이트를 소개합니다. 다음커뮤니케이션의 웹표준 랩, 다룸 (Darum) 에서 제공하는 트로이 입니다. 

http://troy.labs.daum.net

(1) 사이트에 접속한 첫 화면 입니다. 좌측에 제조사별 카테고리가 있고, 우측에 디바이스가 표시되어 있습니다. 디폴트가 갤럭시 노트4 네요.

(2) 우측 상단에 3개의 아이콘이 있습니다. 설정 아이콘을 누르니 '시작 디바이스 설정' 이 나오네요. 저는 애플을 사용중이라 아이폰 6로 바꿨습니다.

(3) 좌측 카테고리에서 애플 iPhone 6 Plus 를 클릭했더니, 우측에 디바이스가 추가됩니다. 

(4) 브라우저 창크기에 따라 여러 개의 디바이스가 나란히 나열됩니다. 디바이스를 드래그해서 나열 순서를 변경할 수도 있네요.. 

(5) 우측 상단의 나머지 아이콘을 눌러봤습니다. 돋보기 아이콘은 '확대/축소' 기능 이네요. 

(6) 화살표 아이콘은 '테스트 환경 공유하기' 기능 입니다. 단축 URL을 생성해 주네요. 

(7) 좌측 제조사별 기기 목록에 최신 기종 중 일부가 빠져있는데 곧 추가가 되겠죠? 2015년 12월 현재는 갤럭시 노트5, G4, 아이폰6s 등이 보이지 않습니다. 

(8) URL을 입력하세요. 반응형웹 사이트 mixd.co.uk 열어 봤습니다.

중간 리뷰 시 구현된 모습을 대강이라도 미리 시뮬레이션 할 수 있어서 굉장히 유용하더라구요.