크롬 모바일 모드 설정법 – PC에서 스마트폰 화면처럼 보기

여러분, 컴퓨터로 웹사이트를 보다가 '이거 휴대폰에서는 어떻게 보일까?'

 

궁금하신 적 있으신가요?

 

저도 블로그를 운영하면서 모바일에서 제 글이 어떻게 보이는지 항상 확인하곤 했는데요.

 

이 글에서 한번 그 방법들을 다뤄보고자 합니다.

 

마지막에 모바일 모드의 숨겨진 꿀팁까지 챙겨가세요!

 

 

 

광고

 

 

 

이런 걸 알아가세요!

✔️ 개발자 도구를 활용한 다양한 모바일 화면 확인 방법
✔️ 다양한 스마트폰 기종별로 화면 테스트 방법
✔️ 모바일 모드 단축키로 시간 절약하는 방법

 

 

 

모바일 모드가 필요한 이유

요즘은 대부분의 사람들이 스마트폰으로 인터넷을 이용하기 때문에, 웹사이트가 모바일에서 어떻게 보이는지 확인하는 것이 정말 중요해요. 특히 아래와 같은 분들에게 유용합니다

 

• 블로그나 홈페이지를 운영하시는 분
• 온라인 쇼핑몰을 관리하시는 분
• 자녀나 손주들이 보는 화면이 궁금하신 어르신들
• 스마트폰 없이 모바일 화면을 확인하고 싶으신 분

 

크롬 브라우저의 개발자 도구를 사용하면 PC에서 스마트폰 화면처럼 웹사이트를 볼 수 있답니다.

 

 

 

알아두면 좋은 사전 지식

모바일 모드를 사용하기 전에 몇 가지 알아두면 좋은 내용이 있어요

 

1. 개발자 도구란? 크롬에 내장된 기능으로, 웹사이트를 분석하고 수정할 수 있는 도구예요. 우리는 이 중에서 모바일 화면 시뮬레이션 기능을 사용할 거예요.

 

2. 지원되는 브라우저: 이 방법은 크롬뿐만 아니라 엣지, 웨일, 브레이브 등 크로미움 기반 브라우저에서도 동일하게 작동해요.

 

3. 실제 모바일과의 차이점: 이 방법으로 보는 화면은 실제 모바일과 90-95% 유사하지만, 일부 앱 전용 기능은 확인할 수 없어요.

 

 

 

자, 이제 본격적으로 모바일 모드 설정 방법을 알아볼까요?

 

 

 

방법 1: F12 키로 개발자 도구 열기

가장 간단하게 개발자 도구에 접근하는 방법은 F12 키를 사용하는 거예요. 컴퓨터 화면을 보면서 따라해 보세요.

 

 

 

F12 키를 눌러 개발자 도구 열기

 

1. 크롬 브라우저를 실행하고 원하는 웹사이트에 접속하세요
2. 키보드의 F12 키를 한 번 눌러주세요
3. 화면 오른쪽이나 하단에 개발자 도구 창이 나타날 거예요
4. 혹시 F12 키가 작동하지 않는다면, 다음 방법을 시도해 보세요

 

F12 키가 안 되시나요? 걱정 마세요! 일부 노트북이나 회사 컴퓨터에서는 F12 키가 막혀있을 수 있어요. 그럴 땐 다른 방법으로 시도해 봅시다.

 

 

 

 

방법 2: 마우스 우클릭으로 개발자 도구 열기

F12 키가 작동하지 않는다면, 마우스 우클릭으로도 동일한 기능에 접근할 수 있어요.

 

1. 웹페이지의 빈 공간에 마우스 커서를 놓고 오른쪽 버튼을 한 번 선택하세요
2. 나타나는 메뉴에서 '검사' 또는 '요소 검사'를 선택하세요
3. 개발자 도구 창이 나타납니다
4. 이 방법도 안 된다면, 메뉴를 통한 방법을 시도해 보세요

 

 

 

 

방법 3: 크롬 메뉴를 통해 개발자 도구 열기

위의 두 방법이 모두 작동하지 않는다면, 크롬 메뉴를 통해 접근하는 방법도 있어요. 특히 회사나 학교 컴퓨터에서 다른 방법이 막혀있을 때 유용합니다.

 

 

 

크롬 메뉴에서 개발자 도구 찾기

 

