AI 코드 에이전트 자동화 개발 업무 시각화 개발보드 UI, vibe-kanban 체험

vibe-kanban은 BloopAI에서 개발한 오픈소스 툴로, AI 코딩 에이전트(예: Claude Code, Gemini CLI, Codex 등)를 Kanban 보드 형태로 관리할 수 있게 해줍니다. 즉, 여러 AI 에이전트에 개발 업무를 맡기고, 이를 기획→실행→코드 리뷰→PR 생성 등으로 흐름을 시각적으로 관리할 수 있는 도구입니다.

주요 기능

에이전트 전환: Claude, Gemini, Codex 등의 에이전트를 손쉽게 전환하며 사용
병렬 및 순차 실행: 여러 에이전트를 동시에 또는 순차적으로 운영 가능
실시간 리뷰 & Dev 서버 실행: 작업 결과 즉시 리뷰하고 실행 서버를 띄워볼 수 있음
작업 상태 추적: 각 Task 진행 상태 (To Do → In Progress → Done 등)를 직관적으로 추적
MCP 구성 집중 관리: Agent의 구성 정보를 중앙에서 관리 가능

실제 구축 및 실행 방법

1. 시스템 요구사항

Rust (최신 stable)
Node.js ≥ 18.x
pnpm ≥ 8.x

2. 클론 및 의존성 설치

git clone https://github.com/BloopAI/vibe-kanban.git
cd vibe-kanban
pnpm i

3. 개발 모드로 실행

pnpm run dev

프론트엔드 + 백엔드 with live-reload 동시 실행
dev_assets_seed의 테스트 DB가 초기 데이터로 자동 복제됩니다.

4. npx CLI로 배포용 실행

개발 없이 바로 활용하려면 (사전 조건: Claude 등 AI 에이전트 로그인 인증)

npx vibe-kanban

배포 모드도 직접 빌드하고 싶다면

./build-npm-package.sh
cd npx-cli
npm pack
npx ./vibe-kanban-<version>.tgz

5. 브라우저 접속

위 실행 후 자동으로 로컬 브라우저가 열리며 Kanban 인터페이스에 접속됩니다. 모바일 UI도 지원됩니다.

내부 운영 가이드

GitHub OAuth 인증 필수: Agent의 리포지터리 읽기/쓰기 권한을 최소화하여 안전하게 연동 (v0.0.41부터 구현됨)
데이터 수집 옵트인 구조: 설치 시 로그/이메일 등의 분석 데이터 수집은 기본적으로 OFF, 사용자 크래시 리포트에 한해 선택적으로 수집됨
중요 권한 검토 필수: Bot이 처리할 PR 생성, 브랜치 권한 등은 사내 정책에 맞게 GitHub App 권한 범위를 적절히 제한해야 합니다.
동시 PR 간 의존성 관리: Kanban 상 다수 PR이 동시에 생성될 수 있으므로, 순서 의존성이 있는 경우 직접 명시하거나 내부 프로세스 수립 필요
리소스 고려: Rust 백엔드와 npx CLI는 CPU와 메모리를 소비하므로, 최대 4개 에이전트 병렬 실행 시 MacBook 환경에서는 성능 저하 가능 .

내부 사용자 안내

사전 권한 교육
- GitHub OAuth가 무엇이고, 왜 Agent에게 토큰을 제공해야 하는지 설명
- 권한 수준 검토 및 정책 공유
운영 프로세스 세팅
- PR 의존성이 존재할 경우, 우선 생성 순서 및 Label/Assignee로 명확히 관리
- Kanban 칼럼 정의(ex: Needs Review 등)과 QA/Release Pipeline 연동

체크리스트 예시

점검 항목	내용
OAuth 설정	없으면 CLI 불가
MCP 설정	각 Agent 설정 (temperature 등) 중앙 관리
Dev 서버 실행	“Open in IDE/Server” 버튼 정상 작동 여부
PR 권한	Bot이 PR 열 권한 갖도록 설정
리소스 모니터링	실행중 리소스 지표 감시

