[Web] 스마트폰 종류별로 모바일 웹페이지 확인하기. 다음 트로이 서비스

블로그를 운영하면서 내 블로그가 스마트폰에서는 어떻게 보여지나 궁금했습니다. 일반 데스크탑에서 보여지는 웹페이지는 브라우저의 크기를 조정해가면서 바로 확인이 가능하지만 스마트폰은 그렇지 않습니다. 현재 반응형 스킨에 반응형 애드센스를 사용하고 있는데 스마트폰 종류 별로 해상도가 가지각색이다 보니 최적화하는데 많은 시간이 듭니다. 나를 최적화를 한다고 해도 많은 종류의 스마트폰에서 의도한데로 적용되어있는지 확인하기가 사실상 불가능합니다. 데스크탑에서 잘 나오는 콘텐츠가 모바일 해상도로 보면 레이아웃이 틀어지고 광고가 이상하게 나오는 등 의도하지 않은 결과를 보여줄 때가 많습니다. 해상도 종류 별로 디바이스를 가지고 있는게 제일 좋겠지만 사실 이런 환경을 구축하기는 어렵습니다. 현재 사용하고 있는 스마트폰과 한 두개씩 더 가지고있는 스마트폰, 혹은 가족이나 지인들의 스마트폰을 빌려 확인하곤 했죠. 여간 귀찮은게 아닙니다. 

여러 종류의 스마트폰에서 내 블로그에 접속했을 때 광고나 콘텐츠가 어떻게 보이나 쉽게 확인할 수 있는 방법이 없을까? 하고 찾아보던 중 유용하게 이용 할 만한 서비스를 찾았습니다. 다음(Daum Labs)에서 서비스 중인 트로이(Troy) 입니다. 디바이스별 기본 브라우저의 실제 해상도를 바탕으로 모바일 웹 페이지를 보여주는 서비스로 손쉽게 누구나 사용할 수 있습니다.

트로이를 이용하면 누구나 빠르게 모바일 웹페이지를 손 쉽게 테스트 할 수 있습니다. 화면 확대 / 축소 기능과 사이즈를 직접 입력 할 수 있는 custom 사이즈 기능도 제공하고 있습니다. medium-dpi 기준의 브라우저 크기로 화면을 제공할 뿐 기기 또는 운영체제 별 특성, 버그는 실제 기기에서 따로 확인하여야 합니다.

사이트에 접속하시면 왼쪽에 지원하는 기기 목록이 있습니다. 삼성, 엘지. 펜텍, 애플의 대표적인 스마트폰 시리즈가 있습니다. 목록에 없는 디바이스는 사용자가 직접 해상도를 입력하여 테스트 가능합니다.

제 블로그 메인페이지를 트로이와 아이폰5s에서 캡쳐한 사진입니다. 보시는 바와 같이 실제 기기에서 보이는 화면을 거의 유사하게 보여주고 있습니다. 콘텐츠를 클릭하여 살펴보았습니다.

트로이에는 실제 아이폰에서 나타다는 주소표시줄이나 하단 액션바가 나타나지 않고 문장의 줄바꿈 위치가 조금 차이가 나지만 실제 기기화면과 거의 동일한 화면을 보여주고 있습니다. 반응형 애드센도 화면 크기에 맞게 노출되는 것을 확인 할 수 있습니다. 

디바이스별 해상도별로 화면을 따로 구성하여 작업한 결과를 한 자리에서 바로 확인 할 수 있으니 정말 편리합니다. 블로그나 웹페이지를 운영하시는 분들은 한번 써보시면 좋을 것 같습니다.