The Origin · 시작점
Generative Hours
코드로 자라나는 풍경들
13 관60 작품
흐름과 생명, 빛과 형태, 노이즈와 시공간, 거울과 글자, 작은 것들의 모험, 그리고 시간의 스펙터클까지 — 열세 개의 전시관을 거니는 가장 넓은 전시. 세 전시의 출발점이 된 작업입니다.
왜 다른가
바라보는 영상이 아니라,
만지는 살아있는 그림
대부분의 미디어 아트는 완성되어 재생되는 영상입니다. 이 전시들은 다릅니다 — 규칙만 심어두고, 화면은 매 순간 새로 태어납니다. 정지 버튼도, 반복 재생도 없습니다.
01
생성적이고 살아있다
Generative & Alive
파도는 파티클로 모이고, 안개는 노이즈로 피어오르고, 무늬는 스스로 번져 나갑니다. 매 프레임이 실시간으로 계산되어, 어떤 화면도 두 번 같지 않습니다.
02
만질 수 있다
Touch · Blow · Tilt · Gesture
터치와 마우스는 물론, 마이크 소리, 카메라 손 인식, 기기 자이로까지 입력이 됩니다. 권한을 거부해도 모든 작품은 부드러운 자동 움직임으로 그대로 동작합니다. 소리는 오음계 Web Audio 엔진이 우리 가락으로 울립니다.
03
Claude로 설계하고 검증했다
Design-first · Contract-based
화면을 만들어 눈으로 고치는 대신, 설계를 먼저 확정하고 작품 사이의 인터페이스를 계약으로 못 박았습니다. 여러 AI 에이전트가 병렬로 짓고, 마지막에 전 작품을 자동 검증했습니다.
세 개의 전시
25개의 관, 108점의 작품
하나의 흐름 속에서 자란 세 개의 전시. 각 전시는 여러 개의 관으로 나뉘고, 관마다 만질 수 있는 작품이 걸려 있습니다. 카드를 눌러 실제 전시장으로 입장하세요.
Old Masters · 다시 그린 명화
Masterpieces Reborn
다시 살아나는 걸작들
4 관16 작품
호쿠사이의 파도에서 안견의 도원경까지, 세계 걸작 열여섯 점이 코드로 다시 태어납니다. 입자가 모여 파도가 되고, 등불이 어둠을 밝히고, 먹이 번지고, 오려낸 황소가 무대에 오릅니다.
Korean Aesthetics · 한국의 결
결 · GYEOL
한국적 미감을 코드로 다시 빚다
8 관32 작품
물결, 나뭇결, 숨결, 비단결 — 자연이 스스로 새기는 무늬를 코드로 다시 빚었습니다. 설계 먼저, 병렬 제작, 전 작품 자동 검증으로 약 세 시간 만에 지어 올린 여덟 개의 관.
Canvas 뒤의 코드
무늬를 그리지 않고,
무늬가 생겨나는 규칙을 심다
호랑이 무늬는 Gray-Scott 반응확산으로, 학 무리는 Boids로, 매듭은 Verlet 물리로, 산수의 안개는 Perlin 노이즈로 자라났습니다. 결·GYEOL 여덟 관의 핵심 알고리즘입니다.
| 관 · Wing | 주제 · Theme | 핵심 알고리즘 · Algorithm |
|---|---|---|
| 묵향墨 | 수묵의 물성 | 유체 확산 · L-system |
| 오방五方 | 색과 문양 | 파라메트릭 문양 · 파티클 진법 |
| 훈민訓民 | 글자의 기하학 | 글자 파티클 조합 |
| 여백餘白 | 비움의 미학 | 회전체 · 균열 성장 |
| 조각보 | 우연의 기하학 | BSP 분할 · Verlet 로프 |
| 풍류風流 | 소리의 형상 | 온셋 감지 · 마르코프 가락 |
| 민화民畫 | 다시 그린 옛 그림 | 반응확산 · Boids · WebGL 셰이더 |
| 세시歲時 | 시간을 새기다 | 절기 · 음력 위상 계산 |
How this was made
사람의 손이 아니라,
설계와 계약과 검증으로
먼저 만들어 보고 눈으로 고치는 대신, 순서를 뒤집었습니다. 설계를 확정하고, 작품 사이 인터페이스를 계약으로 못 박은 뒤, 여덟 개 관을 동시에 짓고, 마지막에 전 작품을 자동 검증했습니다. 결·GYEOL의 기록입니다.
STEP 01
브레인스토밍 문답
목적·컨셉·규모·인터랙션·배포를 여섯 개의 선택형 질문으로 확정.
STEP 02
설계 스펙 고정
답변이 곧바로 설계 문서가 되어 이후 모든 태스크의 근거로 승인·고정.
STEP 03
병렬 제작
파일럿 한 점(발묵)으로 모듈 계약을 검증한 뒤, 여덟 에이전트가 서른한 점을 동시 제작.
STEP 04
전수 검증 · 배포
32작품 자동 셀프테스트 → 품질 게이트 85점 통과 → S3 + CloudFront 배포.
≈ 3시간
제작→배포
8 에이전트
병렬 제작
32 / 32
자동 검증 통과
≥ 85점
품질 게이트
기술 스택
빌드 도구 없는 바닐라 웹,
계약으로 묶인 서른두 점
번들러도 컴파일 단계도 없습니다. 방문자의 브라우저가 곧 실행 환경이 되고, 작품은 필요한 순간에야 지연 로딩됩니다.
{ }
Zero-build 바닐라 ES 모듈
번들러 없이 브라우저가 모듈을 그대로 읽고, 각 작품은 지연 로딩됩니다.
↺
작품 모듈 계약
모든 작품은 init·frame·pointer·resize·dispose 다섯 함수만 약속. RAF 루프는 main.js가 소유합니다.
♪
오음계 Web Audio
별도 엔진 없이 오음(五音) 기반 사운드 — 어떤 상호작용도 우리 가락 안에서 울립니다.
◐
모두를 위한 폴백
마이크·카메라·자이로 권한을 거부해도 부드러운 자동 움직임으로 모든 작품이 그대로 동작합니다.
// 모든 작품이 지키는 계약 (js/works/*.js) export default { init(ctx) { /* 캔버스·상태 준비 — ctx: 캔버스, 크기, 오디오, 센서 */ }, frame(t, dt) { /* 매 프레임 그린다 — RAF 루프는 main.js가 소유 */ }, pointer(e) { /* 터치·마우스 입력 */ }, resize(w, h) { /* 뷰포트 변화 대응 */ }, dispose() { /* 떠날 때 타이머·리스너·GPU 자원 회수 */ }, };