Zapier의 웹훅

개요

이 가이드에서는 Frame.io의 특정 팀에 대한 웹훅 이벤트를 생성하고, 이를 사용하여 Zapier로 페이로드를 전송하는 방법을 알아봅니다. 이 시나리오에서 Zapier는 중재자 역할을 합니다. 즉, Frame.io에서 보내는 훅을 “catch(가져오기)“한 다음, 해당 훅의 데이터를 사용하여 다른 시스템과 상호 작용할 수 있습니다.

대부분의 경우 Frame.io의 Zapier 연동은 수동으로 웹훅을 관리할 필요 없이 Frame.io에서 데이터를 가져올 수 있는 네이티브 “트리거”를 지원합니다(예: 에셋 생성 시). 이 가이드에서는 Frame.io에서 새 프로젝트가 생성될 때 반응하는 방식 등 현재 네이티브 트리거가 지원하지 않는 워크플로에 중점을 둡니다.

먼저, Frame.io의 팀에서 새 프로젝트가 생성될 때 알림을 보내도록 웹훅을 설정합니다. 그런 다음 Frame.io의 Zapier 앱을 사용하여 알림을 가져오고, 해당 프로젝트에 대한 일부 정보를 Google Sheets에 전달합니다.

따라하기

이 가이드를 진행하려면 Frame.io와 Zapier 화면을 왔다 갔다 해야 합니다. 최상의 결과를 얻으려면 두 개의 앱을 나란히 열어두고 따라 하시는 것을 권장합니다.

필요한 항목

시작하기 전에 다음 세 가지가 필요합니다.

  1. Frame.io 계정 액세스 권한 (토큰을 생성하기 위해)
  2. Frame.io 특정 팀에 대한 팀 관리자 또는 관리자 액세스 권한 (웹훅을 생성하기 위해)
  3. Zapier 계정.

처음 두 가지를 확인하려면 developer.frame.io로 이동하여 로그인하세요. “Tokens” 및 “Webhooks” 메뉴 항목(아래 참조)이 보이지 않는다면 Frame.io 계정 담당자에게 문의하세요. Frame.io 개발자 사이트의 도구들

1단계: API 토큰 생성

이 가이드를 완료하려면 우리가 전송할 웹훅의 권한과 일치하는 권한을 가진 API 토큰이 필요합니다. 아래 권한을 포함하여 Zapier에 연결된 토큰이 이미 있다면 해당 토큰을 그대로 사용해도 됩니다. 그렇지 않다면:

새 토큰에 설명이 포함된 이름을 지정하고 다음 권한을 선택하세요.

  • Projects: Read

2단계: Zapier에서 웹훅 생성

Zapier 환경: 트리거 앱으로 “Webhooks by Zapier”를 선택하고, 원하는 트리거 동작으로 “Catch Hook”을 선택하세요. Zapier에서 Trigger 선택저장 후 다음 선택적 단계를 건너뛰면 https://hooks.zapier.com/…Zapier에 URL 입력으로 시작하는 URL이 표시된 화면이 나타납니다.이 화면에서:

  1. 이 URL 복사
  2. Zapier를 열어두세요
  3. 별도의 탭이나 창에서 Frame.io Developer 환경으로 돌아갑니다.

3단계: Frame.io에서 웹훅 이벤트 설정

Frame.io Developer 환경으로 돌아가기:Webhooks로 이동하여 다음 조건으로 새 웹훅을 생성하세요.

  1. 설명이 포함된 이름.
  2. 이전 단계에서 복사한 URL.
  3. 이 훅이 작동하기를 원하는 팀.
  4. 훅과 연결하려는 Frame.io 이벤트(이 가이드의 경우: Projects -> Created).

새 웹훅Create 버튼을 클릭하여 새 웹훅을 저장하고, 다시 Zapier로 돌아갑니다.

4단계: 테스트 훅 전송

요약하자면, 이제 우리는 다음을 갖추게 되었습니다.

  1. 특정 팀에 프로젝트를 생성할 때 실행될 Frame.io의 웹훅 구성.
  2. Frame.io에서 새 프로젝트 정보를 기다리는 Zapier의 웹훅 트리거.

이제 실제로 프로젝트를 생성하여 Zapier로 데이터를 전송해 보겠습니다.

a) Zapier 환경: 웹훅 가져오기 준비

2단계에서 남겨둔 화면에서 “Ok, I did this.”를 클릭하세요. 이렇게 하면 Zapier가 지정된 URL에서 이벤트를 캡처하도록 준비됩니다. 웹훅

b) Frame.io 환경: 새 프로젝트 생성

구성된 팀에서 새 프로젝트를 생성하고 원하는 설정을 적용하세요.

이렇게 하면 웹훅이 전송되고, Zapier가 이를 가져오게 됩니다. 응답으로 Zapier에서 새 훅을 확인하는 메시지가 표시되어야 하며, 이를 펼쳐보면 Frame.io에서 보낸 전체 웹훅 페이로드를 볼 수 있습니다.

축하합니다! Continue를 누른 후, 스스로에게 가볍게 하이파이브를 해주세요. 이제 어려운 부분은 끝났으므로 Webhook을 사용하여 작업을 수행할 수 있습니다!

5단계: 프로젝트 가져오기

a) Frame.io Action 추가

+ Add a Step”을 클릭하고 Frame.io를 검색하세요. Frame.io 앱을 선택한 후 Find Project 작업을 선택하세요. 이제 “Save + Continue”를 클릭하세요.

b) Frame.io 계정 연결

다음 화면에서 “Connect an Account”를 클릭하고, 이어지는 팝업창에 (1단계에서 생성한) Frame.io API 토큰을 입력하세요. 그사이 토큰을 잊어버렸거나 분실했더라도 걱정하지 마세요. 계정 설정에서 새 토큰을 생성하기만 하면 됩니다. 단, 반드시 “Project: Read” 권한을 선택해야 합니다. “Continue”를 클릭하세요.

c) 프로젝트 가져오기

다음 화면에서 목록 하단에 있는 Project 필드의 맨 우측 화살표를 클릭하고 Use a Custom Value를 선택하세요. 그런 다음 새로 나타난 “Custom Value for Comment ID” 필드에서 우측의 아이콘을 클릭하고 이어서 나타나는 드롭다운 메뉴에서 Resource ID를 선택하세요. 프로젝트 가져오기

이것은 일반적인 패턴입니다.

모든 이벤트에서 항상 최신 데이터로 작업하려면 Frame.io와 Zapier 간에 웹훅을 설정할 때 항상 이 Custom Value + Resource ID 패턴을 따라야 합니다. 이 패턴은 네이티브로 지원되는 Trigger에도 동일하게 적용됩니다!

이제 “Continue”를 클릭하세요. 다음 화면에서 Zapier가 Project ID를 정상적으로 가져왔는지 확인한 후 “Fetch + Continue”를 클릭하세요. 가져오기 작업이 완료되면 아래와 같은 화면이 나타납니다. 가져오기 완료

훌륭합니다! 이제 Zapier에서 새 프로젝트에 대한 모든 정보를 얻었으므로, 다음과 같은 여러 시스템에 데이터를 전달할 수 있습니다.

  • Google Sheets
  • Airtable
  • Asana
  • Trello
  • Jira

…그리고 약 3,000개 이상의 다양한 시스템들.

Zap의 나머지 부분 구축을 완료했다면, “On(켜기)“으로 전환하기만 하면 됩니다!