Claude Code x SaaS 연동 완벽 가이드: Notion, Slack, Linear, GitHub, Figma

아직도 Claude Code를 단순한 코드 편집 도구로만 생각하시나요? 매일 쓰는 SaaS와 연결하는 순간 Claude Code는 “업무 오케스트레이터”로 진화합니다. Notion에 메모를 쓰고, Slack에 게시하고, Linear에 티켓을 끊고, GitHub에 PR을 올리고, Figma 디자인을 참조하는 일 — 이 모든 것을 자연어 한 번으로 해낼 수 있습니다.

이 글에서는 ClaudeCodeLab 운영에 실제로 쓰고 있는 5대 SaaS 연동 패턴을, 동작하는 코드와 설정 순서와 함께 정리했습니다. 다 읽고 나면 여러분 전용 자동화 허브가 완성됩니다.

연동의 기본 아키텍처

Claude Code와 SaaS를 연결하는 방법은 크게 3가지입니다.

방식	구현 비용	유연성	추천 용도
MCP 서버	중	높음	자주 쓰는 연동, 여러 프로젝트에서 재사용
CLI 래퍼	낮음	중	1회성 스크립트, 단순 연동
Webhook 수신	높음	높음	SaaS 측에서 촉발되는 양방향 연동

초보자는 CLI 래퍼부터 시작하는 게 가장 빠릅니다. Claude Code가 Bash 툴로 API를 두드리게 할 뿐이라, 환경변수에 API 키만 넣어도 돌아갑니다. 익숙해지면 MCP 서버로 승격해 툴화하는 것이 정석입니다.

1. Notion 연동: AI로 페이지를 양산하기

활용 사례

• 회의록을 Notion에 바로 올리기
• 주간 리포트 자동 작성
• AI가 사내 지식베이스를 계속 확장

구현

// scripts/notion-create-page.mjs
import { Client } from "@notionhq/client";

const notion = new Client({ auth: process.env.NOTION_TOKEN });

async function createPage(databaseId, title, markdown) {
  const blocks = markdown.split("\n\n").map((para) => ({
    object: "block",
    type: "paragraph",
    paragraph: {
      rich_text: [{ type: "text", text: { content: para } }],
    },
  }));

  const page = await notion.pages.create({
    parent: { database_id: databaseId },
    properties: {
      Name: { title: [{ text: { content: title } }] },
      Status: { select: { name: "Draft" } },
    },
    children: blocks,
  });

  return page.url;
}

const [, , dbId, title, ...bodyParts] = process.argv;
const url = await createPage(dbId, title, bodyParts.join(" "));
console.log(`Created: ${url}`);

Claude Code에서의 사용법

claude -p "
아래 회의록을 읽고 세 개의 섹션
(결정 사항 / 액션 아이템 / 다음 회의 안건)으로 정리한 뒤
Notion 회의록 DB에 게시해줘:

$(cat ~/inbox/meeting-raw.txt)

database_id: abc123... 을 사용.
게시 후 URL을 slack-channel-general 로 보내줘.
"

Claude Code가 Bash 툴을 통해 notion-create-page.mjs를 호출하고 완료 URL을 Slack으로 흘려보내는 일련의 과정이 단일 프롬프트로 끝납니다.

2. Slack 연동: 알림과 게시 자동화

활용 사례

• 배포 완료 알림
• 주간 에러 요약 게시
• 긴 보고서를 스레드로 포맷팅

구현 (가장 간단한 Incoming Webhook)

// scripts/slack-notify.mjs
const webhookUrl = process.env.SLACK_WEBHOOK_URL;
const message = process.argv.slice(2).join(" ");

const res = await fetch(webhookUrl, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    text: message,
    blocks: [
      { type: "section", text: { type: "mrkdwn", text: message } },
    ],
  }),
});

console.log(res.ok ? "✓ Sent" : `✗ ${res.status}`);

Slack Bolt SDK 버전 (스레드 답글, DM 발송 등)

// scripts/slack-post-thread.mjs
import { WebClient } from "@slack/web-api";

const client = new WebClient(process.env.SLACK_BOT_TOKEN);

async function postThread(channel, parent, replies) {
  const main = await client.chat.postMessage({ channel, text: parent });
  for (const reply of replies) {
    await client.chat.postMessage({
      channel,
      text: reply,
      thread_ts: main.ts,
    });
  }
  return main.ts;
}

const channel = process.argv[2];
const [parent, ...replies] = process.argv.slice(3);
await postThread(channel, parent, replies);

Claude Code 실사용 예

