웹페이지 모바일 변환 - webpeiji mobail byeonhwan

PC에서 모바일웹 보는 방법

이 글은 PC에서 모바일웹 보는 기능 Toggle Device Toolbar와 관련된 정보를 포함하고 있습니다.

  PC에서 모바일웹을 왜 봐?

해당 방법을 통해 PC에서 모바일웹을 보는 화면

 먼저 PC에서 모바일웹을 본다고 하면, '쓸데없이 왜 PC(컴퓨터)로 모바일웹을 봐? 핸드폰으로 보면 되지', '넓은 PC(컴퓨터)화면에서 불편하게 작은 모바일웹을 왜 봐?''라고 하실 수 있습니다. 하지만 마케팅, 광고 일을 하다보면, 내가 운영하고 있는 광고가 모바일에서는 어떻게 나타나는지, 경쟁사의 모바일 광고는 어떤지, 해당 웹사이트가 모바일 버전이 있는지 등 모바일과 관련된 다양한 작업이 필요할 때가 있습니다.

 물론 간단하고 적은 작업량이라면 가지고 있는 스마트폰을 이용해 확인해보면 되지만, 확인해야 할 작업량이 많거나 캡처를 해서 파일, PPT, 엑셀 등 보고서로 정리를 해야 하는 경우에는 스마트폰을 사용하기에는 불편함이 있습니다. 따라서, 해당 방법을 통해 PC로 모바일웹을 확인하며 그때그때 캡처를 하고 보고서로 정리할 수 있습니다.

  PC에서 모바일웹 보는 방법

 이제 어느정도 해당 방법이 필요한 이유에 대해 이해하셨으리라 믿고, 'PC에서 모바일웹을 확인하는 방법'에 대해 설명하겠습니다. 방법은 아주 간단합니다.

크롬 아이콘

먼저 필요한 프로그램으로 크롬(Chrome)이 있어야 합니다. 크롬이 없으시다면 설치해주세요. 익스플로러에서도 가능하지만 많이 불편합니다. 크롬이 설명도 편하고 직접 실행했을 때도 편합니다. 최고에요.

크롬 - 개발자 도구 화면

크롬을 열고 개발자 도구를 활성화시킵니다. 개발자 도구는 우측 상단의 [메뉴]-[도구 더보기]-[개발자 도구]를 클릭하여 켜거나, 단축키 [F12] 또는 [Ctrl]+[Shift]+[i]를 통해 켤 수 있습니다.

크롬 - 개발자 도구 화면_Toggle Device Toolbar

개발자 도구 화면에서 좌측 상단의 아이콘(Toggle Device Toolbar)을 클릭하면, 웹사이트를 모바일 사이즈로 변경할 수 있습니다. 단축키는 [Ctrl]+[Shift]+[M]입니다. 단, 개발자 도구가 활성화된 상태에서만 단축키를 활용할 수 있습니다.

크롬 - Toggle Device Toolbar로 웹사이트의 크기가 변경된 화면

Toggle Device Toolbar를 켜면 위와 같이 웹사이트의 크기가 모바일 사이즈로 변경됩니다. 하지만 화면에는 PC버전의 네이버가 켜져있고, URL도 'naver.com'(참고: 네이버의 모바일웹 URL 'm.naver.com')로 설정되어 있습니다. '설정이 제대로 되지 않았나?' 싶으시겠지만 설정은 제대로 되어있습니다.

웹사이트 재접속

해결 방법은 간단하게도 웹사이트에 재접속하면 됩니다. URL을 입력하여 웹사이트에 재접속하거나 '새로고침(단축키:F5)'을 해주시면 모바일웹으로 나타납니다. URL 입력 시에는 모바일 환경에 맞게 자동으로 변경되기 때문에 PC웹사이트 URL을 입력하셔도 무방합니다.

웹사이트 재접속 후, 모바일웹으로 나타난 화면

추가적으로 해당 화면에서 검색, 클릭 등 스마트폰과 동일하게 모든 활동을 할 수 있으며, 이후 나타나는 모든 웹사이트는 모바일 환경에 맞도록 모바일웹이 있는 경우, 모바일웹으로 나타나게 됩니다. 아래는 Toggle Device Toolbar 기능을 활용한 네이버의 모바일웹에서 검색하여, 매일경제 사이트로 접속한 예시입니다. 아래의 사진처럼 자동으로 모바일웹으로 표시된 것을 알 수 있습니다.

