a
b
o
u
t
p
r
o
j
e
c
t
s
e
v
e
n
t
s
p
e
o
p
l
e
a
p
p
l
i
c
a
n
t
-
i
n
f
o
r
m
a
t
i
o
n
l
i
v
i
n
g
-
g
e
o
m
e
t
r
y
-
2
0
2
6

Claude Code로 만드는 인터랙티브 아트 사례, 〈반포자이즘〉의 12만 줄 멀티 디바이스 시스템

전시 〈Living Geometry 2026〉에 출품된 최정윤(Jeanyoon Choi)의 인터랙티브 웹 작품 〈반포자이즘〉은 약 12만 줄 규모의 멀티 디바이스 웹 시스템이다. 관람객의 핸드폰, 한 대의 미디어월(Mac Mini M4), 세 대의 PC, 한 대의 어드민이 Socket.IO로 동기화된다. 이 글은 그 시스템이 어떻게 Claude Code를 코딩 에이전트로 활용해 작가 한 사람의 작업으로 완성되었는지를 정리한다. 작품은 banpo-xism.vercel.app에서 직접 체험할 수 있고, 전시 현장은 영등포아트스퀘어(타임스퀘어 B2)에서 2026년 5월 1일부터 6월 28일까지 무료로 관람할 수 있다.

12만 줄 코드를 한 사람이 들고 가는 작업 방식

작가는 작품 레포의 루트에 CLAUDE.md라는 파일을 두고, Claude Code 세션을 시작할 때마다 docs/wiki/llm_wiki.md (2,239줄)를 먼저 읽도록 강제했다. wiki는 매 코드 변경마다 본문과 9번 섹션 changelog가 같은 커밋으로 갱신된다. 변경 항목에는 날짜와 git short hash가 함께 들어간다. 결과적으로 ‘프로젝트의 진짜 사양’은 코드도 README도 아닌 wiki에 누적된다. 새 세션의 첫 5분이 항상 ‘오늘 작업 전, 지금까지의 시스템을 다시 한 번 통째로 읽어 둠’이라는 의미가 된다.

그 위에 docs/overplan/<영역>/<MMDD>_<주제>.md 라는 일일 plan doc이 쌓인다. 0412_mw_worker_plan.md, 0418_fiber_redesign.md, 0420_session_mgmt.md, 0501_dimension_enter_camera_bump.md 같은 식이다. 작은 변경도 plan 먼저, 코드 다음, wiki 갱신 마지막이라는 세 박자가 강제된다. 일종의 wiki-driven development인데, 실용적으로는 ‘에이전트와 작가가 같은 사양서를 들고 다음 변경에 들어간다’는 일치성 보장 장치다.

권한 분담은 명확했다. 미학적 결정, 작품 제목과 흐름, 인터랙션의 의미는 작가가 결정했다. 컴포넌트 분해, 성능 예산 관리, 소켓 이벤트 시그니처, 무거운 알고리즘의 일차 구현에는 코딩 에이전트가 투입됐다. 작가는 다음 변경의 의도와 가드레일을 설명하고, 에이전트가 만든 결과를 측정 가능한 기준(60fps 유지, 9,025셀 worker 처리, 180ms 그리드 broadcast)으로 받아들이거나 거절했다.

잘 작동한 패턴들

‘읽고 나서 쓴다’를 코드에 박았다. CLAUDE.md에는 ‘NO CODE WITHOUT FULL UNDERSTANDING (ABSOLUTE)’라는 절대 규칙이 들어 있다. 새 기능 작성 전에 인접 형제 기능을 먼저 읽고, 동일 데이터 흐름이 다른 곳에서 어떻게 구현되어 있는지를 wiki와 코드에서 모두 확인한 뒤 본격 구현에 들어간다. 단일 변경이 다른 영역의 invariant를 깨지 않도록 하는 가장 단순한 방법이다.

‘예산을 숫자로 적어 둔다’를 강제했다. ‘부드럽게’ 같은 표현 대신 LAYOUT_BUDGET_MS=4, MIN_LAYOUT_INTERVAL_MS=50, EMIT_INTERVAL_MS=20, PRICE_GRID_STALENESS_MS=5000처럼 각 동작의 정량 기준이 wiki에 적혀 있다. 에이전트는 변경 후 같은 숫자로 회귀가 났는지 직접 확인한다.

