리뷰 링크 댓글용 Zapier 웹훅 설정

클라이언트에게 공유한 Commentful 리뷰 링크에 새 댓글이 달릴 때마다 Zapier 웹훅으로 알림을 보내도록 설정할 수 있어요.

Zapier 웹훅 만들기 ​

1. 새 Zap 만들기(아직 없는 경우) ​

Zap 만들기

Create Zap을 클릭해 자동화를 만들기 시작하세요.

2. Webhooks by Zapier 트리거 설정 ​

트리거 단계에서 Webhooks by Zapier를 검색해 선택하세요.

이벤트 유형으로 Catch Hook을 선택한 다음 Continue를 클릭하세요.

3. Zapier 웹훅 URL 복사 ​

Zapier가 다음과 같은 고유한 웹훅 URL을 만들어 줘요.

https://hooks.zapier.com/hooks/catch/1234567/abcdefg/

이 URL을 복사해 두세요. Commentful을 설정할 때 필요해요.

Commentful을 설정하는 동안 Zapier 설정 페이지를 열어 두세요. 나중에 돌아와서 웹훅을 테스트해야 해요.

4. Zap 동작 구성 ​

Commentful을 설정한 뒤(아래 참고), 댓글을 받았을 때 실행할 동작을 구성할 수 있어요.

  • Slack, Discord, Microsoft Teams로 보내기
  • Asana, Trello, ClickUp에 작업 만들기
  • 이메일 알림 보내기
  • Google Sheet나 Airtable에 추가하기
  • 그 밖에 6,000개 이상의 앱에 연결하기

Commentful 플러그인에서 Zapier 웹훅 URL 추가 ​

Commentful Zapier 연동을 설정하려면 위 단계에 따라 Zapier 웹훅 URL을 만드세요. 그런 다음 Commentful Figma 플러그인에서 플러그인 창 오른쪽 위의 Settings 아이콘 버튼을 클릭하고 다음 단계를 따르세요.

  1. Enable webhook notifications for review links를 클릭하세요.

  2. Webhook Platform 드롭다운에서 Zapier를 선택하세요.

  3. Zapier 웹훅 URL을 복사해 붙여 넣으세요.

    예: https://hooks.zapier.com/hooks/catch/1234567/abcdefg/

  4. Save Webhook URL을 클릭하세요.

Send Test Message 버튼을 클릭하면 Commentful이 Zapier 웹훅으로 테스트 알림을 보내요. Zapier 연동이 제대로 작동하는지 이 방법으로 확인할 수 있어요.

Commentful 웹 앱에서 Zapier 웹훅 URL 추가 ​

Commentful Zapier 연동을 설정하려면 위 단계에 따라 Zapier 웹훅 URL을 만드세요. 그런 다음 Commentful 웹 앱에서(브라우저로 공유 리뷰 링크를 연 상태에서) 다음 단계를 따르세요.

  1. 키보드의 CTRL + K 키를 눌러 설정을 여세요.
  2. Enable webhook notifications for review links를 클릭하세요.
  3. Webhook Platform 드롭다운에서 Zapier를 선택하세요.
  4. Zapier 웹훅 URL을 복사해 붙여 넣으세요. 예: https://hooks.zapier.com/hooks/catch/1234567/abcdefg/

Send Test Message 버튼을 클릭하면 Commentful이 Zapier 웹훅으로 테스트 알림을 보내요. Zapier 연동이 제대로 작동하는지 이 방법으로 확인할 수 있어요.

웹훅 페이로드 예시 ​

Commentful은 명확하고 쓰기 쉬운 필드로 구성된 구조화된 JSON 페이로드를 Zapier 웹훅으로 보내요. 페이로드 구조는 활동 유형에 따라 달라요.

테스트 메시지 ​

“Send Test Message”를 클릭하면 다음 페이로드가 전송돼요.

json
{
  "type": "test",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "[Test Message] Yay! Your Zapier Webhook URL is working!",
  "message": "[Test Message] Yay! Your Zapier Webhook URL is working!",
  "timestamp": 1234567890
}

