[프로덕트] 피들러(Fiddler)로 모바일앱 개발자도구 디버깅하기(네이티브 앱)
훌륭한 프로덕트 매니저, 프로덕트 오너가 되기 위해 갖춰야할 조건이 정말 많지만, 개발에 대한 이해 역시 중요한 부분인 것 같습니다. 만약 이해가 부족하다면, 에러와 장애가 발생했을 때 원인 파악을 전적으로 개발자에게 의지할 수 밖에 없기 때문이죠. 팀에 훌륭한 개발자가 있다면 이러한 태도도 나쁘진 않겠지만, 우리가 일하는 환경이 항상 최상의 컨디션을 갖춘 것은 아닐 것입니다.
현재 제가 처한 상황 역시 비슷합니다. 모바일앱을 개발 및 보수해주던 엔지니어들이 모두 회사를 떠난 상황이고, 일부 남은 백엔드 엔지니어와 함께 기존에 개발해놓은 서비스를 운영해야하는 상황입니다. 버그리포트는 언제나 클라이언트에서 발견되기 때문에 백엔드 엔지니어가 문제가 어디서 발생하는지 찾는 데에는 시간이 오래 걸릴 수 있습니다. 웹사이트의 경우, 크롬에서 제공하는 개발자도구를 활용하면 많은 힌트를 얻을 수 있습니다. 하지만 모바일앱은 자체적으로 제공해주는 개발자도구가 없었기에 리서치를 시작했습니다.
모바일앱 개발자도구로서 요구사항
백엔드와 모바일앱 사이의 커뮤니케이션을 캐치한다.
- 저희는 현재 백엔드 엔지니어만 있는 상태입니다. 발생한 문제를 백엔드 엔지니어가 해결할 수 있는지 여부를 판단할 수 있어야합니다.
모바일 코드를 내려받고 빌드를 해서는 안된다.
- 코드를 내려받고 빌드하는 것은 많은 시간과 노력을 소모합니다. 에러가 발생할 경우, 대응하기 또한 매우 힘든 상황입니다.
안드로이드, iOS 환경을 모두 확인할 수 있어야한다.
- 저희는 두 OS의 앱을 모두 제공하기 때문에 두 환경에 대한 테스트가 모두 필요합니다. 이는 빌드하면 안되는 이유가 될 수도 있습니다.
PRD(프로덕션), STG(스테이징) 환경을 동시에 확인할 수 있어야한다.
- 문제를 해결했으면, STG 환경에서 충분한 테스트를 진행하고 그 이후에 릴리즈해야합니다.
피들러(Fiddler Everywhere)의 작동 방식
피들러는 데스크탑에서 발생하는 모든 통신들을 캡쳐합니다.
모바일 장치의 네트워크 설정을 변경함으로써 데스크탑이 프록시서버(Proxy Server)로서의 역할을 하도록 합니다.
테스크탑은 자신이 하는 통신 외에도 모바일 장치에서 요청한 통신까지 캡쳐할 수 있게 되고, 피들러가 이를 보여줍니다.
장점
- 빌드 없이 현재 내 휴대폰에 설치된 모든 앱들의 통신을 확인할 수 있습니다.
- iOS, 안드로이드 모두 같은 원리로 모니터링할 수 있습니다.
- STG앱이 별도로 있는 상태라면 PRD, STG 환경을 모두 테스트할 수 있습니다.
단점
- 모니터링을 진행하는 동안 프록시서버의 역할을 하는 데스크탑의 인터넷 속도가 저하됩니다.
- 데스크탑 내부에서 발생시킨 통신인지, 모바일앱에서 발생시킨 통신인지 직접 구분하실 수 있어야합니다.
피들러 사용 방법
아래의 링크를 참고하면 이해하는 데에 도움이 됩니다.
유튜브: https://www.youtube.com/watch?v=7hTvvUzj_UQ&ab_channel=ProgressTelerik
블로그: https://www.telerik.com/blogs/how-to-capture-ios-traffic-with-fiddler
준비하기
1. 피들러 에브리웨어(Fiddler Everywhere)를 데스크탑에 설치하세요.
설치 링크: https://www.telerik.com/download/fiddler-everywhere
2. 보안이 되어있는 Wireless Access Point가 필요합니다.
제 엔지니어 배경이 부족해서 설명드릴 수 없으나, 경험 상 비밀번호가 없는 AP나 공용으로 제공하는 WiFi는 작동하지 않았습니다. WeWork에서 모든 입주사에게 제공하는 공용 와이파이로는 작동하지 않았고, 회사 내부의 무선 공유기를 활용하여 통신했습니다.
3. 당연하겠지만, 모바일폰과 데스크탑은 같은 무선AP에 접속한 상태여야 진행이 가능합니다.
아래의 단계를 진행하시기 전에 "Ping {모바일폰의 IP Address}"를 터미널에서 실행하시고 잘 작동하는지 확인해보세요.
모바일폰의 IP 주소는 아래와 같이 확인할 수 있습니다.
데스크탑 설정하기
1. 네트워크 설정에 들어가서, 데스크탑이 할당받은 IP를 확인합니다.
아래의 IP주소를 확인합니다. 이 주소를 이후 모바일폰에 사용할 예정입니다.
2. 피들러를 실행한 후 Settings > Connections를 확인합니다.
“Allow remote computers to connect” 를 클릭합니다.
“Fiddler listens on port”의 값을 확인합니다. 아래의 사진에서 8866에 해당합니다. 이 값 역시 이후 모바일폰에서 사용할 예정입니다.
모바일폰 네트워크 환경 설정하기(iOS)
1. 설정 > WiFi에서 정보를 확인합니다.
현재 사용 중인 네트워크의 (i) 아이콘을 누릅니다.
나온 화면에서 프록시 구성을 찾으시고 수동 설정으로 변경해주세요.
위에 데스크탑에서 확인했던 값을 붙여넣습니다.
- Server(서버): 아까 복사했던 데스크탑의 IP 주소
- Port(포트): 아까 피들러에서 확인했던 값(예: 8866)
2. 모바일폰의 인터넷 브라우저를 실행합니다.
"http://ipv4.fiddler:8866" 주소로 방문합니다.
- 8866의 숫자는 사용하신 포트에 따라 달라집니다.
"Fiddler root certificate"을 누르신 후 다운받아주세요.
3. 설정에 방문해주세요.
다운받으신 프로필을 실행해주세요.
프로필의 설치를 진행해주세요.
4. 설정으로 되돌아가셔서, 일반 > 정보 > 인증서 신뢰 설정에 방문해주세요.
Do_Not_Trust_FiddlerRoot를 찾으시고 이를 켜주세요.
5. 이제 데스크탑으로 돌아오셔서 피들러에 잡히는 통신들을 확인해주세요
참고 자료
https://www.evozon.com/web-debug-mobile-app-requests-test-apis/
https://www.youtube.com/watch?v=7hTvvUzj_UQ&ab_channel=ProgressTelerik
https://www.telerik.com/blogs/how-to-capture-ios-traffic-with-fiddler