반응형 PC웹/모바일웹 테스트 및 화면 확인/ PC, mobile Web Design test (카카오다음 - 트로이)

사용기기에 따라서 자동으로 해상도를 조절하고 비율이 사용자에게 보기 좋게 제공되다보니 반응형 웹 환경으로 구축하는 사람들이 늘어난다. 특히 애드센스와 같은 광고를 사용하는 경우 스마트폰에서 어떻게 보여지는 확인하는 건 필수,

물론 대다수 본인의 휴대폰으로 접속해 잘 설정이 되어 있고 무리없이 오류없이 정상 작동되는지 확인이 가능하지만 문제는 그 휴대폰 기종만 확인을 했다는 것이다. 여유가 있고 돈도 많으면 세상에 존재하는 모든 휴대기기(스마트폰, 테블릿, 이동기기, 차량용 PC 등등)에서 하나씩 다 확인해 보는게 가장 좋지만 현실적으로 어렵다.

나는 컴맹에서 조금 더 진보한 수준이라 컴이나 스마트 환경을 잘 다루지 못한다. 모바일도 반응형 환경이 아니다. 할 줄을 모른다. 해봤는데 다 깨지더라. (2번의 실수로 블로그가 엉망이다. 설정을 건드렸더니 글이 이상해져서 복구도 무섭다- 블로그 메인의 모든 덧글 보여주는 화면은 지금도 글자가 다 다르게 보임 ㅋ) 지금은 원 상태로 돌리는 것도 잘못해서 실수 할까봐 그냥 PC환경으로만 작업하고 PC화면에서 보여지는 모니터 상의 설정만을 유지하고 있다. 그러나 보니 모바일 환경은 글도 밀리고 문단도 딱 떨어지지 않아 가독성이 떨어진다. 

분명한 건 스마트 기종이 다양해지고 점점 진화하면서 사용하는 기기마다 차이가 생긴다는 것이다. PC처럼 큰 모니터를 쓰고 휴대폰처럼 작은 화면을 쓴다고 해서 단순하게 보여지는 글과 이미지, 영상들의 사이즈만 상황에 따라 크게, 작게 보여주는 것이 아니라는 점이다. 위치도 다르고 환경도 다르고 심지어 블로그를 가진 사람은 별도의 스킨(모바일 전용)이나 모바일 전용 메뉴로 PC와 전혀 다른 모바일 전용 블로그 화면이 보여지게 된다. 거기에 사용기기마저 다르다면 보여지는 화면이 더 달라지는 건 당연.

크게 보면 크게 나오고 작게 보면 작게 나오는 게 아니라 PC와 모바일이 완전 다르게 보이는 것이 요즘 웹이다. 휴대폰에서 다음 포털을 접속하면 daum.net 이 아니라 m.daum.net 이라는 "m"이 하나 더 붙는 별도의 페이지로만 접속이 된다. 네이버도 마찬가지. 휴대기기와 같은 모바일에서는 모바일 전용 웹으로 들어가기 때문에 결국 그 환경도 고려해서 만들지 않거나 정상 작동하는지 확인해 주지 않으면 안된다.

카카오다음에서 운영하는 트로이라는 사이트가 있다. 어떤 부가 설명없이 상단에 주소창을 입력하는 검색창이 하나 있고 좌측에 여러가지 스마트폰 기기들이 회사별로 나열되어 있다. 그리고 아무것도 없다. 이게 의외로 편하다. 말 한마디 설명 없어도 뭘 어떻게 해야 하는지 쉽게 이용이 가능하다.

상단 URL 주소창에 자신이 보고자 하는 웹주소를 입력하고 나면 기본 스마트폰 화면을 보여준다. 좌측에 있는 모바일 기기를 선택하면 그 기기에서는 어떻게 보여주는지도 모두 확인이 가능하다. 남의 휴대폰을 빌리거나 부탁하지 않아도 이곳에 배치된 휴대기기만 선택해서 화면을 보면 해당 기기에서 나오는 모바일 화면을 직접 확인해 볼 수 있다.

반응형 스킨과 애드센스 사용자에게는 거의 필수라고 본다. 실제로 어떻게 보여지고 어떻게 배치되고 있는지를 운영자가 봐야 하는데 여러 회사의 다양한 모델 기기를 직접 클릭 한번으로 거의 확인이 가능하기 때문에 운영에 큰 도움이 된다. 내 블로그는 화면이 짤리고 잘 안되는 경우가 있었는데 여기서 화면을 보고 그것에 맞춰 조금 수정을 하기도 했다. PC환경으로 그대로 보여주는 기기들도 있어 사용기기 비율에 따라 고려해 보는 것도 좋을 듯 싶다. 

또한 기기들 위쪽에 멀티스크린 모드가 별도로 제공되는데 모드를 끄고 보면 클릭하는 해당 기기 화면 하나씩만 보여주고 멀티스크린 모드를 활성화 하고 보면 클릭하는 해당 기기들을 화면에서 계속 추가하면서 전부 보여준다. 다양한 기기를 다 보면서 비교가 가능하다는 장점이 있다. 스마트폰 2~3개를 나란히 놓고 화면을 비교하는 개념

웹사이트나 블로그를 가진 사람이라면 꼭 가봐야 할 필수 사이트!! 사이트 이름이 유명 바이러스와 비슷해서 잘 모르면 거부감이 들 수 있으나 우리나라 카카오다음에서 개발자들을 위해 운영하던 사이트니 오해는 말자~

카카오 트로이 - http://troy.labs.daum.net/