Vibe-Kanban: Claude Code에 엄청난 업그레이드가 추가되다 (SUPERCHARGED)

Income stream surfers 구독자 130,000명

요약

Vibe-Kanban은 Claude Code의 강력한 AI 코딩 기능에 Git 워크트리를 도입해 여러 작업을 동시에 처리할 수 있도록 업그레이드한 툴입니다. 예제 프로젝트로 Shopify SEO 툴(segrove.ai)을 활용해 로컬 리포지토리 클론, 설치·실행 스크립트를 거쳐 복잡한 ‘콘텐츠 머신’과 ‘랜딩 페이지’ 작업을 생성하고 병렬로 실행하는 과정을 시연합니다. 각 작업은 독립된 워크트리에서 진행되며, 완료 후 메인 코드에 매끄럽게 병합해 충돌 없이 통합할 수 있습니다. 이로써 개발 생산성을 크게 높이고 AI 코딩 워크플로우를 한층 강화할 수 있다는 점이 핵심 가치입니다.

주요 키워드

Vibe-Kanban Claude Code 워크트리 병렬 작업 Git 콘텐츠 머신 랜딩 페이지 Shopify SEO Node.js Docker

하이라이트

🔑 Vibe-Kanban은 Claude Code와 Git 워크트리를 활용해 여러 작업을 동시에 병렬 처리할 수 있는 도구입니다.
⚡️ 워크트리를 이용해 동일 프로젝트 내에서 서로 다른 브랜치처럼 AI 작업을 분리해 작업 충돌 없이 진행할 수 있습니다.
🌟 설치 과정은 Node.js와 Python 환경만 준비되면 매우 간단하며,pip 요구사항 설치와 실행 스크립트로 곧바로 시작할 수 있습니다.
📌 첫 번째 작업으로 ‘콘텐츠 머신’ 구축을 요청해 클라이언트 상품을 활용한 블로그 콘텐츠 자동 생성 계획을 제안받았습니다.
🚀 두 번째 작업으로 Shopify 태그의 SEO 활용 및 랜딩 페이지 생성을 자동화해 키워드를 기반으로 페이지를 완성했습니다.
🎯 완료된 작업은 개별 워크트리에서 검토 후 메인 브랜치로 병합해 코드베이스를 깔끔하게 유지합니다.
🛠️ Docker 기반 개발 서버를 통해 결과물을 실시간으로 확인해 기능 검증이 가능하며, UI는 추가 개선 여지가 있습니다.
💡 Vibe-Kanban은 복잡한 프로젝트에도 적용 가능해 AI 코딩 워크플로우 생산성을 획기적으로 높여 줍니다.

용어 설명

Vibe-Kanban

Claude Code에 Git 워크트리 기반 병렬 작업 기능을 추가한 생산성 도구

Claude Code

Anthropic의 AI 기반 코딩 보조 도구

워크트리(work tree)

Git의 분리된 작업 디렉토리 기능으로, 동일 리포지토리에서 독립된 브랜치처럼 사용

Git 리포지토리

버전 관리 시스템인 Git을 이용해 소스코드를 저장·관리하는 저장소

에이전트(agent)

AI에 특정 작업을 요청해 독립적으로 실행되는 단위

Node.js

JavaScript 런타임 환경으로, 개발 도구 설치에 사용

pip

Python 패키지 설치 관리 도구

Docker

컨테이너 기반 가상화 환경으로 개발 서버 실행에 사용

segrove.ai

예제 프로젝트로 사용된 Shopify SEO 도구

Claude Code의 강력한 코딩 기능을 소개하며, 여러 작업을 동시에 처리하기 어려운 문제를 설명하고 Vibe-Kanban이 이를 해결하는 방법임을 예고합니다.

[00:00] Vibe Kanban 소개와 Claude Code의 한계점 설명. Claude Code는 뛰어난 코딩 도구이지만 동시에 여러 작업을 처리하기 어려운 문제가 있으며, Vibe Kanban이 이 문제의 해결책이라고 설명합니다.

예제 프로젝트로 Shopify SEO 툴(segrove.ai)을 선택하고, Node.js 설치 필요성을 안내합니다. 프로젝트 참여를 위한 대기자 명단 정보도 간단히 언급합니다.

[00:26] Shopify 도구인 SEO Grove를 예시로 설명하고, 프로젝트 소개와 대기 목록 가입 안내를 합니다.

