들어가며 — 2026년 5월, 크리에이티브 코딩은 "AI를 두 번째 색"으로 다룬다

2020년대 초까지 크리에이티브 코딩은 "Processing이나 p5.js 한 줄로 그림 그리기"의 영역이었다. 2026년 5월 현재, 풍경은 완전히 바뀌었다. 디퓨전 모델은 스케치 도구의 일부가 됐고, ml5 Next로 한 줄에 실시간 포즈 추정을 끼우고, Hydra 라이브 코딩에 transformers.js로 추출한 감정 분류기를 붙이는 일이 흔해졌다. 동시에 옛 도구들의 위치도 더 또렷해졌다 — Processing 4는 교육과 데스크톱 프린트에서, p5.js는 웹/NFT에서, openFrameworks는 인스톨레이션에서, TouchDesigner와 Notch는 라이브 이벤트에서, Three.js와 R3F는 웹 3D 산업 표준으로 굳어졌다.

이 글은 마케팅 매트릭스가 아니라 "지금 무엇이 어디서 만들어지는가"를 정직하게 짚는다. Art Blocks와 fx(hash) 제너러티브 NFT, Rhizomatiks와 teamLab의 일본 인스톨 씬, 랜덤웍스와 백남준아트센터의 한국 미디어 아트, Coding Train과 Genuary 같은 커뮤니티까지 한 글에 담는다.

크리에이티브 코딩 2026 — 큰 그림으로 보는 8개 트랙

먼저 큰 그림이다. 2026년 5월 기준 크리에이티브 코딩 생태계는 8개 트랙으로 나뉜다.

1. **기초 라이브러리(Foundation)**: Processing 4, p5.js 2.0, openFrameworks, Cinder, OPENRNDR, Nannou

2. **라이브 코딩(Live coding)**: Hydra, TidalCycles + SuperCollider, Sonic Pi, Strudel, Punctual

3. **노드 기반(Node-based)**: TouchDesigner, vvvv gamma, Notch Builder, Cables.gl

4. **웹 3D(Web 3D)**: Three.js, Tres.js, React Three Fiber, Babylon.js, A-Frame, PlayCanvas

5. **제너러티브 NFT 플랫폼**: Art Blocks, fx(hash), Highlight, Bright Moments

6. **AI 통합**: ml5 Next, Magenta.js, transformers.js, TensorFlow.js + p5, ONNX Runtime Web

7. **라이브 퍼포먼스(VJ/맵핑)**: Resolume Arena, MadMapper, VDMX, Coge

8. **MIDI/사운드/물리 IO**: Max/MSP, Pure Data, Ableton Live + M4L, WLED, PixelBlaze

각 트랙은 서로 다른 청중과 다른 출력 매체를 가진다. p5.js로 만든 작품이 그대로 Art Blocks에 올라가고, TouchDesigner 패치는 광고/이벤트 무대로 가고, Hydra 코드는 클럽 VJ 셋이 된다. 아래부터 한 트랙씩 본다.

Processing 4 — 데스크톱 크리에이티브 코딩의 정전(正典)

**Processing**은 2001년 Ben Fry와 Casey Reas가 MIT Media Lab에서 시작한 Java 기반 IDE + 라이브러리다. 2026년 5월 시점에서는 4.x가 안정 라인이고, 5.x 알파가 공개되어 있다. 자바 17 LTS 기반으로 마이그레이션됐고, Macbook M-시리즈 ARM 빌드, 다크 모드, 새로운 PDF 내보내기가 4.x에서 들어왔다.

전형적인 Processing 4 스케치는 다음과 같다.

PVector[] dots = new PVector[400];

void setup() {

size(800, 800, P2D);

noStroke();

for (int i = 0; i < dots.length; i++) {

dots[i] = new PVector(random(width), random(height));

}

}

void draw() {

background(20);

for (PVector d : dots) {

float n = noise(d.x * 0.005, d.y * 0.005, frameCount * 0.01);

fill(255, 80 + n * 175);

ellipse(d.x, d.y, 4, 4);

d.add(cos(n * TAU), sin(n * TAU));

if (d.x < 0 || d.x > width) d.x = random(width);

if (d.y < 0 || d.y > height) d.y = random(height);

}

}

Processing 4가 강한 곳은 **데스크톱 인쇄(高 DPI), 펜 플로터(AxiDraw, iDraw)와의 통합, OpenGL/P3D 안정성**이다. 자바 라이브러리(PostgreSQL JDBC, ITextPDF 등)와 직접 연결되는 것도 크다. Genuary와 Plottertober에서 가장 많이 쓰이는 도구이기도 하다.

Python을 선호한다면 **Processing.py (Python Mode)**가 있고, 더 가벼운 워크플로를 원한다면 **Py5**(Processing 4 위의 Python 바인딩)가 2026년에 자리를 잡았다. Py5는 Jupyter 노트북에서 그대로 돌릴 수 있어 데이터 시각화 + 제너러티브 아트 워크플로에 잘 맞는다.

