티스토리를 반응형 스킨으로 바꾸었다면 반응형 웹 테스터 트로이랩에서 확인

2017.11.13 08:23 IT·인터넷/블로그

티스토리를 반응형 스킨으로 바꾸었다면 반응형 웹 테스터 트로이랩에서 확인

티스토리 스킨을 반응형 스킨으로 바꾸었는데 과연 다양한 크기의 화면에 제대로 보이는지 걱정이 됩니다. 특히, 저처럼 애드센스를 올린 분이라면 본문 광고 배치나 사이드바의 광고가 바르게 나오는지도 신경 쓰이는데요, 트로이랩(Troy - Responsive web tester)을 이용하면 반응형 스킨이 제대로 작동되는지 확인할 수 있습니다. 사이트 이름도 반응형 웹 테스터입니다.

티스토리 반응형 스킨 반응형 웹 테스터 트로이랩

▲ 트로이랩에 방문하면 가상의 갤럭시 노트4가 떠 있고 그 안에 자세한 설명이 나옵니다. 이제 주소창에 블로그나 테스트하려는 사이트 주소를 입력합니다.

티스토리 반응형 스킨 반응형 웹 테스터 트로이랩

▲ 가상이지만, 갤럭시 노트4에서도 반응형 스킨이 제대로 보이네요.

티스토리 반응형 스킨 반응형 웹 테스터 트로이랩

▲ 글을 클릭하면 마치 갤럭시 노트4를 사용하듯 페이지가 열립니다. 궁금했던 애드센스가 화면 크기에 맞추어 제대로 나오는군요. 화면이 넓은 일반 데스크탑에서는 본문에 애드센스 두개가 나오도록 했고 스마트폰처럼 화면이 작은 디바이스에서는 하나만 나오도록 반응형 스킨에 적용했거든요.

반응형 웹 테스터 트로이랩에서 아이패드 레티나 실행

티스토리 반응형 스킨 반응형 웹 테스터 트로이랩

▲ 좌측에 여러 메이커의 다양한 디바이스를 선택할 수 있는데요, 아이패드 레티나를 선택해 보았습니다. 넓은 화면에 맞추어 반응형 스킨이 제대로 작동하네요.

티스토리 반응형 스킨 반응형 웹 테스터 트로이랩

▲ 반응형 스킨에서 제공하는 특수 기능도 잘 작동되고요.

반응형 웹 테스터 트로이랩 화면 회전 지원

티스토리 반응형 스킨 반응형 웹 테스터 트로이랩

▲ 가로로 넓게 화면을 회전해서 반응형 스킨이 잘 작동되는지도 확인할 수 있습니다.

반응형 웹 테스터 트로이랩 멀티 스크린 모드

티스토리 반응형 스킨 반응형 웹 테스터 트로이랩

▲ 여러 디바이스를 함께 선택해서 화면에 같이 놓고 비교할 수 있습니다. 참 잘 만들었네요.

블로그 스킨이나 웹사이트 스킨을 반응형으로 바꾸었다면 반응형 웹 테스터 트로이랩에서 확인하세요.

신고
이 댓글을 비밀 댓글로