1. 크롬 창 오른쪽 상단의 점 세 개(⋮) 메뉴 아이콘을 선택하세요
2. 메뉴가 펼쳐지면 아래쪽으로 스크롤하여 '도구 더보기'를 선택하세요
3. 확장된 메뉴에서 '개발자 도구'를 선택하세요
4. 또는 메뉴에서 바로 '개발자 도구'를 찾아 선택하세요

 

 

이제 개발자 도구가 열렸으면, 모바일 모드 설정을 시작해 볼까요?

 

 

 

방법 4: 모바일 모드로 전환하기

개발자 도구가 열리면, 이제 모바일 화면으로 전환할 차례예요. 모두가 쉽게 따라할 수 있도록 차근차근 설명해 드릴게요.

 

 

 

모바일 기기 아이콘 선택하기

 

1. 개발자 도구 상단에 여러 탭이 보일 거예요. 'Elements' 탭 근처를 보세요
2. 왼쪽 상단에 있는 작은 모바일/태블릿 모양 아이콘을 찾아 선택하세요
3. 아이콘을 선택하면 웹페이지가 모바일 화면처럼 변경됩니다
4. 이제 실제 모바일에서 보는 것과 비슷한 화면이 나타납니다

 

 

 

 

 

아이콘이 잘 안 보이시나요? 걱정 마세요. 개발자 도구 창의 왼쪽 상단 부분을 잘 살펴보시면, 보통 작은 모바일 기기 모양의 아이콘이 있어요. 그걸 선택하시면 됩니다.

 

 

 

 

광고

 

 

방법 5: 다양한 모바일 기기 선택하기

모바일 모드로 전환했다면, 이제 다양한 스마트폰 기종별로 화면을 확인해볼 수 있어요. 아이폰, 갤럭시 등 여러 기기 옵션 중에서 선택할 수 있답니다.

 

 

 

원하는 모바일 기기 선택하기

 

 

1. 모바일 모드로 전환하면 상단에 기기 선택 드롭다운 메뉴가 나타납니다
2. 드롭다운 메뉴를 선택하면 iPhone, Galaxy 등 다양한 기기 목록이 나옵니다
3. 확인하고 싶은 기기를 선택하세요. 예: 'iPhone 12 Pro', 'Galaxy S20' 등
4. 선택한 기기의 화면 크기에 맞게 웹페이지가 조정됩니다

 

 

기기를 선택하면 그 기기의 화면 크기와 해상도에 맞게 웹페이지가 표시돼요. 이렇게 다양한 기기에서 웹사이트가 어떻게 보이는지 확인할 수 있답니다.

 

 

 

 

방법 6: 화면 방향 전환하기

스마트폰은 가로와 세로로 화면을 전환하며 사용하잖아요? 크롬 모바일 모드에서도 이렇게 화면 방향을 전환할 수 있어요.

 

1. 모바일 모드 상단에 있는 가로/세로 전환 아이콘을 찾으세요
2. 이 아이콘을 선택하면 가로 모드와 세로 모드를 번갈아 전환할 수 있어요
3. 특히 게임 사이트나 동영상 사이트를 확인할 때 가로 모드가 유용합니다
4. 반응형 웹사이트라면 화면 방향에 따라 레이아웃이 자동으로 조정됩니다

 

모바일 화면을 가로로 보면 PC 화면과 비슷하게 보이지만, 여전히 모바일 환경의 특성을 유지한다는 점을 기억하세요.

 

 

 

방법 7: 네트워크 속도 시뮬레이션하기

모바일 기기는 때로 PC보다 인터넷 속도가 느릴 수 있어요. 느린 모바일 환경에서 웹사이트가 어떻게 작동하는지 확인하고 싶다면, 네트워크 속도도 조절해 볼 수 있답니다.

 

1. 개발자 도구 상단의 'Network' 탭을 선택하세요
2. 'No throttling' 드롭다운 메뉴에서 '3G'나 '2G' 같은 느린 속도를 선택하세요
3. 웹페이지를 새로고침하여 선택한 속도에서 로딩되는 모습을 확인하세요
4. 이렇게 하면 느린 인터넷 환경에서 사이트가 얼마나 빠르게 로딩되는지 확인할 수 있어요

 

이 기능은 특히 블로그나 웹사이트를 운영하시는 분들에게 유용해요. 모바일 사용자들이 실제로 어떤 경험을 하게 될지 미리 확인해볼 수 있으니까요!

 

 

 

방법 8: 터치 이벤트 시뮬레이션하기

모바일 기기는 마우스 클릭이 아닌 터치로 작동하잖아요. 크롬 모바일 모드에서는 터치 이벤트도 시뮬레이션할 수 있어요.

 

