최근 진행한 바이브코딩 프로젝트: NodeSeq

핵심 요약

Claude Code를 활용해 브라우저 기반의 노드 연결형 음악 시퀀서 'NodeSeq'를 개발했습니다.

NodeSeq 기능 — 노드를 연결해 리듬과 사운드를 생성하는 브라우저 기반 음악 시퀀서임

Claude 활용 — 코드 모듈화, 오디오 엔진 설계, Cloudflare Worker 구현 등 개발 전반에 활용됨

개발 경험 — 로직 테스트의 중요성과 오디오 관련 기능 구현 시 구체적인 요청의 효율성을 확인함

사용성 — 별도 설치 없이 웹에서 바로 데모를 실행하고 음악을 제작 및 공유할 수 있음

브라우저에서 돌아가는 음악 시퀀서인 NodeSeq를 만들었는데, Claude Code를 써서 개발했어. https://nodeseq.com에서 무료로 쓸 수 있어. 가입이나 설치 같은 거 필요 없고 바로 스튜디오 열리니까 한번 해봐.

이게 뭔데?

타임라인이나 피아노 롤 대신, 캔버스 위에서 노드들을 선으로 연결해서 트랙을 만드는 방식이야:

드럼, 신스, 베이스 노드에서 소리가 나. 연결된 선을 따라 펄스가 전달되는데, 각 펄스가 이동하는 데 걸리는 시간이 정해져 있어서 노드들을 루프 형태로 연결하면 리듬이 만들어져.
게이트 노드는 펄스를 세거나 스텝 패턴을 따라가서 필인이나 편곡을 할 수 있게 해줘. 모드 노드는 작동할 때마다 다른 노드의 설정(컷오프, 레조넌스, 디케이, 팬)을 바꿔주니까, 똑같은 라인이 두 번 반복되는 법이 없지.
노드들은 그룹화할 수 있고, 각 그룹은 숫자 키로 마디마다 껐다 켰다 할 수 있는 패드가 돼. 씬 기능도 있고, 씬들을 이어 붙이는 송 모드, 그리고 라이브 연주를 위한 홀드 이펙트(필터, 에코, 리버브, 스터터, 라이저)도 다 들어있어.
모든 소리는 Web Audio API로 합성돼. 샘플 파일 같은 건 하나도 안 썼어.
WAV로 내보내거나, 링크로 트랙을 공유할 수도 있고, 커뮤니티 페이지에 올려서 남들이 들어보고 댓글 달거나 스튜디오에서 열어서 리믹스하게 할 수도 있어.

Claude를 어떻게 썼냐면

코드는 거의 다 Claude Code가 짰어. 난 지시하고, 귀로 직접 들어보면서 테스트하고, 뭘 남길지 결정만 했지.

처음엔 HTML 파일 하나로 시작했어. 나중에 Claude가 이걸 모듈(스케줄러, 사운드 엔진, 캔버스, 인스펙터, 퍼포먼스 스트립)로 쪼갰고, 리팩토링하다가 타이밍 망가지지 않게 스케줄러 테스트 코드도 짰어.
스케줄러랑 오디오 엔진이 라이브 재생이랑 오프라인 WAV 내보내기에서 같은 코드 경로를 공유하게 했는데, 이건 Claude가 제안한 거야. 덕분에 "내보내기 하면 소리가 달라지는" 버그들을 싹 잡았지.
커뮤니티 쪽은 D1을 쓴 Cloudflare Worker야. Claude가 패스키 로그인(WebAuthn)을 직접 구현했고, 게시된 트랙을 위한 입력값 검증이랑 텍스트 필터도 다 짰어.
트레일러 영상도 Claude가 만들었어. 헤드리스 브라우저에서 실제 앱을 한 프레임씩 돌리면서 오프라인으로 오디오를 렌더링하는 스크립트를 짰거든. 그래서 영상이랑 소리가 완벽하게 일치해. 데모 트랙 하나를 연주하는 영상인데, 그룹을 불러오고, 이펙트를 걸고, 새 노드를 패칭하는 과정이 다 담겨 있어.