scope를 보존하는 규칙을 절대화했다. CLAUDE.md의 ‘PRESERVE UNREQUESTED FUNCTIONALITY (ABSOLUTE)’는 ‘리팩터링 김에’ 다른 동작을 건드리는 것을 금지한다. 9만 줄 규모에서 가장 자주 일어나는 회귀 원인을 차단했다.

잘 안 된 시도들의 공개 기록

AI 엔지니어링이 모든 것을 해결하지는 못했다. wiki의 한 섹션은 ‘5 failed AI agent attempts (all reverted)’라는 제목으로, 미디어월의 성능 최적화에서 다섯 번 실패한 시도와 각 실패의 근본 원인을 모두 적어 둔다. reference equality 오해, 모듈 중복 인스턴스화, budget 메커니즘 자체의 파괴, voice 신호의 이중 적용, 성능과 변경 감지 사이의 근본적 모순. 결국 Web Worker로 9,025개의 동(洞)별 오버레이 계산을 분리한 구조가 정착했다.

이 공개 기록은 두 가지 의미가 있다. 첫째, AI 코딩 에이전트는 ‘되돌릴 수 있는 변경’을 빠르게 시도하는 데 강하지만, ‘시스템 전체의 invariant’를 처음부터 잡는 데는 약하다. 둘째, 실패를 같은 wiki에 그대로 기록해 두면 다음 세션의 에이전트가 같은 함정을 다시 파지 않는다. 일종의 ‘조직 학습’을 단일 작가의 단일 레포 안에서 구현한 셈이다.

2026년의 AI 엔지니어링이 인터랙티브 아트에 갖는 의미

통상 멀티 디바이스 인터랙티브 시스템 한 점은 코딩 인력 두세 명이 12개월에서 24개월에 걸쳐 만든다. 〈반포자이즘〉은 작가 단독으로 약 6개월에 완성한 12만 줄 규모의 시스템이다. 작품의 비평적 의도와 매체 구조는 작가가 정하고, 구현 과정의 일부를 에이전트와 나눈 사례다.

이 사례는 생성형 AI가 미디어아트 제작에서 어디까지 보조할 수 있는지를 보여준다. AI 엔지니어링이 작품의 관점이나 매체적 판단을 대신하지는 않지만, 여러 장치·사용자·동시성을 다루는 구현 비용을 낮추는 도구로 쓰일 수 있다는 점이 분명하게 드러난다.

본 전시에서 직접 확인할 수 있는 것

전시장에서는 본인 핸드폰으로 QR을 찍어 작품에 접속한다. 인스타그램식 수직 스크롤로 19×19 격자, 361개의 AI 생성 아파트를 통과하다가 광고를 누르면 음성, 가속도, 카메라, 자이로, 멀티 터치 같은 입력이 단계적으로 활성화된다. 이 입력은 미디어월의 매니폴드 변형에 반영되고, 다른 관람객의 핸드폰 입력도 같은 화면에 함께 반영된다.

방문 정보

전시 메인 페이지로 돌아가기

Claude Code in Interactive Art Practice, A Case Study of Banpo-Xism's 120K-Line Multi-Device System

Banpo-Xism, the multi-device web artwork by Jeanyoon Choi on view in Living Geometry 2026, is a roughly 120,000-line system. N visitor smartphones, one Mac Mini M4 media wall, three Intel PCs, and an admin console are coordinated in real time over Socket.IO. This article documents how the entire system was produced by a single artist, with Claude Code as the primary coding agent. The work runs at banpo-xism.vercel.app and on site at YDP Artsquare (Times Square B2F, Yeongdeungpo) from May 1 to June 28, 2026, free admission.

How a single artist holds 120,000 lines of code

A file called CLAUDE.md sits at the repository root and instructs every Claude Code session to begin by reading docs/wiki/llm_wiki.md, a 2,239-line architectural reference. The wiki is updated in the same commit as any non-trivial change, including a Section 9 changelog entry that carries a date and a git short hash. The result is that the real specification of the project lives in the wiki, not in the README and not in the code. The first five minutes of every session are always: re-read the system as it stands today.

On top of that wiki, dated planning notes accumulate in docs/overplan/<area>/<MMDD>_<topic>.md. Files such as 0412_mw_worker_plan.md, 0418_fiber_redesign.md, 0420_session_mgmt.md follow a strict three-step rhythm. Plan first, then code, then update the wiki. The setup is essentially wiki-driven development, and its practical effect is to keep the artist and the agent reading from the same specification before every change.

