최근 대부분의 웹 디자이너들은 '반응형(responsive)' 방식으로 웹사이트를 제작하고 있습니다. 반응형 웹이란 방문자가 어떤 기기를 사용하든, 해당 기기에 가장 적합한 형태로 콘텐츠를 자동 조정해 보여주는 기술입니다. 예를 들어 아이폰으로 사이트에 접속하면 헤드라인 텍스트와 이미지가 모바일 환경에 맞는 크기로 자동 리사이즈됩니다.
직접 웹사이트를 제작 중이라면 다양한 화면 크기에서 페이지가 실제로 어떻게 보이는지 확인하고 싶을 것입니다. 이때 유용하게 활용할 수 있는 기능이 바로 Safari의 '반응형 디자인 모드(Responsive Design Mode)'입니다.
1단계: 개발자 메뉴 활성화하기
반응형 디자인 모드를 사용하려면 OS X 엘 캐피탄(El Capitan) 이상의 운영체제가 필요합니다. 또한 아직 Safari의 개발자(Develop) 메뉴를 켜지 않았다면 먼저 활성화해야 합니다.
Safari > 환경설정(Preferences)을 열고 고급(Advanced) 탭으로 이동한 뒤, 하단의 "메뉴 막대에서 개발자 메뉴 보기(Show Develop menu in menu bar)" 항목에 체크하면 됩니다. 이제 메뉴 막대에 개발자 메뉴가 나타납니다.
2단계: 반응형 디자인 모드로 진입하기
작업 중인 웹페이지를 연 상태에서 메뉴의 개발자 > 반응형 디자인 모드로 들어가기(Develop > Enter Responsive Design Mode)를 선택하세요. 별도의 설정 없이 즉시, 각종 iOS 기기는 물론 널리 쓰이는 다양한 화면 해상도에서 페이지가 어떻게 보이는지 확인할 수 있습니다.
마우스 포인터를 웹페이지 가장자리에 올린 뒤 좌우로 드래그하면 보이는 영역의 크기를 자유롭게 조절할 수 있습니다. 여러 기기 화면을 전환해 가며 페이지가 어떻게 변하는지 하나씩 살펴보세요. 평소에는 눈치채지 못했던 레이아웃 오류나 버그를 발견하게 될 수도 있습니다.
3단계: 모드 종료하기
확인 작업이 끝났다면 개발자 > 반응형 디자인 모드 종료(Develop > Exit Responsive Design Mode)를 선택하여 원래 화면으로 돌아오면 됩니다.