Safari의 반응형 디자인 모드(Responsive Design Mode)는 OS X El Capitan에 탑재된 Safari 9부터 Apple이 도입한 기능입니다. 이 인터페이스는 웹 개발자가 다양한 화면 크기, 방향, 해상도에서 웹 경험을 설계할 수 있도록 도와주며, 여러 기기와 플랫폼에서 웹사이트와 앱이 올바르게 작동하는지 확인하는 데 유용합니다.
아래에서 Safari 브라우저에서 반응형 디자인 모드를 활성화하는 방법을 살펴보겠습니다.
이 글의 내용은 Safari 9부터 Safari 13까지, 즉 OS X El Capitan부터 macOS Catalina까지 적용됩니다. 참고로 Apple이 지원을 중단한 Windows용 Safari에서는 반응형 디자인 모드를 사용할 수 없습니다.
Safari에서 반응형 디자인 모드 활성화하기
Safari에서 반응형 디자인 모드와 함께 다른 개발자 도구도 활성화하려면 다음 단계를 따르세요.
메뉴 막대에서 Safari > 환경설정(Preferences)을 선택합니다.
팁: 키보드 단축키 Command+,(쉼표)를 누르면 환경설정 창을 빠르게 열 수 있습니다.
환경설정 대화상자에서 고급(Advanced) 탭을 선택합니다.
대화상자 하단의 '메뉴 막대에서 개발자용 메뉴 보기(Show Develop menu in menu bar)' 체크박스를 선택합니다.
이제 Safari 상단 메뉴 막대에 개발자용(Develop) 메뉴가 나타납니다.
Safari 메뉴에서 개발자용 > 반응형 디자인 모드로 들어가기(Enter Responsive Design Mode)를 선택합니다.
팁: 단축키 Option+Command+R을 누르면 반응형 디자인 모드에 바로 진입할 수 있습니다.
현재 열려 있는 웹 페이지가 반응형 디자인 모드로 표시됩니다. 페이지 상단에서 iOS 기기 또는 화면 해상도를 선택하면 해당 환경에서 페이지가 어떻게 렌더링되는지 확인할 수 있습니다.
또는 해상도 아이콘 위에 있는 드롭다운 메뉴를 사용해 다양한 플랫폼에서 웹 페이지가 어떻게 표시되는지 확인할 수도 있습니다.
Safari 개발자 도구
반응형 디자인 모드 외에도 Safari의 개발자용 메뉴에는 웹 개발과 디버깅에 유용한 다양한 옵션이 마련되어 있습니다.
다른 브라우저로 열기(Open Page With)
Mac에 현재 설치되어 있는 모든 브라우저에서 활성화된 웹 페이지를 엽니다.
사용자 에이전트(User Agent)
사용자 에이전트를 변경하면 웹사이트가 마치 다른 브라우저를 사용하는 것처럼 인식하도록 만들 수 있습니다.
웹 속성 검사기 보기(Show Web Inspector)
CSS 정보와 DOM 지표를 포함해 웹 페이지의 모든 리소스를 표시합니다.
오류 콘솔 보기(Show Error Console)
JavaScript, HTML, XML 관련 오류와 경고를 표시합니다.
페이지 소스 보기(Show Page Source)
현재 웹 페이지의 소스 코드를 확인하고 페이지 내용을 검색할 수 있습니다.
페이지 리소스 보기(Show Page Resources)
현재 페이지의 문서, 스크립트, CSS 등 각종 리소스를 표시합니다.
스니펫 편집기 보기(Show Snippet Editor)
코드 조각을 편집하고 실행할 수 있습니다. 테스트 작업 시 특히 유용한 기능입니다.
확장 프로그램 빌더 보기(Show Extension Builder)
코드를 패키징하고 메타데이터를 추가하여 Safari 확장 프로그램을 제작할 때 도움을 줍니다.
타임라인 기록 시작(Start Timeline Recording)
네트워크 요청, JavaScript 실행, 페이지 렌더링 등의 이벤트를 WebKit 인스펙터에서 기록할 수 있습니다.
캐시 비우기(Empty Caches)
Safari에 저장된 모든 캐시를 삭제합니다. 일반적인 웹사이트 캐시 파일뿐 아니라 전체 캐시를 정리합니다.
캐시 비활성화(Disable Caches)
캐싱을 비활성화하면 로컬 캐시를 사용하는 대신, 접속 요청이 있을 때마다 웹사이트에서 리소스를 새로 다운로드합니다.
스마트 검색 필드에서 JavaScript 허용(Allow JavaScript from Smart Search Field)
보안상의 이유로 기본적으로 비활성화되어 있는 기능으로, 이를 허용하면 JavaScript가 포함된 URL을 Safari 주소창에 직접 입력할 수 있습니다.