Claude Code만으로 픽셀 오피스를 만든 전과정【바이브코딩 실전】

Claude Code 게임 개발이 이렇게 쉬울 줄 몰랐다. Claude Code에 “회사 만들어줘”라고 했더니, 폴더가 방이 되고, 파일을 저장할 때마다 도트 캐릭터 직원들이 돌아다니는 오피스 시뮬레이션이 완성됐다.

개발 기간 3일. 작성한 코드 0줄. 전부 Claude Code와의 대화만으로 완성했다.

이 글에서는 가상 조직 플러그인 구축부터 Pixel Office 완성까지 전 공정을 시간 순서로 해설한다.

완성된 것 — Claude Code만으로 만든 Pixel Office

도트 오피스. 12개 방. 14명의 직원.

리서치부가 트렌드 리포트를 작성하면 도트 직원이 블로그부까지 서류를 들고 걸어간다. CEO가 의사결정 파일을 저장하면 관련 부서에 지시가 날아간다. 카페테리아에서 커피를 마시면 HP가 회복되고, 체력이 바닥난 직원은 “체력이 바닥이야…”라고 말풍선을 띄우며 자동으로 수면실로 향한다.

파일 시스템의 변경이 실시간으로 게임 내 이벤트로 변환된다. 평소 작업이 그대로 게임 스토리가 되는 구조다.

전체 아키텍처

①가상회사 플러그인(/company) → ②폴더 구조 생성(.company/)
→ ③Pixel Office가 읽어들임 → ④방·직원 자동 배치
→ ⑤파일 변경 감시(Chokidar) → ⑥게임 이벤트 발화(SSE)
→ ⑦직원이 움직이고 대화 → ⑧LLM이 브리핑 생성

Phase 1: 가상 회사 세우기

플러그인 설치

먼저 Claude Code에서 가상 회사 플러그인을 설치한다.

/plugin marketplace add shuntailor/cc-company
/plugin install company@cc-company

설치가 끝나면 실행한다.

/company

비서가 대화 형식으로 질문을 던진다.

Q1. 당신이 하는 일은 무엇인가요?

→ AI 브랜드 운영, 개인 개발, 블로그·SNS 콘텐츠 제작

Q2. 미션·목표는?

→ 예시)월수익 100만원 달성, 블로그 회원 100명

Q3. 어떤 부분에서 도움이 필요한가요?

→ 예시)태스크 관리가 안 되고, 리서치를 놓치고, 마케팅이 후순위가 됨

Q4. 부서 선택 (번호로 선택)

1. 비서실 (상설)
2. PM — 프로젝트 진행, 티켓 관리
3. 리서치 — 시장 조사, 트렌드 추적
4. 마케팅 — 콘텐츠 기획, SNS 전략
5. 개발 — 기술 문서, 설계
6. 경리 — 청구서, 경비
7. 영업 — 클라이언트, 제안서
8. 크리에이티브 — 디자인, 브랜드
9. 인사 — 채용, 팀 관리

→ 2,3,4,7,8 (커스텀 부서 추가도 가능)

Q5. 폴더 위치

→ 현재 디렉토리 (기본값)

이것만으로 아래 폴더 구조가 자동 생성된다.

.company/
├── secretary/       ← 비서실 (전체 창구)
│   ├── todos/
│   ├── inbox/
│   └── notes/
├── ceo/
│   └── decisions/   ← CEO 의사결정서
├── pm/
│   ├── tickets/     ← 태스크 티켓
│   └── projects/
├── research/
│   ├── trends/      ← 트렌드 리포트
│   └── topics/
├── marketing/
│   ├── campaigns/
│   └── content-plan/
├── blog/
│   ├── articles/    ← 블로그 기사
│   ├── seo/
│   └── analytics/
├── sales/
│   ├── proposals/
│   └── clients/
├── creative/
│   ├── assets/
│   └── briefs/
├── finance/
├── threads/         ← SNS 운용
├── note/            ← note 기사
└── daily-log.md     ← 활동 로그

비서 라우팅 구조

이 플러그인의 핵심은 “비서가 창구”라는 규칙. 사용자가 뭔가를 요청하면 비서가 먼저 받아서, 내용에 따라 CEO에게 올리거나 직접 담당 부서에 배분한다.

실제 파일 수 (2026년 3월 20일 기준)

일을 하면 할수록 부서가 활기차진다.

Phase 2: Ollama + Pixel Office 설치 → 시각화

Step 2-1: Ollama + Qwen 설치

직원의 대화와 일일 브리핑을 AI가 생성하려면 Qwen이 필요하다. 없어도 게임은 돌아가지만, 있으면 훨씬 재미있다.

