플러터 개발시 VS Code 에서 내 스마트폰과 무선으로 연결하는 방법

VS Code 에서 플러터 개발시에 내 폰에 무선으로 연결은 어떻게 할까?

얼마 전에 플러터 개발 도구를 VS Code 로 바꾸면서 전에 안드로이드 스튜디오를 썼을 때보다 훨씬 편리한거 같습니다. 아무래도 VS Code 가 손에 익은 편이기도 하고 안드로이드 스튜디오가 워낙 무거워서 리소스를 많이 잡아 먹기도 합니다.

플러터로 앱 개발이 본업이 아니다 보니 회사든 집에서든 틈틈히 시간날때 마다 하는 편인데 영 진도는 안나가네요 ㅋ 역시나 개발 도구나 언어는 많이 해보는게 답인거 같긴 합니다.

제가 주로 쓰는 노트북에 VS Code 로 제 폰과 USB 케이블로 연결하면서 앱을 취미삼아 개발해 보고 있는데 노트북을 이동 중일 때는 USB 케이블 챙기는게 여간 번거롭더군요. 회사에서는 USB 허브를 비치해 놓고 있는데 요걸 들고다니는 것도 사실 어렵고요.

전에 안드로이드 스튜디오를 사용할 때는 안드로이드 스튜디오와 제 폰을 무선으로 연결하여 사용하곤 했습니다.

그런데 VS Code 와 제 폰을 무선으로 연결할 수 있는 방법이 당연히 있을거 같더군요. 요즘 VS Code 를 보면 마이크로소프트의 정책 중에서 저도 칭찬할 만한 부분 중에 하나일 정도로 꽤나 괜찮은 개발 도구입니다.

찾아보니 당연히 연결할 수 있는 방법이 있습니다. 그리고 방법은 의외로 간단합니다.

먼저 VS Code 와 내 폰(안드로이드 폰)을 무선으로 연결하려면 WiFi AP에 연결합니다. 참고로 서로 연결하기 위해서는 같은 IP 대역(같은 Private IP 대역. 예) 192.168.0.X)에 연결이 되어 있어야 합니다.

그런 다음에 내 폰의 “개발자모드” 를 활성화 시킵니다. (만약 개발자모드가 비활성화 라면 위 링크 글 내용 참고하셔서 활성화 시키면 됩니다)

개발자모드를 보면 왼쪽 위 그림과 같이 “무선 디버깅” 메뉴가 보입니다. 요걸 켜준 다음에 한번 더 터치하면 오른쪽 위 그림과 같이 IP 주소와 포트를 볼 수 있습니다. 이 정보를 기억한 다음에, 내 VS Code 가 설치된 PC 로 이동합니다.

VS Code 에서 무선으로 내 안드로이드 폰을 연결하려면 VS Code 가 설치된 PC에 “ADB Tool” 이 있어야 합니다. ADB Tool 은 아래 링크에서 다운로드 할 수 있습니다.

Windows 의 경우 실행 창을 “관리자 권한” 으로 실행 시킨 후 ADB Tool 이 있는 위치로 이동합니다.

여기에 adb 파일이 있는게 확인됩니다. 이걸 가지고 내 안드로이드 폰에 연결을 시도하면 됩니다. 좀전에 확인된 내 폰의 IP와 포트를 다음과 같이 명령어를 통해 연결을 시도하면 됩니다.

adb connect (IP어드레스):(포트)

정상적으로 연결이 되었다면 실행창에서 다음과 같이 나타납니다.

내 폰을 확인해 보면 상단에 “무선 디버깅 연결됨” 이라는 표시가 뜹니다.

이렇게 되면 내 안드로이드폰과 PC 가 무선으로 ADB를 통해 연결이 된겁니다. 이 상태에서 VS Code 에서 실행 및 디버깅을 언제든지 하는게 가능합니다. 간단하죠?

연결 한 뒤 VS Code 에서 하단에 장치를 클릭하면 위와 같이 선택할 수 있는 장치들의 리스트가 나타납니다. 여기서 ADB로 연결한 장치를 선택해서 사용 해주면 되겠습니다.

VS Code 는 참 활용할께 많은 개발 도구인거 같네요. VS Code 로도 ADB를 사용해 언제든지 무선으로 연결하여 플러터 앱 개발이 가능할 듯 싶습니다.