반응형웹 필수 도구, 모바일 해상도 별 화면테스트 다음 트로이(TROY)
티스토리 블로그를 '반응형스킨'으로 변경할 경우 화면 크기가 제 각각인 각종 모바일기기에서 블로그 내용이 블로거가 원하는 모습으로 정확히 보여지고 있는지 확인하는 것입니다.
특히 광고배치 또는 광고크기에 따라서 정책위반 여부를 판단하는 광고배너를 블로그에 설치한 상태라면 더욱 더 신경을 써야하겠지요. 물론, 기본적으로 본인이 사용하는 컴퓨터와 스마트폰으로 어느정도는 확인 가능하겠지만, 현재 출시되고 있는 기기들의 해상도 종류가 너무 많기 때문에 그것만으로는 안심하기는 어려울 것 같습니다.
그래서 준비했습니다.
오늘 본문에서 다룰 내용은 내 블로그가 다양한 해상도에서 어떻게 표시되는지 확인할 수 있는 다음 트로이 서비스입니다.
제 블로그를 반응형스킨으로 변경하고부터 사용하는 서비스인데요, 각종 모바일기기 해상도에 따라서 현재 블로그 레이아웃 및 내용을 똑같이 표현해주는 덕분에 블로그스킨을 변경한 후에는 트로이에서 테스트 과정을 거치고 있습니다.
특히 근래에 트로이 서비스가 업데이트 되면서 멀티스크린 모드 지원 등 기능이 더 좋아졌습니다.
트로이 업데이트 변경사항/ 출처: 다음 트로이
멀티스크린 모드
이제 여러개의 디바이스를 선택해서 비교해 볼 수 있습니다. 화면 왼쪽의 '멀티스크린 모드'를 켜고 원하는 디바이스들을 선택하세요.
테스트 환경 공유하기
현재 상태의 테스트 환경(디바이스들,URL)을 공유할 수 있는 URL을 확인하려면 화면 우측 상단의 버튼을 클릭하세요. 클라이언트들이 만족할 겁니다.
40개 이상의 인기있는 디바이스
삼성, LG, Apple, Google, 팬텍, HTC, Sony, 샤오미, 레노버, ZET 등 전세계의 인기있는 모바일, 패블릿, 태블릿 모드가 준비되어 있습니다.
트로이 사용법은 매우 간단합니다. 아래 그림처럼 트로이 사이트에 접속하여 테스트하고자 하는 블로그 또는 웹사이트 주소를 입력하고 좌측 메뉴에 있는 각종 제조사의 제품을 선택해주면 우측에 결과가 표시됩니다.
참고로 트로이는 어쨌든 실제 기기가 아닌 가상으로 테스트하는 것이니 단순히 테스트하는 용도는 괜찮지만 개발자는 반드시 실제 기기에서 테스트해야 합니다.
또한, 트로이는 사용자의 브라우저 환경에 따라서 원래 페이지와 정확히 일치하지 않을 수 있다는점 미리 알려드립니다.
그럼, 지금부터 해상도가 각각 다른 삼성 갤럭시시리즈와 아이폰시리즈에서 제 블로그 내용이 어떻게 표시되는지 그림으로 확인해 보겠습니다.
맨 처음 그림은 좌측부터 갤럭시노트4, 갤럭시노트3(갤럭시s5), 갤럭시노트2,(갤럭시s3) 에서 보여지는 화면입니다. 가운데 공백으로 네모 표시된 부분은 광고가 표시되는 자리입니다. 갤럭시 노트시리즈는 화면이 거의 비슷하게 표시되는 것을 알 수 있습니다.
다음 그림은 갤럭시 구형 스마트폰 중에서 갤럭시s2, s1 그리고 갤럭시노트1에서 표시되는 제 블로그 화면입니다. 좌측의 갤럭시s2, s1의 경우 해상도가 낮기 때문에 공백으로 표시된 광고도 작은 것으로 배치하여 해상도 높은 기기들과 엇비슷하게 블로그 내용이 표시될 수 있게 하였습니다.
다음 그림은 아이폰6부터 아이폰5, 아이폰4 순으로 블로그 화면을 보여주고 있습니다. 아이폰6 해상도가 상당히 높은 것으로 보입니다. 갤럭시노트 시리즈에서는 보이지 않던 글 제목 이하 부분까지 표시되고 있습니다. 반대로 아이폰5, 4는 정말 해상도가 낮습니다.
반응형스킨으로 블로그를 꾸미면 이렇게 해상도가 높은 기기부터 해상도가 낮은 구형기기까지 최대한 지원해야 하기 때문에 트로이와 같은 서비스를 이용하여 사용자편리성 테스트를 꼭 하는 것이 좋습니다.
다음 트로이의 또다른 장점은 해상도에 맞춰서 크기만 변경하는 것이 아니라 실제 블로그 내용을 그대로 불러오기 때문에 드롭다운 메뉴 등 사용자가 블로그 스킨을 적용하면서 의도한 것을 거의 대부분 확인 가능하다는 점입니다.
그 외에 아이패드, 갤럭시탭 등은 해상도가 전체적으로 높기 때문에 거의 데스크탑 화면과 비슷하게 표시 됩니다. 일반 pc화면과 비교하면 블로그 사이드바 넓이만 약간 줄어든 형태입니다. 그리고 LG G패드와 구글 넥서스 7은 1단스킨처럼 블로그 사이드바가 본문 하단으로 내려가서 본문 내용이 시원하게 보여집니다.
개인적인 느낌으로는 화면 가독성은 이 기기들이 가장 좋아보입니다. 마지막으로 노트북 1200x800 등 일반 PC 해상도에 맞춰서 블로그 내용을 확인 할 수 있습니다.
반응형 웹사이트 테스트는 다음 트로이에서 테스트하면 좋습니다.
http://troy.labs.daum.net/ 트로이 바로가기
