웹 개발에 있어서의 스마트폰으로부터의 동작 확인・검증의 환경

소개

스마트폰 대응하고 있는 Web 사이트가 더 이상 당연한 세상입니다만, Web 개발을 하고 있으면 스마트폰으로부터 열람했을 때의 동작을 확인을 할 기회가 많다고 생각합니다.
거기서, 어떠한 확인의 방법이 있는지, 간단하게 정리하고 싶습니다.

브라우저에서의 동작 확인

크롬

브라우저를 마우스 오른쪽 버튼으로 클릭 → "확인"→ 표시된 영역의 왼쪽 상단에있는 스마트 폰 아이콘을 클릭하면 스마트 폰에서 볼 때와 같은 화면이 나타납니다.

스마트 폰에서 볼 때처럼 클릭하면서 위아래로 슬라이드하면 화면이 스크롤됩니다.

Safari

브라우저 설정에서 개발자 메뉴를 표시하도록 설정합니다

메뉴에서 "개발"→ "응답 디자인 모드로 전환"을 클릭하면 스마트 폰에서 볼 때와 같은 화면이 나타납니다.

또한 표시된 모델을 선택하여 해상도를 변경할 수 있습니다. 매우 편리합니다

iOS 시뮬레이터(Mac만 해당)에서 동작 확인

Mac에서 Xcode를 설치하면 iOS 시뮬레이터를 시작할 수 있으므로 거기에서 iOS 시뮬레이터의 브라우저를 시작하면 동작을 확인할 수 있습니다.

실제 기기의 동작 확인

실제 기기에서 동작 확인하는 경우는 외부에서 접속 가능한 환경을 준비하고 거기에 액세스하여 동작 확인할 수 있습니다.
또한 Mac과 iPhone을 케이블로 연결하고 아래의 설정을 하면 Safari에서 웹 인스펙터를 표시할 수 있으므로 실제 기기의 디버깅이 용이해집니다.

1. iPhone의 설정 화면에서 Safari → 상세를 선택한다



2. 웹 인스펙터 스위치를 켭니다.



3. PC의 Safari를 시작하고 탭 메뉴에서 "개발"을 클릭하면 연결된 iPhone의 이름이 표시됩니다.
4. iPhone에서 Safari를 시작하고 적절한 웹 사이트에 액세스하면 PC의 개발 메뉴에 해당 사이트 이름이 표시되므로 선택합니다.



5. 선택 후, 아래와 같은 웹 인스펙터가 기동한다


이제 실제 기기에서 조작할 때 실행 로그를 콘솔에서 확인하거나 HTML 요소나 네트워크 등을 조사할 수 있습니다.

※Android의 실기 확인 방법에 대해서도 나중에 추기할 예정