claude -p "
scripts/deploy.sh 를 실행.
성공하면 '프로덕션 배포 완료 🚀' 를 #dev 채널에 게시,
스레드 답글로 다음 3건:
1. 커밋 해시
2. 변경 파일 수
3. 빌드 소요 시간
을 게시해줘.
실패하면 #dev-alerts 에 빨간색으로 알림.
"

3. Linear 연동: 티켓 자동 등록

활용 사례

• 버그 논의를 티켓으로 전환
• 설계 리뷰의 지적을 일괄 등록
• 코드 리뷰 코멘트를 태스크로 분리

구현

// scripts/linear-create-issue.mjs
const LINEAR_API_KEY = process.env.LINEAR_API_KEY;
const LINEAR_TEAM_ID = process.env.LINEAR_TEAM_ID; // 예: "ENG"

async function createIssue(title, description, priority = 2) {
  const query = `
    mutation CreateIssue($input: IssueCreateInput!) {
      issueCreate(input: $input) {
        success
        issue { id identifier url }
      }
    }
  `;
  const res = await fetch("https://api.linear.app/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: LINEAR_API_KEY,
    },
    body: JSON.stringify({
      query,
      variables: {
        input: {
          teamId: LINEAR_TEAM_ID,
          title,
          description,
          priority, // 0=None, 1=Urgent, 2=High, 3=Medium, 4=Low
        },
      },
    }),
  });
  const json = await res.json();
  return json.data.issueCreate.issue;
}

const [, , title, ...desc] = process.argv;
const issue = await createIssue(title, desc.join(" "), 2);
console.log(`Created: ${issue.identifier} - ${issue.url}`);

운영 예: PR 리뷰에서 일괄 등록

claude -p "
GitHub PR #234 의 리뷰 코멘트를 전부 읽고,
수정이 필요한 지적을 Linear 티켓으로 개별 등록해줘.

각 티켓은:
- 제목: 지적 내용 요약
- 본문: 코멘트 원문 + PR URL + 파일명:라인번호
- priority: '필수'면 1, '개선 제안'이면 3
"

4. GitHub 연동: gh CLI를 조합한다

GitHub는 자체 API보다 gh CLI를 쓰는 편이 압도적으로 편합니다. Claude Code가 Bash 툴로 두드리기만 하면 됩니다.

주요 패턴

# PR 생성
gh pr create --title "feat: add cache layer" --body "$(cat desc.md)"

# 이슈 등록
gh issue create --title "Bug: user logout fails" --label "bug,priority-high"

# PR 리뷰 확인
gh pr view 234 --comments

# CI 상태 확인
gh run list --workflow deploy.yml --limit 5

# 릴리스 생성
gh release create v1.2.0 --notes "Changelog here"

운영 예: 장애 대응

claude -p "
프로덕션 로그에서 500 에러가 반복되고 있어. 아래 절차로 대응해줘:

1. logs/prod-*.log 의 최근 1시간분을 읽고 에러 패턴 추출
2. 스택 트레이스에서 의심되는 커밋을 git log 로 특정
3. 해당 커밋을 revert 하는 PR 생성 (gh pr create)
4. Linear 에 인시던트 티켓 등록
5. #incident-response Slack 에 상황 보고

소요 시간 15분 이내 목표.
"

5. Figma 연동: 디자인을 코드로

활용 사례

• 디자인 파일의 컴포넌트 구조 읽기
• Figma 값(색, 여백, 폰트 크기)을 CSS로 변환
• 스크린샷 비교 테스트

구현 (Figma REST API 버전)

// scripts/figma-extract.mjs
const FIGMA_TOKEN = process.env.FIGMA_TOKEN;
const fileKey = process.argv[2];
const nodeId = process.argv[3];

const res = await fetch(
  `https://api.figma.com/v1/files/${fileKey}/nodes?ids=${nodeId}`,
  { headers: { "X-Figma-Token": FIGMA_TOKEN } }
);
const data = await res.json();
const node = data.nodes[nodeId].document;

// 색상, 타이포그래피, 레이아웃 추출
const tokens = {
  colors: extractColors(node),
  typography: extractTypography(node),
  spacing: extractSpacing(node),
};

console.log(JSON.stringify(tokens, null, 2));

function extractColors(node) { /* 구현 생략 */ }
function extractTypography(node) { /* 구현 생략 */ }
function extractSpacing(node) { /* 구현 생략 */ }

Claude Code에서의 사용법

claude -p "
Figma 파일 abc123 의 nodeId=456:789 (카드 컴포넌트)를 읽고
React 컴포넌트 components/Card.tsx 로 구현해줘.

