프로젝트 기획서

프로젝트 기획서

서비스 주제

브라우저에서 음악을 만드는 clip 기반 DAW

사용자가 브라우저 상에서 음악 아이디어를 스케치해 볼 수 있는 서비스를 목표로 한다. 음악의 단위로 clip들을 만든 뒤, 만든 clip들을 배치하고 연결하여 음악을 완성해 나갈 수 있게 한다. 프로젝트는 browser-first로 진행하지만, 추후 데스크톱 패키징 가능성을 염두에 둔다.

서비스 핵심 기능

1. clip editor

• drum step sequencer
• piano roll
• instrument 추가/수정/삭제
• BPM 제어

2. clip arrangement

• clip을 가로/세로로 배치하는 arrangement view

3. additional convenience

• 프로젝트 데이터 export/import

기술 스택

오디오 타이밍과 UI 렌더링을 분리하는 구조를 만들 수 있어야 한다.

• Vite + React + TypeScript + CSS Modules
• Web Audio API: 브라우저에서 sample playback 및 scheduling을 구현할 수 있는 표준 API
• ESLint, Vitest, Vite build: CI에서 lint, unit test, production build 확인

페이지 구성

common parts

• Top transport bar
  • 서비스 이름
  • play/stop/record 버튼
  • BPM slider
  • editor/arrangement mode toggle
• Left project/clip sidebar
  • 현재 project name
  • clip 목록
  • clip 내 instrument 목록
  • settings, export 버튼

clip editor

• Step sequencer panel
  • drum lane(기본 4개: kick, snare, closed hi-hat, open hi-hat)
  • lane별 16-step button
  • step toggle state 표시
• Piano roll panel
  • 왼쪽 piano keyboard(pitch name 표시)
  • 32-column note grid
  • beat marker: 1, 2, 3, 4

clip arrangement

• Arrangement panel
  • 가로축 시간, 세로축 track으로 구성된 grid

---

추후 확장 계획

• Project import/export
  • project JSON 저장 및 불러오기
• Mixer/effects panel
  • track volume, pan, basic effects