블로그 모바일, 스마트폰 화면 버전별 호환 가능 여부 판단하기

블로그 모바일, 스마트폰 화면 버전별 호환 가능 여부 판단하기

 

환경: Chrome

 

요즘 모바일 접속자가 많이 늘고 있습니다. 그래서 스마트폰에 나타난 자신의 블로그가 어떻게 디자인 되어 있는지 점검해 볼 필요가 있습니다. 물론 사용하고 있는 스마트폰으로 체크해 볼 수 있지만 다른 해상도와 기기에 대한 호환성은 살펴 보기 힘듭니다. 오늘은 크롬이나 파이어폭스의 확장 프로그램에서 체크하는 것이 아니라 daum 에서 제공하는 사이트에서 확인해 보도록 하겠습니다.

 

▼ 사이트는 troy 와 labs 이 붙은 다음에서 운영하는 웹 페이지 입니다. lab 이 붙은 것으로 봐서 카톡에 실험실과 유사한 개념인 것 같습니다. 정식버전은 아니고 베타버전 성격이 강한 테스트용 기능들을 모아둔 곳? 추측일 뿐입니다. ㅋ

http://troy.labs.daum.net/ 

 

▼ 사이트에 접속하면 왼쪽 탐색기 영역은 기기와 해상도를 선택할 수 있습니다. 왼쪽에서 선택한 기기는 바로 오른쪽 가상 스마트폰 화면에 반영이 되는 것이죠. 그럼 테스트 해 보고 싶은 기기를 왼쪽에서 선택하고 URL 을 주소 입력창에 넣습니다. 그럼 바로 화면이 재시작 되면서 실제 기기에서 보는 것과 동일하게 나오게 됩니다. 그런데 주소를 입력할 때 주의할 것이 있습니다. 모바일 페이지를 테스트 하는 것이므로 URL 뒤에 “m” 을 붙여야 합니다. 그러니까 http://사이트주소/m 이 되는 것이죠. 대부분 PC 에서 접속하는 사이트와 모바일 사이트는 분리되어 있거든요. 그래서 디자인도 별도로 하게 됩니다.

▼ 이 사이트의 장점은 기기를 멀티로 선택해서 비교해 볼 수 있다는 것입니다. 왼쪽 기기 아이콘에 파란색 점이 오른쪽 화면에 반영이 되었다는 표시입니다. 이렇게 여러 개를 선택하게 되면 모두 오른쪽 화면에 보여 줌으로써 비교를 해 볼 수 있다는 것이죠.

 

▼ 왼쪽 탐색기에 보시면 현재 나와 있는 거의 모든 기기들을 테스트 해 볼 수 있습니다. 그 뿐만 아니라 PC 의 해상도별 테스트도 가능합니다.

 

▼ 요즘 반응형 스킨을 많이 사용하는데 적용해 놓고 끝나는 것이 아닙니다. 오늘 소개한 주소로 접속하셔서 PC 뿐만 아니라 스마트폰의 각종 기기별 테스트를 해 보시기 바랍니다.