p5.js 2.0 — 웹 우선의 Processing 재해석

**p5.js**는 Lauren McCarthy가 2013년 시작한 Processing의 자바스크립트 포트다. 2026년 5월 기준 **p5.js 2.0**이 메이저 릴리스로 안착했다. 주요 변화는 다음과 같다.

- **WebGL2 기본화**: 셰이더 / 인스턴싱 / 텍스처 어레이가 1급 시민

- **ESM 우선 + tree-shakable**: 빌드 시 200KB 이하로 줄일 수 있음

- **Accessibility 기본 내장**: 캔버스에 ARIA, 텍스트 대체 자동 생성

- **타입스크립트 정의 강화**: 자동완성 / 리팩토링 안정

기본 p5 스케치는 처음 본 사람도 즉시 이해한다.

let particles = []

function setup() {

createCanvas(windowWidth, windowHeight)

for (let i = 0; i < 600; i++) {

particles.push({ x: random(width), y: random(height) })

}

noStroke()

}

function draw() {

background(10, 30)

for (const p of particles) {

const n = noise(p.x * 0.003, p.y * 0.003, frameCount * 0.005)

fill(200 + n * 55, 220, 255, 180)

circle(p.x, p.y, 3)

p.x += cos(n * TAU) * 1.2

p.y += sin(n * TAU) * 1.2

if (p.x < 0) p.x = width

if (p.x > width) p.x = 0

if (p.y < 0) p.y = height

if (p.y > height) p.y = 0

}

}

p5.js는 **fx(hash), Art Blocks Engine, OpenProcessing**에서 그대로 돌아간다는 점이 가장 큰 매력이다. 한 파일 스케치가 곧 NFT가 되는 워크플로다. p5.js 2.0의 **`p5.strands` 친화 셰이더 DSL**과 **p5.sound 2**의 Web Audio API 정비도 의미 있는 업데이트다.

openFrameworks — C++ 인스톨레이션의 작업 도구

**openFrameworks**(OF)는 2005년 Zach Lieberman, Theo Watson, Arturo Castro 등이 만든 C++ 크리에이티브 코딩 툴킷이다. 2026년 5월 기준 **0.12.x**가 안정 릴리스이며, Apple Silicon 네이티브, oF/iOS 17/visionOS 빌드, Vulkan 렌더러(`ofxVk`)가 들어왔다.

대형 인터랙티브 인스톨레이션, 다중 화면, 카메라/센서 입출력이 중요한 영역에서 OF는 여전히 1등이다. **ofxAddon 생태계**가 두텁다 — ofxOpenCv, ofxKinect, ofxOsc, ofxMidi, ofxAssimp, ofxImGui 등이 사실상 표준이다.

#include "ofMain.h"

class ofApp : public ofBaseApp {

public:

std::vector<ofVec2f> pts;

void setup() override {

ofBackground(20);

for (int i = 0; i < 500; i++) pts.emplace_back(ofRandomWidth(), ofRandomHeight());

ofSetCircleResolution(20);

}

void update() override {

float t = ofGetElapsedTimef();

for (auto &p : pts) {

float n = ofNoise(p.x * 0.005f, p.y * 0.005f, t * 0.2f);

p += ofVec2f(cosf(n * TWO_PI), sinf(n * TWO_PI));

if (p.x < 0 || p.x > ofGetWidth()) p.x = ofRandomWidth();

if (p.y < 0 || p.y > ofGetHeight()) p.y = ofRandomHeight();

}

}

void draw() override {

ofSetColor(255, 30);

for (const auto &p : pts) ofDrawCircle(p, 2.0f);

}

};

대안 C++ 프레임워크로는 **Cinder**(libcinder)가 있다. 라이선스가 더 상업 친화적(BSD-2)이고, 모던 C++ 스타일과 결합이 매끄럽다. Black Rock City 인스톨레이션, Apple 인터널 데모, 음악 공연 비주얼 등에서 Cinder 트랙도 견고하다.

OPENRNDR — Kotlin/JVM 기반의 모던 크리에이티브 코딩

**OPENRNDR**은 네덜란드 스튜디오 RNDR이 만든 Kotlin 기반 크리에이티브 코딩 프레임워크다. JVM의 안정성, Kotlin DSL의 표현력, OpenGL 4.3 렌더러를 결합했다. 2026년 5월 기준 **0.4.x**가 안정 라인이고, IntelliJ IDEA에서 그대로 디버깅된다.

fun main() = application {

configure { width = 900; height = 900 }

program {

val pts = List(800) { Vector2(Math.random() * width, Math.random() * height) }.toMutableList()

extend {

drawer.clear(ColorRGBa.BLACK.shade(0.95))

drawer.fill = ColorRGBa.WHITE.opacify(0.5)

drawer.stroke = null

pts.forEachIndexed { i, p ->

val n = simplex(42, p.x * 0.005, p.y * 0.005, seconds * 0.3)

pts[i] = Vector2(

(p.x + Math.cos(n * Math.PI * 2)).mod(width.toDouble()),

(p.y + Math.sin(n * Math.PI * 2)).mod(height.toDouble())

)

drawer.circle(pts[i], 2.0)

}

}

}

}

