Proxyman으로 Chrome localhost:3000 트래픽 캡처하는 방법

Proxyman으로 Chrome localhost:3000 트래픽 캡처하는 방법 커버 이미지

이 튜토리얼에서 다루는 내용은 다음과 같습니다:

  • Google Chrome으로 개발할 때 localhost:3000이 Proxyman(또는 Charles)에 표시되지 않는 이유 이해하기
  • 기존 방법 익히기: /etc/hosts로 localhost를 proxyman.debug에 매핑하기
  • ✅ 새로운 원클릭 방법 사용하기: Google Chrome용 Proxyman Automatic Setup (Current Profile 또는 New Profile)

Next.js, React, Vite 등으로 웹 앱을 만들면서 API 호출을 디버깅하려고 할 때, 브라우저에서는 모든 것이 정상 동작하는데 Proxyman에는 아무것도 나타나지 않으면 혼란스러울 수 있습니다.

이 글에서는 Google Chrome에서 http://localhost:3000 트래픽을 캡처하는 가장 확실한 방법을 보여드립니다.

Google Chrome의 localhost 트래픽을 전혀 캡처하지 못한 화면
Google Chrome의 localhost 트래픽을 전혀 캡처하지 못한 화면

1. 문제: Google Chrome으로 웹 개발할 때 localhost:3000을 캡처할 수 없음

흔한 환경은 다음과 같습니다:

  • 앱이 http://localhost:3000에서 실행됩니다 (Next.js 개발 서버)
  • Chrome을 열고 로컬 사이트를 둘러봅니다
  • Proxyman(또는 Charles)에서 트래픽이 보이기를 기대합니다

하지만 Proxyman에는… 아무것도 나타나지 않습니다.

더 난처한 것은 원격 웹사이트(예: https://google.com)는 잘 표시되는데 localhost 요청만 완전히 빠져 있다는 점입니다.

2. 원인: localhost 트래픽은 기본적으로 시스템 프록시를 사용하지 않음

대부분의 프록시 도구는 트래픽을 프록시로 보내기 위해 시스템 프록시 설정(또는 브라우저 프록시 설정)에 의존합니다.

하지만 브라우저는 보통 로컬 주소를 특별하게 취급합니다:

  • localhost / 127.0.0.1은 루프백 트래픽입니다
  • 기본적으로 대개 프록시를 우회합니다

따라서 요청이 Proxyman이나 Charles에 전달되지 않고, 그래서 트래픽이 전혀 보이지 않는 것입니다.

3. 기존 방법: /etc/hosts를 수정하고 proxyman.debug 사용하기

전통적인 우회 방법은 브라우저 URL에서 localhost를 사용하지 않는 것입니다.

대신 localhost를 proxyman.debug에 매핑하고, 그 호스트 이름으로 로컬 서버를 여세요.

3.1 /etc/hosts에 proxyman.debug 추가하기

터미널을 열고 hosts 파일을 편집합니다:

  1. 다음 명령을 실행합니다:
sudo nano /etc/hosts
  1. 다음 줄을 추가합니다:
127.0.0.1 proxyman.debug
  1. 저장하고 종료합니다.

이제 http://localhost:3000 대신 다음 주소를 엽니다:

  • http://proxyman.debug:3000

이렇게 하면 Chrome이 특수한 localhost 대신 일반 호스트 이름으로 인식하므로, 프록시 도구가 트래픽을 캡처할 수 있습니다.

3.2 기존 방법의 단점

  • 다른 호스트 이름을 사용하는 것을 기억해야 합니다
  • 일부 OAuth/리디렉션 URI와 로컬 개발 도구는 localhost로 하드코딩되어 있을 수 있습니다
  • 팀원에게 설명하기도 번거롭고, 쉽게 잊어버리기도 합니다

4. ✅ 원클릭 새 방법: Google Chrome용 Proxyman Automatic Setup

Proxyman에는 /etc/hosts를 편집할 필요가 없는 더 새로운 방법이 있습니다.

올바른 프록시 설정으로 Google Chrome을 실행하므로 localhost 트래픽을 캡처할 수 있습니다.

4.1 단계

  1. Proxyman을 엽니다
  2. Command Palette를 엽니다
    • macOS: Shift + Command + P
    • Windows/Linux: Ctrl + Shift + P
  3. Automatic Setup을 입력하고 엽니다
Google Chrome용 Automatic Setup
Google Chrome용 Automatic Setup
  1. Google Chrome을 선택합니다
  2. 다음 중 하나를 선택합니다:
    • New profile (프록시 전용 깨끗한 브라우저를 원한다면 권장)
    • Current profile (기존 Chrome 프로필을 사용하려는 경우)
  3. Start를 클릭합니다

새 Google Chrome 창이 열립니다.

4.2 완료: 이제 localhost:3000이 캡처됩니다

이제 로컬 사이트를 다시 여세요:

  • http://localhost:3000

Proxyman으로 돌아가면 localhost 요청이 캡처된 것을 확인할 수 있습니다 ✅

Google Chrome에서 캡처한 localhost:3000 트래픽
Google Chrome에서 캡처한 localhost:3000 트래픽
  • Chrome 창이 여러 개 열려 있다면 New profile 옵션을 사용하는 것이 좋습니다. 그래야 어떤 Chrome 인스턴스가 Proxyman을 거치는지 항상 알 수 있습니다.
  • ⚠️ Proxyman을 종료하면 현재 Google Chrome 창도 닫으세요. 그렇지 않으면 Google Chrome 창이 Proxyman을 거치지 않습니다.

5. 마치며

이 튜토리얼에서는 localhost 요청이 프록시 도구를 자주 우회하는 이유, 기존 /etc/hosts 우회 방법의 동작 원리, 그리고 Proxyman의 Automatic Setup으로 클릭 한 번에 localhost:3000을 캡처하는 방법을 알아봤습니다.

그래도 특정 요청이 여전히 보이지 않는다면, Chrome DevTools를 열고 Network 탭에서 Disable cache를 켠 뒤 Proxyman이 연 Chrome 창에서 페이지를 새로고침하세요. 브라우저 캐시나 서비스 워커는 새로운 네트워크 요청을 보내지 않고 오래된 데이터를 반환할 수 있습니다. New profile 옵션은 확장 프로그램이나 저장된 브라우저 설정이 원인인지 빠르게 확인하는 방법이기도 합니다.

6. 관련 글

Proxyman은 고성능 macOS/Windows/Linux 앱으로, 개발자가 iOS 기기, iOS 시뮬레이터, Android 기기의 HTTPS 트래픽을 캡처할 수 있게 해 줍니다.

https://proxyman.com에서 다운로드하세요.

Noah Tran
Noah Tran

2026년 7월 16일 수정됨. 로컬 요청이 보이지 않을 때 확인할 캐시와 서비스 워커 항목을 추가했습니다.

로컬 웹 앱의 모든 요청을 확인하세요

준비된 Chrome 창을 열고, 프로젝트 URL을 바꾸지 않고 localhost 트래픽을 확인하세요.

Proxyman 다운로드