todo에 꽂아 두면, 에이전트가 그 카드를 집어 in_progress로 옮기고, 코드를 짜고, 검증한 뒤 in_review로 넘긴다.
node:sqlite 파일 하나에 담긴다. 런타임 의존성이 단 6개다. 둘째, Codex 데스크톱 앱 안으로 파고든다 — 크롬 개발자 프로토콜(CDP)로 ChatGPT 앱에 보드 패널을 주입해, 마치 원래 있던 기능처럼 사이드바에 끼워 넣는다.
chuspeeism/dashi-taskboard · ★ 870 · 포크 56 · 이슈 3 · 언어 JavaScript/TypeScript · 2026-07-24 생성 · v0.1.0 · 런타임 의존성 단 6개 · Node 22.5+ · 라이선스 파일 없음 · TrendShift Daily #4)
dashi-taskboard는 "Codex 같은 AI 코딩 에이전트에게 일을 나눠 주고 진행 상황을 추적하는, SQLite 파일 하나로 도는 로컬 우선 칸반 보드"다. 브라우저에서 열리는 이슈 보드 UI, 그 UI와 CLI를 동시에 먹이는 HTTP API, 그리고 에이전트에게 "이 보드를 이렇게 다뤄라"를 가르치는 Codex 스킬(Skill)이 한 저장소에 들어 있다. 핵심 단위는 "카드(이슈)"이고, 카드마다 담당자를 사람으로도 에이전트로도 지정할 수 있다.
이 저장소의 GitHub 주소는 chuspeeism/dashi-taskboard지만, 정작 코드 안에는 "dashi"라는 단어가 한 번도 나오지 않는다. package.json의 이름은 codex-taskboard, 원저자 서명은 jadon7, 배포 도메인은 taskboard.dsxzai.com이다. 즉 이 레포는 Codex Taskboard라는 상류 프로젝트를 그대로 복제·개명해 올린 미러에 가깝다(GitHub의 Fork 버튼이 아니라 순수 clone). 그래서 이 문서는 내용상 "Codex Taskboard"를 설명하되, 저장소 별칭이 dashi-taskboard임을 함께 표기한다.
사무실에 새 인턴이 왔다고 하자. 당신은 화이트보드에 포스트잇을 붙인다: "로그인 버그 고치기", "README 다듬기". 인턴은 포스트잇 하나를 떼서 "진행 중" 칸으로 옮기고, 일을 하고, 끝나면 "검토 요청" 칸에 붙인다. 당신이 확인하고 OK 하면 그제서야 "완료"로 간다.
dashi-taskboard가 하는 일이 딱 이것이다. 다만 포스트잇은 SQLite 행(row)이고, 인턴은 Codex 에이전트이며, 칸반 카드 하나하나가 곧 에이전트에게 던지는 작업 지시서가 된다. 사람과 에이전트가 같은 보드를 공유하되, "누가 무엇을 언제 어떤 버전에서 집었는지"가 전부 기록으로 남는다.
127.0.0.1:47823에서 돌고 데이터는 .data/taskboard.sqlite 파일 하나에 쌓인다. 계정 가입도, 외부 서버도 필요 없다. 원하면 나중에 같은 데이터를 LAN이나 Cloudflare로 확장할 수 있지만, 출발점은 "내 노트북 안"이다.codex 명령/앱). 사람 대신 코드를 읽고 고치고 명령을 실행한다. dashi-taskboard는 이 Codex를 "실행기"로 삼아, 보드의 카드를 Codex에게 넘겨 처리하게 한다. Claude Code·Cursor 같은 다른 에이전트와 같은 계열이다.사용자가 카드 하나를 만들어 에이전트에게 맡겼을 때, dashi-taskboard 안에서 벌어지는 흐름을 압축하면 이렇다:
여기서 이미 이 프로젝트의 성격이 드러난다 — 화려한 AI 마법이 아니라, 여러 주체(사람·에이전트)가 같은 데이터를 어긋남 없이 다루게 하는 "규율"이 핵심이다. 그 규율의 정체는 4장에서 자세히 본다.
타이밍이 절묘하다. 2026년 중반은 "일하는 AI 에이전트(agent for work)"가 최대 격전지가 된 시점이다. 같은 TrendShift 목록에 코딩 에이전트 boldsoftware/meat, 조직용 에이전트 하네스 yc-software/qm, AI 오피스 genspark-ai/genoffice가 나란히 올라와 있다. 이 흐름에서 dashi-taskboard의 각도는 뚜렷하다 — 에이전트를 더 똑똑하게 만드는 게 아니라, 이미 있는 에이전트(Codex)에게 "무슨 일을 어떤 순서로 할지" 대주는 관제탑을 만든다. 에이전트가 늘어날수록 "그 에이전트들에게 일을 나눠 주고 결과를 추적하는 판"의 수요가 커진다는 데 베팅한 셈이다.
둘째 이유는 군더더기 없는 구현이다. 런타임 의존성이 단 6개, 서버는 프레임워크 없이 Node 표준 라이브러리만으로 손수 짰다. 웹 서버(Express)도, SQLite 드라이버(better-sqlite3)도, ORM도, 상태관리 라이브러리(Redux)도 없다. 그래서 코드베이스 전체(약 2.8만 줄)를 처음부터 끝까지 읽어 "이슈 트래커가 실제로 어떻게 작동하는가"를 통째로 이해할 수 있다. 배우기용 교재로도, 포크해서 내 입맛대로 고치기에도 이상적이다.
기성품 자동차 대신, 부품이 다 보이는 키트카. Jira·Linear는 잘 만든 완성차다 — 편하지만 보닛을 열어도 뭐가 뭔지 모른다. dashi-taskboard는 엔진·배선이 그대로 드러난 키트카에 가깝다. 프레임워크라는 "이미 조립된 블랙박스"를 걷어내고 Node 기본기만 썼기 때문에, HTTP 라우팅부터 실시간 동기화까지 모든 부품을 눈으로 따라갈 수 있다. 대신 "시동 걸면 끝"인 편함은 일부 포기한다.
| 항목 | Jira / Linear | Trello / 칸반 앱 | 그냥 Codex CLI | 이 레포(dashi-taskboard) |
|---|---|---|---|---|
| 호스팅 | 벤더 SaaS | 대개 SaaS | 로컬 | 로컬 우선 (SQLite 1개) |
| 담당자 | 사람 | 사람 | - | 사람 또는 AI 에이전트 |
| 에이전트 연동 | 플러그인·API | 거의 없음 | 보드 없음 | 내장 스킬 + CDP 주입 |
| 동시 작업 안전장치 | 서버 락 | 제한적 | 없음 | 낙관적 버전 잠금 |
| 워크플로 자동화 | 유료 기능 | 제한적 | 없음 | React Flow 시각 빌더 |
| 덩치 | 초대형 | 중형 | - | 의존성 6개 · 손수 구현 |
셋째 이유는 "에이전트 앱 속으로 파고드는" 기법의 신선함이다. dashi-taskboard는 Codex 데스크톱 앱(macOS의 ChatGPT.app)을 크롬 개발자 프로토콜(CDP)로 붙잡아, 보드 패널을 그 앱 사이드바에 네이티브처럼 끼워 넣는다. 앱 설치 파일(app.asar)은 건드리지 않고, 실행 중인 앱에 스크립트만 주입하는 방식이다. "AI 앱을 내가 원하는 도구로 확장한다"는 발상 자체가 개발자들의 눈길을 끈다(자세한 원리는 4장).
분석 시점 기준 이 레포는 공개 2주 남짓, 버전 0.1.0이다. 커밋은 사실상 한 덩어리로 눌러 담겨(squash) 있고, API·스키마는 아직 얼마든지 바뀔 수 있다. 지금 실무에 얹는 건 얼리어답터의 영역이다.
또 하나 중요한 공백: LICENSE 파일이 없다. 공개 저장소지만 명시된 오픈소스 라이선스가 없으면 법적으로는 "모든 권리 보유(all rights reserved)" — 마음대로 재사용·재배포하기 전에 반드시 확인이 필요하다. 그리고 Codex 주입 기능은 macOS의 ChatGPT.app을 전제로 한다. 보드 자체(웹 UI·CLI·API)는 OS 무관하게 돌지만, "앱에 꽂는" 킬러 기능은 맥 사용자에게 치우쳐 있다.
스택이 인상적으로 얇다. 서버는 빌드 스텝조차 없이 .mjs(순수 ESM)를 Node가 직접 실행하고, 프론트만 Vite로 번들한다. "검증된 최신 조각을 최소한으로"라는 취향이 뚜렷하다.
node:sqlite — Node 22.5부터 표준 내장된 동기식 SQLite. better-sqlite3 같은 네이티브 npm 패키지가 필요 없다. 바로 이것 때문에 Node 22.5+가 하드 요구사항이다. PRAGMA journal_mode=WAL, foreign_keys=ON으로 설정해 쓴다.server/app.mjs(약 2,087줄)가 Node http 모듈 위에서 URL 정규식 사다리로 라우팅한다. Express·Fastify가 없다./api/events가 text/event-stream으로 실시간 변경을 브라우저에 밀어 준다. WebSocket 라이브러리도 쓰지 않는다.CREATE TABLE IF NOT EXISTS + 증분 ALTER TABLE을 손으로 관리(server/database.mjs, 약 1,586줄). Prisma·Drizzle 같은 ORM이 없다.| 패키지 | 버전 | 역할 |
|---|---|---|
react / react-dom | ^19.2 | 보드 UI 전체. 상태관리 라이브러리 없이 훅만 사용 |
@xyflow/react | ^12.11 | React Flow — 워크플로 자동화 캔버스(노드·엣지 그래프) |
react-markdown + remark-gfm | ^10 / ^4 | 이슈 설명·댓글의 마크다운 렌더(GFM 지원) |
@lobehub/icons-static-svg | ^1.94 | AI 공급자·브랜드 아이콘 세트 |
| ↑ 런타임 의존성은 이 6개가 전부다. | ||
127.0.0.1:5173에서 UI를 띄우고 /api는 로컬 서버로 프록시.node --test — 외부 테스트 러너 없이 표준 러너로 38개 테스트 파일 실행. npm run check = 타입체크 + 프론트 빌드 + 테스트를 한 번에.요즘 웹 프로젝트는 npm install 한 번에 수백 개 패키지가 딸려 온다. dashi-taskboard는 정반대로 간다 — SQLite도 HTTP 서버도 실시간 채널도 마이그레이션도 전부 손으로 짰다. 덕분에 공급망 위험(supply-chain)이 작고, 업그레이드에 덜 휘둘리며, 무엇보다 "이 코드가 실제로 무슨 일을 하는지"가 전부 이 레포 안에 있다. 배우는 사람에게는 이게 가장 큰 선물이다.
전체를 한 문장으로 요약하면 "하나의 로컬 서비스가 여러 표면(UI·CLI·주입 패널)을 먹이고, 데이터는 SQLite 파일 하나에 두며, 여러 주체가 버전 잠금으로 안전하게 공유한다"이다. 그림으로 보면:
이 레포에서 가장 중요한 설계다. 모든 카드(task)와 댓글에는 version이라는 정수가 붙어 있다. 무언가를 바꾸려면 "내가 방금 읽은 버전이 N이다"를 함께 보내야 하고(If-Version 헤더 / --if-version 플래그), 그 사이 누군가 먼저 바꿔 버전이 올라갔으면 충돌로 거절된다. 여러 Codex 에이전트가 동시에 돌아도 같은 카드를 둘이 집는 사고가 구조적으로 막힌다. 스킬은 에이전트에게 "todo 카드를 정확한 버전과 함께 집어 in_progress로 옮겨라"를 규칙으로 가르친다.
version 숫자 하나로 이걸 구현한다 — 버전이 안 맞으면 저장 거절.데이터베이스에 global_revision이라는 단 한 줄짜리 카운터 테이블이 있다. 그리고 모든 테이블에 "INSERT/UPDATE/DELETE가 일어나면 이 카운터를 +1" 하는 SQL 트리거가 걸려 있다. 로컬 모드에서는 SSE로 변경을 즉시 방송하고, 클라우드 모드에서는 브라우저가 2초마다 "리비전 번호 바뀌었어?"만 물어보고, 바뀌었을 때만 새로고침한다. "무엇이 바뀌었는지"를 일일이 추적하는 대신 "뭔가 바뀌었다"는 신호 하나로 동기화를 단순하게 만든 영리한 트릭이다.
scripts/codex-injector.mjs(약 1,335줄)가 이 레포의 화제성을 만든 기법이다. 순서는 이렇다:
중요한 절제: 이 도구는 앱 설치 파일을 수정하지 않고(app.asar 무손상), React를 패치하거나 fetch를 가로채지도 않는다. 실행 중인 앱에 스크립트를 얹을 뿐이다. README는 동시에 경고한다 — CDP 포트는 같은 컴퓨터의 다른 프로세스에 인증 없이 열리므로, 주입이 켜져 있는 동안엔 신뢰할 수 있는 로컬 코드만 돌리라고.
보드 안에서 AI와 대화하면, 그 뒤에서 server/ai-chat-process.mjs가 실제 codex 실행 파일을 자식 프로세스로 띄운다(codex resume <스레드ID> 등). Codex가 뱉는 스트리밍 JSON(에이전트 메시지·명령 실행·파일 변경·MCP 도구 호출·웹 검색 등)을 파싱해 다시 SSE 이벤트로 UI에 흘려 보낸다. 샌드박스 수위는 read-only / workspace-write / danger-full-access 셋으로 고른다. "스레드당 실행 중 턴은 하나뿐"을 DB 부분 유니크 인덱스로 강제한다.
| 모드 | 저장소 | 인증 | 쓰임 |
|---|---|---|---|
| 로컬(기본) | node:sqlite 파일 | 없음(127.0.0.1) | 혼자 · 개발 |
| LAN 공유 | 같은 SQLite | 없음(신뢰 네트워크 가정) | 같은 사무실 팀 |
| Cloudflare | D1 + R2 | HTTPS Basic(공유 비번) | 2인 원격 협업 |
클라우드 워커(cloud/src/index.mjs, 약 2,196줄)는 로컬과 같은 API를 D1·R2 위에 다시 구현한다. 인증은 공유 비밀번호를 SHA-256으로 해시해 비교하는 Basic 인증이고, 사용자명은 "표시용 이름"일 뿐 신원 검증은 아니다. 그리고 클라우드는 절대 로컬 SQLite에 이중 기록하지 않는다 — 각 기기의 프로젝트 경로 매핑은 로컬에만 남는다.
npm start는 로컬 URL과 함께 LAN URL도 찍어 준다. 같은 네트워크의 동료가 그 주소로 보드를 읽고 쓸 수 있다는 뜻인데, 여기엔 계정 인증이 전혀 없다. 카페 와이파이나 공용 네트워크에서 이걸 열면 아무나 보드를 만질 수 있다. 공개 인터넷·클라우드로 나갈 때는 반드시 인증 경계(Cloudflare Basic 인증 등)를 두라고 README가 못 박는다.
구조가 곧 아키텍처다. 이 트리를 위에서 아래로 훑는 것만으로 "로컬 서비스(server) → 프론트(web) → 클라우드 재구현(cloud) → 에이전트 연동(skills·inject)"의 네 세계가 또렷이 갈린다. 특히 shared/에 순수 로직을 몰아넣어 서버·CLI·주입 스크립트·웹이 같은 규칙을 공유하게 한 점, 그리고 클라우드 데이터모델의 "정본"을 cloud/migrations/0001_initial.sql 하나로 못박은 점이 눈에 띈다.
이 프로젝트가 무엇을 다루는지는 테이블 정의에 다 적혀 있다:
| 테이블 | 핵심 컬럼 · 역할 |
|---|---|
projects | id · name · workspace_path(로컬 경로) · next_task_number |
tasks | identifier(PROJ-12) · status(backlog…done) · priority · labels(JSON) · sort_order(실수, 드래그 정렬용) · thread_id(Codex) · creator/assignee(사람|에이전트) · version(낙관적 잠금) |
task_relations | parent·blocks·related. 부모 순환을 막는 재귀 트리거 + "부모는 하나만" 유니크 인덱스 |
comments / attachments | 댓글 · 첨부(바이트는 로컬은 파일, 클라우드는 R2) |
workflow_workspaces | 프로젝트별 React Flow 그래프(JSON, 버전 관리) |
global_revision | 한 줄 카운터. 모든 테이블 변경 트리거가 +1 → 동기화 신호 |
Express도 ORM도 없이 node:sqlite + Node http만으로 라우팅·SSE·마이그레이션·정적 서빙을 손수 구현한 코드다. 프레임워크라는 블랙박스 없이 이슈 트래커 한 채를 처음부터 끝까지 읽어낼 수 있다는 게 이 레포의 가장 큰 교육적 가치. server/app.mjs 한 파일을 정독하면 "웹 백엔드가 실제로 무슨 일을 하는가"의 밑바닥이 보인다.
version 정수 하나로 "여러 에이전트·사람이 같은 데이터를 안전하게 나눠 쓰기"를 구현한 실전 사례. database.mjs에서 버전 체크 → 충돌 반환 흐름을 따라가고, 스킬이 에이전트에게 이 규칙을 어떻게 강제하는지 보면, 분산·협업 시스템의 핵심인 동시성 제어를 가장 단순한 형태로 익힐 수 있다.
scripts/codex-injector.mjs는 크롬 개발자 프로토콜의 실전 교과서다. 포트 열기 → 타깃 찾기 → CSP 우회 → 문서 시작 스크립트 주입 → 호스트 바인딩으로 양방향 통신까지. Puppeteer·Playwright의 원리를 밑바닥에서 이해하고 싶거나, "설치 파일을 건드리지 않고 앱을 확장"하는 기법이 궁금하다면 최고의 예제다.
트리거(이슈·RSS·PR·Git 상태) → 조건 분기 → AI 에이전트 단계(계획·리뷰·테스트) → 미디어 생성·배포 노드로 이어지는 Zapier/n8n 스타일 자동화 캔버스를 @xyflow/react로 구현했다. workflow-sequence.mjs(노드 위치·엣지 → 위상정렬)와 workflow-control-flow.mjs(중첩 조건 분기)를 읽으면 "노드 그래프를 실행 순서로 바꾸는" 컴파일 로직을 배운다.
로컬 서비스(server/)와 클라우드 워커(cloud/)가 동일한 API를 서로 다른 저장소(node:sqlite vs Cloudflare D1+R2) 위에 두 번 구현했다. 두 코드를 나란히 비교하면, 데이터 접근 계층을 어떻게 추상화해야 "온프레미스 ↔ 서버리스"를 오갈 수 있는지가 손에 잡힌다. global_revision 기반 동기화가 두 세계에서 각각 SSE·폴링으로 갈라지는 지점도 좋은 관전 포인트.
| 구성요소 | 요구 | 비고 |
|---|---|---|
| 런타임 | Node ≥ 22.5 | 내장 node:sqlite 때문에 하한이 높다. 순수 ESM |
| 로컬 DB | SQLite 파일 | .data/taskboard.sqlite 자동 생성. 별도 설치 불필요 |
| 포트 | 47823(서비스) · 5173(dev UI) | CODEX_TASKBOARD_PORT로 변경 가능 |
| Codex 주입(선택) | macOS ChatGPT.app + CDP 포트 | Codex 26.715.52143 기준. 보드 자체는 OS 무관 |
| 클라우드(선택) | Cloudflare 계정 | Workers + D1 + R2. wrangler로 배포·마이그레이션 |
| 환경변수 | HOST · PORT · DATA_DIR · URL | HOST=127.0.0.1로 LAN 접근 차단 가능 |
# 설치 → 빌드 → 실행
npm install
npm run build
npm start # http://127.0.0.1:47823
# 개발 모드(프론트 핫리로드, API 프록시)
npm run dev # UI :5173 → /api 는 로컬 서비스로
# CLI 로 프로젝트·이슈 만들기
npm run taskctl -- project create --id my-proj --name "내 프로젝트" \
--workspace-path /절대/경로/저장소
npm run taskctl -- issue create --project my-proj \
--title "다음 작업" --status todo --priority high
# 전체 검증(타입체크 + 프론트 빌드 + 테스트)
npm run checkgit clone --depth 1 후 npm install && npm run build && npm start로 127.0.0.1:47823을 열어 카드 몇 개를 만들어 보자. AGENTS.md의 "가장 작은 변경을 하라, 확인 전엔 방어코드·테스트를 미리 넣지 말라"는 규율이 왜 나왔을지 생각해 보는 게 관전 포인트.
taskctl로 프로젝트·이슈를 만든 뒤 .data/taskboard.sqlite를 sqlite3로 열어 tasks 테이블을 조회해 보자. UI·CLI·DB가 같은 데이터를 본다는 걸 눈으로 확인하고, version·sort_order 컬럼이 어떻게 채워지는지 살핀다.
같은 카드를 version=N으로 두 번 수정 요청하되, 첫 요청이 성공해 버전이 올라간 뒤 두 번째를 보내 충돌 거절을 받아 보자. server/database.mjs와 app.mjs에서 버전 비교 코드를 찾아, "어디서 막히는지"를 실제 라인으로 짚는다.
(A) web/src/components/workflowCatalog.ts에 커스텀 노드 타입을 하나 더 정의해 캔버스에 띄워 보거나, (B) skills/manage-taskboard를 Codex 스킬 디렉토리에 심볼릭 링크하고 카드 하나를 에이전트에게 맡겨, in_progress → in_review 이동이 규칙대로 일어나는지 관찰한다.
wrangler로 D1 데이터베이스·R2 버킷을 만들고 cloud:migrate로 스키마를 올린 뒤 cloud:deploy. 그다음 migrate-to-cloud로 로컬 SQLite 데이터를 클라우드로 옮겨 본다. 로컬과 클라우드가 같은 API·다른 저장소임을 두 코드로 비교하는 게 최종 목표 — 반드시 테스트용 계정에서.
| 주차 | 주제 | 구체적으로 |
|---|---|---|
| 1주 | Node 밑바닥 백엔드 | node:sqlite, http 모듈 라우팅, SSE, WAL·트랜잭션. 프레임워크 없이 CRUD 서버 만들어 보기 |
| 2주 | 동시성·실시간 동기화 | 낙관적 vs 비관적 잠금, 버전 벡터, SSE vs 폴링 vs WebSocket, 리비전 카운터 패턴 |
| 3주 | React 19 + React Flow | 훅 기반 상태, 노드/엣지 그래프 UI, 위상정렬로 실행 순서 만들기, 프랙셔널 인덱싱 드래그 정렬 |
| 4주 | CDP · Electron 확장 | Chrome DevTools Protocol, Puppeteer/Playwright, CSP, document-start 주입, 앱 자동화 윤리·보안 |
| 5주(선택) | 서버리스 이식 | Cloudflare Workers·D1·R2, wrangler·miniflare, 온프레미스 API를 서버리스로 옮길 때의 트레이드오프 |
127.0.0.1 + .data/taskboard.sqlite 파일 하나. 계정·외부 서버 없이 즉시 동작한다.import만으로 DB를 쓴다. 이 레포가 Node 22.5+를 요구하는 이유.version 숫자로 확인하는 방식. 안 맞으면 저장 거절. 다중 에이전트가 같은 카드를 겹쳐 집는 걸 막는다.text/event-stream). WebSocket보다 단순하다. 로컬 모드에서 보드 변경을 즉시 방송하는 데 쓴다.taskctl은 보드를 조작하는 CLI. skills/manage-taskboard는 Codex에게 "이 CLI로 카드를 집고 상태를 옮기고 검증하라"를 가르치는 스킬 문서다. 에이전트가 보드를 다루는 계약.codex-taskboard · 배포 도메인 taskboard.dsxzai.com)README.md(개요·설정) · AGENTS.md(개발 규율) · server/app.mjs(HTTP·SSE) · server/database.mjs(node:sqlite·마이그레이션) · scripts/codex-injector.mjs(CDP 주입) · cloud/migrations/0001_initial.sql(데이터모델) · skills/manage-taskboard/SKILL.md(에이전트 계약)