컴퓨터활용팁
아무 추가 프로그램 설치 없이 PC에서 스마트폰 홈페이지 보는 법
크롬브라우저나 인터넷 익스플로러 프로그램을 이용하여,
웹페이지 검색들 많이 하시지요~?
근데 희안하게도 똑같은 홈페이지를 컴퓨터 화면에서 볼 때와. 스마트폰에서 볼 때
그 모양이 현저히 다른 모습을 하고 있는 것을 볼 수 있는데요.
두번째 이미지를 보통 스마트폰 홈페이지 또는 모바일 웹페이지라고 부릅니다.
이렇게 다른 모양을 보이는 이유는 반응형 웹 또는 적응형 웹 이라 불리는 기술이 적용되어 있기 때문입니다.
간단히 말해, 화면 가로 해상도가 넓은 PC에서 접속할 떄는 첫번째 화면을,
가로 해상도가 좁은 스마트폰에서 접속할 때는 두 번째 화면을 자동으로 보여주는 것이지요.
참고로 네이버의 경우 적응형 웹 기술을 사용하고 있습니다.
때로는 PC화면에서도 스마트폰에서 보이는 화면처럼 보고 싶을 경우가 있는데요.
반응형 웹 기술이 적용된 홈페이지는 단순히 웹브라우저 창의 가로폭 크기를 줄이는 것만으로,
스마트폰에서 보이는 것처럼 화면을 볼 수 있습니다.
하지만 적응형 웹 기술이 적용된 홈페이지는 현재 PC에서 접속했는지,
스마트폰에서 접속했는지 사전에 검사를 하기 때문에 위 방법은 통하지 않는데요.
이 경우 PC에서 접속하였다 하더라도 스마트폰 접속처럼 스마트폰 모드로 바뀌주면 됩니다.
참고로 이 방법은 반응형 웹에서도 사용하실 수 있는 방법입니다.
아래와 같이 진행해 주세요.
1. 웹브라우저를 실행하신 다음에, 사용할 홈페이지에 접속해 주세요.
2. F12 키룰 눌러 주세요. 그러면 화면 아래나 오른쪽에 개발자 도구(DevTools)라는 창이 보여집니다.
만약 개발자 도구창이 아래 그림처럼 한글이 아닌 영어로 표시된 경우,
동그라미 ( Switch DevTools to Korean : 개발자 도구를 한국어로 전환 ) 부분을 클릭해주시면 한글로 바뀝니다.
3. 기기 툴바 전환 아이콘을 선택합니다.
아이콘을 한번 선택시 스마트폰에서 접속한 것처럼, 다시 클릭시 PC에서 접속한 것처럼 화면이 바뀌는데요.
클릭해서 스마트폰 모드로 변경해 주세요.
4. 가로 해상도를 선택합니다
스마트폰은 여러 종류가 있지요? 스마트폰 기계마다 가로 폭이 다른데요.
보통은 실제적인 크기보다는 정밀도를 나타내는 해상도라는 단위에 따라 보여지는 모양이 약간씩 다릅니다.
스마트폰 모드에서는 화면 상단에 아래 그림과 같은 눈금자 같은 해상도 선택 도구가 보이는데요.
마우스를 가져다 대면 해당하는 눈금이 '소형 휴대 기기'인지 '대형 휴대 기기'인지 등이 보여집니다..
해당 기기의 안내가 표시된 상태에서 마우스를 클릭하면,
가로폭이 변경되어 실제 내 스마트폰에서 보시는 것처럼 화면을 보실 수 있습니다.
5. 적응형 웹페이지는 새로고침
반응형 웹은 4번의 작업으로 끝이지만,
적용형 웹은 새로 고침 버튼을 한번 눌러 주셔야 ( 또는 단축키 F5키 ) 반영이 됩니다.
짜잔~ 아래와 같이 보이시나요?
다시 원래대로 돌아가고 싶으시다구요?
그러면 단축키 F12 키룰 눌러주시면 개발자 도구창이 사라지며 원래대로 복구가 됩니다.
PC에서 홈페이지(모바일 웹)를 스마트폰처럼 보는 방법을 알아 보았습니다.
하지만 카카오톡 공유같은 스마트폰 전용 기능은 작동하지 않아 완전하지는 않은 점도 알아 두세요.
필요하신 분에게 도움이 되셨는지 모르겠습니다.
여기까지 읽어주셔서 감사합니다.