LabHub

블로그

라이브 코딩 음악 & 비주얼 2026 — Sonic Pi / TidalCycles / Strudel / Hydra / TouchDesigner / SuperCollider 심층 가이드

2026-05-16 · 35 분 읽기 · #live-coding#algorave#sonic-pi#tidalcycles#strudel#estuary#orca#foxdot#supercollider#pure-data#max-msp#hydra#punctual#p5-js#openframeworks#cinder#touchdesigner#notch#resolume#vvvv#renoise#toplap#nime#deep-dive

한국어English日本語

프롤로그 — 코드가 무대 위로 올라온 시대

2010년, 영국 셰필드의 작은 클럽에서 "Algorave"라는 이름의 파티가 처음 열렸다. 디제이 부스에는 노트북이 있었고, 스크린에는 소스코드가 그대로 비치고 있었다. 관객은 비트에 맞춰 춤을 췄지만, 사실 그들이 보고 있던 건 Alex McLean이 실시간으로 타이핑하는 Haskell 코드였다.

15년이 지난 2026년, 그 풍경은 더 이상 실험이 아니다.

이 글은 2026년 5월 기준 라이브 코딩의 지도 한 장을 그린다. "코딩으로 무대에 선다"는 게 무슨 의미인지, 어떤 도구가 어디서 쓰이는지, 학생/음악가/VJ/미디어 아티스트 각각이 어디서 출발해야 하는지.

1장 · 2026년 라이브 코딩의 지도

라이브 코딩은 크게 세 갈래다.

