널리

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

PC의 여러 웹 브라우저에서 접근성 요소를 디버깅하는 방법은 많이 알려져 있습니다. Android, 아이폰 및 아이패드에서는 원격 디버깅을 통해 모바일 웹페이지의 요소를 디버깅하는 방법을 제공합니다.

이번 아티클에서는 Firefox, Chrome, Safari 브라우저에서 모바일 원격 디버깅을 통해 접근성 이슈를 디버깅하는 방법에 대해 살펴보겠습니다.

들어가기 전에

1. Chrome, Firefox 브라우저의 디버깅은 Windows 운영체제 기준이며, USB 연결로 디버깅하는 기준으로 작성되었습니다. 네트워크 등 다른 연결 방법으로의 디버깅 방법에 대해서는 브라우저별 도움말 또는 지원 페이지를 참조합니다.
2. macOS에서 Safari 브라우저로 디버깅 시 안정 버전으로 웹 인스펙터의 내용이 제대로 표시되지 않을 경우 Safari Technology Preview를 내려받아 설치하여 해결할 수 있습니다.
3. 이 아티클은 스크린 리더 사용자를 기준으로 작성되었으며, 버튼, 체크 상자등의 요소 이동 시 키보드를 사용하여 이동합니다.

사전 준비 과정

두 섹션에 걸쳐 Android 기기에서의 Chrome, Firefox 브라우저에서 디버깅을 위한 사전 준비 과정과 아이폰 및 아이패드의 Safari 브라우저로 디버깅을 위한 사전 준비 과정에 대해 살펴보겠습니다.

Chrome/Firefox 웹 브라우저로 디버깅하기 전 사전 준비 사항

Chrome, Firefox 브라우저로 원격 디버깅을 진행하기 전 다음의 사전 준비 과정이 필요합니다.

1. Android 기기에서 USB 원격 디버깅을 활성화합니다. 설정 > 개발자 옵션 > USB 디버깅 옵션을 체크합니다. 재조사별로 USB 디버깅 옵션 위치는 다를 수 있습니다.
2. Android 기기 모델명을 확인합니다. 기기 모델명은 스마트폰 드라이버를 다운로드하거나, 디버깅 시 유용하게 사용될 수 있습니다. 기기 모델명을 확인하려면, 설정 > 시스템 섹션의 디바이스에서 모델명을 확인할 수 있습니다.
3. 재조사별로 제공하는 스마트폰 USB 드라이버를 내려받아 PC에 설치합니다.

Android SDK 플랫폼 도구 페이지의 <다운로드> 섹션에서  <Windows용 SDK 플랫폼 도구 다운로드> 버튼을 클릭한 다음, 약관에 동의 후 Windows용 SDK를 내려받아 원하는 폴더에 압축을 해제합니다(아티클에서는 편의상 C: est 폴더로 진행).

4. PC에 Chrome 브라우저가 설치되어 있지 않다면 Chrome 브라우저를 설치합니다.
5. PC에 Firefox 브라우저가 설치되어 있지 않다면 Firefox 브라우저를 설치합니다.
6. SDK 플랫폼 도구를 원활히 사용하기 위한 환경 변수 설정을 진행합니다. 환경 변수 설정 방법에 대한 자세한 내용은 다음 섹션에서 다룹니다.

SDK 플랫폼 도구를 사용하기 위한 환경 변수 추가

SDK 플랫폼 도구를 원활히 사용하기 위한 환경 변수 추가 방법은 다음과 같습니다:

1. Win키(시작) 키를 눌러 <변수>를 입력한 다음, <시스템 환경 변수 편집> 항목을 위 또는 아래 방향 키로 선택 후 Enter 키를 누릅니다.
2. 시스템 속성 대화상자가 열리면, Tab 키로 <환경 변수(N)> 버튼으로 이동한 다음, Space 키를 눌러 환경 변수 대화상자를 엽니다.
3. Tab 키로 <시스템 변수> 목록으로 이동한 다음, Tab 키를 눌러 <새로 만들기> 버튼을 Space 키로 활성화합니다.
4. 변수 이름에는 원하는 변수의 이름(ex: platformtools)으로 지정하고, 변숫값 입력창에는 SDK 플랫폼 도구의 압축을 해제한 폴더로 지정합니다(ex: C: estplatform-tools).
5. 확인 버튼을 눌러 새 시스템 변수 대화상자를 닫습니다.
6. Shift+Tab 키를 눌러 시스템 변수 목록으로 이동한 다음, 위 또는 아래 방향 키로 <Path> 항목에 초점을 맞춘 다음 Tab 키로 <편집(I)> 버튼으로 이동하여 Space 키를 눌러 환경 변수 편집 대화상자를 엽니다.
7. Tab 키로 새로 만들기 버튼으로 이동한 다음 Space 키를 눌러 활성화합니다.
8. SDK 플랫폼 도구를 압축 해제한 폴더 경로를 입력하고 Enter 키를 누릅니다.
9. Tab 키로 <확인> 버튼으로 이동한 다음 Space 키를 눌러 환경 변수 편집 대화상자를 닫습니다. 환경 변수, 시스템 속성 대화상자 또한 Tab 키를 눌러 확인 버튼으로 이동한 다음, Space 키를 눌러 닫습니다.