Authority is divided cleanly. Aesthetic decisions, the proposition about medium, the title and arc of the work, and the meaning of each interaction are the artist's alone. Component decomposition, performance budgets, socket event signatures, and first-pass implementations of heavy algorithms are the agent's. The artist describes the intent and the guardrails of the next change; the agent's output is then accepted or rejected against measurable criteria, such as a 60fps target, a 9,025-cell worker pass, or a 180ms grid broadcast.

Patterns that worked

Read before you write. CLAUDE.md carries an absolute rule: NO CODE WITHOUT FULL UNDERSTANDING. Before any new feature, sibling implementations of the same data flow are read in both the wiki and the code. This is the single cheapest way to keep one change from breaking the invariants of another area.

Write the budget down as a number. Words like “smooth” are replaced with LAYOUT_BUDGET_MS=4, MIN_LAYOUT_INTERVAL_MS=50, EMIT_INTERVAL_MS=20, PRICE_GRID_STALENESS_MS=5000. After every change, the same numbers are re-checked for regressions.

Preserve scope. PRESERVE UNREQUESTED FUNCTIONALITY is the second absolute rule. It bans the “while I'm in here” refactor that is the most common source of regression at this scale.

A public log of attempts that failed

AI engineering did not solve everything. One wiki section is titled “5 failed AI agent attempts (all reverted)” and lists each failed attempt to optimize the media wall pipeline together with its root cause: a misread on reference equality, a duplicated module instance, a budget mechanism that was itself broken, a voice signal applied twice, and a fundamental tension between performance and change detection. The eventual answer was to move the per-dong overlay computation for 9,025 buildings into a Web Worker.

Two takeaways. First, an AI coding agent is strong at trying small reversible changes quickly and weak at locking in the system-wide invariants from the start. Second, keeping failed attempts in the same wiki the next session reads stops the agent from digging the same hole twice. A single artist with a single repository ends up with something close to organizational learning.

What this case suggests for interactive art in 2026

A multi-device interactive system at this scale is conventionally a twelve to twenty-four month effort for a team of two or three engineers. Banpo-Xism is a 120,000-line system completed by a single artist in roughly six months. The proposition about medium (Multi-Device Web Artwork) and the critical intent stayed entirely with the artist; only the cost of implementation was shared with an agent.

The implication is straightforward. The scope and depth of work that one artist can credibly hold has expanded. AI engineering does not replace the proposition about medium. It lowers the cost of moving that proposition into a system that actually runs, to a level that one person can carry.

Where to see it

On site, you scan a QR with your own phone and enter an Instagram-like vertical scroll through a 19 by 19 grid of 361 AI-generated apartments. Tapping an advertisement activates a new modality (voice, accelerometer, camera, gyroscope, multi-touch) and deforms the manifold on the media wall. Other visitors' phones deform the same manifold at the same time. The artist's phrase, several devices coupled like a single differential equation, becomes literal.

Visit

Back to exhibition main page

Claude Code로 만드는 인터랙티브 아트 사례, 〈반포자이즘〉의 12만 줄 멀티 디바이스 시스템

Claude Code로 만드는 인터랙티브 아트 사례, 〈반포자이즘〉의 12만 줄 멀티 디바이스 시스템

전시 〈Living Geometry 2026〉에 출품된 최정윤(Jeanyoon Choi)의 인터랙티브 웹 작품 〈반포자이즘〉은 약 12만 줄 규모의 멀티 디바이스 웹 시스템이다. 관람객의 핸드폰, 한 대의 미디어월(Mac Mini M4), 세 대의 PC, 한 대의 어드민이 Socket.IO로 동기화된다. 이 글은 그 시스템이 어떻게 Claude Code를 코딩 에이전트로 활용해 작가 한 사람의 작업으로 완성되었는지를 정리한다. 작품은 banpo-xism.vercel.app에서 직접 체험할 수 있고, 전시 현장은 영등포아트스퀘어(타임스퀘어 B2)에서 2026년 5월 1일부터 6월 28일까지 무료로 관람할 수 있다.


12만 줄 코드를 한 사람이 들고 가는 작업 방식

