localhost 공유: 휴대폰 확인과 웹훅 테스트

공유 전 로컬 주소 확인

개발 서버가 표시하는 URL을 확인하세요. 프로토콜과 포트가 중요합니다. http://localhost:5173과 https://localhost:7143은 서로 다른 대상입니다. 터널을 만들기 전에 정확한 주소를 컴퓨터에서 열고 일반적인 작업을 한 번 수행하세요.

5분 동안 해보는 유용한 휴대폰 테스트

탐색과 레이아웃

메뉴를 열고 휴대폰을 회전하고 긴 페이지를 보세요. 가로 스크롤, 가려진 버튼, 고정 헤더 뒤에 숨은 콘텐츠를 확인하세요. 브라우저 에뮬레이션은 유용하지만 모든 실제 기기 동작을 재현하지는 않습니다.

폼과 세션 상태

각 입력란을 누르고 잘못된 값 다음에 올바른 값을 제출하세요. 오류 메시지가 키보드 위에 보이는지 확인하세요. 로그인이 컴퓨터에서만 된다면 새 세션으로 시험하고 콜백 주소와 쿠키 설정을 확인하세요.

요청과 로딩

이미지가 많은 페이지와 데이터를 불러오는 작업을 시험하세요. 가정용 회선의 느린 응답은 운영 환경의 성능 지표가 아닙니다. 문제를 로컬에서 재현할 수 있도록 페이지, 기기, 작업을 기록하세요.

고객에게 작업 보여주기

검토할 페이지의 정확한 링크를 보내세요. 무엇을 시험하고 언제 미리보기가 닫히는지 알려 주세요.

오늘 검토할 미리보기입니다. 모바일 메뉴와 문의 폼을 확인해 주세요. 통화가 끝나면 링크를 닫겠습니다.

로컬에서 웹훅 받기

웹훅 서비스는 컴퓨터의 localhost에 접근할 수 없습니다. 터널 공개 주소에 콜백 경로를 붙여 제공하세요. 예제는 앱이 이미 /api/webhooks/demo에서 POST 요청을 처리한다고 가정합니다.

1. YOUR-TUNNEL을 실제 호스트명으로 바꾸고 전체 콜백 URL을 서비스의 테스트 설정에 입력하세요.
2. 서명 검증을 켜 두세요. 웹훅 시크릿을 로컬에 보관하고 서비스에서 테스트 이벤트를 보내세요.
3. 전송 상태와 로컬 로그를 확인하세요. 서비스가 기대하는 성공 응답을 반환하고 재전송 시 같은 작업이 반복되지 않도록 처리하세요.

브라우저 비밀번호 화면은 웹훅 발신자를 차단할 수 있습니다. 서비스가 접근할 수 있는 엔드포인트를 사용하고 서명된 요청을 검증하세요. CORS는 브라우저 요청에 적용되며 서버 간 웹훅 전송에는 적용되지 않습니다.

예: GitHub 웹훅 서명 검증 ↗

브라우저 화면뿐 아니라 웹훅 응답 확인

브라우저로 콜백 URL을 열면 보통 GET 요청을 보냅니다. 많은 웹훅 엔드포인트는 POST를 기대하므로 브라우저 오류만으로 전송 실패를 판단할 수 없습니다. 테스트 이벤트를 보내고 시간과 전송 ID를 로컬 로그와 비교하세요.

404 / 405

경로와 HTTP 메서드를 확인하세요. 무조건 프런트엔드가 아니라 API의 포트를 사용하세요. 홈페이지가 열린다고 콜백 엔드포인트가 존재하는 것은 아닙니다.

401 / 403

미리보기 비밀번호, 앱 인증, 서명 검증 중 어디에서 거부했는지 확인하세요. 서명된 데이터는 서비스가 정한 원본 요청 본문 규칙을 따르세요. 검증 전에 파싱하고 다시 작성하면 서명이 무효가 될 수 있습니다.

5xx / Timeout

앱이 실행 중이며 요청을 받았는지 확인하세요. 처리가 길면 서비스의 응답 기한을 지키고 필요할 때 백그라운드 작업을 사용하세요. 재전송을 시험해 주문이나 메시지가 중복되지 않도록 하세요.

서비스의 테스트 모드를 사용하고 시크릿이나 개인정보가 담긴 전체 데이터를 로그에 남기지 마세요. 성공한 테스트는 전송과 앱의 처리를 확인할 뿐, 서비스의 연동 요구 사항을 대체하지 않습니다.

링크는 열리지만 일부가 작동하지 않나요?

테스트를 마치고 공유 중지하기

GhostlyShare에서 공유를 중지하거나 터미널에서 Ctrl+C로 터널을 종료하세요. 만료 시간을 설정하면 예정된 미리보기를 자동 종료할 수 있습니다. 끝나면 서비스의 임시 콜백 URL도 제거하세요.

로컬 미리보기 관련 질문