OPENRNDR은 데이터 시각화 / 인포그래픽 분야에서 강하다. PDF, SVG, PNG 시리즈 출력이 깔끔하고, Kotlin Coroutines 위에서 비동기 합성을 자연스럽게 한다.

Nannou — Rust로 짜는 크리에이티브 코딩

**Nannou**는 Rust 생태계의 크리에이티브 코딩 프레임워크다. Tom Bevan과 Mitchell Nordine이 시작했고, wgpu 백엔드(Vulkan/Metal/DX12) 위에 올려 데스크톱과 웹(Wasm) 모두를 노린다. 2026년 5월 기준 **0.20.x**가 메인 라인이고, Bevy/iyes 같은 게임엔진과 친화 모듈이 늘었다.

use nannou::prelude::*;

struct Model { pts: Vec<Vec2> }

fn model(app: &App) -> Model {

app.new_window().size(900, 900).view(view).build().unwrap();

let pts = (0..800).map(|_| pt2(random_range(-450.0, 450.0), random_range(-450.0, 450.0))).collect();

Model { pts }

}

fn update(_app: &App, m: &mut Model, _u: Update) {

for p in m.pts.iter_mut() {

let n = (p.x * 0.01).sin() + (p.y * 0.01).cos();

*p += vec2(n.cos(), n.sin());

}

}

fn view(app: &App, m: &Model, frame: Frame) {

let d = app.draw();

d.background().color(rgba(0.05, 0.05, 0.07, 1.0));

for p in &m.pts { d.ellipse().xy(*p).w_h(2.0, 2.0).color(WHITE); }

d.to_frame(app, &frame).unwrap();

}

fn main() { nannou::app(model).update(update).run(); }

Rust 컴파일러의 까다로움이 진입 장벽이지만, 그 대가로 **컴파일 후 단일 바이너리, 메모리 안전, wgpu 위의 셰이더 작성**을 얻는다. 음악 공연 비주얼, 임베디드 LED 컨트롤, 펜 플로터 워크플로에서 Rust 코드가 늘고 있다.

Hydra — Olivia Jack의 라이브 코딩 비주얼

**Hydra**는 Olivia Jack이 만든 자바스크립트 라이브 코딩 비주얼 환경이다. 브라우저에서 즉시 실행되고, GLSL 셰이더 그래프를 함수 체이닝으로 짠다. 2026년 5월 기준 라이브 코딩 / 알고레이브 씬의 사실상 표준이다.

osc(20, 0.1, 1.2)

.color(0.9, 0.4, 0.8)

.rotate(0.1, 0.05)

.modulate(noise(3, 0.2))

.kaleid(6)

.out()

여섯 줄로 키네틱 만다라가 나온다. Hydra는 **`s0`, `s1`, `s2`, `s3` 입력 채널**로 카메라, 화면, 비디오 파일을 받고, **`o0`~`o3` 출력 버퍼**로 멀티 패스를 짠다. WebRTC 채팅 큐브로 다른 라이브 코더와 영상 합성을 주고받는 **Hydra Sync(`hydra-synth` 노드)**가 클럽 셋의 표준 기법이 됐다.

대안 라이브 코딩 비주얼로는 **Punctual**(David Ogborn, Haskell 기반 DSL)과 **Cyril**(Processing 기반 DSL)이 있고, 노드 기반 라이브 코딩으로는 **vvvv gamma**(아래 별도 섹션)가 있다.

TidalCycles + SuperCollider — 라이브 코딩 사운드의 양대 표준

**TidalCycles**는 Alex McLean이 만든 Haskell DSL로 패턴 기반 라이브 코딩 사운드 시스템이다. 백엔드로는 **SuperCollider**(SC3, James McCartney)와 **SuperDirt** 신디 라이브러리를 쓴다. 2026년 기준 알고레이브 사운드 트랙의 표준 도구다.

