ngrok이란?

로컬 개발 서버(localhost)를 인터넷에 임시로 공개해주는 터널링 도구. 배포 없이 외부에서 접근 가능한 URL을 생성해준다.

<https://abc123.ngrok.io>  →  localhost:3000

어떤 상황에서 쓰나?

1. 기획자/디자이너 리뷰 (주요 사용 목적)

배포 없이 개발 중인 화면을 URL 하나로 공유. 피드백을 받으면서 수정하면 상대방이 새로고침으로 즉시 확인 가능.

• 내가 pnpm dev로 로컬 서버 실행
• ngrok http 3000 실행 → URL 생성
• URL을 슬랙/카카오톡으로 공유
• 상대방이 브라우저로 접속 → 내 로컬 화면 확인
• 코드 수정 → 새로고침으로 즉시 반영 확인

2. 모바일 실기기 확인

스마트폰 브라우저에서 ngrok URL로 접속하면 실제 기기에서 UI/UX 확인 가능. 헤더 레이아웃, 모달 크기, 터치 이벤트 등을 배포 전에 검증.

3. 외부 연동 테스트 (Webhook, ARS, OAuth)

결제/정산 처리 결과 Webhook, ARS 콜백, 소셜 로그인 리다이렉트 등 외부 시스템이 localhost로 요청을 보낼 수 없는 경우 ngrok URL을 엔드포인트로 등록해서 로컬에서 직접 디버깅.

피드백 사이클 변화

기존: 개발 → dev 배포 → 기획자 확인 → 피드백 → 수정 → 다시 배포

ngrok 사용: 개발 → ngrok URL 공유 → 기획자 실시간 확인 → 즉시 수정

주의사항

보안