[00:43] 설치 과정 안내 시작. Node.js가 필요하며 설치 과정이 매우 간단하다고 설명하고, 위험 경고가 나타나면 승인하도록 안내합니다.

GitHub에서 개인 리포지토리를 클론해 로컬 머신에 복제하는 과정을 시연합니다. 올바른 경로 선택과 권한 허용 방법을 설명합니다.

[01:04] Git repository path 설정 방법 설명. GitHub 저장소를 로컬 머신에 클론하는 과정을 단계별로 보여줍니다.

프로젝트의 README에 명시된 pip install과 python run.py 명령어를 통해 의존성 설치 및 실행 환경 설정 과정을 보여줍니다.

[01:54] 프로젝트 설정 완료 후 첫 번째 작업 생성. 매우 복잡한 콘텐츠 머신 생성 작업을 예시로 들며, 클라이언트 제품과 컬렉션을 활용해 Google 랭킹을 위한 블로그 포스팅을 자동화하는 작업을 설명합니다.

Vibe-Kanban 인터페이스에서 ‘콘텐츠 머신’ 구축을 복잡한 작업으로 정의하고, AI 에이전트에게 상품 정보 기반 블로그 작성 계획을 생성하도록 요청합니다.

타임라인 정보가 없습니다.

워크트리 기능을 활용해 동일 프로젝트 내에서 여러 작업을 독립적으로 실행하는 방식을 설명합니다. 각 워크트리가 충돌 없이 코드를 관리함을 강조합니다.

[02:55] Claude Code 사용 설정과 work trees 기능 소개. 이전에는 같은 파일을 편집할 때 문제가 발생했지만, work trees를 사용하여 이 문제를 해결할 수 있다고 설명합니다.

[03:21] 워크 트리 시스템의 기본 개념을 설명하며, 이것이 GitHub의 브랜치와 유사하다고 설명합니다. 동시에 여러 작업을 수행할 수 있는 혁신적인 시스템이라고 강조합니다.

두 번째 워크트리를 생성해 랜딩 페이지 제작과 Shopify 태그의 SEO 활용을 위한 키워드 기반 페이지 생성을 요청하고, 실제 키워드를 수집해 작업을 시작합니다.

[03:37] 새로운 랜딩 페이지 생성 작업을 추가하며, 키워드 도구를 사용해 'Shopify 태그가 SEO에 사용되는가'라는 주제로 페이지를 만들도록 지시합니다. 도구의 기능과 관련성을 유지하면서 유용한 정보를 제공하는 페이지를 요청합니다.

생성된 워크트리 디렉토리를 VS Code로 열어 독립된 코드 디렉토리 구조를 검토합니다. 서로 다른 워크트리에서 AI 작업이 동시에 진행됨을 보여줍니다.

[04:35] Claude 코드로 다른 작업을 시작하며, 이번에는 다른 워크 트리에서 작업이 진행됨을 보여줍니다. 같은 프로젝트의 다른 워크 트리들이 어떻게 작동하는지 실제 파일 시스템을 통해 설명합니다.

[05:10] 두 개의 다른 워크 트리에서 동시에 작업이 수행되지만 코드가 충돌하지 않는 시스템의 장점을 설명합니다. 작업 완료 후 메인 코드베이스로 병합하는 과정을 설명합니다.

완료된 워크트리를 메인 코드에 merge 명령으로 통합하고, Docker 개발 서버를 통해 변경 사항을 확인합니다. UI 완성도는 부족하지만 기능 면에서는 제대로 작동함을 확인합니다.

[05:44] 시스템이 Shopify 서비스에서 블로그 관련 내용을 검색하지만 존재하지 않는 것을 인식하고, 이를 바탕으로 적절한 대응을 하는 Claude 코드의 지능적인 면을 평가합니다. 새로운 랜딩 페이지 작업이 완료되었다는 알림을 받고 테스트를 진행합니다.

[06:41] 같은 폴더 안에 있는 코드로 Shopify 태그 SEO가 포함되어 있으며, 병합하면 해당 코드에 반영됩니다.

[06:57] 도커를 시작해서 변경사항을 확인했지만 결과물이 예상과 다르게 나왔습니다.

[07:16] 시스템이 하나의 작업을 하면서 동시에 콘텐츠 머신을 만드는 다른 작업도 수행했습니다.

