Charles로 백엔드 요청 분석하고 재현하는 방법

 

 

서버 개발을 하다 보면, 클라이언트에서 백엔드로 어떤 요청이 오가는지 직접 확인하고, 문제가 되는 요청을 수정해 다시 보내야 할 일이 자주 생깁니다.

 

저는 이런 상황에서 요청의 Body나 Header를 수정해 재요청하고, 서버가 이를 어떻게 처리하는지 테스트하기 위해 Charles Proxy를 활용하고 있습니다.

 

이번 글에서는 제가 Charles를 사용하는 이유와 실제로 어떻게 활용했는지를 간단히 정리해보겠습니다.

 

 

Charles ?

 

Charles는 프록시 서버 기반의 네트워크 패킷 분석 도구입니다.

• HTTPS 포함 모든 HTTP 트래픽을 가로채고 분석할 수 있고,

• 요청을 그대로 수정해서 다시 보내기 기능이 있어 문제 재현과 디버깅에 아주 유용합니다.

• 또한 요청에 대해 내가 원하는 Response를 보내어 프론트에서 어떻게 반응하는지 테스트 해볼 수 있습니다.

 

---

 설치 및 기본 설정

 

1. 공식 웹사이트에서 Charles 설치

https://www.charlesproxy.com/

Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy

 

2.  기본 설정

HTTPS(SSL)는 기본적으로 암호화되어 있어서 내용을 볼 수 없습니다.

그래서 Charles가 중간자(MITM, Man-In-The-Middle)로 작동해 요청과 응답을 복호화하고 다시 암호화합니다.

이 과정을 가능하게 하려면 두 가지 설정이 필요합니다.

1. Charles가 SSL 인증서를 발급하도록 설정 (신뢰 설정 포함)
2. 어떤 도메인에 대해 SSL 프록시를 작동시킬지 설정

 

 

2-1. Charles SSL 설정

• Help > SSL Proxying > Install Charles Root Certificate

• macOS 키체인에 인증서를 설치 후, 신뢰함으로 변경

 

 

2-2 . Charles 프록시 설정 

• Charles 실행 → Proxy > macOS Proxy가 체크

• macOS는 Charles를 시스템 전체 프록시로 설정해줍니다.

•  Proxy > Recording Settings > Include 에서 도메인과 포트를 추가 

•  Proxy > SSL Proxying Settings에서 도메인과 포트를 추가

 

http로만 요청 보낼 경우 Recording Settings > Include만 설정해주면 됩니다.

 

3. Proxy > Recording Settings > Include

4. Proxy > SSL Proxying Settings

 

---

Request 확인

 

이제 준비는 끝났고 페이지에서 요청을 보내면 Charles에서 요청들이 실시간으로 확인할 수 있습니다. 

• 왼쪽 패널에서 요청 도메인을 선택하면 오른쪽에서 상세 내용을 볼 수 있습니다.

    - 왼쪽 상단에 위치한 Squence view가 저는 더 편했습니다.

• Request 탭에서 요청 헤더, 바디 확인 가능

• Response 탭에서 백엔드 응답도 그대로 볼 수 있습니다.

요청 확인하기

 

---

활용 팁 

 

1. Compose

 

API 테스트나 버그 재현 시 프론트에서 보내는 요청을 그대로 다시 보내고 싶을 때, 또는 일부 값을 수정해서 실험하고 싶을 때 유용한 기능입니다.

• Charles에서 원하는 요청을 우클릭 → Compose를 선택하면,

• 요청을 새롭게 수정할 수 있는 창이 뜨고,

• Method, URL, Header, Body 등 모든 항목을 편집할 수 있습니다.

 

예를 들어 POST 요청인 경우, JSON body 내용을 직접 수정해서 Execute 버튼으로 수정된 요청을 서버로 다시 보낼 수 있습니다.

 

 

 

2. breakPoint 

 

요청이 서버로 가기 전에 잠깐 멈춰서 내가 손봐야 한다면?

• 요청을 Breakpoints 목록에 등록해두면,

• 해당 요청이 발생했을 때 자동으로 멈추고,

• 요청 body와 header 모두를 실시간으로 수정할 수 있습니다.

 

수정이 끝나면 Execute 버튼을 눌러 서버로 요청을 보내거나, 응답을 보낼 수 있습니다.

 

 

 

그 외 추가 팁 

 

• Map Local: 특정 요청에 대한 Request body를 로컬 Json 파일로 보낼 수 있는 기능

    - 프론트 파일을 서버 없이도 수정 테스트할 때 유용합니다.

 

• Map Remote: 특정 요청에 대해 다른 쪽 서버 혹은 요청으로 리디렉션할 수 있는 기능 

Map local / Map remote

---

 

 

Charles는 단순히 패킷을 보기 위한 도구가 아니라 문제를 빠르게 재현하고 수정 요청을 테스트하며 개발자에게 디버깅의 핵심 도구가 될 수 있습니다.

특히 서버 개발자 입장에서 내가 컨트롤할 수 없는 프론트 요청을 확인하고,필요 시 직접 조작해 재요청할 수 있다는 점이 정말 유용한 도구인 것 같습니다.

 

 

 

 

---

참고한 블로그 

 

https://medium.com/idus-tech/%EB%8F%84%EC%99%80%EC%A4%98%EC%9A%94-%EC%B0%B0%EC%8A%A4-charles-%EC%97%85%EB%AC%B4-%ED%9A%A8%EC%9C%A8-%EB%86%92%EC%9D%B4%EB%8A%94-%EC%9B%B9-%EB%94%94%EB%B2%84%EA%B9%85-%ED%94%84%EB%A1%9D%EC%8B%9C-%ED%88%B4-%EC%82%AC%EC%9A%A9%EB%B2%95-c82a851ad2d2

도와줘요, 찰스(Charles)! 업무 효율 높이는 웹 디버깅 프록시 툴 사용법

 

https://techblog.gccompany.co.kr/charles-proxy-%EC%86%8C%EA%B0%9C-4c4a3bbc8994

Charles Proxy 소개