반응형
스마트폰 보기를 확인하고 싶을 때는 구글 크롬을 사용하자!
스마트폰이 보급되고 있는 현대에는 리스폰시브 웹 디자인으로 스마트폰 뷰를 지원하는 웹 사이트가 많아지고 있습니다.
그렇기 때문에 웹디자이너나 취미로 웹사이트를 제작하고 있는 사람들은 작성한 웹사이트를 스마트폰으로 보여줬을 때 어떻게 나타나는지 궁금하겠죠.
Web 사이트의 스마트폰 뷰를 확인하는데, 가지고 있는 Android 스마트폰이나 iPhone으로 확인해도 스마트폰에 따라 해상도는 상당히 달라지기 때문에 태블릿 등의 디바이스를 고려하면 곤란해집니다.
에뮬레이터 등을 사용하여 확인하고 싶어도 에뮬레이터에서는 재현이 어렵거나 부팅에 시간이 걸리는 등 상당한 수고가 걸리기 때문에 힘듭니다.
그래서 편리한 것이 구글 크롬의 개발자 툴(개발자 툴)입니다.컴퓨터의 Google Chrome 브라우저에서 빠르게 스마트폰 표시로 전환하여 어떻게 표시되는지 확인할 수 있습니다.기본 기능이므로 애드온 도입 등 준비가 필요 없기 때문에 바로 체크할 수 있습니다.
이 기사에서는 구글 크롬의 개발자 도구로 웹사이트를 스마트폰으로 표시하는 방법을 소개하겠습니다.
크롬에서 사이트를 스마트폰으로 표시하는 방법
이제 구글 크롬의 개발자 도구 사용법을 설명하겠습니다.
먼저 스마트폰을 보고 싶은 웹사이트에 접속하여 윈도우 우측 상단의 메뉴 버튼을 클릭하여 열고 ′기타 도구′에 마우스 커서를 올려주세요.
하위 메뉴가 표시되므로 ′디벨로퍼 도구′를 클릭하십시오.
창의 오른쪽에 개발자 도구가 표시됩니다.
개발자 도구는 단축키가 설정되어 있어 ′Ctrl키+Shift키+I키′를 동시에 누르거나 F12키를 눌러도 열 수 있습니다.
개발자 도구를 표시하는 위치를 바꾸고 싶다면 개발자 도구 오른쪽 상단에 있는 메뉴 버튼을 클릭하여 메뉴를 열고 ′Dock side′ 버튼에서 원하는 표시로 변경하십시오.버튼은 왼쪽부터 「다른 창으로 표시」 「왼쪽 표시」 「아래쪽 표시」 「오른쪽 표시」로 되어 있습니다.
그러면 웹사이트를 스마트폰 보기로 해보죠.
개발자 도구 왼쪽 상단에 표시된 스마트폰 아이콘을 클릭하면 스마트폰 뷰로 만들 수 있습니다.단축키는 디벨로퍼툴이 포커스된 상태에서 ′Ctrl키+Shift키+M키′를 동시에 누름입니다.
표시 크기가 스마트폰 크기로 바뀌는데요,
이것만으로는 Web 사이트가 스마트폰 표시로 전환되지 않습니다.스마트폰 표시로 하려면 브라우저의 다시 읽기 버튼을 클릭하여 다시 읽기를 실시합시다.
F5키(Mac이면 Commant + R키)를 누르면 다시 읽기가 이루어집니다.
Web 페이지를 다시 불러오는 것으로, 스마트폰 표시로 전환할 수 있었습니다.
스마트폰 표시로 하는 것으로, 스마트폰 조작과 같이 클릭으로 탭·드래그로 스와이프 조작을 실시할 수 있게 됩니다.
스마트폰 표시에서 일반 표시로 되돌리려면 개발자 도구의 스마트폰 아이콘을 클릭하면 원래대로 되돌릴 수 있습니다.
아니면 단축키의 ′Ctrl키+Shift키+M키′를 동시에 누르세요.
특정 스마트폰 설정을 사용하다
크롬에는 특정 스마트폰 설정이 프리셋으로 준비되어 있으며, 윈도우 상단의 ′Responsive′ 부분을 클릭하면 메뉴에서 선택할 수 있습니다.선택할 수 있는 프리셋은 Galaxy·Pixel·iPhone·iPad의 각 기종으로 되어 있습니다.
Edit을 클릭하면 다른 스마트폰 프리셋을 선택하거나 직접 프리셋 항목을 사용자 지정하여 만들 수 있습니다.
해상도나 표시 크기를 변경하다
′Responsive′를 선택하고 있으면 그 오른쪽에 해상도 수치 입력란이 표시됩니다.
가로×세로 해상도를 320px~2560px 중에서 선택할 수 있습니다.
또한 그 바로 아래에 표시된 구분 바는 중앙이 ′Mobile S-320px′ 사이즈, 끝으로 갈수록 M, L, Tablet 사이즈로 변화하고 클릭하여 지정한 해상도로 설정할 수 있습니다.
해상도란 오른쪽에 표시되어 있는 것은 확대 배율로, 해상도를 만지지 않고 웹 사이트를 확대·축소 표시시킬 수 있습니다.
스마트폰의 방향을 변경하다
스마트폰의 방향은 기본적으로 세로로 되어 있습니다.
방향을 변경하려면 브라우저 상단 메뉴 오른쪽에 있는 아이콘을 클릭하십시오.이제 스마트폰 방향이 옆으로 바뀔 거예요.다시 클릭하면 방향을 세로로 되돌릴 수 있습니다.
스마트폰의 프레임을 표시시키다
스마트폰의 프리셋을 사용하고 있을 때 프레임 표시에 대응하고 있는 프리셋이면 스마트폰의 프레임을 표시시킬 수 있습니다.
브라우저 창 오른쪽 상단의 메뉴 버튼을 클릭하고 ′Show device frame′을 클릭하세요.
스마트폰 프레임이 표시되어 어떤 느낌이 들지 이미지하기 쉬워집니다.
기타 설정
브라우저 창 오른쪽 상단에 있는 메뉴 버튼에서는 다양한 설정을 할 수 있습니다.기타 설정에 대해 가볍게 소개해 드리겠습니다.
Show Media Queries: 스타일 시트에 적혀 있는 미디어 쿼리의 구분선이 표시됨
Show rulers : 화면 왼쪽에 눈금이 표시됨
Add device pixel ratio: 상부 바에 DPR 메뉴를 추가하여 하드웨어 스타일 시트의 픽셀 크기 비율을 설정할 수 있다.
Add device type : 상단 막대에 Mobile/Desktop 메뉴를 추가하여 PC 및 모바일 장치 스크린 터치 기능을 켜고 끌 수 있음
정리
확장 기능 불필요! PC 버전 크롬에서 스마트폰 표시 화면을 확인하는 방법을 소개! 어떠신가요?
웹디자이너나 취미로 웹사이트를 만들고 있는 사람들 중에는 웹사이트가 스마트폰으로 어떻게 뜨는지 확인하고 싶은 분들도 계실 것 같습니다.
Google Chrome의 개발자 도구를 사용하면 브라우저 단독으로 웹 사이트의 스마트폰 표시를 확인할 수 있습니다.꼭 시도해보세요.
스마트폰이 보급되고 있는 현대에는 리스폰시브 웹 디자인으로 스마트폰 뷰를 지원하는 웹 사이트가 많아지고 있습니다.
그렇기 때문에 웹디자이너나 취미로 웹사이트를 제작하고 있는 사람들은 작성한 웹사이트를 스마트폰으로 보여줬을 때 어떻게 나타나는지 궁금하겠죠.
Web 사이트의 스마트폰 뷰를 확인하는데, 가지고 있는 Android 스마트폰이나 iPhone으로 확인해도 스마트폰에 따라 해상도는 상당히 달라지기 때문에 태블릿 등의 디바이스를 고려하면 곤란해집니다.
에뮬레이터 등을 사용하여 확인하고 싶어도 에뮬레이터에서는 재현이 어렵거나 부팅에 시간이 걸리는 등 상당한 수고가 걸리기 때문에 힘듭니다.
그래서 편리한 것이 구글 크롬의 개발자 툴(개발자 툴)입니다.컴퓨터의 Google Chrome 브라우저에서 빠르게 스마트폰 표시로 전환하여 어떻게 표시되는지 확인할 수 있습니다.기본 기능이므로 애드온 도입 등 준비가 필요 없기 때문에 바로 체크할 수 있습니다.
이 기사에서는 구글 크롬의 개발자 도구로 웹사이트를 스마트폰으로 표시하는 방법을 소개하겠습니다.
크롬에서 사이트를 스마트폰으로 표시하는 방법
이제 구글 크롬의 개발자 도구 사용법을 설명하겠습니다.
먼저 스마트폰을 보고 싶은 웹사이트에 접속하여 윈도우 우측 상단의 메뉴 버튼을 클릭하여 열고 ′기타 도구′에 마우스 커서를 올려주세요.
하위 메뉴가 표시되므로 ′디벨로퍼 도구′를 클릭하십시오.
창의 오른쪽에 개발자 도구가 표시됩니다.
개발자 도구는 단축키가 설정되어 있어 ′Ctrl키+Shift키+I키′를 동시에 누르거나 F12키를 눌러도 열 수 있습니다.
개발자 도구를 표시하는 위치를 바꾸고 싶다면 개발자 도구 오른쪽 상단에 있는 메뉴 버튼을 클릭하여 메뉴를 열고 ′Dock side′ 버튼에서 원하는 표시로 변경하십시오.버튼은 왼쪽부터 「다른 창으로 표시」 「왼쪽 표시」 「아래쪽 표시」 「오른쪽 표시」로 되어 있습니다.
그러면 웹사이트를 스마트폰 보기로 해보죠.
개발자 도구 왼쪽 상단에 표시된 스마트폰 아이콘을 클릭하면 스마트폰 뷰로 만들 수 있습니다.단축키는 디벨로퍼툴이 포커스된 상태에서 ′Ctrl키+Shift키+M키′를 동시에 누름입니다.
표시 크기가 스마트폰 크기로 바뀌는데요,
이것만으로는 Web 사이트가 스마트폰 표시로 전환되지 않습니다.스마트폰 표시로 하려면 브라우저의 다시 읽기 버튼을 클릭하여 다시 읽기를 실시합시다.
F5키(Mac이면 Commant + R키)를 누르면 다시 읽기가 이루어집니다.
Web 페이지를 다시 불러오는 것으로, 스마트폰 표시로 전환할 수 있었습니다.
스마트폰 표시로 하는 것으로, 스마트폰 조작과 같이 클릭으로 탭·드래그로 스와이프 조작을 실시할 수 있게 됩니다.
스마트폰 표시에서 일반 표시로 되돌리려면 개발자 도구의 스마트폰 아이콘을 클릭하면 원래대로 되돌릴 수 있습니다.
아니면 단축키의 ′Ctrl키+Shift키+M키′를 동시에 누르세요.
특정 스마트폰 설정을 사용하다
크롬에는 특정 스마트폰 설정이 프리셋으로 준비되어 있으며, 윈도우 상단의 ′Responsive′ 부분을 클릭하면 메뉴에서 선택할 수 있습니다.선택할 수 있는 프리셋은 Galaxy·Pixel·iPhone·iPad의 각 기종으로 되어 있습니다.
Edit을 클릭하면 다른 스마트폰 프리셋을 선택하거나 직접 프리셋 항목을 사용자 지정하여 만들 수 있습니다.
해상도나 표시 크기를 변경하다
′Responsive′를 선택하고 있으면 그 오른쪽에 해상도 수치 입력란이 표시됩니다.
가로×세로 해상도를 320px~2560px 중에서 선택할 수 있습니다.
또한 그 바로 아래에 표시된 구분 바는 중앙이 ′Mobile S-320px′ 사이즈, 끝으로 갈수록 M, L, Tablet 사이즈로 변화하고 클릭하여 지정한 해상도로 설정할 수 있습니다.
해상도란 오른쪽에 표시되어 있는 것은 확대 배율로, 해상도를 만지지 않고 웹 사이트를 확대·축소 표시시킬 수 있습니다.
스마트폰의 방향을 변경하다
스마트폰의 방향은 기본적으로 세로로 되어 있습니다.
방향을 변경하려면 브라우저 상단 메뉴 오른쪽에 있는 아이콘을 클릭하십시오.이제 스마트폰 방향이 옆으로 바뀔 거예요.다시 클릭하면 방향을 세로로 되돌릴 수 있습니다.
스마트폰의 프레임을 표시시키다
스마트폰의 프리셋을 사용하고 있을 때 프레임 표시에 대응하고 있는 프리셋이면 스마트폰의 프레임을 표시시킬 수 있습니다.
브라우저 창 오른쪽 상단의 메뉴 버튼을 클릭하고 ′Show device frame′을 클릭하세요.
스마트폰 프레임이 표시되어 어떤 느낌이 들지 이미지하기 쉬워집니다.
기타 설정
브라우저 창 오른쪽 상단에 있는 메뉴 버튼에서는 다양한 설정을 할 수 있습니다.기타 설정에 대해 가볍게 소개해 드리겠습니다.
Show Media Queries: 스타일 시트에 적혀 있는 미디어 쿼리의 구분선이 표시됨
Show rulers : 화면 왼쪽에 눈금이 표시됨
Add device pixel ratio: 상부 바에 DPR 메뉴를 추가하여 하드웨어 스타일 시트의 픽셀 크기 비율을 설정할 수 있다.
Add device type : 상단 막대에 Mobile/Desktop 메뉴를 추가하여 PC 및 모바일 장치 스크린 터치 기능을 켜고 끌 수 있음
정리
확장 기능 불필요! PC 버전 크롬에서 스마트폰 표시 화면을 확인하는 방법을 소개! 어떠신가요?
웹디자이너나 취미로 웹사이트를 만들고 있는 사람들 중에는 웹사이트가 스마트폰으로 어떻게 뜨는지 확인하고 싶은 분들도 계실 것 같습니다.
Google Chrome의 개발자 도구를 사용하면 브라우저 단독으로 웹 사이트의 스마트폰 표시를 확인할 수 있습니다.꼭 시도해보세요.
반응형