내 위키를 픽셀 사무실로 만들었습니다 — Claude Code로 하루 만에 만든 개인 대시보드
마크다운 위키에 쌓인 프로젝트 현황을 표가 아니라 픽셀 사무실로 보여주는 대시보드를 만들었습니다. 프로젝트는 책상 위 캐릭터, 실행 중인 AI 코딩 세션은 옆자리 동료가 됩니다. 기획부터 배포까지 하루가 걸린 과정과 구조를 정리했습니다.
안녕하세요. Jay입니다!
예전에 Claude Code로 나만의 세컨 브레인 위키를 만든 이야기를 쓴 적이 있는데요, 그 위키를 두 달 넘게 굴리다 보니 예상하지 못한 문제가 하나 생겼습니다. 페이지가 많아질수록 "지금 뭐가 어떻게 되고 있는지"를 한눈에 보기가 어려워진다는 것이었어요. 분명 인덱스 페이지에 표로 잘 정리돼 있는데도, 표는 열어서 읽어야 알 수 있죠. 그래서 위키를 픽셀 아트 사무실로 보여주는 대시보드를 만들었습니다. 기획부터 배포까지 딱 하루 걸렸고, 그 과정을 공유합니다.
🏢 무엇을 만들었나 — 프로젝트가 책상에 앉아 있는 화면
화면을 열면 사무실 도면이 나옵니다. 방은 네 구역이고, 프로젝트는 상태에 따라 자기 자리에 배치됩니다.
| 프로젝트 상태 | 화면에서의 모습 |
|---|---|
| 진행 중 | 책상에 앉아 타이핑하는 캐릭터 |
| 기획 단계 | 회의 테이블 쪽에 서 있는 캐릭터 |
| 보류 | 휴게실 침대에서 자고 있음 |
| 막힘 | 문 앞에서 대기 |
| 최근 완료 | 트로피를 들고 창고 앞 |
| 중단 | 창고 안 상자 |
캐릭터를 클릭하면 사이드 패널이 열리면서 진행률, 마지막 업데이트, 마감일이 나오고, 거기서 바로 옵시디언 원본 페이지로 점프합니다. obsidian://open?vault=...&file=... 프로토콜 링크 한 줄이면 되더라고요.
여기까지는 "예쁜 대시보드"인데, 실제로 매일 쓰게 만든 건 다음 기능이었습니다.
👥 실행 중인 AI 코딩 세션이 옆자리에 앉습니다
지금 제 맥에서 돌고 있는 Claude Code 세션을, 해당 프로젝트 책상 옆자리에 앉은 동료 캐릭터로 표시합니다. 작업 중이면 타이핑을 하고, 5분 넘게 조용하면 커피머신 앞으로 이동합니다. 세션을 감지하는 방법은 이렇습니다.
pgrep -x claude로 실행 중인 프로세스 목록을 가져옵니다.lsof -a -p <PID> -d cwd로 각 프로세스의 작업 디렉토리를 알아냅니다.- 작업 디렉토리를 설정 파일의 매핑 테이블로 위키 페이지와 연결합니다. (
monttant폴더에서 돌고 있으면 블로그 프로젝트 책상으로) - 세션 로그 파일의 최종 수정 시각으로 작업 중/대기 중을 구분합니다.
터미널 창을 몇 개씩 띄워놓고 작업하다 보면 "지금 어느 프로젝트를 만지고 있었지?"를 놓칠 때가 있는데, 사무실 화면을 보면 그냥 보입니다. 여기에 노트북 두 대의 세션을 합치는 것도 붙였습니다. 각 맥이 자기 세션 상태를 클라우드 동기화 폴더에 60초마다 파일로 적고, 서버가 그 파일들을 합쳐 읽는 방식입니다. 별도 서버 없이 파일 하나로 기기 간 상태를 공유하는 셈이죠.
🧱 구조 — 데이터베이스가 없습니다
구조는 의외로 단순합니다.
jay-office/
├── collect.mjs # 위키 마크다운 frontmatter 파싱 + 세션 스캔 → 상태 객체
├── server.mjs # 정적 서빙 + /api/state
├── config.json # 위키 경로 + 폴더-프로젝트 매핑
└── public/
├── index.html # canvas 픽셀 렌더러
└── office.js
핵심 원칙은 두 가지였습니다.
- 위키는 읽기 전용 — 대시보드는 마크다운 파일을 절대 수정하지 않습니다. 원본이 하나뿐인 진실의 출처여야 하니까요.
- DB 없음 — 요청이 올 때마다 마크다운을 다시 파싱합니다. 60여 개 페이지라 밀리초 단위로 끝나서, 상태를 따로 저장할 이유가 없었습니다. 저장소가 없으면 동기화가 깨질 일도 없습니다.
파일 변경 감지를 붙여서, 위키에서 페이지를 저장하면 1초 안에 화면이 갱신됩니다. 상태를 바꾸면 캐릭터가 새 자리로 걸어갑니다. 순간이동시키지 않고 걷게 만든 건 "움직임이 곧 정보"이기 때문이에요. 뭔가 움직였다는 건 뭔가 바뀌었다는 뜻이니까요.
🕸️ 예상 못 한 수확 — 방치된 프로젝트가 눈에 보입니다
만들다가 재미로 넣은 기능이 하나 있는데, 2주 넘게 업데이트가 없는 진행 중 프로젝트 책상에는 거미줄이 칩니다. 원래 위키 규칙에 "2주 이상 갱신 없는 진행 중 항목은 보류로 내린다"는 점검 항목이 있었는데, 그건 제가 점검을 돌려야 알 수 있는 정보였습니다. 그런데 거미줄은 그냥 눈에 들어옵니다. 규칙을 문서로 적어두는 것과 화면에 그리는 것의 차이가 이렇게 큰 줄 몰랐어요.
밤 8시가 넘으면 창밖이 밤하늘로 바뀌고 조명이 어두워지는 것도 넣었는데, 이건 순전히 취향입니다.
💡 Jay의 한 줄 — "하루 만에 가능했던 이유는 데이터가 이미 정리돼 있었기 때문입니다"
기획부터 배포까지 하루가 걸렸다고 하면 AI 코딩 도구가 빨라서라고 생각하기 쉬운데, 실제로 시간을 아껴준 건 두 달 동안 위키에 쌓아둔 정형화된 데이터였습니다. 모든 페이지에 상태, 진행률, 우선순위, 마감일이 같은 형식으로 들어 있었기 때문에, 파싱하는 코드가 사실상 없다시피 했거든요. 만약 자유 형식 메모였다면 하루로는 어림도 없었을 겁니다.
AI에게 코드를 맡길수록 오히려 내 데이터의 구조가 얼마나 정돈돼 있는지가 결과물의 상한선을 정한다는 걸 체감했습니다. 도구는 빌려 쓸 수 있지만 맥락은 빌릴 수 없더라고요.
결론
개인 지식 저장소를 운영하고 계신다면, 언젠가 "쌓아둔 데이터를 다르게 보여주는" 단계가 옵니다. 그때 필요한 건 거창한 시스템이 아니라 ① 원본을 건드리지 않고 읽기만 하는 수집기 ② 저장소 없이 매번 다시 읽는 단순한 서버 ③ 상태를 눈에 보이게 바꾸는 표현 하나입니다. 표를 그림으로 바꿨을 뿐인데 매일 열어보게 됐습니다.
다음에도 유익한 포스팅으로 찾아오겠습니다. 감사합니다!