핵심 요약

Claude Code를 활용해 브라우저 기반의 노드 연결형 음악 시퀀서 'NodeSeq'를 개발했습니다.

NodeSeq 기능 — 노드를 연결해 리듬과 사운드를 생성하는 브라우저 기반 음악 시퀀서임

Claude 활용 — 코드 모듈화, 오디오 엔진 설계, Cloudflare Worker 구현 등 개발 전반에 활용됨

개발 경험 — 로직 테스트의 중요성과 오디오 관련 기능 구현 시 구체적인 요청의 효율성을 확인함

사용성 — 별도 설치 없이 웹에서 바로 데모를 실행하고 음악을 제작 및 공유할 수 있음

이게 뭔데?

타임라인이나 피아노 롤 대신, 캔버스 위에서 노드들을 선으로 연결해서 트랙을 만드는 방식이야:

드럼, 신스, 베이스 노드에서 소리가 나. 연결된 선을 따라 펄스가 전달되는데, 각 펄스가 이동하는 데 걸리는 시간이 정해져 있어서 노드들을 루프 형태로 연결하면 리듬이 만들어져.
게이트 노드는 펄스를 세거나 스텝 패턴을 따라가서 필인이나 편곡을 할 수 있게 해줘. 모드 노드는 작동할 때마다 다른 노드의 설정(컷오프, 레조넌스, 디케이, 팬)을 바꿔주니까, 똑같은 라인이 두 번 반복되는 법이 없지.
노드들은 그룹화할 수 있고, 각 그룹은 숫자 키로 마디마다 껐다 켰다 할 수 있는 패드가 돼. 씬 기능도 있고, 씬들을 이어 붙이는 송 모드, 그리고 라이브 연주를 위한 홀드 이펙트(필터, 에코, 리버브, 스터터, 라이저)도 다 들어있어.
모든 소리는 Web Audio API로 합성돼. 샘플 파일 같은 건 하나도 안 썼어.
WAV로 내보내거나, 링크로 트랙을 공유할 수도 있고, 커뮤니티 페이지에 올려서 남들이 들어보고 댓글 달거나 스튜디오에서 열어서 리믹스하게 할 수도 있어.

Claude를 어떻게 썼냐면

코드는 거의 다 Claude Code가 짰어. 난 지시하고, 귀로 직접 들어보면서 테스트하고, 뭘 남길지 결정만 했지.

처음엔 HTML 파일 하나로 시작했어. 나중에 Claude가 이걸 모듈(스케줄러, 사운드 엔진, 캔버스, 인스펙터, 퍼포먼스 스트립)로 쪼갰고, 리팩토링하다가 타이밍 망가지지 않게 스케줄러 테스트 코드도 짰어.
스케줄러랑 오디오 엔진이 라이브 재생이랑 오프라인 WAV 내보내기에서 같은 코드 경로를 공유하게 했는데, 이건 Claude가 제안한 거야. 덕분에 "내보내기 하면 소리가 달라지는" 버그들을 싹 잡았지.
커뮤니티 쪽은 D1을 쓴 Cloudflare Worker야. Claude가 패스키 로그인(WebAuthn)을 직접 구현했고, 게시된 트랙을 위한 입력값 검증이랑 텍스트 필터도 다 짰어.
트레일러 영상도 Claude가 만들었어. 헤드리스 브라우저에서 실제 앱을 한 프레임씩 돌리면서 오프라인으로 오디오를 렌더링하는 스크립트를 짰거든. 그래서 영상이랑 소리가 완벽하게 일치해. 데모 트랙 하나를 연주하는 영상인데, 그룹을 불러오고, 이펙트를 걸고, 새 노드를 패칭하는 과정이 다 담겨 있어.

핵심 요약