Strudel로 브라우저에서 바로 라이브코딩 하기

라이브코딩을 시도해 보려다 설치 단계에서 멈춘 경험이 있다면 Strudel이 가장 현실적인 출발점입니다. 웹 페이지를 열고 재생을 누르면 그 자리에서 소리가 납니다. 이 글은 Strudel이 무엇이고, 첫 루프를 어떻게 만들며, TidalCycles와 무엇이 같고 다른지를 정리합니다.

Strudel이란 무엇인가

Strudel은 TidalCycles 프로젝트에서 파생된 자바스크립트 구현체입니다. Tidal의 핵심인 패턴(pattern) 개념을 그대로 가져오되, 실행 환경을 브라우저로 옮긴 것이 요점입니다. Haskell 런타임도, 외부 오디오 서버도 필요하지 않습니다. 브라우저의 Web Audio API가 소리를 담당합니다.

이 구조가 만드는 차이는 생각보다 큽니다. 첫째, 진입 시간이 몇 초로 줄어듭니다. 둘째, 작성한 코드를 URL로 공유할 수 있어 다른 사람이 같은 소리를 즉시 재현할 수 있습니다. 셋째, 운영체제나 오디오 드라이버 차이로 인한 문제가 대부분 사라집니다. 교육이나 워크숍처럼 여러 사람이 동시에 같은 환경을 갖춰야 하는 상황에서 특히 유리합니다.

반대로 브라우저 환경이기 때문에 생기는 제약도 있습니다. 시스템의 다른 음악 소프트웨어와 오디오를 직접 주고받는 일은 네이티브 도구보다 제한적이고, 매우 많은 수의 동시 발음이 필요한 작업에서는 성능 한계에 먼저 부딪힙니다. 무대 공연용으로 쓸 수 없다는 뜻은 아니지만, 이런 특성은 알고 시작하는 편이 좋습니다.

설치 없이 바로 실행하기

절차는 간단합니다.

1. 공식 에디터 접속 — 브라우저에서 strudel.cc를 엽니다. 크로미움 계열이나 파이어폭스 최신 버전을 권장합니다.
2. 예제 재생 — 화면에 이미 예제 코드가 들어 있습니다. 재생 버튼을 누르거나 실행 단축키를 눌러 소리를 확인합니다. 브라우저 정책상 사용자가 한 번은 직접 클릭해야 오디오가 시작됩니다.
3. 코드 수정 — 문자열 안의 단어를 바꾼 뒤 다시 실행합니다. 소리가 즉시 바뀌는 것을 확인합니다.
4. 공유·저장 — 작성한 코드는 URL이나 텍스트로 보관합니다. 브라우저 캐시에만 의존하지 말고 별도 파일로 남겨 두시기 바랍니다.

소리가 나지 않는다면 확인할 곳은 세 군데입니다. 탭이 음소거되어 있는지, 시스템 출력 장치가 올바른지, 그리고 재생을 시작하는 클릭이 실제로 발생했는지입니다. 대부분 이 셋 중 하나입니다.

기본 패턴 작성 실습

가장 기본적인 형태는 아래와 같습니다.

s("bd sn")

s는 사운드(샘플)를 지정하는 함수이고, 문자열 안의 각 단어가 한 사이클을 균등하게 나눠 배치됩니다. Tidal과 동일한 미니 표기법을 사용하므로 아래 기호가 그대로 통합니다.

• ~ — 해당 자리를 비웁니다. s("bd ~ sn ~")
• * — 자리를 다시 분할합니다. s("hh*8")
• [ ] — 하위 그룹을 만듭니다. s("[bd bd] sn")
• <> — 사이클마다 번갈아 고릅니다. s("<bd sn>")

패턴에 함수를 이어 붙일 때는 점 표기법을 씁니다. 자바스크립트 메서드 체이닝과 동일한 감각입니다.

s("bd sn hh sn")
  .gain(0.8)
  .every(4, x => x.fast(2))

음정을 다루려면 note를 사용합니다. note("c e g")처럼 음이름을 쓰거나 숫자를 넣을 수 있고, .sound("piano")로 음색을 지정합니다. 여러 패턴을 동시에 울리려면 stack()으로 묶습니다.

TidalCycles와의 차이점

패턴을 다루는 사고방식은 사실상 동일합니다. 사이클 안에 이벤트를 배치하고, 변형 함수를 겹쳐 복잡도를 만드는 접근이 같기 때문에 한쪽을 익히면 다른 쪽 코드가 대체로 읽힙니다. 차이는 문법의 표기 방식과 실행 환경에서 나옵니다. 자세한 Tidal 설치 절차는 TidalCycles 시작하기에 정리해 두었습니다.

짧은 트랙 완성해 보기

실제로 하나를 끝까지 만들어 보는 것이 가장 빠른 학습입니다. 아래 순서를 권합니다.

1. 드럼 기반 — s("bd*2 sn") 정도로 뼈대를 잡습니다. 여기서 템포감이 결정됩니다.
2. 질감 추가 — 하이햇 계열을 *8 이상으로 잘게 넣고 .gain()으로 눌러 배경에 깝니다.
3. 베이스 — note()로 두세 음만 사용해 단순한 저음 라인을 만듭니다. 음이 많아질수록 지저분해집니다.
4. 변화 — .every()나 .sometimes()를 붙여 반복 구간에 변주를 넣습니다.
5. 구성 — 요소를 하나씩 넣고 빼는 순서를 정해 도입·전개·마무리를 만듭니다.

커뮤니티와 확장

Strudel은 TidalCycles 생태계의 일부로 개발되고 있어, 문서와 예제가 서로 연결되어 있습니다. 공식 문서의 예제 페이지에는 실행 가능한 코드가 다수 실려 있으므로, 마음에 드는 소리를 만나면 그 코드를 그대로 열어 뜯어보는 방식이 효율적입니다.

더 깊이 들어가면 자바스크립트로 직접 확장 함수를 작성하거나, 웹 페이지에 임베드해 인터랙티브 작품을 만드는 방향도 가능합니다. 이 지점부터는 일반적인 프런트엔드 개발 지식이 그대로 쓰입니다. 언어별 라이브러리 선택지는 개발자를 위한 음악 라이브러리 총정리에서 비교해 두었습니다.

이 글은 AI(인공지능)의 도움을 받아 작성되었습니다.