d1 $ jux rev $ every 4 (# speed "1.5")

$ n "bd*4 sn bd [sn cp]" # gain "0.9 0.7 0.8 0.6"

room 0.4 # delay 0.3 # delaytime "0.125"

브라우저로 더 쉽게 가고 싶다면 **Strudel**(Tidal in JavaScript, Felix Roos)이 있다. WebAudio API 위에서 Tidal 문법을 그대로 쓰고 Hydra와 결합한 라이브 비주얼이 곧바로 만들어진다. **Sonic Pi**(Sam Aaron, Ruby DSL)는 교육 + 학교 라이브 코딩 분야에서 강하다.

Tidal-Hydra-Strudel 묶음은 **알고레이브(algorave)** 씬의 사실상 정전이다. 한국에서도 ACMP, Algorave Seoul 같은 행사가 매년 열리고 있다.

TouchDesigner — 노드 기반 인스톨레이션의 1등

**TouchDesigner**(Derivative)는 Houdini 출신 개발자들이 2000년에 시작한 노드 기반 비주얼 프로그래밍 환경이다. CHOP(Channel), TOP(Texture), SOP(Surface), MAT(Material), COMP(Component) 네트워크로 신호를 흘려보내는 **시그널 플로우 패러다임**이다. 2026년 5월 기준 **2024.40000+**가 안정 라인이고, NDI 6, Apple Silicon 네이티브, 새로운 Engine COMP가 들어왔다.

설치형 작품(전시, 광고 부스, 콘서트), 콘서트 비주얼, AR 무대, LED 매트릭스 컨트롤, 머신비전 + 인터랙티브에서 TouchDesigner는 사실상 1등이다. Python 인터프리터가 내장되어 OSC, MIDI, WebSocket, gRPC를 그대로 다룬다. **Educational/Non-Commercial**은 무료, **Commercial**은 1년 라이선스 모델이다.

대안으로는 **vvvv gamma**(독일 NODE 그룹의 .NET 기반)와 **Notch Builder**가 있다. vvvv gamma는 컴파일러를 내장한 진짜 프로그램 그래프이고, Notch는 콘서트/라이브 이벤트에서 강하다.

Notch Builder — 콘서트/라이브 이벤트의 표준

**Notch**는 영국 회사가 만든 노드 기반 실시간 비주얼 도구다. **Notch Builder + Notch Playback**으로 나뉘는데, 빌더에서 디자인하고 플레이백 라이선스가 들어간 PC에서 미디어 서버(disguise, Pixera, Pandoras Box)가 호스트한다. 2026년 5월 기준 **v0.9.x 안정 + 1.0 정식 GA**가 임박했다.

콘서트 비주얼, e스포츠 그랜드 파이널, 자동차 런칭 이벤트에서 Notch는 사실상 표준이다. AR 카메라 트래킹(stYpe, MoSys), 디스플레이 매핑, 파티클 + 플루이드 + 클로스 시뮬레이션이 GPU 위에서 실시간으로 돈다.

Notch의 약점은 비용이다. 빌더 라이선스가 연 단위로 비싸고, 플레이백 라이선스가 추가로 든다. 그 대가로 disguise 미디어 서버와의 결합이 깊고, 1080p가 아니라 5K-8K 출력이 일상이 된다.

Cables.gl — 브라우저 네이티브 노드 기반

**Cables.gl**은 베를린 팀이 만든 브라우저 노드 기반 크리에이티브 코딩 환경이다. WebGL 2 위에서 TouchDesigner 비슷한 패치 그래프를 그리되, 결과물이 그대로 HTML 패키지로 export된다. 2026년 5월 기준 **Cables 3.x**가 안정 라인이다.

[Trigger] -> [Time] -> [Math.sin] -> [Object3D position.x]

-> [Math.cos] -> [Object3D position.z]

광고 캠페인 사이트, 인터랙티브 헤더, 워크숍 데모처럼 **"브라우저에서 즉시 도는 비주얼"**이 필요한 곳에서 강하다. Patches는 JSON으로 저장되고, GitHub로 관리할 수 있다. 무료 플랜 + Pro/팀 플랜으로 SaaS화되어 있다.

Three.js — 웹 3D의 산업 표준

**Three.js**는 Ricardo Cabello(Mr.doob)가 2010년에 시작한 자바스크립트 3D 라이브러리다. WebGL과 WebGPU(`WebGPURenderer`)를 동시에 지원하고, 2026년 5월 기준 **r170+**가 안정 라인이다. WebGPU 백엔드가 거의 모든 핵심 기능에서 안정화됐고, USD/Z 임포트, IES 라이트, ACES Filmic 등이 1급 시민이다.

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100)

camera.position.set(3, 3, 5)

const renderer = new THREE.WebGPURenderer({ antialias: true })

renderer.setSize(innerWidth, innerHeight)

document.body.appendChild(renderer.domElement)

const geo = new THREE.IcosahedronGeometry(1, 4)

const mat = new THREE.MeshPhysicalMaterial({ color: 0x3366ff, roughness: 0.2, metalness: 0.8 })

scene.add(new THREE.Mesh(geo, mat))

scene.add(new THREE.HemisphereLight(0xffffff, 0x222244, 1.2))

new OrbitControls(camera, renderer.domElement)

renderer.setAnimationLoop(() => renderer.render(scene, camera))

Three.js는 e-커머스 3D 미리보기, 데이터 시각화(Observable, deck.gl 결합), 게임 프로토타입, NFT 갤러리, AR.js / WebXR 등 거의 모든 곳에 있다. 산업 표준이다.

React Three Fiber & Tres.js — 선언형 Three.js

**React Three Fiber (R3F)**는 Three.js를 React 컴포넌트로 감싼 라이브러리다. Poimandres 팀(`drei`, `cannon-es`, `zustand`)이 관리한다. JSX로 3D 신을 짠다.

