Skip to content
Published on

AI 크리에이티브 코딩 & 비주얼 아트 2026 완벽 가이드 - Processing 4 · p5.js · openFrameworks · Hydra · TouchDesigner · Notch · Cables.gl · Tres.js · Three.js · OPENRNDR · Nannou (Rust) 심층 분석

🇰🇷KO🇺🇸EN🇯🇵JA
Split View필사 모드
Authors

들어가며 — 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에서 그대로 디버깅된다.

import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.isolated
import org.openrndr.extra.noise.simplex
import org.openrndr.math.Vector2

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급 시민이다.

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

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 신을 짠다.

import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { useRef } from 'react'

function Spinner() {
  const ref = useRef()
  useFrame((_, dt) => { ref.current.rotation.x += dt; ref.current.rotation.y += dt * 0.5 })
  return (
    <mesh ref={ref}>
      <icosahedronGeometry args={[1, 3]} />
      <meshPhysicalMaterial color="hotpink" roughness={0.2} metalness={0.6} />
    </mesh>
  )
}

export default function App() {
  return (
    <Canvas camera={{ position: [3, 3, 5] }}>
      <hemisphereLight intensity={1.2} />
      <Spinner />
      <OrbitControls />
    </Canvas>
  )
}

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

Discuss on Twitter • View on GitHub