보안 권고
- 분석용 무작위 데이터 수집 금지
- 내부 리포지터리에만 성능 허용
- 외부 배포 시에는 프록시/클라우드 사용 고려

활용 사례

AI 병렬 에이전트 협업: Claude Code + Gemini CLI를 동시에 실행하여 기능 개발 후 비교 리뷰
코드 리팩토링 흐름 정리: 리팩토링 Task는 Kanban 컬럼 이동으로 체계적 관리
다중 PR 스택핑: PR 간 의존성 큐 설정 후 배포 순서 제어

무엇을 할 수 있나요?

1. AI에게 실제 코딩 업무를 시킬 수 있습니다

예: “로그인 기능을 구현해줘” → Claude에게 전달 → 코드 생성 → PR 자동 생성

2. Kanban 방식으로 작업 흐름을 관리할 수 있습니다

작업 상태를 To Do, In Progress, Done 등으로 시각적으로 관리
각 작업(Task)은 실제 코딩과 연동되어 진행

3. 다양한 AI 모델을 동시에 사용

Claude, Gemini, OpenAI Codex 등을 하나의 보드에서 전환/병렬 실행 가능

4. 리포지터리와 연동된 실제 개발 작업 수행

PR 생성, 브랜치 분기, 파일 수정 등을 AI가 직접 수행함
GitHub OAuth를 통해 코드 수정, 커밋, PR까지 자동화

5. Dev 서버 실행 및 결과 미리보기

로컬 개발 서버를 띄워 결과 UI/기능을 확인 가능
버튼 클릭만으로 VS Code, Browser Preview 연동

어떤 구조로 작동하나요?

[사용자] ⟶ [Kanban 인터페이스] ⟶ [AI Agent] ⟶ [코드 작업 수행 + Git 연동]
                               ⬑               ⬍
                           [Task 관리]   [작업 결과 PR로 정리]

각 Task는 AI에게 전달되며, Claude나 Gemini가 작업을 수행
완료되면 코드가 생성되고 PR(Pull Request)이 생성됨
Task 상태는 자동으로 업데이트되고 보드에서 실시간 확인 가능

300x250

어떻게 사용할 수 있나요? (실제 흐름)

1단계: 프로젝트 준비

git clone https://github.com/BloopAI/vibe-kanban.git
cd vibe-kanban
pnpm i

2단계: 실행 (개발 환경)

pnpm run dev

브라우저에서 Kanban UI가 자동 실행됨 (localhost:3000 예상)
테스트용 리포지터리/에이전트 예제 포함됨

3단계: GitHub 계정 연결

로그인 시 GitHub OAuth 연동 창이 뜸
해당 계정의 Repository 권한을 부여

✅ 내부 GitHub만 쓰는 경우, GitHub Enterprise도 연동 가능

4단계: AI Agent 선택

Claude, Gemini CLI, OpenAI 등에서 선택 가능
각 Agent 별로 역할 설정 (ex. 리뷰 전담, 테스트 작성 전담 등)

5단계: Task 등록

예시
- “로그인 폼 구현”
- “클라이언트-서버 간 API 인증 추가”
- “코드 리팩토링 수행”

→ 이 Task는 AI에게 자동 전달됨

6단계: 작업 진행

AI가 작업을 수행
작업 결과로 브랜치/커밋/PR 생성됨
Pull Request에 요약 설명 자동 삽입

7단계: 결과 확인 및 병합

PR을 리뷰하고 병합
필요시 수동 리뷰도 가능
작업 상태 자동 업데이트됨 (In Review → Done)

보안 및 운영 팁

항목	설명
GitHub OAuth	회사 계정 또는 테스트 계정으로 연동
PR 권한	Bot 계정에 PR 생성 권한 부여 필수
MCP Agent 설정	temperature, max_tokens 등 세부 설정 지원
작업 추적	각 작업 별 커밋/PR URL 자동 기록
로그 저장	각 Agent 응답, 오류 메시지 등 자동 저장됨
비공개 Repo	`vibe-kanban` 자체는 로컬에서 실행되므로 사내망 사용 가능