Vibe-Kanban의 병렬 작업 기능이 개발 생산성을 크게 향상시킨다는 점을 강조하며, 시청자들에게 사용을 권장하고 영상을 마무리합니다.

[07:26] 이 도구는 시간을 절약해주고 클로드 코드로 더 많은 작업을 할 수 있게 해주는 흥미로운 도구입니다.

[07:44] 클로드 코드만 사용하여 50개의 메시지를 보낼 수 있고, 각각 독립적으로 작업을 수행합니다.

[00:00] 안녕하세요 여러분, 오늘 정말 흥미진진한

[00:03] 비디오를 가져왔습니다. Vibe Kanban입니다.

[00:07] 모르시는 분들을 위해 설명하면, Claude Code는

[00:09] 엄청나게 좋은 코딩 도구입니다만, 한 가지

[00:11] 문제가 있습니다. 바로

[00:13] 여러 가지 작업을 동시에 처리하기가

[00:15] 어렵다는 점입니다. 이것이 바로 그 문제의 해결책입니다.

[00:19] 어떻게 설정하는지 정확히

[00:21] 바로 지금, 여기서 보여드리겠습니다.

[00:23] 시작해봅시다. 자, 그럼

[00:26] 제 Shopify 도구인 SEO Grove를 예시로 사용해보겠습니다.

[00:29] 그렇습니다. 오늘 제가

[00:32] 이 프로젝트를 작업할 예정입니다.

[00:33] 이 프로젝트에 관심이 있으시다면

[00:35] 지금 대기 목록에 가입하실 수 있습니다.

[00:37] 대기 목록 가입에 1달러가 필요하고

[00:39] 네, segrove.ai입니다.

[00:43] 자, 기본적으로 설치는 매우 매우 쉽습니다.

[00:45] 극도로 쉽습니다. 당연히 저는 Node를

[00:47] 이미 설치했습니다. 이 작업을 하려면 Node가

[00:50] 필요합니다. 저는 이미 이걸 설치했습니다.

[00:52] 이전에 이걸로 비디오를 찍었었거든요.

[00:55] 하지만 실패했었습니다. 위험 경고가

[00:58] 팝업으로 나타나면 예라고 하셔야 합니다.

[01:00] 그냥 예라고 하세요. 그러면

[01:02] 이런 화면이 나타납니다.

[01:04] 기본적으로 해야 할 일은

[01:06] git repository path가 필요합니다.

[01:08] 그게 무슨 뜻이냐면? GitHub 저장소를 가져와야 한다는 뜻입니다.

[01:12] 하지만 그것이 로컬 머신에 있어야 합니다.

[01:15] 그래서 mkd vibe coding kanban

[01:21] cd vibe coding kanban입니다. 좋습니다.

[01:26] 그리고 git clone을 하고 붙여넣기 하고

[01:29] 그다음에 점(.)을 찍습니다.

[01:31] 당연히 이것을 선택해야 합니다. 왜냐하면

[01:33] 프라이빗 저장소거든요. 이것이

[01:36] 제 로컬 머신에 설치될 겁니다. 여기를 더블클릭하고

[01:39] 복사할 수 있습니다. 그리고

[01:41] 이 작은 폴더 버튼을 클릭하세요.

[01:44] 이것을 검색하세요. GitHub repo라고

[01:46] 나온 것을 볼 수 있습니다. 완벽합니다.

[01:48] 이것을 선택하세요. 이 경로를 선택하세요.

[01:51] 이것의 설정은 readme에 있어야 합니다.

[01:54] 시작 스크립트는 python run.py이고

[01:58] 설치 스크립트는 pip install -r

[02:01] requirements.txt입니다.

[02:02] 좋습니다. 그리고 프로젝트를

[02:04] 만듭니다. 그다음에 여기를 클릭하세요.

[02:06] 첫 번째 작업 생성. 실제로 매우

[02:08] 복잡한 작업을 주어봅시다. 그러면 콘텐츠

[02:11] 머신을 만드세요. 현재 모든

[02:14] 에이전트들과 Gina 등을 사용해서 어떻게 작동하는지 보고

[02:18] 스크래핑해서

[02:22] 클라이언트의 제품과 컬렉션을 사용하는

[02:27] 콘텐츠 머신을 만드세요. 내부

