Please Enable JavaScript!
Gon[ Enable JavaScript ]

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

블로그

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

 

환경: Chrome

 

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

 

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

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

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

 

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

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


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

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

 

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

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

 

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

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

 

Posted by 녹두장군

댓글을 달아 주세요