작가는 작품 레포의 루트에 CLAUDE.md라는 파일을 두고, Claude Code 세션을 시작할 때마다 docs/wiki/llm_wiki.md (2,239줄)를 먼저 읽도록 강제했다. wiki는 매 코드 변경마다 본문과 9번 섹션 changelog가 같은 커밋으로 갱신된다. 변경 항목에는 날짜와 git short hash가 함께 들어간다. 결과적으로 ‘프로젝트의 진짜 사양’은 코드도 README도 아닌 wiki에 누적된다. 새 세션의 첫 5분이 항상 ‘오늘 작업 전, 지금까지의 시스템을 다시 한 번 통째로 읽어 둠’이라는 의미가 된다.

그 위에 docs/overplan/<영역>/<MMDD>_<주제>.md 라는 일일 plan doc이 쌓인다. 0412_mw_worker_plan.md, 0418_fiber_redesign.md, 0420_session_mgmt.md, 0501_dimension_enter_camera_bump.md 같은 식이다. 작은 변경도 plan 먼저, 코드 다음, wiki 갱신 마지막이라는 세 박자가 강제된다. 일종의 wiki-driven development인데, 실용적으로는 ‘에이전트와 작가가 같은 사양서를 들고 다음 변경에 들어간다’는 일치성 보장 장치다.

권한 분담은 명확했다. 미학적 결정, 작품 제목과 흐름, 인터랙션의 의미는 작가가 결정했다. 컴포넌트 분해, 성능 예산 관리, 소켓 이벤트 시그니처, 무거운 알고리즘의 일차 구현에는 코딩 에이전트가 투입됐다. 작가는 다음 변경의 의도와 가드레일을 설명하고, 에이전트가 만든 결과를 측정 가능한 기준(60fps 유지, 9,025셀 worker 처리, 180ms 그리드 broadcast)으로 받아들이거나 거절했다.


잘 작동한 패턴들

‘읽고 나서 쓴다’를 코드에 박았다. CLAUDE.md에는 ‘NO CODE WITHOUT FULL UNDERSTANDING (ABSOLUTE)’라는 절대 규칙이 들어 있다. 새 기능 작성 전에 인접 형제 기능을 먼저 읽고, 동일 데이터 흐름이 다른 곳에서 어떻게 구현되어 있는지를 wiki와 코드에서 모두 확인한 뒤 본격 구현에 들어간다. 단일 변경이 다른 영역의 invariant를 깨지 않도록 하는 가장 단순한 방법이다.

‘예산을 숫자로 적어 둔다’를 강제했다. ‘부드럽게’ 같은 표현 대신 LAYOUT_BUDGET_MS=4, MIN_LAYOUT_INTERVAL_MS=50, EMIT_INTERVAL_MS=20, PRICE_GRID_STALENESS_MS=5000처럼 각 동작의 정량 기준이 wiki에 적혀 있다. 에이전트는 변경 후 같은 숫자로 회귀가 났는지 직접 확인한다.

scope를 보존하는 규칙을 절대화했다. CLAUDE.md의 ‘PRESERVE UNREQUESTED FUNCTIONALITY (ABSOLUTE)’는 ‘리팩터링 김에’ 다른 동작을 건드리는 것을 금지한다. 9만 줄 규모에서 가장 자주 일어나는 회귀 원인을 차단했다.


잘 안 된 시도들의 공개 기록

AI 엔지니어링이 모든 것을 해결하지는 못했다. wiki의 한 섹션은 ‘5 failed AI agent attempts (all reverted)’라는 제목으로, 미디어월의 성능 최적화에서 다섯 번 실패한 시도와 각 실패의 근본 원인을 모두 적어 둔다. reference equality 오해, 모듈 중복 인스턴스화, budget 메커니즘 자체의 파괴, voice 신호의 이중 적용, 성능과 변경 감지 사이의 근본적 모순. 결국 Web Worker로 9,025개의 동(洞)별 오버레이 계산을 분리한 구조가 정착했다.

이 공개 기록은 두 가지 의미가 있다. 첫째, AI 코딩 에이전트는 ‘되돌릴 수 있는 변경’을 빠르게 시도하는 데 강하지만, ‘시스템 전체의 invariant’를 처음부터 잡는 데는 약하다. 둘째, 실패를 같은 wiki에 그대로 기록해 두면 다음 세션의 에이전트가 같은 함정을 다시 파지 않는다. 일종의 ‘조직 학습’을 단일 작가의 단일 레포 안에서 구현한 셈이다.


