널리

안녕하세요, 엔비전스입니다.

접근성 진단을 할 때 중요한 요소 중 하나는 오류의 원인에 대한 디버깅입니다. 이러한 디버깅을 통해서 각 문제가 진단하고 있는 서비스에서 수정해야 하는 이슈인지 혹은 스크린리더나 플랫폼 API에서 수정해야 하는 문제인지를 판단할 수 있어야 보다 실질적인 해결 방안을 제시할 수 있기 때문입니다.

따라서 여러 아티클을 통해 웹이나 안드로이드 앱에서의 접근성 트리를 포함한 디버깅 방법에 대해 다룬 적이 있습니다. 그럼에도 불구하고 새로운 아티클을 작성하는 이유는 Windows에서 iOS 웹브라우저 개발자 도구를 활용하는 방법을 공유하기 위함입니다. iOS Safari 모바일 웹을 디버깅하기 위해서는 일반적으로 macOS를 사용했습니다. 그러나 Inspect라는 프로그램을 활용하면 Chrome 개발자 도구를 사용하여 Windows에서도 iOS 웹을 안정적으로 디버깅할 수 있습니다. 즉, macOS 없이도 아이폰에서 웹의 VoiceOver 호환성 테스트를 자유롭게 할 수 있게 되었습니다.

이번 시간에는 Inspect의 특징, 설치 및 사용 방법에 대해 자세히 살펴보겠습니다.

Inspect 프로그램의 특징

• Chrome 브라우저의 개발자 도구를 많이 사용했다면 같은 툴을 사용하므로 특별한 사용법을 익히지 않아도 됩니다.
• Safari 뿐만 아니라 iOS 앱 내 웹뷰의 경우에도 테스트 환경에서 디버그 모드로 빌드된 앱을 사용할 경우 Inspect를 통해 마크업을 확인할 수 있습니다.
• 14일 동안 무료 평가판을 사용할 수 있으며, iOS 디버깅을 위해서는 연간 79달러 구독 결제가 필요한 Pro 버전을 사용해야 합니다.

준비사항

1. iOS에서 설정 > Safari > 고급으로 이동하여 '웹 인스펙터'를 켭니다. 이 설정이 되어 있지 않으면 컴퓨터와 아이폰이 연결되어 있어도 디버깅을 할 수 없습니다.
2. Windows에서 iTunes를 다운로드하여 설치합니다. iTunes는 아이폰과 컴퓨터 간 통신을 위한 드라이버 역할이므로 iCloud 등의 추가 소프트웨어는 필요하지 않습니다. 현재는 기존 클래식 iTunes를 사용할 수 있지만, 향후 Apple Devices라는 앱으로 대체될 예정입니다.
3. 케이블로 아이폰을 컴퓨터와 연결한 다음 '이 컴퓨터 신뢰'를 허용하고 iTunes에서 아이폰이 인식되는지 확인합니다. 아이폰이 인식되지 않으면 케이블과 신뢰 옵션을 다시 확인합니다.
4. Inspect Pro 버전을 Windows에 다운로드하여 설치합니다.
5. Inspect 계정을 생성합니다. Inspect를 처음 실행하면 회원가입 페이지로 이동할 수 있으며, 가입 후 로그인하면 프로그램이 다시 열립니다.
6. Inspect에서 'Run Setup'을 실행하고 1~3번 단계를 완료한 후 다음을 눌러 설정을 완료합니다.

디버깅하기

1. 설정이 완료되면 아이폰에서 디버깅할 웹페이지를 엽니다. Safari 브라우저와 웹뷰 디버깅이 가능한 앱에서 디버깅할 수 있지만, 아이폰의 Chrome 브라우저는 디버깅할 수 없습니다.
2. Inspect를 실행하면 연결된 디바이스 목록과 디버깅 가능한 페이지가 표시됩니다. 원하는 페이지 링크를 누르면 Chrome 개발자 도구가 열리고 디버깅 작업을 수행할 수 있습니다.

모바일 디버깅에서는 화면 미러링 버튼으로 웹페이지를 컴퓨터 화면에 표시할 수 있지만, 안드로이드와 달리 특정 요소를 클릭하여 실행하거나 Inspect 객체를 이동시키는 것은 불가능합니다. 따라서 특정 요소의 마크업을 확인하거나 VoiceOver 호환성 테스트를 위해서는 문자열 찾기로 해당 요소를 찾아야 합니다.