[02:31] 링크와 이미지를 포함해서

[02:33] Google에서 랭킹될 수 있는

[02:36] 블로그 게시물을 포스팅하세요.

[02:42] 꽤 복잡한 작업입니다. 그러면

[02:44] 여기서 만들겠습니다. 저는

[02:45] 실제로는 이것을 사용하지 않을 것 같습니다.

[02:47] 왜냐하면 이것을 위한 에이전트를

[02:50] 제가 직접 만들고 싶거든요. 하지만

[02:53] 정말 멋진 점은, 이것이 왜 그렇게

[02:55] 멋진지 말씀드리겠습니다. 자, Claude

[02:57] Code를 사용하고 있습니다. 그런데 설정에서

[03:00] 이것을 변경할 수 있습니다. 저는 여기서 Claude를

[03:02] 선택했고 VS Code를 사용하기 때문에 VS Code를 선택했습니다.

[03:05] 이제 시작하는 것을 볼 수 있습니다.

[03:06] 작업을 시작합니다.

[03:07] 이전에는 해야 했던 일이

[03:09] 다른 작업을 할 수 없었습니다.

[03:11] 왜냐하면 같은 파일을 편집하면

[03:13] 문제가 발생하거든요. 하지만

[03:15] 이것은 work trees를 사용합니다. 여기서

[03:17] work tree path를 볼 수 있습니다. 그러면

[03:19] 이것을 열면... 실제로는 열지 않겠습니다.

[03:21] 이것은 기본적으로 GitHub의 브랜치 같은 것이에요.

[03:23] 그래서 동시에 다른 작업을 하고 싶다면 어떻게 될까요?

[03:27] 바로 여기서부터

[03:28] 정말 미친 일이 일어나기 시작해요.

[03:30] 여러분, 이건 정말

[03:32] 게임 체인저라고 말씀드리고 싶어요.

[03:34] 완전히 판을 바꾸는 거예요.

[03:37] 새로운 랜딩 페이지를 만드는 작업을 추가해 보겠습니다.

[03:42] 프론트엔드를 살펴보고 어떻게 작동하는지 보세요.

[03:46] 어떻게

[03:49] CTA와 테마 등을 포함한 랜딩 페이지를 구축했는지 보고

[03:53] 페이지를 만들어 보겠습니다.

[03:58] 그리고 키워드 툴에서

[03:59] keyword tool.io에서

[04:00] Shopify SEO를 검색하고

[04:02] 이 키워드를 가져왔어요. 맞죠?

[04:06] Shopify 태그가 SEO에 사용되나요?

[04:10] 답은 간접적으로 사용됩니다.

[04:13] 컬렉션을 생성하는 데 사용되는데

[04:16] 이것이 바로 우리 도구가 하는 일입니다.

[04:20] 도구와 관련되면서도

[04:24] 흥미로운 정보를 제공하는

[04:27] 답변에 대한 페이지를 만들어 주세요.

[04:32] 그리고 네비게이션에 추가해 주세요.

[04:35] 좋아요. 생성하고 다시 시작하겠습니다.

[04:38] Claude 코드로 또 다른 작업을 해보겠습니다.

[04:41] 이번에는 다른 워크 트리입니다.

[04:43] 보시다시피 프로젝트가 다시 시작되었습니다.

[04:47] 여기에 하나의 워크 트리가 있습니다.

[04:48] 이것을 열어보면

[04:50] 워크 트리를 여는 것은 작동하지 않습니다.

[04:52] 하지만 이게 어떻게 작동하는지 이해합니다.

[04:54] 여기서 검색해보면

[04:56] 네, 여기 있습니다.

[04:58] 파일 위치를 열어보세요.

[05:00] 이것들은 같은 프로젝트의 다른 워크 트리입니다.

[05:03] 이것을 코드로 열어보면

[05:06] 이 프로젝트에 필요한 모든 코드가 있습니다.

[05:08] 기본적으로 두 가지 다른 작업을

[05:10] 동시에 수행하고 있지만

[05:12] 코드를 망가뜨리지 않을 것입니다.

[05:14] 두 개의 다른 워크 트리에서

[05:19] 동시에 수행하기 때문입니다.

[05:21] 이것이 하는 일은

[05:24] 이것을 검토로 보내고

[05:27] 완료로 보내는 것입니다.

