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

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

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

## Zapier 웹훅 만들기 {#create-a-zapier-webhook}

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

[Zap 만들기](https://zapier.com/app/zaps)

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

### 2. Webhooks by Zapier 트리거 설정 {#_2-set-up-the-webhooks-by-zapier-trigger}

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

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

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

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

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

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

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

### 4. Zap 동작 구성 {#_4-configure-your-zap-action}

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

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

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

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

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

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

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

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

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

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

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

### 테스트 메시지 {#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 Zapier Webhook URL is working!",
  "message": "[Test Message] Yay! Your Zapier 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"
  }
}
```

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

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

### 공통 필드(모든 페이로드에 포함) {#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 색상 코드

### 자주 쓰는 Zap 워크플로 {#common-zap-workflows}

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`로 어떤 앱에서든 클릭할 수 있는 링크 만들기