function Spinner() {

const ref = useRef()

useFrame((_, dt) => { ref.current.rotation.x += dt; ref.current.rotation.y += dt * 0.5 })

return (

)

}

export default function App() {

return (

)

}

**Tres.js**는 같은 발상을 Vue 3로 옮긴 라이브러리다. SFC 한 파일로 3D 신을 짜고, Cientos 라이브러리가 R3F의 drei에 해당하는 역할을 한다. Next.js / Nuxt 같은 풀스택 프레임워크 안에서 3D 콘텐츠를 쓰기에는 R3F/Tres가 사실상 표준이다.

Babylon.js / A-Frame / PlayCanvas / Needle — Three.js가 아닌 선택

웹 3D 시장에서 Three.js만 있는 건 아니다. 2026년 5월 기준 다음 선택지가 살아 있다.

- **Babylon.js 7.x**: Microsoft가 후원. 풀 게임 엔진형 — 물리, 노드 머티리얼 에디터, GUI, 인스펙터까지 묶음. WebXR / Quest 3 빌드 안정성이 강점.

- **A-Frame**: HTML 컴포넌트 방식의 WebXR. Three.js 위에 올라가 있다. 교육용 / 단순 360 뷰어에 강함.

- **PlayCanvas**: 영국 게임 엔진. 협업 에디터가 SaaS화되어 있고, 광고 게임 / 모바일 게임 광고에서 강함.

- **Needle Engine**: Unity에서 export하면 WebGL/WebGPU 빌드가 자동 — Unity 워크플로를 그대로 웹으로 가져가는 다리.

선택 기준은 명확하다. 직접 셰이더 / 데이터 시각화 / 가벼운 신은 **Three.js + R3F**, 풀 게임/물리는 **Babylon.js / PlayCanvas**, Unity 자산 재활용은 **Needle**, 360/AR은 **A-Frame**이다.

제너러티브 NFT 플랫폼 — Art Blocks, fx(hash), Highlight

제너러티브 아트가 NFT로 시장을 얻은 흐름은 2021-2022년의 거품을 지나 2026년 5월에는 **장기 컬렉터 시장**으로 정착했다.

- **Art Blocks** (Ethereum, Snowfro): Curated / Playground / Factory / Engine 트랙. Tyler Hobbs의 Fidenza, Dmitri Cherniak의 Ringers가 대표작. 토큰 해시(`tokenData.hash`)를 시드로 받아 p5.js / Three.js로 렌더링.

- **fx(hash)** (Tezos): Open 발행 모델. 누구나 발행 가능하고 권한 큐레이션은 약함. 대신 수수료가 싸고 실험이 빠르다.

- **Highlight**: 멀티체인 (Base, Zora, Ethereum). Highlight Studio 에디터로 코드 없이 발행도 가능.

- **Bright Moments**: IRL 민팅 갤러리 모델. Venice / 도쿄 / 베를린에서 실제 컬렉터 앞에서 발행하는 이벤트.

작가는 보통 같은 코드를 여러 플랫폼에 변형 출시한다. p5.js + `fxhash` SDK, p5.js + `artblocks-engine` SDK 같은 SDK가 표준 입출력 인터페이스를 제공한다.

ml5 Next + Magenta.js — 브라우저에서 ML과 결합

**ml5.js**는 NYU ITP의 Daniel Shiffman 팀이 시작한 TensorFlow.js 래퍼다. 2025년에 **ml5 Next**라는 이름으로 모던 리빌드가 시작됐고, 2026년 5월 기준 사용 가능한 안정 모듈은 다음과 같다.

- `ml5.handpose`, `ml5.bodyPose`, `ml5.facemesh` — 포즈/얼굴/손 추정

- `ml5.imageClassifier` — MobileNet / TeachableMachine 호환

- `ml5.soundClassifier` — Speech Commands

- `ml5.neuralNetwork` — 브라우저 안 학습 + 추론

let video, handPose, hands = []

async function setup() {

createCanvas(640, 480)

video = createCapture(VIDEO)

video.size(640, 480); video.hide()

handPose = await ml5.handPose()

handPose.detectStart(video, results => { hands = results })

}

function draw() {

image(video, 0, 0)

for (const h of hands) {

for (const kp of h.keypoints) {

fill(0, 255, 180)

circle(kp.x, kp.y, 8)

}

}

}

**Magenta.js**(Google) 쪽은 음악 ML — MelodyRNN, MusicVAE, DDSP-WAE를 브라우저에서 실시간으로 돌리는 라이브러리다. **transformers.js**(Xenova / Hugging Face)는 ONNX 변환된 LLM/CLIP/SAM/Whisper을 브라우저 안에서 돌린다. **TensorFlow.js + p5** 직접 결합, **ONNX Runtime Web + Three.js** 같은 조합도 흔하다.

Resolume / MadMapper / VDMX — 라이브 VJ와 프로젝션 매핑

라이브 비주얼 출력을 무대에 송출하는 단계는 별도 도구의 영역이다.