[05:29] 만약 제가 병합이라고 하면

[05:31] 이것은 현재 코드에 병합한다는 뜻입니다.

[05:34] 즉, 두 워크 트리 모두

[05:37] 사라집니다. 작업하고 나서

[05:40] 메인으로 다시 병합합니다.

[05:42] 이것은 실제로 꽤 똑똑합니다.

[05:44] 보시다시피

[05:46] Shopify 서비스에서 블로그 관련 내용을 검색하고 있는데

[05:49] 존재하지 않습니다.

[05:51] 아직 만들지 않았거든요.

[05:54] 이것은 꽤 똑똑합니다.

[05:56] 블로그에서 아무것도 찾을 수 없으니

[05:58] 모의 구현을 하거나

[06:01] 구현을 시도할 수도 있지만

[06:03] 실제로 성공에 필요한

[06:04] 모든 도구를 제공하지 않았습니다.

[06:06] 이것을 파악한 것에 꽤 인상적입니다.

[06:08] 하지만 기본적으로 Claude 코드입니다.

[06:11] 그래서 여기서 시작하겠습니다.

[06:14] Shopify 태그가 SEO에 사용되는지에 대한

[06:15] 랜딩 페이지를 만들어

[06:17] 기존 패턴을 따라가겠습니다.

[06:19] 새로운 랜딩 페이지 만들기가

[06:21] 완료되었다는 알림이 왔습니다.

[06:23] 여기를 클릭해 보겠습니다.

[06:26] 어떻게 보는지 모르겠네요.

[06:29] 개발 서버 버튼을 눌러보겠습니다.

[06:32] 옵션이 주어진다면

[06:34] 개발 환경에 병합할 수 있을 것 같습니다.

[06:36] 아니요, 그냥 병합을 눌렀습니다.

[06:39] 테스트해보기 위해 Claude로 가겠습니다.

[06:41] 여기 있습니다. 이건 같은 폴더 안에 있는 거예요.

[06:43] 여기 코드를 보실 수 있어요.

[06:45] Shopify 태그 SEO가 포함되어 있습니다.

[06:49] 뭔가를 병합하면

[06:51] 여기 코드로 들어가게 됩니다.

[06:52] 그럼 도커를 시작해서 변경사항을 확인해보겠습니다.

[06:57] 좋아요. 바라건대 이게... 오 맙소사

[07:01] 끔찍하네요. 작동은 하지만

[07:04] 전혀 제대로 보이지 않아요.

[07:06] 하지만 정확히 이렇게 작동하는 걸 보실 수 있어요.

[07:08] 모양과 느낌이 전혀 맞지 않네요.

[07:10] 여기서 뭘 하려고 했는지 모르겠어요.

[07:12] 음... 전체적으로는

[07:16] 하나의 작업을 완료했고

[07:17] 그 다른 작업을 하는 동안에도

[07:21] 또 다른 작업도 했어요.

[07:23] 콘텐츠 머신을 만드는 작업 말이에요.

[07:26] 여러분, 이걸 꼭 사용해보세요.

[07:28] 시간을 절약할 수 있을 거예요.

[07:31] 클로드 코드로 더 많은 일을 할 수 있게 해주고

[07:34] 솔직히 말해서 정말 흥미로워요.

[07:37] 사실 이 코드를 보면

[07:39] 꽤 괜찮은 작업을 했어요.

[07:41] 클로드 코드만 사용해서 말이에요.

[07:44] 기본적으로는 50개의 클로드 코드 메시지를

[07:46] 보낼 수 있는 것과 같아요.

[07:48] 각각이 자신만의 작업을 수행하고

[07:51] 완료되면 알려줍니다.

[07:53] 자동으로 컴팩트도 처리할 거예요.

[07:55] 그리고 제가 가진 것처럼 복잡한 서버나

[07:59] 복잡한 설정이 없다면

[08:02] 그냥 개발 서버를 실행하고

[08:04] 바로 시작할 수 있어요.

[08:06] 여기서 영상을 마치겠습니다.

[08:08] 시청해주셔서 감사합니다.

[08:10] 이 도구를 확인해보세요.

[08:12] 영상 설명에서 찾을 수 있어요.

[08:14] 시청해주셔서 감사하고

[08:16] 끝까지 보신 분들은

[08:18] 정말 최고예요. 그럼 안녕!