ADB를 최종적으로 사용하려면, 폰을 연결하여 권한에 대한 팝업이 폰에 나타나면 Allow (허용) 해야 합니다.

주의

• 환경 변수를 삭제하는 <삭제> 버튼을 누를 시 삭제되었다는 알림 메시지가 표시되지 않으며 Path 추가 시 Tab 키를 누를 경우 기존 추가된 Path 항목으로 초점이 이동됩니다. 또한, 새로운 환경 변수를 추가하기 위해 <새로 만들기> 버튼을 누른 후 다른 창으로 초점을 전환 후 환경 변수 편집 화면으로 다시 돌아올 시 <새로 만들기> 버튼을 눌러 환경 변수를 새로 만들어야 합니다.
• 위 사항으로 인해 새로운 환경 변수를 추가하거나 편집 시 미리 클립보드에 폴더 경로를 복사한 상태에서 진행하는 것이 편리할 수 있습니다.

Android 기기 연결 및 adb의 간단한 사용 방법

SDK 플랫폼 도구를 설치했다면 adb(Android Debug Bridge)를 사용할 수 있습니다. 이 섹션에서는 원격 디버깅 시 필요한 adb의 간단한 사용 방법에 대해 다룹니다.

adb는 명령 프롬프트(CMD)에서 사용되는 도구이므로 먼저 명령 프롬프트 창을 열어야 합니다. 명령 프롬프트 창을 열려면, Win+R(실행) 창에 <cmd>를 입력한 후 Enter 키를 누릅니다. 명령 프롬프트를 여는 방법에는 여러 가지 방법이 있습니다. 명령 프롬프트 창을 연 다음 <adb>를 입력하고 Enter 키를 눌렀을 때 ADB의 버전 정보 등이 표시되지 않는다면 <환경 변수 추가> 섹션을 참고하여 환경 변수 설정을 진행합니다. adb를 사용하기 전 디버깅할 기기를 USB로 연결합니다. Android 기기를 PC와 연결 시 문제가 발생한다면, Android 기기 원격 디버깅 시작하기 페이지의 <문제 해결: DevTools가 Android 기기를 검색하지 못합니다.> 섹션을 참고하여 Android 기기와 PC를 연결합니다.

원격 디버깅 시 필요한 adb의 명령은 다음과 같습니다:

• adb devices: Windows에서 기기가 정상적으로 인식되었고 device 드라이버가 로드되었는지 확인할 때 사용합니다. 기기가 정상적으로 인식되었다면, 기기의 모델명을 확인할 수도 있습니다.
• adb start-server: adb 서버를 실행합니다.

• adb kill-server: adb 서버를 중지합니다.

Safari 브라우저로 아이폰 또는 아이패드 기기의 모바일 웹페이지 디버깅 전 준비사항

1. macOS가 탑재된 기기, 아이폰 또는 아이패드가 필요합니다.
2. macOS의 Safari에서 Safari 메뉴 > 환경설정 > 고급에서 <개발자용 메뉴>를 체크하여 활성화합니다.
3. 아이폰에서 설정 앱을 열고, 사파리 > 고급 > 웹 속성> 요소를 이중 탭하여 선택합니다.

Chrome 브라우저로 원격 디버깅하기

