[user agent switcher/Opera Mobile Emulator] 데스크탑에서 모바일화면보기

[user agent switcher/Opera Mobile Emulator] 데스크탑에서 모바일화면보기

모바일용 페이지를 제작할 때는 모바일 내에서 구현이 되는지 핸드폰으로 확인하는 작업을 거칩니다.

그런데 핸드폰으로 확인하는 작업을 하자니, FTP로 해당 파일을 업로드해서 URL을 복사하고 

핸드폰으로 직접 확인하는게 손이 많이 가고 번거롭더라구요.

 데스크탑에서도 모바일 화면을 볼 수 있는 방법을 찾다보게 되었는데 의외로 많은 방법들이 있었습니다. 

그 중에서 써보니 가장 좋았고 지금도 쓰고 있는 것들을 소개하려 합니다.

1. 크롬 확장 프로그램 user-agent-switcher

(https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=ko)

크롬을 쓰고 계시는 분들은 개발자도구에서 디바이스를 모바일 크기로 줄여 

확인하는 방법에 대해 알고 계시는 분들이 대부분일거라 생각하는데요. 

(모르시는 분들은 크롬에서 f12 누르시고 ctrl+shift+m을 누르시면 해당 페이지로 이동됩니다.)

저 같은 경우에는 웹용 페이지를 열었을 때, 모바일로 접속했을 시 

모바일 페이지로 전환되는 것까지 확인해야했기때문에 이 부분에서는 크게 도움이 되지 않았습니다. 

그래서 크롬 확장프로그램을 다운받게 되었는데요. 

크롬에서 위 URL로 접속하면 설치화면이 뜨게 됩니다. 

설치를 마치면 URL 바로 옆에 선글라스를 낀 아이콘이 생성이 되는데요. 

아이콘을 누르면 다양한 디바이스로 이동할 수 있는 메뉴들이 나옵니다.

 iOS > iphone6 를 누르시거나 Android > Android KitKat을 누르시면 되는데 

저 같은 경우에는 iphone6로 확인하는 편입니다. 

핸드폰으로 확인을 하지 않더라도 크롬에서 빠르게 확인할 수 있는데 

단지 핸드폰에서 보여지는 웹 화면 사이즈에 그대로 출력하는 지라 

핸드폰 화면에 맞춰 창크기를 줄여야하는 번거로움이 있습니다. 

2. 오페라 모바일 에뮬레이터

(https://www.opera.com/ko/developer/mobile-emulator)

위 방법이 크롬에서 확인할 수 있는 방법이라면 아래 방법은 프로그램을 아예 다운받아 사용할 수 있는 방법입니다. 

위 URL로 접속하시면 다운로드를 받을 수 있는 창이 뜨는데요. 

해당 창에서 운영체제(윈도우/맥/리눅스)에 맞게 다운로드받아주시고 설치를 하면 바탕화면에 해당 아이콘이 생성됩니다. 

프로그램에 접속하면 어느 모바일로 접속을 할지 선택창이 뜨게 되는데요. 

사이즈를 모른다면 custom을 선택하시고 Launch를 누르시면 해당 화면으로 넘어가게 됩니다. 

주소 입력 창에 만든 웹페이지를 드래그해서 넣으면 빠르게 모바일용으로 구현확인이 가능하죠. 

+

그 밖에 인터넷으로 접속해 확인하는 방법으로는 트로이(http://troy.labs.daum.net/) 사이트에 접속하여

디바이스 선택 후 확인하는 방법이 있습니다만 (이것도 크롬개발자도구때와 같이 사용목적이 달라서 저는 쓰고 있지 않습니다.) 

필요하신 분들은 해당 부분은 참고해두셔도 좋을 것 같습니다. 

+ 추가 내용 (19-10-23)

네이버에서 나온 브라우저 웨일에서 모바일 화면을 볼 수 있도록 지원해주는 기능이 있어 훨씬 간편하게 모바일화면을 확인해보실 수 있습니다.

3. 네이버 웨일

( https://whale.naver.com/ko/ )

크롬 확장 프로그램때문에 크롬 로드 오류가 뜬다거나 쓰기 번거로우시다면 웨일을 이용해보세요.