🌐 Language: 한국어 (이 문서) · English · 💬 Discussions (피드백·질문)
서버·DB·빌드 없이 도는 작은 운영 대시보드 — 태스크 칸반 + 문의 4열 보드. 핵심은 여러 사람(또는 여러 AI 세션)이 동시에 기록해도 깨지지 않는다는 점입니다. 📌 포트폴리오/데모용 — 데이터는 전부 가상 샘플.
🌍 특정 분야 전용 아님. 샘플이 IT/운영 느낌(분류 DEV/OPS/TS/ADM, SAP 예시)일 뿐, 어떤 팀의 업무·요청 추적에도 씁니다 — 마케팅, 연구실, 고객지원, 행정 등. 분류·상태·데이터는 본인 업무에 맞게 바꾸면 됩니다.
🧭 두 레포 (별개 도구): 🗂️ ai-collab-dashboard(이 레포) = 작업 보드 · 🧠 Third-Party-Brain = AI 검색 지식 뇌. 이 대시보드만 단독으로 써도 됩니다 — 아카이브 불필요.
✅ 데모 포함 — 클론하면 가짜 샘플(태스크·문의)이 든 채로 바로 돕니다. 폴더를 AI에게 주고 "AGENTS.md 읽고 셋업해줘" 라고 하면, AI가 쉬운 선택을 제시합니다(그냥 파일만 띄우지 않음):
- Ⓐ 데모 보기 →
task-board.html열기 (샘플 그대로 둘러보기). - Ⓑ 내 걸로 셋업 → AI가 팀 태스크·상태·분류를 물어 채워줌 (가짜 샘플 대체, 지어내지 않음).
✏️ 직접 수정 (클로드·서버 불필요) — 우하단 편집 버튼으로 카드를 바로 고치고 ➕태스크 추가·🗑삭제, 💾저장으로 파일에 기록합니다. Chrome·Edge는 파일에 바로 저장 / 그 외 브라우저는 다운로드. (간단한 수정은 클로드를 거칠 필요가 없습니다.)
🤖 AI 참조 로그 — 카드 2층 구조 (신규) — 오래 가는 개발 카드는 수정·깨달음이 시계열로 쌓여 길어지는데, AI가 정확한 문맥을 잃지 않으려면 줄일 수도 없습니다. 그래서 카드를 2층으로: 위 = 본문(사람용 — 잘 정리된 현재 상태), 아래 = 🤖 AI context log(접었다 펴는 영역 — 작업 시계열·교훈·AI가 스스로 약속한 방침, 카드의 ailog 필드). 사람은 본문까지만 읽으면 되고, AI는 접힌 로그까지 자동으로 정독합니다(AGENTS.md 규칙). 줄이지 않고 쌓아도 화면은 깔끔. 변경 이력: CHANGELOG.md
💡 "기존 파일 덮어쓰기"가 걱정되세요? 남의 파일이 아니라 내 파일을 방금 한 편집으로 갱신하는 것뿐이라 안전합니다 — 데이터가 지워지는 게 아니라 수정이 반영돼요. 처음 한 번만
task-board.html을 골라 "덮어쓰기" 확인하면, 이후엔 그 위치를 기억해 한 번에 저장합니다(폴더 다시 안 찾음). 화면을 띄워둔 채로 해도 됩니다. 정 불안하면 처음엔 원본을 한 번 복사해 백업해 두세요.
단독 동작 — 아카이브(Third-Party-Brain) 없이도 완전 동작합니다(별개 도구). 준비물: 브라우저 + log-inquiry.py용 Python 3.6+ (설치 불요).
정적 HTML 파일 하나 + 작은 파이썬 헬퍼로 도는 운영 작업판입니다. 두 보드를 한 화면에 둡니다.
- 태스크 칸반 — 진행 중 업무를 상태(접수·진행중·대기·완료) 컬럼으로.
- 문의 보드 — 들어오는 문의를 같은 4열로.
비결은 문의 로그가 추가전용(append-only) + id 병합 이라는 것 — 모든 변경이 새 줄 하나이고, 같은 id를 다시 쓰면 필드가 병합됩니다. 제자리 수정이 없으니 동시 기록 충돌이 없습니다.
보드 형태(작업을 카드로 만들어 상태 컬럼 사이로 흘려보내는 방식)는 토요타 생산방식(TPS)의 칸반(看板) — 적시생산(JIT) 신호 시스템 — 에서 비롯해 Lean·Agile의 칸반 방식으로 이어진 계보를 따릅니다. 즉 작업 흐름의 시각화는 토요타 칸반에서 영감을 얻었습니다.
단, 이 대시보드의 고유한 부분(추가전용+id병합 동시기록 안전·무백엔드) 은 토요타가 아니라 이벤트 소싱/로그 구조 계열 아이디어입니다. 토요타 = 보드/흐름 시각화의 뿌리, 동시성 설계 = 별개.
여러 사람이 같은 파일을 편집하면 쓰기 경쟁이 납니다(둘이 열어서 둘 다 저장 → 하나가 덮어씀). 보통은 DB나 서버로 풀지만, 이건 정적 HTML + 평면 JS 로그로 남되 경쟁을 다르게 피합니다.
- 추가만 한다 —
log-inquiry.py는push({...})한 줄만 덧붙입니다. - id로 접는다 — 보드가 로그를 왼→오로 접어(
Object.assign) 뒤 줄이 앞 레코드의 해당 필드만 갱신. - 추가 순간만 잠근다 — OS 파일락(
msvcrt/fcntl)으로 두 writer가 EOF에서 한 줄 잃는 것 방지.
결과: 임의 개수의 세션이 동시에 접수→진행중→대기→완료를 기록해도 항상 일관된 화면으로 접힙니다.
| 파일 | 역할 |
|---|---|
task-board.html |
대시보드 화면(칸반 + 문의 보드). 더블클릭으로 열림. |
tasks.md |
태스크 정본(가상 샘플). |
inquiry-log.js |
추가전용 문의 푸시로그(가상 샘플). |
log-inquiry.py |
문의를 안전하게 덧붙이는 CLI. |
docs/ |
비전·git 워크플로우 노트. |
AGENTS.md |
이 레포에서 작업하는 AI를 위한 안내. |
① 대시보드 열기 — task-board.html 더블클릭 (서버 불요).
② 문의 기록은 AI에게 말로 시키세요 — 명령어를 직접 칠 필요가 없습니다. AI에게 "이 문의 접수해줘" · "진행중으로 바꿔줘" · "답변 달고 완료해줘" 라고 하면, AI가 아래 log-inquiry.py를 대신 실행합니다. (이 도구의 핵심 = 사람이 CLI를 외우는 게 아니라 AI가 대신 안전하게 기록하는 것.)
③ 새로고침 — task-board.html을 새로고침하면 반영됩니다.
↳ AI가 실제로 실행하는 명령 (직접 쓰고 싶을 때만 펼쳐 보세요)
# 새 문의 접수
python log-inquiry.py --new --type simple --q "사번 찾는 법?" --by alice --req "bob / sales"
# → NEW id=INQ-260104-091500 status=received
# 같은 id로 상태 전이 (자동 병합)
python log-inquiry.py --id INQ-260104-091500 --status in-progress
python log-inquiry.py --done --id INQ-260104-091500 --a "SU01D 주소탭에서 확인" --ref "#tcode-master"log-inquiry.py (writer A) ──┐ inquiry-log.js (추가전용)
log-inquiry.py (writer B) ──┤ 추가 시 짧은 파일락 ► push({id:7, status:"received"})
log-inquiry.py (writer C) ──┘ push({id:7, status:"in-progress"})
push({id:9, status:"received"})
push({id:7, status:"done", a:"..."})
│
task-board.html ◄── id로 접기 (Object.assign, 순서대로)
▼
id 7 → {status:"done", a:"..."}, id 9 → {received}
어떤 레코드도 다시 쓰이지 않으므로 동시 writer가 서로를 덮어쓸 수 없습니다 — 최악의 경우라도 두 줄이 모두 남습니다.
두 카드 모두 헤더(요약) + 클릭하면 펼쳐지는 상세 패턴입니다.
- 프로젝트 카드
.card—renderTasks()로 렌더. 헤더: 분류칩·ID·요청자·제목 + 노란.next(다음 액션). 클릭 →.detail펼침(.open토글). - 문의 카드
.inq-card—renderInquiries()로 렌더. 헤더.inq-head(항상 보임=클릭 영역): ▸캐럿.inq-cy+ 유형 배지 + INQ코드 + 요청자 칩 + 노란.inq-sum(질문)..inq-detail(접힘): 답변 + 참조링크 + 날짜·기록자. 토글은#inq-board에 이벤트 위임(재렌더에도 유지).
렌더 ≠ 데이터 (꼭 구분):
| 카드 | 렌더 함수 | 데이터 출처 | 수정 방법 |
|---|---|---|---|
| 프로젝트 | renderTasks() |
TASKS 배열(task-board.html 내) |
tasks.md와 수기 동기화 (브라우저 편집은 localStorage만) |
| 문의 | renderInquiries() |
INQUIRY_LOG(inquiry-log.js 내) |
log-inquiry.py로만 추가 — 직접 편집 금지 |
⚠️ 폼 수정 시.inq-sum·.inq-detail·.inq-cyCSS와#inq-board토글 위임을 함께 유지하세요.
task-board.html의TASKS배열을 본인 업무로 교체(tasks.md와 동기화).- 상태/분류 색은
<style>과STATUSES배열에서 조정. log-inquiry.py는 자기 옆 파일에 쓰므로 폴더째 옮겨도 동작.
- 브라우저(대시보드는 단일 정적 파일).
log-inquiry.py용 Python 3.6+ (표준 라이브러리만 — 설치 불요).
MIT — LICENSE 참고.