---
url: "/ko/commentful/reviews/make-integration.md"
description: "클라이언트에게 공유한 Commentful 리뷰 링크에 새 댓글이 달릴 때마다 Make 웹훅으로 알림을 보내도록 설정할 수 있어요."
---

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

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

## Make 웹훅 만들기 {#create-a-make-webhook}

### 1. 새 시나리오 만들기(아직 없는 경우) {#_1-create-a-new-scenario-if-you-don-t-have-one-already}

[Make 시나리오 만들기](https://www.make.com/en/scenarios)

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

### 2. Webhooks 모듈 추가 {#_2-add-a-webhooks-module}

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

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

### 3. Make 웹훅 URL 복사 {#_3-copy-your-make-webhook-url}

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

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

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

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

### 4. 시나리오 동작 구성 {#_4-configure-your-scenario-actions}

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

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

## Commentful 플러그인에서 Make 웹훅 URL 추가 {#add-your-make-webhook-url-via-the-commentful-plugin}

[Video](/assets/videos/commentful/reviews/save-slack-webhook.mp4)

Commentful Make 연동을 설정하려면 [위 단계에 따라](#create-a-make-webhook) 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**을 클릭하세요.

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

## Commentful 웹 앱에서 Make 웹훅 URL 추가 {#add-your-make-webhook-url-via-the-commentful-web-app}

Commentful Make 연동을 설정하려면 [위 단계에 따라](#create-a-make-webhook) 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`

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

## 웹훅 페이로드 예시 {#webhook-payload-examples}

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

### 테스트 메시지 {#test-message}

“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
}
```

### 새 댓글 {#new-comment}

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

```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"
}
```

### 댓글 스레드 답글 {#reply-to-comment-thread}

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

```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"
}
```

### 텍스트 변경 요청 {#text-change-request}

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

```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"
  }
}
```

### 이미지 변경 요청 {#image-change-request}

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

```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"
  }
}
```

### 상태 업데이트 {#status-update}

누군가 댓글 상태를 바꾸면(예: “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"
  }
}
```

## 데이터 구조 확인 {#determining-the-data-structure}

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

## Make에서 웹훅 데이터 사용하기 {#using-the-webhook-data-in-make}

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

### 공통 필드(모든 페이로드에 포함) {#common-fields-in-every-payload}

- **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(테스트 메시지에는 없어요)

### 활동별 필드 {#activity-specific-fields}

`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 시나리오 {#common-make-scenarios}

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`로 클릭할 수 있는 링크를 넣어 서식을 갖춘 알림 보내기