데스크탑 컴퓨팅 환경에서 제작된 개발산출물은 모바일 컴퓨팅 환경을 정확하게 시뮬레이션하지 못합니다. 그런 이유로 가장 확실한 모바일웹 디버깅 환경을 구축하는 방법은 모바일 기기를 통해서 디버깅을 하는 것입니다. 안드로이드 기기의 경우 크롬 웹브라우저를 통해 맥이든 윈도우든 상관 없이 쉽게 디버깅 환경을 구축할 수 있습니다. 유선 케이블을 이용하지 않고 무선으로 연결하거나, 크롬 외 다른 브라우저로도 모바일웹을 디버깅할 수 있는 방법은 별도로 존재하니, 해당 내용 확인이 필요한 경우에는 별도 리서치를 추가적으로 진행하시기를 권장 드립니다.
1. 안드로이드 기기의 개발자 모드 활성화하기
안드로이드 설정에 들어가서 개발자 옵션 메뉴에 진입해 USB 디버깅 기능을 활성화합니다. 더불어 원활한 디버깅 환경 구축을 위해 화면 켜짐 상태 유지도 함께 활성화합니다. 특정 운영체제에서는 지원을 안 하는 기능일 수 있으나, 확인 결과 대부분의 구버전 안드로이드에서도 지원하는 옵션이므로 버전에 상관 없이 관련 내용을 확인할 수 있을 것입니다.
2. 안드로이드 기기를 개발용 컴퓨터에 케이블로 연결하기
구형 안드로이드 기기의 경우 5핀 케이블로 신형 기기의 경우 USB C 케이블을 이용해 개발용으로 사용 중인 컴퓨터에 연결합니다.
3. 크롬 실행 후 chrome://inspect 옵션에서 개발자 도구
개발용 컴퓨터에서 크롬을 실행하여 'chrome://inspect'를 주소창에 입력하여 개발자도구 페이지에 진입합니다. 안드로이드 기기에서 디버깅 모드를 허용하겠냐는 질의 팝업이 발생하면, 허용 버튼을 눌러 디버깅 모드 전환을 진행합니다.
일정 시간이 지나면 연결된 안드로이드 기기 정보가 디바이스 목록에 표시되는 것을 확인할 수 있습니다. 디버깅을 하고자 하는 웹URL을 입력하면 안드로이드 기기의 크롬 어플리케이션을 통해서 개발자 도구(Web Inspector)를 활성화하고자 하는 URL들을 열 수 있습니다.
확인하고자 하는 URL을 열은 이후 inspect 버튼을 누르면 컴퓨터용 크롬에서 개발자 도구가 활성화되며 안드로이드 기기의 크롬에서 inspect할 엘리먼트들을 확인할 수 있습니다. 컴퓨터용 크롬에서 작동하는 개발자 도구의 기능들을 활용하여 안드로이드 기기 상에서의 정상작동 여부를 확인할 수 있습니다.
4. 로컬호스트 환경을 포트포워딩을 통해서 연결
로컬호스트로 개발환경이 구축된 경우 해당 포트를 포트포워딩함으로써 안드로이드 기기에서 해당 개발환경을 열 수 있습니다. 하기 첨부된 이미지를 예시로 들면, 3000번 포트의 개발환경을 8080으로 포트포워딩함으로써, 안드로이드 기기에서 localhost:8080을 접속하면 개발용 컴퓨터에서 작업하던 로컬호스트 환경에 접속이 가능합니다.
'UX 개발 > 개발도구와 환경' 카테고리의 다른 글
| 아이폰(iOS) 가상머신으로 모바일웹 테스트 환경 구축하기 (0) | 2022.02.26 |
|---|---|
| 아이폰으로 모바일웹(사파리) 개발자 모드 디버깅 환경 구축하기 (0) | 2022.02.23 |
| [MacOS] 언어전환(한영전환) 단축키 shift + space로 변경하기 (0) | 2020.04.12 |
| [MacOS] 프리뷰 앱으로 이미지 사이즈 조절하기 (0) | 2020.01.25 |
| [VSCode] 화면을 나누어서 파일 열기 및 나누어 열려진 창(splited window pane)끼리 커서 이동하기 (0) | 2019.12.20 |