# macOS
brew install ollama

# Linux
curl -fsSL https://ollama.com/install.sh | sh

# Ollama 기동 (백그라운드 상주)
ollama serve &

# Qwen 2.5 다운로드 (약 1GB)
ollama pull qwen2.5:1.5b

확인: ollama list → qwen2.5:1.5b가 보이면 OK.

Qwen 2.5 1.5B 스펙 소비

M1 Mac 이상이면 체감 지연 없음. 인텔 Mac이나 저사양 PC에서도 3~5초면 응답.

Step 2-2: Pixel Office 플러그인 설치

/plugin marketplace add shuntailor/cc-pixel-office
/plugin install pixel-office@cc-pixel-office

설치 후 실행한다.

/pixel-office

Claude: 어느 폴더를 시각화할까요?
→ .company/

Pixel Office 스킬이 .company/를 스캔해서 각 서브폴더를 하나의 “방”으로 매핑하고, 서버가 자동 기동된다. http://localhost:3101에서 확인.

배치 알고리즘

캔버스는 80×36 타일 (1타일=16px). 위아래 2열 배치.

윗줄: 리서치 | 마케팅 | 블로그 | 카페테리아 | 크리에이티브 | 수면실
                ─────────── 복도 ──────────
아랫줄: 비서실 | CEO | PM | 영업 | 회의실 | 채팅

6개 슬롯이 X좌표 [0, 13, 26, 39, 52, 65]에 배치. 폭은 12타일(마지막만 13). 부서가 12개 미만이면 빈 슬롯은 카페테리아·수면실·회의실·채팅 등 특수 방으로 자동 채워진다.

직원 수 결정 로직

부서별로 고정 배치된다.

GUI에서 Claude Code로 작업 요청하는 구조

Pixel Office의 핵심 기능 중 하나: UI에서 부서를 클릭하고 지시를 내리면, 백엔드에서 Claude Code가 실제로 작업을 수행한다.

전체 파이프라인

① UI: 부서 타일 클릭 (예: 🔬 리서치) + 설명 입력
                    ↓
② POST /api/task { dept: "research", description: "AI 트렌드 조사해줘" }
                    ↓
③ TaskRunner 큐에 등록 → SSE로 "pending" 상태 브로드캐스트
                    ↓
④ 부서의 최근 파일 3개를 컨텍스트로 수집
                    ↓
⑤ 부서별 프롬프트 템플릿으로 최종 프롬프트 조립
                    ↓
⑥ spawn('claude', ['-p', '--model', 'sonnet'])
   → stdin으로 프롬프트 전송 → Claude Code가 실행
                    ↓
⑦ 결과를 .company/{dept}/{subdir}/YYYY-MM-DD-{taskId}.md 로 저장
                    ↓
⑧ SSE로 "done" 상태 브로드캐스트 → UI 실시간 업데이트
                    ↓
⑨ Chokidar가 새 파일 감지 → 직원이 서류 배달 애니메이션 시작

부서별 출력 경로

핵심: Claude Code의 구독 크레딧을 사용하므로 Pixel Office 자체에 추가 API 비용은 없다. Sonnet 모델로 처리되어 품질이 높고, 타임아웃은 10분.

Phase 3: 직원에게 생명 불어넣기

프로그래밍 생성 캐릭터 스프라이트

CharacterFactory가 Canvas API로 16×22px 도트 캐릭터를 동적 생성. 1캐릭터당 96프레임 (6방향 × 4동작). 걷기, 대기, 배달 전부 애니메이션이 있다.

부서별 복장이 다르다:

• CEO: 정장+넥타이
• 비서: 블라우스+긴 머리
• 리서치: 흰 가운
• 블로그: 캐주얼+안경
• 영업: 와이셔츠+넥타이
• 기타: 부서 색상의 비즈니스 캐주얼

A* 경로탐색

직원이 부서 간 이동할 때 A* 알고리즘으로 최단 경로를 계산한다.

데스크 → 자기 방 문 → 복도 → 계단(층이 다른 경우)
→ 상대 방 문 → 상대 데스크

복도를 걷는 직원을 보면 실제 사무실을 바라보는 느낌이 든다.

AI 업무 자동화에 관심이 있다면, Threads(@shuntailor)에 DM으로 “진단”이라고 보내주세요 →

Phase 4: 파일 변경이 이벤트가 된다

이것이 Pixel Office의 심장부.

데이터 플로우

.company/ 에서 파일 저장
      ↓
Chokidar가 변경 감지 (실시간)
      ↓
parser.js가 프론트매터 해석 · 파일 타입 추정
      ↓
