> This page is for 플랫폼, version 레거시.
> For other versions, use one of these documentation indexes:
> - V4 (default): https://next.developer.frame.io/platform/v4/llms.txt
> - V4 실험적: https://next.developer.frame.io/platform/v4-experimental/llms.txt
> - 레거시: https://next.developer.frame.io/platform/v2/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://next.developer.frame.io/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://next.developer.frame.io/_mcp/server.

# ngrok 사용하기

ngrok은 로컬 프로젝트를 테스트하거나 클라이언트 또는 팀원과 리뷰를 위해 작업을 공유할 때 사용할 수 있는 퍼블릭 URL과 함께 로컬 머신에 보안 터널을 생성해 주는 사용하기 쉬운 도구입니다. HTTP나 HTTPS를 설정할 수 있으며, 이 도구는 인기가 많아서 문제가 발생하더라도 해결 방법을 설명하는 수많은 게시글을 찾을 수 있습니다. 이 문서에서는 ngrok을 설치하는 몇 가지 간단한 방법과 웹 애플리케이션이 ngrok과 통신할 수 없는 경우의 해결 방법을 다룹니다.




<Info title="ngrok">
  ngrok 팀에서 ngrok을 통한 Frame.io 웹훅 지원에 관한 훌륭한 문서를 작성했습니다. [여기](https://ngrok.com/docs/integrations/frameio/webhooks)에서 확인해 보세요.
</Info>


## ngrok 설치




몇 가지 다른 방법으로 ngrok을 사용할 수 있습니다.





### ngrok 설치 관리자를 통한 설치



1. ngrok 웹 사이트로 이동하여 다음 지침을 따릅니다. [https://ngrok.com/download](https://ngrok.com/download)
2. 계정을 연결하여 제공되는 기능을 원한다면 다음 지침에 따라 계정과 토큰을 받아야 합니다.





계정을 만들거나 토큰을 추가할 필요는 없지만, 다운로드 페이지를 확인하여 본인에게 필요한 기능이 있는지 확인해 보는 것이 좋습니다.




<Info title="참고:">
  


이 방법을 사용하는 경우 시스템 전역에서 사용할 수 있도록 설정하지 않는 한 ngrok은 저장된 위치에서 실행됩니다.



</Info>


### Homebrew로 설치

이 방법은 제가 가장 선호하는 ngrok 설치 방법입니다. Homebrew가 설치되어 있다면 `homebrew cask install ngrok`를 입력하기만 하면 됩니다. ngrok이 설치되면 어디서든 사용할 수 있습니다! 무엇보다도 각 명령의 시작 부분에 있는 터미널에 `./ngrok`을 입력할 필요 없이 그냥 `ngrok`이라고만 입력하면 됩니다. 이 옵션에 대한 자세한 내용은 [여기](https://gist.github.com/wosephjeber/aa174fb851dfe87e644e)에서 읽을 수 있습니다.

## ngrok 사용

ngrok을 설정한 후 `3000`과 같은 포트를 선택하고 ngrok http `3000` 명령을 사용하여 터미널 명령줄에서 실행합니다. 반드시 `3000` 포트를 사용해야 하는 것은 아니지만, 설정 시 일반적으로 선택하는 포트입니다. 특정 폴더에서 실행되도록 ngrok을 설정한 경우, ngrok이 있는 폴더에서 `./ngrok http 3000` 명령을 사용해야 합니다.

프로젝트용 서버를 시작하여 동일한 포트에서 수신 대기하게 하면 ngrok에서 제공하는 퍼블릭 주소를 사용하여 작업에 액세스할 수 있습니다.





### 웹 앱에서 ngrok 문제 해결 - 끝 슬래시




ngrok에서 겪을 수 있는 한 가지 문제는 웹 앱에서 사용할 ngrok URL을 설정할 때 서버에 연결할 수 없다는 것입니다. 이 문제의 답답한 점은 ngrok이 사용자가 전송한 어떤 것도 등록하지 않는다는 것입니다. localhost:4040을 열어 상황을 파악하려 해도 아무것도 표시되지 않습니다. (localhost:4040은 서버로 들어오는 모든 요청을 모니터링할 수 있도록 ngrok에서 제공합니다.) ngrok은 주소를 (/.*)가 아닌 /(.*)와 일치시키는 것으로 보이므로, 주소 끝에 슬래시를 포함하지 않았고 ngrok 모니터링 도구에 아무것도 표시되지 않는다면 ngrok이 나열된 주소와 일치하는 항목을 찾지 못하기 때문입니다.

다음은 끝 슬래시를 추가한 예시입니다. `http://something.ngrok.io/` 슬래시가 포함된 엔드포인트를 확인하도록 샘플 애플리케이션을 작성할 수도 있습니다. 단, 샘플 앱이 `/actions` 엔드포인트를 사용하는 경우 Frame.io 앱이 서버에 도달하려면 ngrok 주소 끝에 /actions 엔드포인트를 추가해야 한다는 점을 기억하세요. 예를 들어 ngrok 주소가 `http://something.ngrok.io`인 경우 Custom Action 설정에 `http://something.ngrok.io/actions`로 제공해야 합니다. 이는 다른 웹 애플리케이션마다 다를 수 있으므로 바로 작동하지 않는다면 ngrok 주소의 끝부분을 여러 가지로 변경해 보세요.

### ngrok 외에 다른 도구를 사용할 수 있나요? Glitch를 시도해 보세요!

Glitch는 ngrok의 훌륭한 대안이며 설정이 더 빠릅니다. Glitch를 사용하면 계정을 만든 다음 퍼블릭 액세스가 가능한 URL과 함께 해당 서버를 사용하여 자체 앱을 구축할 수 있습니다. 다른 사람과 협업하고, 코드를 공개 또는 비공개로 설정하고, 다양한 언어와 플랫폼 중에서 선택할 수 있습니다. 사용 가능한 옵션을 확인하려면 [https://glitch.com/create](https://glitch.com/create)를 방문하세요. Glitch에 프로젝트를 설정할 때 일부 웹 애플리케이션의 경우 끝 슬래시 문제가 적용됩니다. Frame.io의 경우 [developer.frame.io](/)에서 Custom Action을 설정할 때 Glitch에서 제공한 URL의 끝에 슬래시를 포함해야 합니다. /actions 엔드포인트에 대해서도 다른 것을 추가할 필요가 없습니다.

### 지금 바로 시도해 볼 수 있는 설정이 있나요?

예.ngrok을 사용하거나 자체 Glitch 프로젝트를 만들고 싶지 않다면 다음에서 테스트해 볼 수 있는 샘플 애플리케이션을 설정해 두었습니다: [https://frameio-custom-action.glitch.me](https://frameio-custom-action.glitch.me). [developer.frame.io](/)의 Custom Actions 영역에 이 주소를 추가할 때는 반드시 끝 슬래시를 포함하세요.

### 리소스




이 섹션에는 문서 전체에 언급된 리소스가 나열되어 있습니다.

* **ngrok** [https://ngrok.com/](https://ngrok.com/)
* **Glitch**[https://glitch.com/](https://glitch.com/)
* **Glitch에서 사용 가능한 플랫폼**[https://glitch.com/create](https://glitch.com/create)
* **JavaScript로 작성된 Custom Action용 Glitch 샘플 앱**[https://frameio-custom-action.glitch.me](https://frameio-custom-action.glitch.me)
* **Frame.io 개발자 가입 및 설정**[Frame.io 개발자 사이트](/) 
* **Frame.io 웹 앱** [ https://app.frame.io/](https://app.frame.io/)