1. 모바일 모드에서 마우스로 선택하면 터치 이벤트로 인식됩니다
2. 더블 탭, 길게 누르기 등의 제스처는 마우스 동작으로 비슷하게 테스트할 수 있어요
3. 핀치 줌(두 손가락으로 확대/축소)은 Ctrl + 마우스 휠로 비슷하게 테스트할 수 있습니다
4. 스와이프는 마우스로 드래그하여 시뮬레이션할 수 있어요

 

이렇게 하면 모바일에서 웹사이트가 어떻게 동작하는지 더 정확히 확인할 수 있답니다.

 

 

 

자주 묻는 질문

 

Q: 다른 브라우저에서도 모바일 모드를 사용할 수 있나요?

A: 네, 마이크로소프트 엣지, 네이버 웨일, 오페라 등 크로미움 기반 브라우저는 모두 비슷한 방식으로 모바일 모드를 제공합니다. 파이어폭스는 '반응형 디자인 모드'라는 비슷한 기능을 제공해요.

 

 

Q: 모바일 모드에서 본 화면이 실제 모바일과 100% 동일한가요?

A: 90-95% 정도 비슷하지만, 완전히 동일하지는 않아요. 실제 기기의 하드웨어 특성, 브라우저 버전, 운영체제 등에 따라 약간의 차이가 있을 수 있습니다.

 

 

Q: F12 키가 작동하지 않는데 어떻게 해야 하나요?

A: 일부 컴퓨터에서는 F12 키가 다른 기능으로 설정되어 있거나 제한되어 있을 수 있어요. 이럴 때는 마우스 우클릭 후 '검사'를 선택하거나, 크롬 메뉴(⋮) → 도구 더보기 → 개발자 도구를 통해 접근하세요.

 

 

Q: 모바일 앱처럼 보이게 할 수도 있나요?

A: 아니요, 크롬의 모바일 모드는 웹사이트가 모바일 브라우저에서 어떻게 보이는지만 시뮬레이션해요. 실제 모바일 앱의 인터페이스나 기능은 테스트할 수 없습니다.

 

 

 

 

 

꿀팁! 모바일 모드 활용법

이 글을 끝까지 읽어주셔서 감사합니다! 약속드린 대로 모바일 모드의 숨겨진 활용법을 알려드릴게요.

 

 

 

모바일 모드 단축키로 시간 절약하기

개발자 도구를 열고 모바일 모드로 전환하는 과정을 매번 반복하기 번거롭다면, 이 단축키를 기억하세요

• Windows: Ctrl  + Shift + M
• Mac: Cmd + Shift + M

 

크롬에서 이 단축키를 누르면 개발자 도구가 열리면서 바로 모바일 모드로 전환됩니다. 시간을 크게 절약할 수 있어요!

 

 

 

사용자 정의 기기 추가하기

크롬에서 제공하는 기본 기기 목록 외에도, 사용자 정의 기기를 추가할 수 있답니다

 

1. 모바일 모드에서 기기 선택 드롭다운 메뉴를 열어 하단의 'Edit' 버튼을 선택하세요
2. 'Add custom device...'를 선택하여 원하는 화면 크기와 기기명을 입력하세요
3. 이렇게 하면 특정 화면 크기에 맞춰 테스트할 수 있어요
4. 특히 태블릿이나 폴더블 폰 등 특이한 화면 비율을 테스트할 때 유용합니다

 

 

스크린샷 저장하기

모바일 화면의 스크린샷을 저장하고 싶으시다면

 

1. 모바일 모드에서 Ctrl + Shift + P (Mac은 Cmd + Shift + P)를 눌러 명령 메뉴를 열어요
2. 'screenshot'을 입력하면 여러 스크린샷 옵션이 나타납니다
3. 'Capture full size screenshot'을 선택하면 스크롤해서 볼 수 있는 부분까지 모두 캡처됩니다
4. 이미지는 자동으로 다운로드 폴더에 저장됩니다

 

 

이렇게 캡처한 스크린샷은 모바일 화면에서의 웹사이트 모습을 기록하거나 공유하는 데 유용하게 사용할 수 있어요.

 

크롬의 개발자 도구를 활용한 모바일 모드를 사용하면 여러 기기를 일일이 확인하지 않아도 다양한 모바일 환경에서 웹사이트가 어떻게 보이는지 쉽게 확인할 수 있답니다.

 

이 기능을 잘 활용하셔서 더 나은 모바일 경험을 제공하거나 확인하시길 바랍니다!