[음악 라이브 코딩]
    Sonic Pi   — Ruby DSL, 교육 + 콘서트
    TidalCycles — Haskell, 알고레이브 본가
    Strudel    — JS, 브라우저 (TidalCycles 포팅)
    FoxDot     — Python, SuperCollider 백엔드
    SuperCollider — sclang, 35년 된 본가
    Pure Data  — 비주얼 패치, Miller Puckette
    Max/MSP    — 상업판 비주얼 패치 (Cycling '74)

[비주얼 라이브 코딩]
    Hydra      — JS, 브라우저, Olivia Jack
    Punctual   — 함수형 셰이더 DSL, David Ogborn
    p5.js      — Processing for the Web
    openFrameworks / Cinder — C++

[비주얼 프로그래밍 (노드 베이스)]
    TouchDesigner — 노드 그래프, GPU 가속
    Notch       — 모션 디자인 + 미디어 서버
    vvvv        — 노드 베이스, 윈도우 중심
    Resolume    — VJ 소프트웨어

[기타]
    ORCΛ       — esoteric 시퀀서 (Hundredrabbits)
    Renoise    — 트래커 (스크립팅 가능)

이 세 갈래는 무대에서 자주 함께 쓰인다. TidalCycles로 비트를 짜고, Hydra로 비주얼을 짜고, OSC/MIDI/Ableton Link로 동기화한다. "라이브 코딩 셋"이라는 말은 보통 음악 + 비주얼 듀오 또는 솔로 멀티태스킹을 뜻한다.

세 가지 핵심 컨셉을 미리 잡고 가자.

2장 · Sonic Pi — 교육의 현장과 콘서트 사이

Sam Aaron이 케임브리지 컴퓨터랩에서 만든 Sonic Pi는 "아이들에게 코드를 가르치기 위한 악기"로 시작했다. 그 결정이 결과적으로 2026년 가장 친근한 라이브 코딩 도구를 낳았다.

핵심: Ruby DSL + SuperCollider 사운드 엔진. 즉, 문법은 루비처럼 친근하지만, 소리는 사실 35년 묵은 SuperCollider가 낸다.

가장 작은 셋. 키보드 한 줄.

play 60

MIDI 60(C4)이 한 번 울린다. 패턴을 만들려면:

live_loop :kick do
  sample :bd_haus
  sleep 0.5
end

live_loop :bass do
  use_synth :tb303
  play chord(:E2, :minor).choose, release: 0.3
  sleep 0.25
end

live_loop은 이름이 같으면 새 코드로 부드럽게 교체된다. 무대에서 :bass의 화음을 바꾸고 다시 Run을 누르면, 다음 사이클부터 자연스럽게 새 화음이 흐른다.

Sonic Pi가 잘하는 것:

한계:

누가 쓰나: 음악 교사, 학생, "코드는 모르지만 만지는 악기 하나 더" 가 필요한 뮤지션, 라즈베리파이 카페 인스톨레이션.

Sam Aaron의 TED 토크 "Programming as Performance"는 라이브 코딩의 가장 잘 알려진 입문 영상이다.

3장 · TidalCycles — 알고레이브의 본가

Alex McLean이 2009년부터 만들고 있는 TidalCycles는 Haskell 라이브러리다. 음악 라이브 코딩 씬에서 "표준어"에 가장 가깝다. 알고레이브에서 무대에 서는 사람의 7할이 Tidal로 친다.

핵심 아이디어: 모든 패턴은 함수다. 그리고 시간은 cycle 단위로 흐른다.

d1 $ s "bd*4 [~ sn] cp hh*8"

이 한 줄을 설명하면:

이게 mini-notation의 기본. 진짜 힘은 변환 함수에서 나온다.

d1 $ fast 2 $ rev $ every 4 (# speed 2) $ s "bd*4 sn cp hh*8"

fast 2로 두 배 빠르게, rev로 거꾸로, every 4로 4 cycle마다 speed 2(피치 업) — 이 모든 게 함수 합성으로 표현된다. Haskell의 $와 .가 라이브 코딩에 절묘하게 들어맞는 이유다.

TidalCycles가 강한 이유:

약점:

누가 쓰나: 알고레이브 무대에 서는 거의 모든 사람. ICLC(International Conference on Live Coding) 발표자의 절반.

설치가 부담이면 다음 장의 Strudel로 가자. 같은 mini-notation을 브라우저에서 그대로 쓸 수 있다.

4장 · Strudel — TidalCycles를 브라우저로

Strudel(https://strudel.cc/)은 2022년 Felix Roos가 시작한 JavaScript 포트다. "TidalCycles를 설치 없이 브라우저에서"라는 단 한 가지 목표를 위해 만들어졌다.

2026년 기준으로 strudel.cc에 접속해서 곧바로 칠 수 있다. 설치, 의존성, 컴파일러 — 아무것도 없다.

stack(
  s("bd*4 sn cp hh*8"),
  note("c2 eb2 g2 bb2").s("sawtooth").lpf(800),
  s("rim*8").gain(0.6)
).cpm(140)

문법이 TidalCycles와 거의 같다. s(sample), note, mini-notation, 변환 함수까지 그대로. 차이는 Haskell의 $ 대신 메서드 체이닝(.lpf(800))을 쓴다는 정도.

Strudel이 결정적인 이유:

한계:

누가 쓰나: 라이브 코딩 입문자, 교실(설치 권한 없는 학생들), 즉흥 잼 세션, 트윗으로 패턴 공유하는 SNS 라이브 코더들.

2026년 기준 "라이브 코딩을 한 번 만져보고 싶다"는 사람에게 가장 먼저 권하는 도구다.

5장 · Estuary — 협업 라이브 코딩

David Ogborn(맥마스터대학) 팀이 만든 Estuary(https://estuary.mcmaster.ca/)는 여러 명이 동시에 같은 화면에 코딩하는 라이브 코딩 환경이다. 구글 도큐먼트의 라이브 코딩 버전이라고 생각하면 된다.

특이점은 하나의 환경에서 여러 언어를 동시에 쓴다는 것. 각 패널이 다른 언어로 동작한다.

여러 명이 각자 패널을 잡고, 같은 BPM에 잠긴 채 동시에 무대를 만든다. 코로나 시기에 원격 알고레이브로 큰 주목을 받았고, 지금도 LiveCodeFest의 단골 도구다.

Estuary가 특별한 이유:

한계:

누가 쓰나: 라이브 코딩 워크숍 강사, 원격 잼 세션, 학교 동아리, 알고레이브 합주.

6장 · ORCΛ — esoteric 시퀀서

Hundredrabbits(Devine Lu Linvega + Rek Bell)의 ORCΛ(또는 Orca, https://hundredrabbits.itch.io/orca)는 세 글자짜리 셀로 구성된 esoteric 라이브 코딩 환경이다. 외계어처럼 보이고, 실제로도 그렇다.

.A.....
.0A8...
.......
.D8....

각 알파벳이 연산자다. A는 add, B는 subtract, D는 divide, T는 track, *는 bang. 셀들이 매 프레임마다 자기 주변 셀에 신호를 보내며 동작한다. 일종의 2D 셀룰러 오토마타 + 시퀀서 + 비주얼 프로그래밍의 잡종이다.

Orca 자체는 소리를 내지 않는다. MIDI/OSC를 내보내고, 그걸 SuperCollider/Renoise/Ableton/Reaper로 받아서 소리를 낸다. "타이밍 엔진 + 시각적 시퀀서"로만 작동한다.

Orca가 컬트적인 이유:

한계:

누가 쓰나: 노이즈/실험 전자음악, 제너러티브 아티스트, "남들과 다른 것"을 추구하는 라이브 코더.

7장 · FoxDot — Python으로 라이브 코딩

Ryan Kirkbride(University of Leeds)의 FoxDot은 Python + SuperCollider 조합이다. TidalCycles의 Haskell이 부담스러운 사람을 위한 파이썬 대안.

p1 >> pluck([0,2,4,3], dur=1/2, amp=0.8)
p2 >> bass([0,0,3,4], dur=2)

p1, p2는 플레이어 객체. >> 연산자로 악기와 패턴을 할당한다. SuperCollider가 백엔드라 음색은 사실상 SuperDirt와 같다.

FoxDot의 자리:

한계:

누가 쓰나: Python을 쓰는 개발자, 데이터 아티스트, 머신러닝 ↔ 라이브 코딩 크로스오버.

8장 · SuperCollider / Pure Data / Max/MSP — 클래식 환경

이 세 환경은 라이브 코딩의 인프라다. 위에서 본 TidalCycles, FoxDot, Sonic Pi 모두 SuperCollider를 사운드 엔진으로 쓴다. Pure Data와 Max/MSP는 비주얼 패치의 양대 표준이다.

SuperCollider

1996년 James McCartney가 만들기 시작한 sclang + scsynth 아키텍처. 언어(sclang)와 신디사이저(scsynth)가 OSC로 분리되어 있다.

{ SinOsc.ar(440) * 0.2 }.play

이 한 줄이 440Hz 사인파를 낸다. SuperCollider의 진짜 힘은 SynthDef — 재사용 가능한 신디사이저 정의다.

SynthDef(\bass, { |freq=110, amp=0.5|
    var sig = LFSaw.ar(freq) * LFPulse.kr(2);
    sig = RLPF.ar(sig, freq * 4, 0.3);
    Out.ar(0, sig * amp)
}).add;

2026년에도 SuperCollider는 표준이다. NIME 논문의 절반, 라이브 코딩 사운드 엔진의 7할이 SuperCollider 기반이다.

Pure Data (Pd)

Miller Puckette가 IRCAM 시절 만든 Max를 오픈소스로 다시 짠 것. 노드와 케이블로 신호 흐름을 그린다.

Max/MSP (Cycling '74, Ableton 자회사)

Max는 Pd의 상업판이자 형. 셋이 같은 뿌리(Max → Pd → Max/MSP)다.

클래식 vs 라이브 코딩: SuperCollider/Pd/Max는 라이브 코딩에도 쓰이지만 본질적으로는 환경이다. 무대 위에서 코드를 타이핑하는 미학을 추구한다면 그 위에 TidalCycles/Sonic Pi/FoxDot이 얹힌다. "스튜디오에서 완성된 패치"를 무대에 가져가는 게 본업이라면 Max/MSP를 그대로 쓴다.

9장 · Hydra — 가장 인기있는 비디오 신스

Olivia Jack의 Hydra(https://hydra.ojack.xyz/)는 2018년에 등장해서 5년 만에 라이브 코딩 비주얼의 표준이 되었다. 알고레이브에서 무대 뒤편 비주얼의 7~8할이 Hydra다.

핵심: JavaScript 함수형 DSL + WebGL 셰이더. 브라우저 한 탭이면 끝.

osc(20, 0.1, 0.8)
  .kaleid(4)
  .color(2, 0.5, 1)
  .modulate(noise(3, 0.5))
  .out()

한 줄씩 해석:

Hydra의 핵심 아이디어는 함수 체이닝 = 비디오 합성. osc, noise, voronoi, shape, gradient가 소스이고, .kaleid, .modulate, .rotate, .scale, .colorama가 변환이다.

Hydra가 결정적인 이유:

한계:

누가 쓰나: 알고레이브 VJ, 라이브 코딩 듀오(음악 + 비주얼), 클럽 비주얼리스트.

2026년 기준 라이브 코딩 비주얼을 한 시간 안에 무대 수준으로 만들 수 있는 유일한 도구.

10장 · Punctual / p5.js — 코드 + 시각

Punctual

David Ogborn(Estuary의 그 사람)의 Punctual은 함수형 셰이더 DSL이다. Hydra와 비슷하지만, 사운드도 같이 다룬다.

saw [220,330,440] >> centre;
fb sin saw 0.1 >> rgb;

오디오와 비디오가 같은 함수형 표현에서 나온다. 학술적이고 미니멀한 미학.

p5.js

Lauren McCarthy의 p5.js는 Processing의 웹 버전. 라이브 코딩 전용은 아니지만, "코드로 그림 그리기"의 대명사로 매년 새 세대를 길러낸다.

function setup() { createCanvas(800, 800); }
function draw() {
  background(0);
  for (let i = 0; i < 100; i++) {
    let x = noise(i, frameCount * 0.01) * width;
    let y = noise(i + 100, frameCount * 0.01) * height;
    circle(x, y, 5);
  }
}

라이브 코딩 무대보다는 인스타그램 + 미디어 아트 갤러리의 표준 도구. Hydra가 라이브에 강하면, p5.js는 제너러티브 아트에 강하다.

한계:

누가 쓰나: 미디어 아트 학생, 인스타그램/SNS 아티스트, NFT 제너러티브, 교육.

11장 · openFrameworks / Cinder — C++ 진영

비주얼 라이브 코딩의 헤비웨이트 진영. 코드를 짜고 컴파일해서 실행하는 식이라 무대에서 키보드를 두드리는 라이브 코딩과는 결이 다르지만, 인스톨레이션과 콘서트 비주얼의 표준이다.

openFrameworks (oF)

Zach Lieberman, Theo Watson, Arturo Castro가 만든 C++ 크리에이티브 코딩 툴킷. Processing/p5의 정신을 C++에 가져왔다.

void ofApp::draw() {
    ofBackground(0);
    for (int i = 0; i < 1000; i++) {
        float x = ofNoise(i, ofGetFrameNum() * 0.01) * ofGetWidth();
        float y = ofNoise(i + 100, ofGetFrameNum() * 0.01) * ofGetHeight();
        ofDrawCircle(x, y, 5);
    }
}

p5.js 코드와 거의 1:1 대응. 다만 C++라 속도가 다르다. 4K 60fps, 수십만 파티클, 다중 GPU 까지 처리 가능.

Cinder

Andrew Bell(Barbarian Group)이 만든 C++ 크리에이티브 코딩 프레임워크. oF보다 더 "프로페셔널" 지향 — API가 더 엄격하고 OOP스럽다.

oF vs Cinder: 학교/오픈소스는 oF, 광고대행사·인스톨레이션·뮤지엄은 Cinder 쪽이 더 자주 보인다. 둘 다 헤비웨이트.

누가 쓰나: 인스톨레이션 스튜디오(teamLab, Random International, Nexus Interactive Arts), 광고/방송 비주얼 외주, 박물관 미디어 콘텐츠.

12장 · TouchDesigner / Notch / Resolume / vvvv

노드 베이스 비주얼 프로그래밍의 4대장. 코드를 타이핑하는 라이브 코딩과 결이 다르지만, 무대 비주얼과 미디어 아트 현장에서 압도적 점유율을 가진다.

TouchDesigner (Derivative)

캐나다 Derivative의 TouchDesigner는 노드 그래프 + 파이썬 + GLSL이다. 미디어 아트 스튜디오의 표준.

한국 미디어 아트 스튜디오(D'STRICT, a'strict, KOOO, Studio Locus Solus)의 90%가 TouchDesigner를 쓴다. 코엑스 K-Wave, 명동 라이트 페스티벌, DDP 미디어 파사드 — 거의 다 TouchDesigner다.

Notch

영국 Notch의 Notch는 실시간 모션 디자인 + LED 월 전용. After Effects의 라이브 버전이라고 생각하면 가깝다.

Resolume Avenue / Arena

네덜란드 Resolume의 Avenue/Arena는 VJ 소프트웨어. 클립 기반 라이브 비디오 믹싱.

라이브 코딩과는 다르지만, Hydra → Spout/Syphon → Resolume으로 라이브 코딩 결과물을 클럽 VJ 셋에 합성하는 워크플로우가 표준이다.

vvvv

독일 vvvv group의 vvvv는 윈도우 전용 노드 베이스 비주얼 프로그래밍. vvvv gamma(2020+)는 .NET 기반으로 다시 짜였다.

13장 · Renoise — 트래커가 돌아왔다

Renoise는 80~90년대 트래커(Amiga의 ProTracker)의 후예다. 세로로 흐르는 셀에 노트를 적는 인터페이스.

| 00 | C-4 01 .. .... |
| 01 | --- .. .. .... |
| 02 | E-4 01 .. .... |
| 03 | --- .. .. .... |
| 04 | G-4 01 .. .... |
| 05 | --- .. .. .... |

각 행이 16분음표(혹은 더 짧은) 슬롯. 노트 + 악기 번호 + 볼륨 + 이펙트 명령어로 한 줄이 끝난다.

Renoise의 자리:

라이브 코딩과의 연결:

누가 쓰나: 데모씬 작곡가, 칩튠, 인디 게임 음악, 클래식 트래커 사용자.

14장 · TOPLAP / 알고레이브 / LiveCodeFest / NIME / ICLI

라이브 코딩의 커뮤니티 + 학회 지도.

TOPLAP

TOPLAP(http://toplap.org/)은 2004년 함부르크에서 결성된 라이브 코딩 커뮤니티다. 명칭은 "Temporal Organisation for the Permanence/Proliferation/Promotion of Live Algorithm Programming"의 약자라는 농담 같은 정의가 공식이다.

Algorave

Algorave는 알고리즘 + 레이브의 합성어. 2012년 Alex McLean과 Nick Collins가 셰필드에서 시작했다. 정의는 단순하다.

2026년 현재 도쿄, 베를린, 멕시코시티, 부에노스아이레스, 서울, 시드니에서 정기적으로 열린다.

LiveCodeFest

LiveCodeFest(http://livecode.demozoo.org/ 등)는 24~48시간짜리 라이브 코딩 페스티벌. 매년 여러 도시에서 분산 개최되며 온라인 스트리밍도 한다. 2025/2026년 시즌은 베를린·도쿄·서울·멕시코시티 등에서 라인업이 잡혔다.

NIME — New Interfaces for Musical Expression

NIME(https://www.nime.org/)은 2001년 시작된 학회. "음악적 표현을 위한 새로운 인터페이스"라는 이름 그대로, 악기·인터페이스·시스템 전반의 학술 발표.

ICLI — International Conference on Live Interfaces

ICLI는 좀 더 퍼포먼스 지향 학회. NIME이 인터페이스 자체에 집중한다면 ICLI는 "라이브 퍼포먼스로서의 인터페이스"를 다룬다.

15장 · 한국 / 일본 — 동아시아 라이브 코딩 씬

한국

2024~2025년 사이에 한국 라이브 코딩 페스티벌이 본격 시작되었다.

한국 씬의 특징:

일본

도쿄는 알고레이브의 아시아 거점이다.

도쿄/오사카는 demoscene + 라이브 코딩 + chiptune 삼각형이 견고하다. Renoise 사용자 비율도 높다.

16장 · 누가 라이브 코딩을 배워야 하나

대상별 진입 경로 표.

┌───────────────────┬──────────────────────────────────────────┐
│ 학생 (중고등)      │ Sonic Pi → Strudel → Hydra              │
│                   │ (브라우저만 있으면 됨, 설치 0)            │
├───────────────────┼──────────────────────────────────────────┤
│ 음악가/뮤지션      │ Sonic Pi → TidalCycles → SuperCollider   │
│                   │ (Ableton Link로 기존 셋업과 동기화)        │
├───────────────────┼──────────────────────────────────────────┤
│ 개발자 (Python)    │ FoxDot → Strudel → TidalCycles           │
├───────────────────┼──────────────────────────────────────────┤
│ 개발자 (JS)        │ Strudel → Hydra → Punctual               │
├───────────────────┼──────────────────────────────────────────┤
│ VJ / 비주얼리스트   │ Hydra → TouchDesigner → Resolume         │
├───────────────────┼──────────────────────────────────────────┤
│ 미디어 아티스트     │ TouchDesigner → openFrameworks → Notch  │
├───────────────────┼──────────────────────────────────────────┤
│ 데모씬 / 칩튠      │ Renoise → Orca → SuperCollider           │
├───────────────────┼──────────────────────────────────────────┤
│ 학계 연구자         │ SuperCollider → Max/MSP → NIME 논문      │
└───────────────────┴──────────────────────────────────────────┘

학생/입문자에게 가장 권장하는 90일 코스.

Week 1~2: Sonic Pi. 학교/집에서 설치 5분. 첫날부터 비트가 난다. Sam Aaron의 공식 튜토리얼만 따라가도 30개 챕터.

Week 3~4: Strudel. 브라우저에서 strudel.cc 열고 30분에 첫 셋. mini-notation을 익힌다.

Week 5~6: Hydra. Olivia Jack의 hydra.ojack.xyz에서 5분에 첫 비주얼. osc().out()부터.

Week 7~8: Strudel + Hydra 연동. 같은 브라우저 탭에서 둘을 동기화. 알고레이브 솔로 셋의 최소 구성.

Week 9~12: TidalCycles 또는 TouchDesigner 선택. 음악 깊게 갈지(TidalCycles), 비주얼/미디어 아트로 확장할지(TouchDesigner) 결정.

이 코스 끝나면 로컬 알고레이브 오픈 스테이지에서 5분 셋 정도는 칠 수 있다.

17장 · 마치며 — 코드는 무대 의상이다

라이브 코딩 씬에는 오랜 격언이 있다. "Show us your screens" — 코드를 가리지 말고 보여라. 관객이 코드를 읽을 수 있어야, 그게 라이브 코딩이다.

이 한 줄에는 두 가지 의미가 있다.

2026년의 라이브 코딩은 더 이상 변두리가 아니다. 학교 교실에서 Sonic Pi가 돈다. 토요일 밤 클럽에서 TidalCycles가 돈다. 화요일 미디어 아트 스튜디오에서 TouchDesigner가 돈다. 그리고 그 사이에 알고레이브라는 이름의 작은 운동이 15년째 같은 슬로건을 외친다.

코드는 무대 의상이다. 잘 입자.

참고 / References

원문 보기: https://www.youngju.dev/blog/culture/2026-05-16-live-coding-music-visuals-2026-sonic-pi-tidal-strudel-hydra-touchdesigner-supercollider-deep-dive

댓글

아직 댓글이 없습니다.

로그인하면 댓글을 쓸 수 있습니다