Charles는 웹 디버깅 프록시 툴로, HTTP 및 HTTPS 트래픽을 모니터링 및 분석할 수 있으며, 요청 및 응답 데이터를 조작할 수 있는 기능을 가지고 있다. 많은 QA 엔지니어와 개발자들이 애플리케이션 간의 네트워크 통신을 디버깅하고 테스트하는데 사용되고 있다.
Charles는 많은 기능들을 가지고 있는데, 그 중 테스트에 사용되는 몇 가지 기능을 살펴봤다.
트래픽 모니터링 기능으로 클라이언트와 서버 간 모든 HTTP/HTTPS 트래픽을 실시간 기록 및 분석 가능
SSL/TLS 트래픽을 복호화하여 요청 및 응답 데이터를 평문으로 확인할 수 있음
HTTP/HTTPS 요청 및 응답을 수정해 테스트 시나리오 실행 가능
대역폭 제한(Bandwidth Throttling)을 통해 느린 인터넷 환경 등을 시뮬레이션 할 수 있음
Breakpoint(중단점)를 설정하여 데이터를 수정하거나 분석할 수 있음
iOS, Android 모바일 디바이스 지원
서버 데이터를 로컬 파일로 대체하여 테스트 환경을 구축하거나 변경 사항을 시뮬레이션 할 수 있음
이외 JSON 구조를 트리 형식으로 시각화할 수 있는 등 다양한 기능을 가지고 있다.
Charles의 주요 사례
블랙박스 테스트 중 특정 버튼을 눌렀을 때, 어떤 API가 호출되고 어떤 값이 응답되는지 알 수 없음
Charles를 통해 API 요청 및 응답을 시각적으로 확인 가능
상당한 양의 테스트 데이터를 생성해야 할 경우, 수동 조작 시 굉장한 시간이 소요됨
Charles를 통해 요청/응답 데이터를 수정하여 짧은 시간 내에 테스트할 수 있음
기존의 Postman과 같은 API 테스트 툴은 API의 요청 및 응답 테스트에 특화된 것에 비해, Charles는 시스템과 인터넷 간 모든 HTTP/SSL/HTTPS 트래픽을 기록, 분석 및 조작할 수 있다는 장점이 있다. (웹 디버깅 프록시 기능에 특화)
배달의민족의 가게는 사용자가 ‘찜’을 할 수 있고 찜한 가게들만 별도로 확인할 수 있습니다.
찜의 카운트는 9,999까지는 서버의 데이터를 그대로 표시하지만 10,000 카운트가 넘어가게 되면 "1만+"라고 클라이언트에서 가공 처리를 해주어야 합니다.
"1만+"라고 클라이언트에서 표시해 주는지 확인을 위해선?
1대의 디바이스 혹은 1개의 배민회원으론 가게에 찜 등록을 한 번만 할 수 있기 때문에 찜이 1만 개인 가게 테스트 데이터를 만들기 위해선1만 대 디바이스 혹은 1만 개의 배민 회원 계정이 필요합니다.
수동으로 설정하긴 불가능한 테스트 데이터라 SQL을 활용하여 db를 조작하여 데이터를 만들 수밖에 없습니다. db 접근 권한이 없거나 SQL 관련 지식이 없으면 서버 개발자에게 데이터 설정을 요청해야 하는데 이로 인한 커뮤니케이션 리소스가 소모됩니다. Charles의 프록시 기능을 활용하여 서버 응답 값을 변조하여 로컬 환경에서 재현시키는 방법으로 간단하게 테스트를 할 수 있습니다.
Charles로 서버 응답 데이터 가로채고 대체하는 과정 (출처: 우아한 기술블로그)
배달의민족 가게 상세 API에서 서버 응답받은 찜 카운트 값을 변조하는 방법을 적어보겠습니다.
Charles로 API의 서버 응답 값 변조 방법
배달의민족 가게 상세 API 명세서에서 찜의 데이터를 노출시켜주는 파라미터와 응답 구조 확인 * 파라미터와 응답 구조는 보안 문제 발생 감안하여 업로드하진 않겠습니다.
JSON Editor tool을 사용해 실제 서버 응답을 가로채고 대체할 API 응답 값을 JSON 구조로 만들기 * JSON Editor tool은 Visual Studio Code 추천합니다. 파싱 에러 발생 시 툴에 표시해 주기도 하고 무엇보다 무료라는 강점이 있습니다.Visual Studio Code 다운로드
Charles 실행 : Sequence 목록에서 배달의민족 가게 상세 API > 마우스 오른쪽 클릭 > Map Local 선택
Edit Mapping 창의 Local path에서 대체할 JSON 파일 업로드
Charles와 연결된 모바일 기기로 배달의민족 가게 상세 화면 진입 시 대체한 응답 파일구조로 클라이언트에서 화면에 그려주는 것을 확인 가능 가게의 찜 카운트 응답 값 전/후 변화 사진 (출처: 우아한 기술블로그)
사용자들이 앱을 사용하며 API가 호출될 때 항상 정상적인 200 코드 응답만 받으며 잘 동작되는 것은 아닙니다.
클라이언트의 요청에서 문제가 있는 경우 응답받는 400번대 코드
서버 API에 문제가 있는 경우 응답받는 500번대 코드
위와 같이 에러 응답을 받는 상황이 있고 에러 응답을 받으면 클라이언트는 서버의 응답 데이터로화면을 정상적으로 그려줄 수 없습니다. 사용자를 고려한 서비스라면 이런 예외적인 상황에서 사용자에게 에러 상태인 걸 가시화해서 보여주고 재시도, 화면 이탈 등의 액션 이벤트를 시도할 수 있게 해주는 유저 플로우가 필요합니다.
배달의민족 배달 현황 화면의 API가 에러 응답을 받는 상황 (출처: 우아한기술블로그)
이에 대한 테스트의 결과를 도출하기 위해선 아래와 같은 번거로운 절차가 필요합니다.
서버 개발자에게 테스트 서버에 장애를 만들어달라고 요청
에러 응답 상황 만들기
테스트 수행
테스트 완료 시 원복 요청
코드 수정 후 원복
이것만으로도 커뮤니케이션 리소스가 발생되는데 더욱 큰 문제는 테스트 서버를 사용하는모든 유관부서 인원에게 영향을 미칠 수 있단 점입니다. (10분 동안 100명이 테스트 서버를 사용 못 한다고 했을 때 낭비되는 시간은1,000분이 될 것입니다.)
이렇게 에러 응답을 받는 상태에 대한 테스트도 charles의 프록시 기능을 활용하여 QA 인원 개인의 로컬 환경에서테스트 서버에 전혀 영향을 주지 않고 테스트 가능합니다.
배달의민족 가게 목록 API에서 500 응답을 받는 상황을 로컬에서 만들어서 테스트하는 방법을 공유해 보겠습니다.
Charles로 API 200 응답 -> 500 응답으로 변경하는 방법
Charles 실행 : Sequence 목록에서 사용하고자 하는 API를 선택 > 마우스 오른쪽 클릭 > Copy URL 선택
Tools > Rewrite 메뉴 진입
Enable Rewrite 체크
[Add] 버튼 선택하여 Rewrite 항목 추가
Name 입력 후, Location의 [Add] 버튼 선택하여 ‘Edit Location’ 창 불러온 후 아래 값 입력
Protocol : http / https 중 선택
Host : 가게 목록 API 입력 (복사 -> 붙여넣기 가능)
Path : API Path 입력 (‘Host’에 URL 붙여넣기 후, 키보드의 [Tab] 키 선택 시 자동으로 값 채워짐)
Query : 특정한 정보를 요청하여 Rewrite 대상을 한정할 경우 입력 (‘Host’에 URL 붙여넣기 후, 키보드의 [Tab] 키 선택 시 자동으로 값 채워짐)
Type의 [Add] 버튼 선택하여 ‘Rewrite Rule’ 창 불러온 후 아래 값 입력 후 저장
Type : Response Status
Match – Value : 200
Replace – Value : 500
모바일 기기로 Rewrite Rule을 설정한 API인 가게 목록 화면을 진입하여 API 요청 & 응답이 이루어지면 [절차 6]에서 대체한 500 Status 에러 응답을 받기 때문에 클라이언트 화면에서 에러 화면을 제공해 주는지, (다시 시도) 액션 이벤트가 잘 이루어지는지 등의 테스트를 서버 장애 상황이 아닌 경우에도 가능
가게 목록 API가 200 응답일 때와 500 응답일 때 앱 화면 비교 (출처: 우아한기술블로그)가게 목록 API가 200 응답일 때와 500 응답일 때 Charles 화면 비교 (출처: 우아한기술블로그)
특정 Host에만 throttle 설정을 하고 싶으면 [Only for selected hosts] 체크하고 Host 정보를 입력 (체크를 하지 않으면 모든 요청에 throttle 설정이 적용)
상세 설정값들을 테스트에 적절한 값으로 입력 후 적용
throttle preset : 3G, 4G 등 일반적인 인터넷 연결 유형을 설정
Bandwidth : 전송할 수 있는 최대 데이터양을 정의합니다.
Utilisation : 한 번에 사용자가 접근할 수 있는 전체 대역폭의 백분율
Round-trip latency : 클라이언트와 원격 서버 간의 요청 지연 시간 (ms)
MTU : 현재 프리셋의 최대 전송 단위를 정의
stability : 연결이 완전히 실패할 가능성을 측정, 신뢰할 수 없는 네트워크 조건을 시뮬레이션 하는 데 사용
Unstability quality range : 연결이 ‘불안정한’상태 일 가능성을 측정하여 품질을 저하 시킴. 주기적으로 연결 품질이 떨어지는 모바일 네트워크와 같은 네트워크를 시뮬레이션 할 때 사용
앱에서 API 호출이 발생되면 throttle 설정이 적용되어 네트워크 지연 상태일 때의 클라이언트 동작을 확인할 수 있습니다.
Charles 이용 방법
Charles는 공식 설치 페이지에서 사용하는 OS(Windows, MacOS, Linux64)에 맞게 다운로드 받아 설치하면 된다. 라이선스를 구매하지 않을 경우에는 30일 동안 무료 평가판을 사용할 수 있다.
여기어때 기술블로그에서 설치 및 세팅 방법을 자세히 설명하고 있으니 참고하면 좋을 듯하다.
다음 글에서는 Charles Proxy Tool을 설치 및 세팅한 뒤 특정 App에서 작동시켜보는 것까지 해본 뒤 포스팅할 예정이다. 현재 개발 중인 웹 서비스가 있는데, 그것 또한 Charles를 이용해서 테스트한다면 좋은 방법이 될 것 같다.(기회가 된다면 개발 중인 웹서비스에 적용시켜본 것도 포스팅하겠다.)