2026년의 AI 엔지니어링이 인터랙티브 아트에 갖는 의미

통상 멀티 디바이스 인터랙티브 시스템 한 점은 코딩 인력 두세 명이 12개월에서 24개월에 걸쳐 만든다. 〈반포자이즘〉은 작가 단독으로 약 6개월에 완성한 12만 줄 규모의 시스템이다. 작품의 비평적 의도와 매체 구조는 작가가 정하고, 구현 과정의 일부를 에이전트와 나눈 사례다.

이 사례는 생성형 AI가 미디어아트 제작에서 어디까지 보조할 수 있는지를 보여준다. AI 엔지니어링이 작품의 관점이나 매체적 판단을 대신하지는 않지만, 여러 장치·사용자·동시성을 다루는 구현 비용을 낮추는 도구로 쓰일 수 있다는 점이 분명하게 드러난다.


본 전시에서 직접 확인할 수 있는 것

전시장에서는 본인 핸드폰으로 QR을 찍어 작품에 접속한다. 인스타그램식 수직 스크롤로 19×19 격자, 361개의 AI 생성 아파트를 통과하다가 광고를 누르면 음성, 가속도, 카메라, 자이로, 멀티 터치 같은 입력이 단계적으로 활성화된다. 이 입력은 미디어월의 매니폴드 변형에 반영되고, 다른 관람객의 핸드폰 입력도 같은 화면에 함께 반영된다.


전시 출품작


참여 작가


방문 정보

기간 :: 2026년 5월 1일 – 6월 28일 (월–일 매일 운영)
시간 :: 매일 10:00 – 18:00 (입장 마감 17:45)
관람료 :: 무료, 예약 불필요
장소 :: 영등포아트스퀘어 (서울 영등포구 영중로 15 타임스퀘어 B2F, Gate 14)
교통 :: 1호선·KTX 영등포역 도보 3분
준비 사항 :: 〈반포자이즘〉 체험을 위해 본인 핸드폰 + 이어폰(권장) 지참
원격 체험 :: banpo-xism.vercel.app 에서 단일 디바이스 모드로 일부 인터랙션 시연 가능

전시 개요

Living Geometry 2026 〈생동 기하학〉은 KAIST 산업디자인학과 경험디자인연구실(XD Lab)이 기획·개발한 미디어아트 특별전입니다. 영등포의 가시적 도시 풍경과 비가시적 데이터, 그 이면의 정서적 층위를 ‘기하학적 언어’로 다시 엮어, 도시를 정지된 콘크리트의 집합물 너머의 ‘맥동하는 유기체’로 재정의합니다. 단채널 영상·인터랙티브 설치·다중 기기 웹 작품을 포함한 7개 작품을 선보입니다.

  • 전시명 :: Living Geometry 2026 · 생동 기하학
  • 기간 :: 2026.5.1 – 6.28
  • 시간 :: 매일 10:00–18:00 (입장 마감 17:45)
  • 장소 :: 영등포아트스퀘어 · 서울특별시 영등포구 영중로 15 (타임스퀘어) B2F
  • 관람료 :: 관람료 무료
  • 기획·개발 :: KAIST 산업디자인학과 경험디자인연구실 (XD Lab)
  • 주최·주관 :: 주최 영등포구 · 주관 영등포아트스퀘어
  • 참여 작가 :: 강이연 (Yiyun Kang) · 최정윤 (Jeanyoon Choi) · 황인태 (Intae Hwang) · 서민혁 (Minhyeok Seo)
  • 출품작 :: 〈배니싱 2.0〉(Vanishing 2.0) · 〈테크노스피어〉(Technosphere) · 〈사라진 후에〉(Post-Vanishing) · 〈떨어지지 않는 풍경〉(City’scape + Tied) · 〈골디락스〉(Goldilocks) · 〈베슬〉(Vessel) · 〈∫〉
  • 연구실 :: XD Lab · ID KAIST · KAIST

영등포아트스퀘어 · 서울 영등포구 영중로 15 타임스퀘어 B2F

2026년 5월 1일 – 6월 28일 · 관람료 무료

기획·개발 KAIST 경험디자인연구실(XD Lab)

Living Geometry 2026 · XD Lab · YDP Artsquare · KAIST