사용 예시

상황	활용 방식
기능 개발	Kanban에 “로그인 페이지 구현” 입력 → Claude가 코드 생성 + PR
리팩토링	“중복된 유틸 정리해줘” 입력 → AI가 리팩토링 후 PR
테스트 코드 작성	“unit test 작성해줘” Task 생성 → AI가 테스트 작성
동시 병렬 작업	여러 Agent에게 각각 Task 부여 → 각자 코드 작업 수행

고급 활용 팁

vibe-kanban/agent/mcp/*.json 에서 Agent의 성격 정의 가능
temperature, model, context_limit, role 등을 미세 조정 가능
프론트엔드는 Next.js 기반으로 커스터마이징 쉬움
npx vibe-kanban 명령으로 무설치 실행도 가능 (공식 배포 버전)

항목	요약
목표	AI 에이전트를 통해 코드 업무 자동화 및 시각적 관리
도입 방식	GitHub 연동 + CLI 또는 개발 서버 실행
구성	Kanban UI + MCP Agent + PR 자동화
지원 모델	Claude, Gemini, OpenAI 등 다수
활용 분야	기능 구현, 테스트, 리팩토링, PR 생성 자동화 등

아래는 vibe-kanban을 Slack과 연동하는 방법, 사내망에서 안전하게 운영하는 구조, 그리고 에이전트 고급 설정 파일 예시입니다.

Slack 연동 방법 (Notification + 명령 실행)

PR 생성, 코드 작업 완료, 에이전트 오류 등의 이벤트를 Slack 알림으로 전달
필요 시 Slack에서 직접 Task를 생성하는 기능도 확장 가능

방법 1: Slack Webhook 사용 (단방향 알림)

Slack에서 앱 생성 → Incoming Webhook 활성화
알림 채널을 설정하고 Webhook URL을 복사

.env 또는 config/slack.ts에 등록

SLACK_WEBHOOK_URL=https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX

코드에 Webhook 호출 함수 삽입 (예: utils/notify.ts)

import axios from 'axios';

export const sendSlackMessage = async (message: string) => {
  if (!process.env.SLACK_WEBHOOK_URL) return;

  await axios.post(process.env.SLACK_WEBHOOK_URL, {
    text: message,
  });
};

사용 예시 (PR 생성 완료 시)

await sendSlackMessage(`✅ [${task.title}] 작업 완료! PR: ${prUrl}`);

방법 2: Slack Slash Command 연동 (양방향)

예: /ai-task 로그인 기능 만들어줘 → Task 자동 등록

Slack 앱에서 Slash Command 생성
- /ai-task로 예시
- Request URL: https://your-vibe-server.com/api/slack/command

api/slack/command.ts 생성

export default async function handler(req, res) {
  const { text, user_name } = req.body;

  // vibe-kanban 내부 Task로 등록
  await createAITask({ title: text, createdBy: user_name });

  res.send(`📌 작업 등록 완료: ${text}`);
}

인증은 Slack signing secret으로 검증 처리 가능

사내망 호스팅 구성

외부 인터넷 없이 안전하게 운영
사내 GitHub Enterprise, 내부 AI API (예: Claude API Proxy) 사용
내부 사용자 인증 및 접근 제한

구성 예시

┌────────────────────────┐
│      내부 사용자       │
│  (개발자, 보안팀 등)   │
└──────────┬─────────────┘
           │
      🔐 HTTPS 접근
           │
┌──────────▼────────────┐
│   vibe-kanban 서버     │  (Next.js + Rust + MCP)
│  - 사내 GitHub 연결    │
│  - 내부 LLM API 호출   │
│  - Slack Webhook 연동  │
└──────────┬────────────┘
           │
    📦 GitHub Enterprise
       + Claude Proxy

호스팅 방법

Dockerize (직접 지원은 없으나 아래와 같이 작성 가능)

# Dockerfile
FROM node:18

WORKDIR /app
COPY . .
RUN npm install -g pnpm && pnpm i && pnpm build

EXPOSE 3000
CMD ["pnpm", "start"]

역방향 프록시로 외부 접근 차단

# nginx.conf
server {
  listen 443 ssl;
  server_name vibe.mycompany.local;

  location / {
    proxy_pass http://localhost:3000;
    include proxy_params;
  }
}

GitHub OAuth → 사내 인증서버로 교체 (선택사항)
- GitHub 로그인 대신 SSO 또는 SAML 연동도 가능합니다 (커스터마이징 필요)

에이전트 고급 설정 예시 (MCP 기반)

/agent/mcp/*.json 파일로 Agent의 동작을 세부 조정할 수 있습니다.

예시: Claude Code 설정

{
  "name": "claude-code",
  "model": "claude-3-opus",
  "provider": "Anthropic",
  "temperature": 0.3,
  "max_tokens": 4096,
  "system_prompt": "You are a helpful senior software engineer. Write clean and maintainable code.",
  "use_context_from_codebase": true,
  "roles": ["developer", "reviewer"],
  "reply_format": "markdown"
}

예시: Gemini + Lint 전담 Agent

{
  "name": "gemini-lint",
  "model": "gemini-1.5-flash",
  "provider": "Google",
  "temperature": 0.0,
  "system_prompt": "You are an expert in code linting and formatting. You only respond with linter fixes.",
  "context_filter": "code_quality_issues_only",
  "roles": ["formatter", "linter"]
}

설정 팁

항목	설명
`temperature`	창의성 조정 (0.0 = 보수적, 1.0 = 창의적)
`system_prompt`	역할 정의, 업무 스타일 설정
`reply_format`	`markdown`, `json`, `diff` 등 선택
`use_context_from_codebase`	기존 코드 참조 여부 (true 권장)
`roles`	이 Agent의 목적 (`developer`, `reviewer`, `test_writer` 등)

정리

구성 요소	주요 내용
Slack 연동	Webhook으로 PR 결과 전송, Slash 명령으로 Task 생성 가능
사내망 호스팅	GitHub Enterprise + 내부 API로 안전하게 구성 가능
에이전트 설정	역할, 모델, prompt, context 옵션 등을 MCP 파일로 조절

728x90

그리드형(광고전용)

저작자표시 비영리 동일조건 (새창열림)

AI 코드 에이전트 자동화 개발 업무 시각화 개발보드 UI, vibe-kanban 체험

AI 코드 에이전트 자동화 개발 업무 시각화 개발보드 UI, vibe-kanban 체험

주요 기능

실제 구축 및 실행 방법

1. 시스템 요구사항

2. 클론 및 의존성 설치

3. 개발 모드로 실행

4. npx CLI로 배포용 실행

5. 브라우저 접속

내부 운영 가이드

내부 사용자 안내

활용 사례

추천 단계

무엇을 할 수 있나요?

1. AI에게 실제 코딩 업무를 시킬 수 있습니다

2. Kanban 방식으로 작업 흐름을 관리할 수 있습니다

3. 다양한 AI 모델을 동시에 사용

4. 리포지터리와 연동된 실제 개발 작업 수행

5. Dev 서버 실행 및 결과 미리보기

어떤 구조로 작동하나요?

어떻게 사용할 수 있나요? (실제 흐름)

1단계: 프로젝트 준비

2단계: 실행 (개발 환경)

3단계: GitHub 계정 연결

4단계: AI Agent 선택

5단계: Task 등록

6단계: 작업 진행

7단계: 결과 확인 및 병합

보안 및 운영 팁

사용 예시

고급 활용 팁

Slack 연동 방법 (Notification + 명령 실행)

방법 1: Slack Webhook 사용 (단방향 알림)

방법 2: Slack Slash Command 연동 (양방향)

사내망 호스팅 구성

구성 예시

호스팅 방법

에이전트 고급 설정 예시 (MCP 기반)

예시: Claude Code 설정

예시: Gemini + Lint 전담 Agent

설정 팁

정리

관련글

댓글

티스토리툴바