Slack-Claude Gateway: Slack에서 Claude AI와 대화하기

GitHub: https://github.com/bear2u/my-custom-openclaw

GitHub - bear2u/my-custom-openclaw

 

Slack 채널에서 Claude AI와 직접 대화할 수 있다면 어떨까요? Slack-Claude Gateway는 이 아이디어를 현실로 만들어주는 오픈소스 프로젝트입니다.

왜 만들었나?

개발팀에서 AI를 활용할 때 가장 큰 불편함 중 하나는 컨텍스트 전환입니다. Slack에서 논의하다가 AI에게 질문하려면 브라우저를 열고, 대화 내용을 복사하고, 답변을 다시 Slack에 붙여넣어야 합니다.

Slack-Claude Gateway는 이 과정을 없애줍니다. Slack 채널에서 봇을 멘션하면 바로 Claude가 답변합니다. 팀원들과 함께 AI 응답을 보고, 이어서 질문하고, 대화 맥락을 유지할 수 있습니다.

주요 특징

1. 실시간 스트리밍 응답

Claude의 응답을 기다리는 동안 아무것도 보이지 않으면 답답합니다. 이 게이트웨이는 스트리밍 방식으로 응답을 전달합니다. Claude가 텍스트를 생성하는 즉시 Slack에 표시되어, 사용자는 응답이 만들어지는 과정을 실시간으로 볼 수 있습니다.

2. 대화 세션 유지

같은 채널에서 이어지는 질문은 이전 대화 맥락을 기억합니다. "아까 그 코드에서 에러 처리 추가해줘"처럼 자연스러운 후속 질문이 가능합니다. 새로운 주제로 넘어가고 싶으면 @bot 새 세션이라고 말하면 됩니다.

3. 메시지 큐 시스템

팀에서 여러 명이 동시에 질문하면 어떻게 될까요?

기존 방식이라면 요청이 충돌하거나 누군가의 질문이 무시될 수 있습니다. 하지만 이 게이트웨이는 채널별 메시지 큐를 관리합니다.

철수: @bot API 설계 검토해줘
봇:   👀 처리 중...

영희: @bot 테스트 코드 작성해줘
봇:   📋 대기열에 추가됨 (대기: 1개)

[철수의 요청 완료]
봇:   ✅ [API 설계 검토 결과]
봇:   👀 대기 중인 작업을 시작합니다...
봇:   ✅ [테스트 코드]

급한 요청이 있다면? !를 앞에 붙이면 현재 작업을 취소하고 바로 시작합니다.

민수: @bot !긴급 버그 분석해줘
봇:   🔄 이전 작업을 취소하고 새 작업을 시작합니다.

4. 웹 프론트엔드

Slack 외에도 웹 인터페이스를 통해 Claude와 대화할 수 있습니다. React 기반의 채팅 UI와 칸반 보드를 제공합니다.

• 채팅 화면: 스트리밍 응답이 실시간으로 표시
• 칸반 보드: 작업을 시각적으로 관리
• 설정 페이지: Claude 설정, 브라우저 자동화 등 다양한 옵션

5. 칸반 보드 시스템

개발 작업을 체계적으로 관리할 수 있는 칸반 보드를 제공합니다.

┌──────────────┬──────────────┬──────────────┬──────────────┐
│   Backlog    │     Todo     │  In Progress │     Done     │
├──────────────┼──────────────┼──────────────┼──────────────┤
│ ┌──────────┐ │ ┌──────────┐ │ ┌──────────┐ │ ┌──────────┐ │
│ │ API 설계 │ │ │ 테스트   │ │ │ 버그수정 │ │ │ 로그인   │ │
│ │ 검토     │ │ │ 작성     │ │ │ #123     │ │ │ 구현완료 │ │
│ └──────────┘ │ └──────────┘ │ └──────────┘ │ └──────────┘ │
│              │              │              │              │
└──────────────┴──────────────┴──────────────┴──────────────┘

주요 기능:

• 드래그 앤 드롭: 태스크를 끌어서 상태 변경
• 4단계 워크플로우: Backlog → Todo → In Progress → Done
• 우선순위 설정: High/Medium/Low 우선순위 지정
• 영구 저장: SQLite 데이터베이스에 태스크 저장
• 실시간 동기화: WebSocket으로 변경사항 즉시 반영

칸반 보드는 /kanban/:projectId 경로에서 접근할 수 있으며, Claude와의 대화 중 생성된 작업들을 시각적으로 추적하는 데 유용합니다.

자연어로 칸반 보드 관리하기

Slack이나 웹 채팅에서 자연어로 칸반 보드를 관리할 수 있습니다. Claude가 태스크 관련 요청을 자동으로 인식하고 처리합니다.

사용자: @bot 로그인 버그 수정 태스크 추가해줘. 우선순위는 높음으로
봇:     ✅ 태스크 생성됨: "로그인 버그 수정" (ID: abc123)

