이 전시는 어떻게
만들어졌나THE MAKING OF 결 · GYEOL

01개요

결 · GYEOL은 물결, 나뭇결, 숨결, 비단결 — 자연이 스스로 새기는 무늬를 코드로 다시 빚은 인터랙티브 미디어 아트 전시입니다. 여덟 개의 관, 서른두 점의 작품. 모두 만지고, 불고, 기울이고, 손짓해 볼 수 있습니다.

이 전시는 Generative Hours라는 앞선 작업에서 출발했습니다. 열한 개 관에 마흔여섯 점의 작품을 담은 그 사이트는 Claude와의 이른바 바이브 코딩만으로 사흘이 걸렸다고 합니다. 출발점의 물음은 단순했습니다 — 더 빠르게, 그리고 더 훌륭하게 만들 수 있는가.

답은 "무엇을 만들까"를 먼저 정하고, "어떻게 만들까"의 규칙을 고정한 뒤, 그 규칙 위에서 여러 제작 주체가 동시에 손을 대는 방식이었습니다. 아래는 그 과정의 기록입니다.

02다른 접근

참고한 사이트는 화면을 만들어 보고, 눈으로 확인하고, 어긋난 곳을 고치는 반복으로 자라났습니다. 빠르고 직관적이지만, 작품이 늘수록 서로의 규칙이 조금씩 어긋나고 확인의 부담이 쌓입니다.

결 · GYEOL은 순서를 뒤집었습니다. 먼저 설계를 확정하고, 작품 사이의 인터페이스를 계약으로 못 박은 뒤, 그 계약 위에서 여덟 개 관을 동시에 짓고, 마지막에 서른두 점을 전수 자동 검증했습니다.

서른두 점 가운데 한 점(발묵)은 작품 모듈 계약을 검증하기 위한 파일럿으로 가장 먼저 지었습니다. 그 한 점으로 계약이 옳다는 것을 확인한 뒤, 나머지 서른한 점을 여덟 에이전트가 병렬로 지어 올렸습니다.

과정을 여덟 걸음으로

① 브레인스토밍 스킬로 요구사항 문답(질문 여섯 개) → ② 설계 스펙 문서 승인 → ③ 스무 개 태스크의 구현 계획 수립(작품별 알고리즘까지 명세) → ④ 코어 여덟 개 태스크를 순차 진행하며 각 태스크마다 구현 → 전문 리뷰어 검증 → 결함 즉시 수정(카메라 스트림 누수, 포인터 리스너 누수를 발견해 바로 고침) → ⑤ 여덟 개 관, 서른한 점의 작품을 여덟 개의 AI 에이전트가 병렬로 동시 제작 → ⑥ 서른두 작품 전수 자동 셀프테스트(작품마다 콘솔 에러 · 빈 캔버스 · 프레임 비용 검사) → ⑦ 품질 리뷰 게이트(85점 이상 통과) → ⑧ S3 + CloudFront 배포.

03실제로 오간 말

이 전시를 시작하고 결정지은 것은 아래의 몇 마디였습니다. 사람의 발화는 그대로 옮기고, 그 사이사이에서 무엇이 자동으로 이루어졌는지 주석으로 덧붙였습니다.

04기술 노트

전시장 전체는 빌드 도구가 없는 바닐라 ES 모듈로 되어 있습니다. 번들러도, 컴파일 단계도 없이 브라우저가 모듈을 그대로 읽습니다. 각 작품은 필요한 순간에야 지연 로딩됩니다.

서른두 점이 한 몸처럼 움직이는 비결은 작품 모듈 계약입니다. 모든 작품은 아래 다섯 함수만 약속하면 됩니다. 나머지 — 렌더 루프, 리사이즈, 자원 회수 — 는 main.js가 도맡습니다.

// 모든 작품이 지키는 계약 (js/works/*.js)
export default {
  init(ctx)    { /* 캔버스·상태 준비. ctx: 캔버스, 크기, 오디오, 센서 */ },
  frame(t, dt) { /* 매 프레임 그린다. RAF 루프는 main.js가 소유 */ },
  pointer(e)  { /* 터치·마우스 입력을 받는다 */ },
  resize(w, h) { /* 뷰포트 변화에 대응한다 */ },
  dispose()   { /* 작품을 떠날 때 모든 자원을 되돌린다 */ },
};

루프를 main.js 한 곳이 소유하므로, 작품을 바꿀 때 이전 작품의 타이머 · 리스너 · GPU 자원이 dispose()에서 남김없이 회수됩니다. 검증 단계에서 카메라 스트림과 포인터 리스너가 새는 것을 잡아 이 계약으로 막았습니다.

모두를 위한 폴백

마이크 · 카메라 · 자이로 권한을 거부해도 모든 작품은 그대로 동작합니다. 센서 입력이 없으면 부드러운 자동 움직임으로 대신하는 폴백이 작품마다 내장되어 있습니다. 소리는 별도 엔진 없이 오음계(五音) Web Audio 엔진이 담당해, 어떤 상호작용도 우리 가락 안에서 울립니다.

관별 핵심 알고리즘

호랑이 무늬는 Gray-Scott 반응확산으로, 학 무리는 Boids로, 매듭은 Verlet 물리로, 산수의 안개는 Perlin 노이즈로 자라났습니다. 무늬를 그리는 대신, 무늬가 스스로 생겨나는 규칙을 심었습니다.