아무 추가 프로그램 설치 없이 PC에서 스마트폰 홈페이지 보는 법

크롬브라우저나 인터넷 익스플로러 프로그램을 이용하여,

웹페이지 검색들 많이 하시지요~?

근데 희안하게도 똑같은 홈페이지를 컴퓨터 화면에서 볼 때와. 스마트폰에서 볼 때
그 모양이 현저히 다른 모습을 하고 있는 것을 볼 수 있는데요.

두번째 이미지를 보통 스마트폰 홈페이지 또는 모바일 웹페이지라고 부릅니다.

이렇게 다른 모양을 보이는 이유는 반응형 웹 또는 적응형 웹 이라 불리는 기술이 적용되어 있기 때문입니다.

간단히 말해, 화면 가로 해상도가 넓은 PC에서 접속할 떄는 첫번째 화면을,

가로 해상도가 좁은 스마트폰에서 접속할 때는 두 번째 화면을 자동으로 보여주는 것이지요.

참고로 네이버의 경우 적응형 웹 기술을 사용하고 있습니다.

때로는 PC화면에서도 스마트폰에서 보이는 화면처럼 보고 싶을 경우가 있는데요.

반응형 웹 기술이 적용된 홈페이지는 단순히 웹브라우저 창의 가로폭 크기를 줄이는 것만으로,
스마트폰에서 보이는 것처럼 화면을 볼 수 있습니다.

하지만 적응형 웹 기술이 적용된 홈페이지는 현재 PC에서 접속했는지,
스마트폰에서 접속했는지 사전에 검사를 하기 때문에 위 방법은 통하지 않는데요.

이 경우 PC에서 접속하였다 하더라도 스마트폰 접속처럼 스마트폰 모드로 바뀌주면 됩니다.

참고로 이 방법은 반응형 웹에서도 사용하실 수 있는 방법입니다.

아래와 같이 진행해 주세요.

1. 웹브라우저를 실행하신 다음에, 사용할 홈페이지에 접속해 주세요.

2. F12 키룰 눌러 주세요. 그러면 화면 아래나 오른쪽에 개발자 도구(DevTools)라는 창이 보여집니다.

만약 개발자 도구창이 아래 그림처럼 한글이 아닌 영어로 표시된 경우,

동그라미 ( Switch DevTools to Korean : 개발자 도구를 한국어로 전환 ) 부분을 클릭해주시면 한글로 바뀝니다.

3.  기기 툴바 전환 아이콘을 선택합니다.

아이콘을 한번 선택시 스마트폰에서 접속한 것처럼, 다시 클릭시 PC에서 접속한 것처럼 화면이 바뀌는데요.
클릭해서 스마트폰 모드로 변경해 주세요.

4. 가로 해상도를 선택합니다

스마트폰은 여러 종류가 있지요? 스마트폰 기계마다 가로 폭이 다른데요.

보통은 실제적인 크기보다는 정밀도를 나타내는 해상도라는 단위에 따라 보여지는 모양이 약간씩 다릅니다.

스마트폰 모드에서는 화면 상단에 아래 그림과 같은 눈금자 같은 해상도 선택 도구가 보이는데요.
마우스를 가져다 대면 해당하는 눈금이 '소형 휴대 기기'인지 '대형 휴대 기기'인지 등이 보여집니다..

해당 기기의 안내가 표시된 상태에서 마우스를 클릭하면,
가로폭이 변경되어 실제 내 스마트폰에서 보시는 것처럼 화면을 보실 수 있습니다.

5. 적응형 웹페이지는 새로고침

반응형 웹은 4번의 작업으로 끝이지만,
적용형 웹은 새로 고침 버튼을 한번 눌러 주셔야 ( 또는 단축키 F5키 ) 반영이 됩니다.

짜잔~ 아래와 같이 보이시나요?

다시 원래대로 돌아가고 싶으시다구요?
그러면 단축키 F12 키룰 눌러주시면 개발자 도구창이 사라지며 원래대로 복구가 됩니다.

PC에서 홈페이지(모바일 웹)를 스마트폰처럼 보는 방법을 알아 보았습니다.

하지만 카카오톡 공유같은 스마트폰 전용 기능은 작동하지 않아 완전하지는 않은 점도 알아 두세요.

필요하신 분에게 도움이 되셨는지 모르겠습니다.
여기까지 읽어주셔서 감사합니다.