모바일 기기는 이미 많은 웹 사이트에 대한 온라인 독자층이 많지 않더라도 엄청난 양의 청크를 구성하고 있으므로 사이트가 iPhone 또는 태블릿에서 제대로 표시되고 작동하는지 확인하는 것이 중요합니다. 특정 URL에 대한 모바일 레이아웃 미리보기를 제공하는 많은 서비스가 있지만, Apple은 OS X El Capitan의 Safari 9를 사용하여 모바일 준비를위한 웹 사이트 테스트를 훨씬 쉽게 만들었습니다. 반응 형 디자인 모드 (Responsive Design Mode) 라는 새로운 기능은 다양한 Apple 장치 및 일반적인 모바일 화면 해상도에서 웹 사이트의 모양을 빠르게 미리 볼 수 있습니다. 작동 방식은 다음과 같습니다.
반응 형 디자인 모드는 OS X El Capitan의 Safari 9에서만 제공되는 새로운 기능이므로 반복해서 액세스하려면 해당 버전의 브라우저 및 운영 체제를 실행해야합니다. Mac이이 요구 사항을 충족하면 먼저 Safari의 개발자 모드를 활성화해야합니다. 그렇게하려면 Safari를 시작하고 메뉴 막대에서 Safari를 클릭하십시오. 그런 다음 환경 설정> 고급을 선택하십시오.
Safari 환경 설정 윈도우의 고급 탭에서, “메뉴 막대에 개발 메뉴 표시”라고 표시된 상자를 체크 하십시오. 옵션의 이름에서 알 수 있듯이, 새로운“개발”메뉴가 오른쪽의 Safari 메뉴 막대에 나타납니다. “북마크”
그런 다음 Safari 환경 설정 창을 닫고 반응 형 디자인 모드에서 테스트하려는 웹 사이트로 이동하십시오. 웹 사이트가 브라우저에 완전히로드되면 키보드 단축키 Command-Option-R 을 사용하면 브라우저 창이 여러 모바일 장치 해상도 중 하나의 미리보기로 변환되는 것을 볼 수 있습니다 ( 개발 위치 를 클릭하여 반응 형 디자인 모드에 액세스 할 수도 있음). Safari 메뉴 막대에서 반응 형 디자인 모드 입력을 선택 하십시오 .
Safari 반응 형 디자인 모드를 사용하면 3.5 인치 iPhone 4S에서 12.9 인치 iPad Pro에 이르기까지 모든 Apple 모바일 장치 해상도에서 웹 사이트가 어떻게 보이는지 미리 볼 수 있습니다. 사용자는 1x, 2x 또는 3x“Retina”해상도를 선택하고 Chrome, Firefox 및 Edge와 같은 가장 널리 사용되는 브라우저의 동작을 모방하도록 브라우저 에이전트를 변경할 수 있습니다.
각 장치 및 화면 크기에 대해 사용자는 장치 아이콘을 클릭하여 세로 및 가로 방향으로 변경하거나 분할보기를 지원하는 iPad Air 및 iPad Pro와 같은 장치의 경우 클릭하여 다양한 분할보기 레이아웃간에 회전 할 수 있습니다.
Safari 반응 형 디자인 모드에는 기존의 유사한 도구 중 일부 옵션이 없지만 Safari에 직접 내장하면 웹 디자이너에게는 시간을 크게 절약 할 수 있으며 웹 사이트 소유자는 모바일 방문자를 확인하려는 경우 학습 및 테스트 도구가 될 수 있습니다 화면 해상도 나 크기에 관계없이 최고의 경험을 얻고 있습니다.
테스트가 끝나면 브라우저 창이나 탭을 닫거나 바로 가기 Command-Option-R을 다시 눌러 반응 형 디자인 모드를 종료 할 수 있습니다.