eventMapper.js가 게임 이벤트로 변환
      ↓
Server-Sent Events (SSE)로 클라이언트에 배신
      ↓
캐릭터가 움직이기 시작

이벤트 매핑표

파일의 YAML 프론트매터에서 수신처와 타입을 자동 판별. 없으면 경로 구조에서 추정.

배달 완료 시 HP 소모: 1회 배달에 4~7 HP 소모.

Phase 5: 직원의 생활 시뮬레이션

체력(HP) 시스템

직원에게는 HP(0~100)가 있다. 머리 위 초록 바로 확인 가능.

HP 소모 로직:

HP 회복 로직:

HP 바 색상:

HP > 60%:  초록 (0x44CC88)  ← 건강
HP 30~60%: 노랑 (0xDDAA33)  ← 주의
HP < 30%:  빨강 (0xCC4444)  ← 위험

저HP 자동 행동:

• HP ≤ 20: 자동으로 수면실 이동 (확률 100%) — “체력이 바닥이야…” 말풍선
• HP ≤ 25: 35% 확률로 수면실
• HP ≤ 45: 10% 확률로 수면실

수면 후 “충전 완료~”, “역시 잠이 보약이야” 같은 대사를 하며 데스크로 복귀.

일상 행동 확률 분포

이벤트가 없는 시간대에 직원이 랜덤으로 행동한다. 아이들 행동의 확률:

잡담 내용

40패턴 이상의 정형문 + Qwen AI가 상황에 맞는 대화를 생성.

정형문 예:

• “오늘 트렌드 봤어?”
• “카페 새 메뉴 맛있다”
• “릴리스 간에 맞을까…”
• “AI 발전 너무 빠른 거 아냐?”
• “5분만 재워줘…”

Qwen 2.5 (1.5B 파라미터)가 로컬에서 작동. 부서 컨텍스트에 맞는 대사를 생성. 무료이고 지연도 거의 없다.

직원 프로필

직원을 클릭하면 프로필 모달이 열린다:

• 부서명·포지션
• ENERGY 바 = 현재 HP
• STRESS 바 = 100 – HP
• “CEO실로 부르기
• 친밀도 (0~100, 색상 코딩: ≥70 초록, ≥40 노랑, <40 빨강)
• 연봉 (친밀도 기반 계산: (친밀도/50) × 300만원)
• 대화 기록” 버튼 — 전 직원을 CEO실에 소집 가능
• “대화 기록” — 해당 직원의 발언 이력

협업 그래프

.company/ 내 파일 간 상호 참조를 분석해서 부서 간 연계도를 스코어화.

협업 스코어 = 부서 간 파일 상호참조 횟수를 가중 누적하고, 최대값 대비 비율로 정규화 (0~100)

14일 윈도우로 시간 감쇠 적용. 오래된 연계는 비중이 줄어든다.

Phase 6: UI 레이어와 LLM 연계

하단 스테이터스 바

게임 화면 아래에 상주하는 바:

2층 LLM 구성 — 핵심 아키텍처

여기가 기술적으로 재미있는 부분. 가벼운 처리와 무거운 처리로 LLM을 나눈다.

Qwen 2.5 (Ollama·로컬·무료):

• 직원 잡담 생성 (40+ 패턴 + AI 생성)
• 오늘의 브리핑 요약 (daily-log.md → 3~6개 불릿)
• daily-status 분석
• 응답 시간: 0.5~2초
• 비용: 0원 (로컬 실행)

GUI에서 무거운 작업 명령:

• “리서치부, 최신 AI 트렌드 조사해줘” → Claude Code가 웹 조사 후 리포트 생성
• “블로그부, 이 기사 써줘” → SEO 최적화된 기사 생성
• “PM, 이번 주 티켓 정리해줘” → 티켓 파일 자동 생성
• 이 부분은 Claude Code 구독 크레딧을 사용 (Pixel Office 자체 비용은 아님)

핵심: Pixel Office 자체 운영 비용은 완전 0원.

Qwen이 못 돌면? → 정형문 잡담만 표시. 어떤 환경에서도 게임은 멈추지 않는다.

숍 시스템

게임 내 화폐(G)로 오피스 비품 구매. 이벤트 발생이나 태스크 완료로 화폐가 쌓인다.

디지털 시계

MENU 버튼 옆에 실시간 디지털 시계를 배치. 실제 시각과 동기화되어 2026.03.20 19:49:38 형태로 표시.

Phase 7: 낮밤 모드와 Stitch 연계

Google Stitch로 디자인

Google Stitch(AI UI 디자인 툴)로 Pixel Office의 낮밤 디자인을 생성했다. 텍스트 한 줄로 다음 목업이 나온다:

• 낮 모드: 밝은 초록 잔디, 난색 계열 실내, 자연광
• 밤 모드: 어두운 남색 배경, 데스크 램프 난색 글로우, 창에 별

구현 완료

• Stitch MCP Server를 경유해 디자인 HTML 코드 취득
• 낮 모드 UI 디자인 부분 반영 (헤더, 스테이터스 바)
• 밤 모드 오버레이 (Phaser.js 그래픽 레이어) 구현

미구현·과제

• Stitch의 HTML 출력은 정적 목업이라 Phaser.js 캔버스 통합에 수작업 필요
• 밤 모드는 구현했지만 Stitch 디자인만큼 정밀한 표현에는 미달
• Stitch → Claude Code → Pixel Office의 완전 자동 파이프라인은 미완성

Stitch 연계는 “디자인 참고” 단계이고 자동 통합은 아직 안 된다. 이것이 향후 최대 과제.

향후 방향

• Stitch MCP + Claude Code 연계를 강화해서 디자인 변경→즉시 반영 플로우 구축
• 밤 모드는 Stitch 디자인을 참고하면서 Phaser.js 셰이더로 재현 예정

기술 스택·비용

합계: 완전 무료 (0원).

재현 수순 — 플러그인 2개 + Qwen으로 끝

필요한 건 플러그인 2개 설치와 Qwen 셋업뿐. 코드 0줄.

Step 1: Ollama + Qwen 설치 (직원 대화·브리핑용)

Qwen 없어도 게임은 돌아가지만, 있으면 직원이 문맥에 맞는 대화를 하고 매일 브리핑을 자동 생성해준다.

# macOS
brew install ollama

# Linux
curl -fsSL https://ollama.com/install.sh | sh

# Ollama 기동 (백그라운드 상주)
ollama serve &

# Qwen 2.5 (1.5B 파라미터) 다운로드 — 약 1GB
ollama pull qwen2.5:1.5b

확인: ollama list → qwen2.5:1.5b가 보이면 OK.

M1 Mac 이상이면 1~2초에 응답. GPU 없어도 됨.

Step 2: 가상 회사 플러그인 설치

Claude Code에서:

/plugin marketplace add shuntailor/cc-company
/plugin install company@cc-company

설치 후 실행:

/company

Claude: 회사 이름은?
→ TAILOR HOLDINGS (원하는 이름 OK)

Claude: 어떤 부서가 필요한가요?
→ 비서실, CEO, PM, 리서치, 마케팅, 블로그, 영업, 크리에이티브

.company/ 폴더와 전 부서의 폴더·템플릿이 자동 생성된다.

Step 3: Pixel Office 플러그인 설치

/plugin marketplace add shuntailor/cc-pixel-office
/plugin install pixel-office@cc-pixel-office

설치 후 실행:

/pixel-office

Claude: 어느 폴더를 시각화할까요?
→ .company/

• .company/를 스캔해서 방 레이아웃 자동 계산
• DeptConfig.js 자동 생성
• Express + Vite 서버 기동

브라우저에서 http://localhost:3101 열면 도트 오피스 등장.

Step 4: 파일 추가해보기

.company/ 안에 마크다운 파일을 추가하면 직원이 움직인다.

cat > .company/research/trends/test.md << 'EOF'
---
title: "테스트 트렌드"
date: 2026-03-20
---
## AI 에이전트 동향
테스트 내용.
EOF

저장 순간 리서치부 직원이 블로그부·마케팅부에 서류 배달 시작.

셋업 요약

FAQ

버그 고치는 법 — Claude Code에 말하면 된다

Pixel Office는 바이브코딩으로 만든 프로젝트다. 버그가 생겼을 때도 코드를 직접 수정할 필요가 없다. Claude Code에 증상을 설명하면 알아서 고친다.

▼ 왼쪽 아래 “오늘의 현황”이 안 나올 때

▼ 직원을 클릭해도 프로필이 안 나올 때

직원을 클릭해도 프로필이 표시 안 됩니다

▼ 쇼핑 로직이 안 될 때

쇼핑 로직이 안 됩니다

▼ 그 외 자주 발생하는 버그

소스 리스트

• Phaser.js
• Chokidar
• Ollama
• Google Stitch
• Claude Code

라이선스

직접 써보는 건 완전 무료. 회사 서비스로 쓰고 싶다면 연락주세요.

회원등록(무료)으로 한정 AI 최신뉴스 뉴스레터 받기 →

질문이나 Pixel Office 도입 상담은 Threads DM으로 연락주세요.

저자: VibeCoding Tailor / 운영:  shuntailor.net