- **Resolume Arena / Avenue**: 네덜란드 회사. VJ 셋에서 사실상 표준. 비디오 클립 트리거, 셰이더(`FFGL`, `ISF`), Spout/Syphon, NDI 6 지원.

- **MadMapper**: GarageCUBE. 프로젝션 매핑 + LED 매핑에 특화. Mac/Win 양쪽.

- **VDMX**: VIDVOX. macOS 전용, ISF 셰이더 강력 지원.

- **Modul8**: GarageCUBE. macOS 클래식 VJ 도구. 단순/안정.

- **Coge**: macOS 출신의 신예. Metal 위에서 가벼움.

TouchDesigner와 이들의 관계는 보통 "TouchDesigner가 콘텐츠 발생기, Resolume이 라이브 트리거"의 분업이다. Syphon/Spout으로 GPU 텍스처를 직접 패스스루하기 때문에 캡처 카드 없이 합성된다.

Max/MSP, Pure Data, M4L — 미디어 + MIDI의 본진

**Max/MSP**(Cycling '74)는 1980년대 IRCAM에서 시작한 미디어 프로그래밍 환경이다. 2026년 기준 **Max 9**가 안정 라인이고, **Max for Live (M4L)**로 Ableton Live 안에 내장된다. **Pure Data**(Miller Puckette, OSS)는 Max의 오픈소스 사촌이다.

크리에이티브 코딩 작가에게 Max는 보통 **MIDI 컨트롤러 ↔ TouchDesigner / Hydra**를 잇는 미들웨어 역할을 한다. Max에서 컨트롤러 신호를 받고, OSC로 TouchDesigner / Hydra / Processing으로 보낸다.

비슷한 흐름의 자매 도구로 **Bitwig Studio + The Grid**가 있다. 모듈러 신디 패치를 음악 DAW 안에서 직접 짜고, OSC/MIDI로 비주얼에 전달한다.

WLED / Hyperion / PixelBlaze — 픽셀과 LED 컨트롤

크리에이티브 코딩의 출력이 화면만은 아니다. WS2812B/SK6812 같은 **LED 스트립과 매트릭스**가 인스톨레이션의 큰 축이다.

- **WLED**: ESP8266/ESP32 펌웨어. 무료 OSS. 200개+ 효과 빌트인. Home Assistant, MQTT, E1.31(sACN), Art-Net 지원. **2026년에는 WLED 0.16.x**가 안정 라인.

- **Hyperion.ng**: Raspberry Pi 기반 앰비라이트(ambient light) 시스템. TV/모니터 가장자리 색을 잡아 LED로 송출.

- **PixelBlaze**(electromage): JS 셰이더 같은 코드로 LED 패턴을 짜는 컨트롤러. 작가용으로 인기.

- **OctoWS2811 + Teensy 4.1**: Paul Stoffregen. 대규모 (수만 픽셀) LED 매트릭스의 표준 하드웨어.

이들과 TouchDesigner / openFrameworks를 **Art-Net / sACN** 프로토콜로 잇는 것이 표준 워크플로다. 한 패치에서 화면 미리보기 + LED 출력을 동시에 디버깅한다.

한국 크리에이티브 코딩 씬 — 백남준의 그림자 위에서

한국 미디어 아트 / 크리에이티브 코딩은 백남준이라는 거대한 그림자 위에 서 있다. 2026년 5월 기준 활동이 두드러진 씬은 다음과 같다.

- **백남준아트센터** (경기 용인): 미디어 아트의 정전. 연 1-2회 기획전.

- **국립현대미술관 MMCA**: 디지털/미디어 아트 트랙. 서울관 멀티프로젝트홀.

- **랜덤웍스 Random Walks**: 김지인(Jiyin Kim) 등이 이끄는 스튜디오. 인터랙티브 인스톨레이션과 데이터 아트.

- **코드인파자마 Code in Pajamas Studio**: 김지인 스튜디오 라인. 워크숍 / 교육.

- **WOOM Lab, KAIST CT 학과, 홍익대 디지털미디어디자인**: 학교 인큐베이션 트랙.

- **서울미디어시티 비엔날레**: 격년 행사. 2024-2025 시즌이 디지털 아트 비중을 다시 키웠다.

도구 선택은 보통 **TouchDesigner 우위 + p5.js / Three.js로 웹 출력**의 혼합이다. 글로벌 씬과 비교해 OF가 상대적으로 약하고, TouchDesigner와 Notch가 큰 이벤트 시장에서 강하다.

일본 크리에이티브 코딩 씬 — Rhizomatiks와 teamLab의 분기

일본은 크리에이티브 코딩 + 미디어 아트의 글로벌 거점이다. 2026년 5월 기준 핵심 씬은 다음과 같다.

- **Rhizomatiks**(라이조마틱스, Daito Manabe 대표): Perfume, Björk, ELEVENPLAY 협업으로 알려진 스튜디오. openFrameworks + TouchDesigner + Unity의 깊은 결합.

- **teamLab**(チームラボ): 도쿄 아자부다이, 도요스 디지털 아트 미술관. 자체 엔진. 매년 수백만 명 방문하는 인터랙티브 인스톨.

- **WOW Inc.**(도쿄/센다이/런던): 모션 그래픽 + 인터랙티브의 정전. 자동차 / 화장품 광고에서 강세.

- **Plaplax**(플라플랙스): 어린이 인터랙티브, 박물관 콘텐츠.

- **Yusuke Murakami / BRDG**: 비주얼 디자인 + 데이터 아트.

- **Yusuke Endoh** 같은 개인 작가 — Quine 코드 아트의 정전.

도구 분포는 글로벌 평균과 비슷하지만, **openFrameworks와 Unity**의 비중이 한국보다 더 높다. teamLab은 자체 엔진을 쓰고, Rhizomatiks는 OF + Unity + TouchDesigner를 상황에 따라 갈아낀다.

교육 + 커뮤니티 — Coding Train, Genuary, OpenProcessing

크리에이티브 코딩은 강한 교육 / 커뮤니티 인프라가 뒷받침된다.

- **The Coding Train** (Daniel Shiffman, NYU ITP): YouTube 채널 + thecodingtrain.com. p5.js, Processing, ml5 튜토리얼의 정전. 100만 구독자 이상.

- **OpenProcessing**: p5.js 스케치 갤러리 + 챌린지 사이트. Sinan Ascioglu 운영. Glitch / CodeSandbox와 결합.

- **Genuary**: 매년 1월 31일 동안 매일 다른 프롬프트(Generative January). 트위터/Bluesky 해시태그가 가장 활발한 한 달.

- **Plottertober**: 펜 플로터(AxiDraw, iDraw, NextDraw)로 매일 그림. 매년 10월.

- **Inktober**: 직접적 크리에이티브 코딩 행사는 아니지만 작가 연동이 큼.

- **CreativeApplications.Net**, **NEORT**, **fx(hash) 디스커버리**: 작품 큐레이션 사이트.

2026년에 새로 두드러진 트랙은 **AI 프롬프트와 결합한 Genuary**다. 매일 프롬프트가 "AI 어시스턴트와 함께 만든 코드만 제출"처럼 명시되기 시작했다.

AI 에이전트와 크리에이티브 코딩 — Cursor와 Claude의 새로운 자리

2025-2026년 들어 가장 큰 변화는 **AI 코드 에이전트의 자리**다. 작가가 Cursor / Claude Code / Continue로 p5.js 스케치를 시작하는 풍경이 자연스러워졌다. 다음 패턴이 자주 보인다.

- **프롬프트로 초안 → 작가가 후처리**: "꽃잎이 떨어지는 입자 시스템, 컬러는 본인 톤" 같은 자연어 프롬프트로 첫 스케치를 받고 30-60% 정도 수정.

- **셰이더 디버깅**: GLSL / WGSL의 미적분 / 매트릭스 오류를 빠르게 잡는 보조 페어.

- **데이터셋 분석 → 비주얼 매핑**: CSV / JSON을 LLM이 요약하고, 그 통계로 `mapToShape()` 함수를 자동 생성.

- **`p5.strands` 셰이더 DSL** 같은 새 API에 익숙해지기까지의 학습 보조.

다만 작가 정체성 측면의 논의도 격하다. "AI가 만든 코드로 작가성이 유지되는가"는 fx(hash) / Art Blocks 토론장에서 계속 되돌아오는 주제다. 작가별 정책이 다르고, 표시(disclosure) 의무가 자발적으로 도입되고 있다.

조합 패턴 — 실제 작품은 어떻게 묶이는가

도구별로 강점이 명확하기 때문에 실제 작품은 단일 도구가 아니라 **조합 패턴**으로 만들어진다. 2026년 5월 기준 자주 보이는 조합 6가지다.

1. **NFT 제너러티브**: p5.js 단일 파일 → fx(hash) 또는 Art Blocks Engine 배포.

2. **콘서트 비주얼**: Notch Builder 시각 + disguise 미디어 서버 + Resolume 라이브 트리거.

3. **미술관 인스톨**: TouchDesigner 시각 + Kinect/Azure DK 센서 + Art-Net으로 LED.

4. **개인 라이브 VJ 셋**: Hydra + Strudel 사운드 + MIDI 컨트롤러 → 클럽 프로젝터.

5. **웹 인터랙티브**: Three.js / R3F + transformers.js로 카메라 입력 → 셰이더.

6. **펜 플로터 작품**: Processing 4 + Py5 → AxiDraw → 종이.

조합의 핵심은 OSC / Syphon / Spout / NDI 같은 **공통 IO 프로토콜**이다. 도구의 선택이 아니라 신호 흐름을 어떻게 그릴 것인가가 작품의 척추다.

도입 로드맵 — 0에서 첫 작품까지

크리에이티브 코딩을 처음 시작하는 사람의 표준 로드맵을 한 그림으로 정리한다.

1. **Week 1-2**: p5.js 웹 에디터로 25-30개 짧은 스케치. The Coding Train 시리즈 따라가기.

2. **Week 3-4**: Genuary 또는 자체 30일 챌린지로 매일 한 작품. 깃허브에 공개.

3. **Month 2**: 도구 한 단계 확장. Processing 4 / Hydra / TouchDesigner 중 한 가지를 골라 30시간 학습.

4. **Month 3**: 첫 fx(hash) 발행 또는 OpenProcessing 갤러리 등록. 피드백 받기.

5. **Month 4-6**: AI 통합 — ml5 Next 또는 transformers.js로 카메라 입력을 받는 작품 한 점.

6. **Month 6+**: 라이브 출력 — VJ 셋 또는 인스톨레이션 협업. Resolume 또는 Notch까지 확장.

핵심은 **도구 비교에 매몰되지 말고 매일 짧게 만든다**는 것이다. 도구는 작품이 강요할 때 자연스럽게 늘어난다.

마치며 — 2026년 5월, "코드도 붓이고, 모델도 붓이다"

이 글의 결론은 단순하다. 2026년 크리에이티브 코딩에서 **AI는 새 매체가 아니라 새 색깔**이다. 한 작가가 p5.js, Processing 4, TouchDesigner, Hydra, ml5 Next를 모두 한 작품에서 쓰는 일이 흔해졌다. 도구 사이의 경계는 더 흐려지고, 신호 흐름의 설계가 더 중요해진다.

가장 큰 변화는 두 가지다. 첫째, **웹 표준(WebGPU, WebXR, transformers.js)의 성숙**으로 브라우저 한 곳에서 끝나는 작업이 늘었다. 둘째, **AI 어시스턴트와 결합한 학습 곡선의 완만화**로 진입 장벽이 낮아졌다. 둘 다 작가의 정체성에 새로운 도전을 던진다.

도구 선택에 너무 오래 매달리지 말자. 매일 만들고, 매주 공유하고, 매월 새 도구를 하나 끼우면 1년 안에 자신만의 스타일이 생긴다. 코드는 그 과정의 일부분이지, 끝이 아니다.

References

- Processing 공식 사이트: https://processing.org/

- p5.js 공식 사이트: https://p5js.org/

- p5.js 2.0 릴리스 노트: https://github.com/processing/p5.js/releases

- openFrameworks 공식 사이트: https://openframeworks.cc/

- Cinder 공식 사이트: https://libcinder.org/

- OPENRNDR 공식 사이트: https://openrndr.org/

- Nannou 공식 사이트: https://nannou.cc/

- Hydra 공식 사이트: https://hydra.ojack.xyz/

- TidalCycles 공식 사이트: https://tidalcycles.org/

- SuperCollider 공식 사이트: https://supercollider.github.io/

- Strudel 공식 사이트: https://strudel.cc/

- Sonic Pi 공식 사이트: https://sonic-pi.net/

- TouchDesigner 공식 사이트: https://derivative.ca/

- vvvv gamma 공식 사이트: https://visualprogramming.net/

- Notch 공식 사이트: https://www.notch.one/

- Cables.gl 공식 사이트: https://cables.gl/

- Three.js 공식 사이트: https://threejs.org/

- React Three Fiber 공식 문서: https://docs.pmnd.rs/react-three-fiber/

- Tres.js 공식 사이트: https://tresjs.org/

- Babylon.js 공식 사이트: https://www.babylonjs.com/

- A-Frame 공식 사이트: https://aframe.io/

- PlayCanvas 공식 사이트: https://playcanvas.com/

- Needle Engine 공식 사이트: https://needle.tools/

- Art Blocks 공식 사이트: https://www.artblocks.io/

- fx(hash) 공식 사이트: https://www.fxhash.xyz/

- Highlight 공식 사이트: https://highlight.xyz/

- Bright Moments 공식 사이트: https://www.brightmoments.io/

- ml5.js 공식 사이트: https://ml5js.org/

- ml5 Next GitHub: https://github.com/ml5js/ml5-next-gen

- Magenta.js 공식 사이트: https://magenta.tensorflow.org/js

- transformers.js 공식 사이트: https://huggingface.co/docs/transformers.js

- Resolume 공식 사이트: https://resolume.com/

- MadMapper 공식 사이트: https://madmapper.com/

- VDMX 공식 사이트: https://vidvox.net/

- Cycling '74 Max 공식 사이트: https://cycling74.com/

- Pure Data 공식 사이트: https://puredata.info/

- WLED 공식 사이트: https://kno.wled.ge/

- PixelBlaze 공식 사이트: https://electromage.com/pixelblaze

- Coding Train 공식 사이트: https://thecodingtrain.com/

- OpenProcessing 공식 사이트: https://openprocessing.org/

- Genuary 공식 사이트: https://genuary.art/

- Rhizomatiks 공식 사이트: https://rhizomatiks.com/

- teamLab 공식 사이트: https://www.teamlab.art/

- WOW Inc. 공식 사이트: https://www.w0w.co.jp/

- 백남준아트센터: https://njp.ggcf.kr/