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

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

Make 웹훅 만들기 ​

1. 새 시나리오 만들기(아직 없는 경우) ​

Make 시나리오 만들기

Create a new scenario를 클릭해 자동화를 만들기 시작하세요.

2. Webhooks 모듈 추가 ​

Webhooks 모듈을 검색해 트리거로 추가하세요.

Custom webhook을 선택하고 Add를 클릭해 새 웹훅을 만드세요.

3. Make 웹훅 URL 복사 ​

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

https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456

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

Commentful을 설정하는 동안 Make 설정 페이지를 열어 두어도 돼요. Make는 첫 번째 웹훅이 도착할 때까지 기다렸다가 데이터 구조를 파악해요.

4. 시나리오 동작 구성 ​

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

  • Slack, Discord, Microsoft Teams로 보내기
  • Asana, Monday, Notion에 작업 만들기
  • Gmail이나 SendGrid로 이메일 알림 보내기
  • Google Sheets나 Airtable에 추가하기
  • 그 밖에 1,500개 이상의 앱과 서비스에 연결하기

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

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

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

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

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

    예: https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456

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

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

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

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

  1. 키보드의 CTRL + K 키를 눌러 설정을 여세요.

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

  3. Webhook Platform 드롭다운에서 Make를 선택하세요.

  4. Make 웹훅 URL을 복사해 붙여 넣으세요.

    예: https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456

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

웹훅 페이로드 예시 ​

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

테스트 메시지 ​

“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 Make Webhook URL is working!",
  "message": "[Test Message] Yay! Your Make 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"
  }
}

데이터 구조 확인 ​

Commentful에서 첫 테스트 메시지를 보내면 Make가 웹훅 데이터 구조를 자동으로 감지해요. Make 웹훅 모듈에서 OK를 클릭해 구조를 확인한 다음, 사용할 수 있는 데이터 필드로 시나리오를 계속 만드세요.

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

모든 웹훅 페이로드에는 일관되고 쓰기 쉬운 필드가 있어서, Make 시나리오에 바로 매핑할 수 있어요.

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

  • 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 색상 코드

자주 쓰는 Make 시나리오 ​

  1. Router Module: type 필드로 필터링해 활동마다 다른 경로로 보내기
  2. 필드 직접 매핑: author.displayName, message, action 같은 필드를 출력 모듈에 바로 매핑하기
  3. HTTP Module: image.url로 업로드된 이미지를 다운로드하고 처리하기
  4. Slack/Discord/Teams: 구조화된 필드로 서식을 갖춘 알림 전달하기
  5. Google Sheets/Airtable: 깔끔하게 구조화된 데이터로 모든 피드백 기록하기
  6. Asana/Monday/Notion: 관련 세부 정보가 모두 미리 매핑된 작업 만들기
  7. 조건부 로직: status.color나 type으로 필터링해 특정 워크플로 실행하기
  8. 이메일: urls.commentful과 urls.figma로 클릭할 수 있는 링크를 넣어 서식을 갖춘 알림 보내기