1. PC와 Android 기기를 USB로 연결합니다.
2. <adb start-server> 명령을 명령 프롬프트 창에서 입력하여 adb server를 실행합니다.
3. Android 기기에서 Chrome 앱을 엽니다.
4. PC의 Chrome 브라우저를 실행합니다.
5. PC의 Chrome 브라우저에서 Chrome 메뉴 > 도구 더보기 > 개발자 도구를 엽니다.
6. 개발자 도구가 열리면, Tab 키로 <Customize and control DevTools> 버튼으로 이동한 다음, Space 키로 활성화합니다.
7. 아래 방향 키로 <More tools> 항목으로 이동하여 Enter 키를 눌러 활성화한 다음, 아래 방향 키로 <Remote devices> 항목으로 이동한 다음, Enter 키를 누릅니다.
8. 가상 커서를 선택(Insert+Space) 하고, 가상 커서에서 찾기(Control+Insert+F)를 누른 다음, Android의 기기 모델 이름을 입력하고 확인 버튼을 누릅니다.
9. Android 기기 이름을 Enter 키를 눌러 클릭하면, Android 기기에 설치된 Chrome 버전 정보 및 Chrome에 열린 탭 목록이 표시됩니다.
10. Enter URL 입력창에 디버깅하려는 웹페이지 주소를 입력하고 Tab키로 Open 버튼으로 이동한 다음, Enter 키를 누르면 Android 기기의 Chrome에 입력한 웹페이지가 표시됩니다.
11. Tab키로 <Inspect> 버튼으로 이동한 다음, Enter 키를 누르면 Inspect 화면이 표시됩니다.
12. <Inspect> 버튼 다음에 있는 버튼을 눌러 열린 팁의 Reload, Focus, Close와 같은 추가 작업을 선택할 수 있는 팝업 메뉴를 열 수 있습니다.

Inspector 화면이 표시되면, 요소의 선택 및 수정, 삭제 등의 디버깅 작업을 수행할 수 있습니다.

주의

Chrome 개발자 도구의 경우 스크린 리더의 가상 커서로 탐색 시 이용이 효과적일 수 있습니다. 또한, Android 기기의 Chrome의 열린 탭을 새로 고침(Reload) 하거나 Focus, Close 등의 추가 작업을 위한 확장 버튼의 경우 스크린 리더로 대체 텍스트를 인지할 수 없습니다. 여러 개의 탭이 열린 경우, 탐색 시 주의가 필요합니다.

Firefox 브라우저로 원격 디버깅하기

1. PC와 Android 기기를 USB로 연결합니다.
2. <adb start-server> 명령을 명령 프롬프트 창에서 입력하여 adb server를 실행합니다.
3. Android 기기에서 Firefox 앱을 엽니다.
4. Android 기기의 Firefox 앱에서 메뉴 > 프로그램 설정 > 고급 > 원격 디버깅 항목을 체크합니다.
5. Android 기기의 Firefox 앱에서 디버깅하려는 웹사이트를 엽니다.
6. PC의 Firefox 브라우저를 실행합니다.
7. PC의 Firefox 브라우저의 Firefox 메뉴 > 도구 > 웹 개발 도구 > <원격 디버깅>을 엽니다.
8. Tab 키로 <연결> 버튼으로 이동한 다음, Enter 키를 눌러 기기 연결을 진행합니다. 기기 연결 시 USB 원격 디버깅 허가가 표시될 수 있으며, <허가> 버튼을 눌러 USB 원격 디버깅을 허가합니다.
9. <연결됨> 링크로 이동한 다음, Enter 키를 눌러 활성화합니다.
10. Android 기기의 Firefox 버전 정보, 열린 탭 정보 등이 표시됩니다. 열린 탭 목록을 효율적으로 탐색하려면, 스크린 리더의 가상 커서 탐색 키 중 헤딩 간 이동(H) 키를 눌러 원하는 탭으로 이동합니다.
11. 각 탭의 <검사> 버튼을 클릭하면, Android 기기의 Firefox 탭의 요소를 검사할 수 있습니다.

검사 화면이 표시되면, 요소의 선택 및 수정, 삭제와 같은 디버깅 작업을 수행할 수 있습니다.

Safari 브라우저로 아이폰 또는 아이패드의 웹페이지 디버깅하기

1. 아이폰 또는 아이패드를 macOS 기기와 케이블로 연결합니다.
2. 아이폰 또는 아이패드 Safari 브라우저를 열고, 디버깅하려는 웹페이지를 엽니다.
3. MacOS의 Safari에서 메뉴 > 개발자용 메뉴 > 본인의 아이폰 또는 아이패드 메뉴를 확장하고, 디버깅하려는 웹페이지 항목(ex: naver.com)를 선택하면 Web Inspector 화면이 표시됩니다.

Web Inspector 화면이 표시되면, 요소의 선택 및 수정, 삭제와 같은 디버깅 작업을 수행할 수 있습니다.

지금까지 Chrome, Firefox, Safari 브라우저로 원격 디버깅하는 방법에 대해 살펴보았습니다. 이 글이 모바일 웹페이지의 접근성 이슈를 디버깅하는 데 도움이 되길 바라봅니다.