[Safari] 사파리 브라우저에서 모바일 모드로 보려면?

사파리(Safari) 브라우저는 macOS 및 iOS 기기에서 가장 널리 사용되는 웹 브라우저 중 하나입니다. 웹 개발자들은 웹사이트를 디자인하고 개발할 때 사파리에서의 호환성을 고려해야 합니다. 반응형 웹 디자인은 모바일 기기 및 데스크톱 환경에서 웹사이트가 어떻게 표시되는지를 확인하는 데 중요합니다. 이를 위해 사파리 브라우저에서 제공하는 반응형 모드에 접근하는 방법에 대해서 알아봅시다.

 

 

메뉴 막대에서 개발자용 메뉴 보기 체크하기

우선 사파리 브라우저를 엽니다.

또 선행으로 Safari 설정 > 고급 > ✅ 메뉴 막대에서 개발자용 메뉴 보기가 체크가 되어 있어야 개발자용 메뉴를 사용하실 수 있습니다.

자세한 설정 방법이 보고 싶으시다면 아래의 링크를 참고해 주세요.

초보자를 위한 Safari 브라우저 개발자 도구 설정 방법

 

 

 

반응형 모드 진입

상단 메뉴바에 보시면 개발자용 > 응답형 디자인 모드 시작을 클릭하시면 반응형 모드를 접근하실 수 있습니다.

*참고로 단축키는 control + cmd + R 입니다.

 

개발자용 > 응답형 디자인 모드 시작

 

 

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

 

가로 모드(landscape)

 

접근하시고 한번 새로고침을 해주세요.

*참고로 단축키는 cmd + R 입니다.

확인하고 싶은 디바이스를 클릭하시면 됩니다.

디바이스를 한 번 더 클릭하시면 가로 모드(landscape)로 보실 수 있습니다.

 

디바이스 선택하기

 

 

분할 화면(split view)

태블릿(Tablet) 모드에서도 똑같이 클릭으로 가로 모드에 접근하실 수 있으며 여러 번 클릭해 보시면 분할 화면(split view)도 접근 가능합니다.

태블릿 모드 > 분할 화면

 

 

해상도 크기 조절하기

제공된 디바이스 크기 외에 반응형 모드로 접근하고 싶다면, 우측에 웹페이지 아이콘을 클릭하여 화면의 가장자리를 마우스로 드래그하여 해상도 크기를 조절해 보세요.

해상도 크기 조절하기

 

 

반응형 모드 종료

반응형 모드를 빠져나오려면 상단 메뉴에서 개발자용 > 응답형 디자인 모드 종료를 클릭하거나, 단축키 control + cmd + R 누르시면 됩니다.

 

 

 

사파리 브라우저의 반응형 모드를 활용하면 모바일 및 데스크톱 환경에서 웹사이트를 효과적으로 테스트할 수 있습니다. 다양한 기기와 화면 크기에서 웹사이트의 모습을 확인하고, 성능을 향상하는 데 도움이 됩니다. 웹 개발 및 디자인 작업을 수행할 때 사파리 브라우저의 반응형 모드를 적극적으로 활용하여 사용자 경험을 향상할 수 있습니다. 이렇게 사파리 브라우저에서 제공하는 반응형 모드에 접근하는 방법에 대해서 알아보았습니다.

 

 

 

 

[AI] 글쓰기 고민? 뤼튼(;wrtn) AI가 도와드립니다!

 

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

 

[CSS] 노치(Notch)와 홈 바(Home Bar)에 대응하는 CSS 환경 변수(env()) 활용 방법

 

[CSS] SCSS를 활용한 동적 Spinner 애니메이션 만들기

 

[Javascript] 다양한 방법으로 스타일 적용하기