사용자: @bot 현재 진행 중인 태스크가 뭐야?
봇:     [칸반 보드 현황]

        ## 진행중 (2개)
        1. [abc123] 로그인 버그 수정 (우선순위: 높음)
        2. [def456] API 리팩토링 (우선순위: 중간)

사용자: @bot abc123 태스크 완료 처리해줘
봇:     ✅ 태스크 상태 변경됨: "로그인 버그 수정" → done

지원하는 자연어 명령:

• 태스크 추가: "~~ 태스크 추가해줘", "할일 만들어줘", "버그 등록해줘"
• 상태 확인: "현재 할일 보여줘", "진행 중인 작업 뭐야?", "칸반 보드 보여줘"
• 상태 변경: "~~ 완료 처리해줘", "~~ 진행중으로 바꿔줘"
• 우선순위 설정: "우선순위 높음으로", "긴급", "낮은 우선순위로"
• 태스크 수정: "~~ 제목 수정해줘", "설명 추가해줘"
• 태스크 삭제: "~~ 삭제해줘", "~~ 제거해줘"

Claude가 태스크 관련 키워드(태스크, 할일, 투두, 버그, 이슈, 완료, 진행중, 칸반 등)를 감지하면 자동으로 현재 칸반 보드 상태를 참고하여 응답합니다. 응답에 포함된 칸반 명령은 자동으로 실행되어 SQLite 데이터베이스에 저장됩니다.

6. 브라우저 자동화

Claude가 웹 페이지를 직접 조작할 수 있습니다. Puppeteer를 사용한 헤드리스 모드와, Chrome Extension을 통한 릴레이 모드를 지원합니다.

기술 스택

백엔드

• Node.js + TypeScript
• Slack Bolt (Socket Mode)
• WebSocket 서버
• SQLite (칸반 데이터 저장)

프론트엔드

• React 19
• React Router 7
• Vite 7
• TypeScript

인프라

• Docker 지원
• Nginx 리버스 프록시

빠른 시작

1. 설치

git clone https://github.com/bear2u/my-custom-openclaw.git
cd slack-connector
pnpm install
cd frontend && pnpm install && cd ..

2. 환경 설정

cp .env.example .env

.env 파일을 열고 필수 값을 설정합니다:

PROJECT_PATH=/path/to/your/project
ENABLE_SLACK=true
SLACK_BOT_TOKEN=xoxb-your-token
SLACK_APP_TOKEN=xapp-your-token

3. Slack App 생성

1. api.slack.com/apps에서 새 앱 생성
2. 제공된 매니페스트 파일(docs/slack-app-manifest.json)로 빠르게 설정
3. 토큰 발급 후 .env에 입력

4. 실행

# 백엔드 + 프론트엔드 동시 실행
pnpm dev:all

Slack 명령어 가이드

명령어설명

@bot 질문	질문하기 (처리 중이면 대기열에 추가)
@bot !질문	현재 작업 취소 후 바로 시작
@bot 큐	대기열 상태 확인
@bot 큐 비우기	대기 중인 작업 모두 취소
@bot 새 세션	새 대화 시작
@bot 환경설정	설정 메뉴
@bot 도움말	사용법 안내

리액션으로 상태 파악하기

봇이 메시지에 추가하는 리액션으로 현재 상태를 알 수 있습니다:

리액션의미

👀	처리 중
✅	완료
📋	대기열에 추가됨
✨	새 세션 시작
❌	오류 또는 취소

아키텍처 개요

┌─────────────┐     WebSocket      ┌────────────────────────┐
│  Frontend   │ ◄────────────────► │    Backend Server      │
│  (React)    │                    │     (Node.js/TS)       │
└─────────────┘                    └───────────┬────────────┘
                                               │
                                               ▼
                                   ┌────────────────────────┐
                                   │    Claude Code CLI     │
                                   │   (AI Processing)      │
                                   └────────────────────────┘
                                               │
                                               ▼
                                   ┌────────────────────────┐
                                   │   Slack Bot (Bolt)     │
                                   │   Socket Mode          │
                                   └────────────────────────┘

핵심은 메시지 큐 시스템입니다. 각 Slack 채널마다 독립적인 큐를 관리하며, drain+pump 패턴으로 순차 처리합니다. AbortController를 활용해 진행 중인 작업도 안전하게 취소할 수 있습니다.

마치며

Slack-Claude Gateway는 팀의 AI 활용 경험을 한 단계 끌어올립니다. 컨텍스트 전환 없이, 팀원들과 함께, 실시간으로 AI와 협업할 수 있습니다.

프로젝트는 오픈소스로 공개되어 있습니다. 자유롭게 사용하고, 개선 아이디어가 있다면 기여해주세요!

---

 

라이선스: MIT