웹 화면을 특정한 스마트 폰 모델(기종)의 해상도에 맞게 보는 방법 (반응형 웹 에뮬레이터)

1. 원하는 스마트 폰 기종을 선택한다. 이때 본인이 가지고 있는 스마트폰의 기종(모델) 이름을 확인하는 방법은 간단하다. 안드로이드 스마트폰을 기준으로 [설정] - [휴대전화 정보] - [디바이스 이름]을 확인하면 된다. 예를 들어 필자의 경우 갤럭시 A7(Galaxy A7) 스마트 폰을 가지고 있다.

 

 

2. 스마트 폰 기종에 맞는 해상도를 검색한다.

 

▶ Galaxy A7 나무위키 정보: https://namu.wiki/w/%EA%B0%A4%EB%9F%AD%EC%8B%9C%20A7

 

  링크에 접속해 확인해 보면 다음과 같이 [디스플레이] 정보가 출력된다. 확인 결과 기본적으로 갤럭시 A7은 16:9의 비율을 가지며 해상도는 1920 X 1080이다. 이 비율 정보를 알아내는 것이 가장 중요하다.

 

 

3. 크롬(Chrome)에서 개발자 도구(F12)를 실행하여 [Toggle device toolbar]를 눌러 모바일 화면으로 볼 수 있도록 한다. 이후에 자신이 원하는 기종(모델)을 선택하여 화면을 볼 수 있다. 예를 들어 [Galaxy S5]를 선택한 뒤에 네이버에 접속하여 새로 고침을 하면 다음과 같은 화면을 만날 수 있다.

 

  네이버의 경우 별도로 반응형 웹(responsive web)을 지원하기 때문에, 다음과 같이 모바일 화면이 나오는 것을 알 수 있다. 이와 같이 기존에 정의된 스마트 폰 모델에 대하여 바로 확인이 가능하다.

 

 

4. 필요한 경우 나만의 모바일 기종을 등록할 수 있다.

 

 

  이때 다음과 같이 [Add custom devices...]를 누른 뒤에 원하는 이름으로 디바이스(Device)를 설정하여 넣도록 하자.

 

 

  User-agent의 경우 다음과 같은 형식으로 넣을 수 있다.

 

Mozilla/5.0 (Linux; Android 4.4.4; SM-A700F Build/KTU84P)

 

  필자의 경우 다음과 같이 화면이 나오는 것을 확인할 수 있었다.

 

 

  이러한 기능과 개발자 도구를 잘 활용하면, 다음과 같은 가상의 디자인과 글을 빠르게 만들어 낼 수 있다. 이것은 영화나 다양한 비디오에서 연출 목적으로 많이 활용되기도 한다.