- Tailwind 토큰에 맞추기 (색은 theme.colors 에서 선택)
- props 는 children, variant (primary/secondary)
- Storybook 스토리도 생성
- scripts/figma-extract.mjs 로 Figma 값을 가져와 참고
"

인증 정보 관리: .env + gitignore 는 필수

모든 연동에서 공통되는 철칙:

# .env (절대 git 으로 관리하지 않는다)
NOTION_TOKEN=secret_xxx
SLACK_BOT_TOKEN=xoxb-xxx
SLACK_WEBHOOK_URL=https://hooks.slack.com/xxx
LINEAR_API_KEY=lin_api_xxx
LINEAR_TEAM_ID=ENG
FIGMA_TOKEN=figd_xxx

# .gitignore
.env
.env.*
!.env.example

CLAUDE.md에 적어 사고를 방지

## 비밀키 취급
- .env 는 절대 commit 하지 않는다
- 스크립트 안에서 process.env 로 읽는다
- API 키를 프롬프트나 출력에 포함시키지 않는다
- 에러 메시지에 Authorization 헤더를 출력하지 않는다

함정 5선

1. 레이트 리밋 무시 Slack은 초당 1회, Notion은 3초에 3회, Linear는 GraphQL 복잡도 제한이 있습니다. 배치 처리 시에는 반드시 sleep을 끼워 넣으세요.

async function batchPost(items) {
  for (const item of items) {
    await postToNotion(item);
    await new Promise((r) => setTimeout(r, 500)); // 500ms 간격
  }
}

2. Webhook 시크릿 검증 누락 Webhook 수신측을 만들 때 서명 검증을 건너뛰면 재전송 공격을 당합니다. Slack도 GitHub도 서명 방식을 공개하고 있으니 반드시 구현하세요.

3. 누구의 권한으로 호출하는지 명시하지 않음 봇 권한으로 게시하고 있는데 “내 이름으로 나온다”고 착각해서 벌어지는 사고. 권한 스코프를 README에 명기합시다.

4. 재시도로 같은 처리를 중복 실행 네트워크 에러로 재시도한 결과 Notion에 같은 페이지가 세 개 생기는 식. idempotency key를 붙여 단 한 번만 보장하도록.

5. 서비스 장애 시 폴백 부재 Slack 이 죽어서 배포 알림이 오지 않아 수동 대응이 방치됩니다. 주요 알림 경로는 2개 준비(예: Slack + 이메일)하는 것이 안전합니다.

통합 운영: 하나의 프롬프트로 다섯 서비스를 횡단

궁극의 형태. 여러 SaaS를 가로지르는 워크플로를 한 방에:

claude -p "
이번 주 릴리스 준비를 진행해줘:

1. GitHub 에서 master 의 미릴리스 커밋을 gh log 로 추출
2. 릴리스 노트를 Markdown 으로 생성
3. Notion 'Releases' 데이터베이스에 새 페이지 작성
4. Linear 에서 이번 주 closed 된 이슈를 집계
5. Figma 'v2.0 Design' 페이지에서 변경점 스크린샷 5장 export
6. 위를 정리한 Slack 게시물을 #team 에 전송
   (스레드에 상세, 메인은 요약 3줄)
7. gh release create v2.0.0 로 정식 릴리스

각 단계의 로그를 간결히 보고해줘.
"

이것이 돌아가면, 매주 1시간 걸리던 릴리스 작업이 Claude Code 에 통째로 맡겨 5분으로 줄어듭니다.

정리

SaaS	최단 연동	발전 형태
Notion	CLI 래퍼 + API	MCP 서버화
Slack	Incoming Webhook	Bolt SDK + 스레드 관리
Linear	GraphQL 직접 호출	MCP 툴화
GitHub	gh CLI 로 충분	Actions 와 조합
Figma	REST API	Plugin + MCP

**“Claude Code = 코드 작성 도구”**라는 고정관념을 버리면, 보이는 세계가 단숨에 넓어집니다. 우선 Slack Incoming Webhook부터 시도해 보세요 — 10분이면 되고 비용도 최소. 그 다음 Notion 이나 Linear 를 더하면, 업무의 30%는 자동화할 수 있을 겁니다.

관련 글

• 하네스 엔지니어링 완벽 가이드
• Claude Code x Obsidian 연동 완벽 가이드
• Claude Code 서브에이전트 활용 패턴 10선

참고 자료

• Notion API 공식
• Slack API 공식
• Linear API 공식
• GitHub CLI
• Figma API 공식