한국인을 위한 반응형 웹 테스트 툴 Responsive Viewer

반응형 웹을 체크할 수 있는 테스트 툴은 많습니다. 오늘은 빨리빨리 민족인 한국의 사이트 운영자와 블로거들에게 딱 맞는 소프트웨어를 하나 소개드리겠습니다. 무료이고 간단하게 사용할 수 있는 확장 프로그램입니다. Responsive Viewer라는 크롬 확장 프로그램을 이용하면 한 화면에 원하는 만큼의 기기 화면을 띄울 수 있습니다. 화면이 클수록 더 많은 모바일 기기의 화면을 띄울 수 있어 스킨 작업하며 체크하는 용도로 사용하기에 좋습니다.

 

리스폰시브 뷰어(Responsive Viewer)
리스폰시브 뷰어(Responsive Viewer)

 

리스폰시브 웹(Responsive Web) 또는 리스폰시브 웹 디자인(Responsive Web Design)이라고 하는데요. 반응형 웹이라고 웹페이지를 다양한 크기의 기기에 대응하도록 만드는 것입니다. 모든 크기의 기기에 대응하도록 설계하여 만든 것을 반응형(반응형 웹 혹은 반응형 스킨)이라고 하고 몇 가지 크기에 맞게 만든 것을 적응형 웹(적응형 스킨)이라고도 합니다. 사실 부르는 사람 맘이죠 뭐. 스마트폰, 태블릿, 노트북, 데스크톱, TV 등 기기 종류도 많고 화면 크기 또한 너무 다양하다 보니 적응형으로는 한계가 있습니다. 요즘 같이 다양한 크기의 기기를 사용하는 시대에는 반응형 웹 디자인은 의무이며 필수입니다. 의무와 필수를 이행하지 않은 사이트의 웹페이지는 검색 엔진으로부터 외면받습니다. 진짜입니다.

 

리스폰시브 뷰어(Responsive Viewer)

크롬 웹 스토어 Responsive Viewer
크롬 웹 스토어 Responsive Viewer

리스폰시브 뷰어는 크롬 웹 스토어의 Responsive Viewer 페이지에서 설치할 수 있습니다. 크롬 브라우저에서 아래와 같은 권한을 갖게 됩니다. 설치 시 팝업으로 안내됩니다.

 

권한
- 인터넷 사용 기록 확인
- 쿠키, 자바스크립트, 플러그인, 위치정보, 마이크, 카메라 등의 기능에 대한 웹사이트의 액세스 권한을 관리하는 설정을 변경합니다.

개인정보 보호관행
개인정보 보호관행

 

개인정보 보호 관행 탭을 열어보면 "게시자가 데이터를 수집하거나 사용하지 않겠다고 명시했습니다"라고 되어 있습니다. "승인된 사용 사례를 제외하고 제3자에 판매하지 않음", "신용도 판단 또는 대출 목적으로 사용하거나 전송하지 않음"이라고 설명되어 있습니다. 좀 무서운 단어가 많이 등장하니 불안한 마음이 듭니다. 판단과 책임은 개인의 몫이니 알아서 잘 판단하시면 되겠습니다. 참고로 웹법사는 크롬에서 삭제하고 개발자용 나이틀리 빌드 크롬 카나리아에 새 프로필 계정을 만들어 새로 설치하였습니다.

 

리스폰시브 뷰어 실행 화면
리스폰시브 뷰어 실행 화면

 

웹 페이지에서 도구 모음의 리스폰시브 뷰어 아이콘을 클릭하면 위와 같이 여러 종류의 디바이스 화면 크기로 접속한 페이지가 주룩 열립니다. 기본이 앞쪽에 아이폰 XR, XS Max와 아이폰 XS, X가 위치했고 갤럭시 S9 플러스, S8 플러스, 픽셀 등은 찬밥이라 뒤쪽에 위치하였습니다. 하단은 화면이 큰 미디엄 및 라지 스크린 등이 위치해 있고요.

 

리스폰시브 뷰어 사용자 설정 화면
리스폰시브 뷰어 사용자 설정 화면

 

한국은 압도적으로 갤럭시 기기 사용자가 많기에 위치 및 기기 재 조정을 해줘야 합니다. 갤럭시와 아이폰 둘 중 하나만 최적화해야 한다면 두말할 것도 갤럭시를 선택해야 합니다. 갤럭시 기기를 앞쪽에 배치시키고 아이폰 기기들은 뒤쪽에 두었습니다. 아래쪽은 아이패드 기기들을 위치시켰는데요. 아이패드 기기에 맞추려는 것이 아니고 해상도를 선택하다 보니 아이패드가 선택된 것입니다.

 

 

리스폰시브 뷰어 기능

리스폰시브 뷰어 기능 메뉴
리스폰시브 뷰어 기능 메뉴

 

1. 화면 수평 or 그리드 정렬

2. 화면 회전(가로 모드 or 세로 모드)

3. 화면 확대 축소

4. 마우스 스크롤 동기화 on/off : on 모든 화면 스크롤이 똑같이 작동합니다.

5. 마우스 클릭 동기화 on/off :  on 모든 화면 클릭이 똑같이 작동합니다.

6. 마우스 검사 기능 : 한 화면에서 특정 요소 선택 시 다른 기기의 동일 요소 모두 화면 중앙으로 이동하며 표시됩니다.

7. 요소 찾기 : id 혹은 class 이름으로 검색(예시 #id, .class)할 수 있습니다. h 등의 태그도 검색됩니다.

8. 설정 내보내기 & 가져오기

9. 활성 상태의 기기는 끓어 놓기로 위치를 변경할 수 있습니다.

10. 비활성 상태의 기기 : 눈알 모양 아이콘을 눌러 활성 상태로 전환시킬 수 있습니다.

11. 화면 설정 변경 : 화면 이름, 크기 등 사용자 설정할 수 있습니다.

12. 화면 캡처 & 전체 화면 스크롤 캡처할 수 있습니다.

 

리스폰시브 뷰어는 한국인에게 딱 맞는 확장 프로그램입니다. 화면을 사용자가 설정할 수 있기에 모든 화면 크기에 대해 테스트할 수 있습니다. 다양한 크기의 화면을 한 화면에서 한 번에 확인할 수 있어 작업 시간을 크게 단축시킬 수 있습니다. 디자인이나 개발까지는 모르겠으나 개인 블로거가 사용하기에는 충분한 것 같습니다. 화면 녹화 기능까지 있었더라면 일반 사용자 용도로는 최강이지 싶습니다. 다만 프로그램이 조금 불안한 느낌입니다. 작업 중에 종종 보기 모드가 종료되어 버립니다. 참고로 웹법사는 가난합니다. 이에 구형 컴퓨터가 4K 화면을 꽉 채운 웹페이지들의 동시 로딩을 버티지 못하고 리스폰시브 뷰어 모드가 뻗어 버리는 것일 수 있습니다. 비싼 그래픽 카드 장착된 좋은 컴퓨터에서는 아무 이상 없을 수 있습니다. 끝~

 

Copyright © 웹법사의 마법서재, 무단전재 및 재배포 금지.