새 댓글 ​

누군가 프레임에 새 댓글을 게시하면:

json
{
  "type": "comment",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "New Feedback Comment",
  "message": "This section needs more contrast for accessibility",
  "timestamp": 1234567890,
  "feedbackId": "abc123"
}

댓글 스레드 답글 ​

누군가 기존 댓글에 답글을 달면:

json
{
  "type": "reply",
  "author": {
    "name": "janesmith",
    "displayName": "Jane Smith (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "New Comment Thread Reply",
  "message": "I'll update the contrast ratio to meet WCAG AA standards",
  "timestamp": 1234567890,
  "feedbackId": "abc123"
}

텍스트 변경 요청 ​

누군가 텍스트 변경을 요청하면:

json
{
  "type": "text",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "New Text Change Request",
  "message": "",
  "timestamp": 1234567890,
  "feedbackId": "abc123",
  "textChange": {
    "original": "Sign Up Now",
    "new": "Get Started Today"
  }
}

이미지 변경 요청 ​

누군가 피드백으로 이미지를 업로드하면:

json
{
  "type": "image",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "New Image Change Request",
  "message": "",
  "timestamp": 1234567890,
  "feedbackId": "abc123",
  "image": {
    "url": "https://example.com/path/to/image.png",
    "fileName": "updated-logo.png"
  }
}

상태 업데이트 ​

누군가 댓글 상태를 바꾸면(예: “To Do” → “Done”):

json
{
  "type": "status",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "Updated to Done",
  "message": "",
  "timestamp": 1234567890,
  "feedbackId": "abc123",
  "status": {
    "text": "Done",
    "color": "#1bc47d"
  }
}

Zapier에서 웹훅 데이터 사용하기 ​

모든 웹훅 페이로드에는 일관되고 쓰기 쉬운 필드가 있어요.

공통 필드(모든 페이로드에 포함) ​

  • type - 활동 유형: test, comment, reply, text, image, status
  • author.name - 사용자의 핸들/사용자 이름
  • author.displayName - 프로젝트 정보가 포함된 표시 이름
  • project.name - 프로젝트 또는 페이지 이름
  • frame.name - Figma 프레임 이름
  • frame.nodeId - Figma 노드 ID
  • urls.commentful - Commentful에서 바로 보는 링크
  • urls.figma - Figma에서 바로 여는 링크
  • action - 사람이 읽을 수 있는 활동 설명
  • message - 댓글 또는 피드백 메시지(텍스트·이미지·상태 변경에서는 비어 있을 수 있어요)
  • timestamp - 활동이 일어난 시점의 Unix 타임스탬프
  • feedbackId - 이 피드백 항목의 고유 ID(테스트 메시지에는 없어요)

활동별 필드 ​

type에 따라 추가 필드를 쓸 수 있어요.

  • textChange(type이 text일 때):

    • textChange.original - 원래 텍스트
    • textChange.new - 요청된 새 텍스트

  • image(type이 image일 때):

    • image.url - 업로드된 이미지의 URL
    • image.fileName - 이미지의 원래 파일 이름

  • status(type이 status일 때):

    • status.text - 새 상태 이름(예: “Done”, “In Progress”)
    • status.color - 상태의 Hex 색상 코드

자주 쓰는 Zap 워크플로 ​

  1. 유형별 필터링: type 필드로 활동마다 다른 동작으로 보내기
  2. 작업 만들기: 작업 관리 도구(Asana, Trello, ClickUp)에 필드를 바로 매핑하기
  3. 서식을 갖춘 알림 보내기: Slack/Teams 메시지에 author.displayName, action, message 사용하기
  4. 스프레드시트에 기록하기: 구조화된 데이터를 모두 담아 Google Sheets에 행 추가하기
  5. 조건부 로직: status.text나 status.color로 필터링해 특정 워크플로 실행하기
  6. 이미지 다운로드: image.url로 업로드된 이미지를 가져와 처리하기
  7. 딥 링크: urls.commentful과 urls.figma로 어떤 앱에서든 클릭할 수 있는 링크 만들기