[Part 0.] TypeScript DAW 엔진 구현기를 시작하며
DAW가 무엇인지, 오디오 편집 도메인의 특성, 미디 작곡에서 개발로 이어진 배경, 그리고 이 시리즈가 다루는 엔진 경계를 안내합니다.
Collections
시리즈
기술적 임팩트가 큰 시리즈부터, 각 시리즈 안에서는 읽는 순서대로 모았습니다.
TypeScript DAW 엔진 구현기
8개 글
[Part 1.] 가변 Tempo DAW에서 Frame과 Beat를 어떻게 변환할까
Tempo와 박자표가 바뀌는 DAW 타임라인에서 Frame·Beat·BBT 변환을 구간 누적으로 설계한 과정과 남은 검증 범위를 설명합니다.
[Part 2.] Sample Peak만으로 부족해서 Meter DSP를 설계했다
K-weighting, 시간 창, loudness gate, 4배 oversampling을 조합한 블록 기반 Meter DSP의 구조와 블록 경계에서 발견한 한계를 설명합니다.
[Part 3.] Automation은 점을 연결하는 기능이 아니었다
DAW Automation에서 정렬된 Point, 곡선 보간, Write 상태, Guard Point와 Point Thinning을 하나의 모델로 구성한 과정을 설명합니다.
[Part 4.] MIDI 파일은 Note 배열이 아니라 Event Stream이었다
Standard MIDI File의 Chunk, Delta Time, VLQ, Running Status와 Note 수명 주기를 직접 파싱하고 다시 쓰는 구조를 설명합니다.
[Part 5.] 오디오 Export는 Encode 한 번으로 끝나지 않았다
Render, Normalize, True Peak Limit, Dither, Encode 순서를 고정한 Offline Export 파이프라인과 진행 상태·Stem 처리의 한계를 설명합니다.
[Part 6.] Audio Processor 실행 순서를 DAG로 모델링한 이유
분기와 합류가 있는 Audio Processing 의존성을 DAG로 표현하고, 위상 정렬·Cycle 탐지·병렬 Group을 계산한 구조를 설명합니다.
[Part 7.] boolean으로 표현하지 못한 재생 전환을 상태 머신으로 관리하기
재생·정지·탐색 사이의 중간 상태를 Transport FSM으로 표현하고, Controller·transitionId·타임아웃으로 비동기 Audio Backend의 완료 결과를 통제한 과정을 설명합니다.
웹브라우저 멀티에디터 만들기
3개 글
[Part 1.] 웹브라우저 멀티에디터 만들기 - 아키텍처 설계
웹브라우저 기반 멀티미디어 에디터에서 레이어드 아키텍처와 단방향 데이터 흐름을 선택한 과정을 정리합니다.
[Part 2.] 웹브라우저 멀티에디터 만들기 - 아키텍처 설계 변화
멀티미디어 에디터 타임라인 구현 과정에서 Facade, Session Layer, 폴더 구조를 재정의한 이유를 정리합니다.
[Part 3.] 웹브라우저 멀티에디터 만들기 - 프레임 좌표계를 이용한 멀티미디어 타임라인 동기화
프레임 좌표계를 기준으로 멀티미디어 타임라인과 도메인 상태를 동기화한 설계 과정을 정리합니다.
드래그 최적화
3개 글
[Part 1.] React 경로를 줄이고 한 프레임에 한 번만 그리기
타임라인 드래그 중 React commit과 Canvas draw 비용을 측정하고 rAF 기반 처리로 줄인 과정을 정리합니다.
[Part 2.] 회고록: 정말 최선이었을까?
타임라인 드래그 성능 개선 과정을 다시 검토하며 측정, 병목 분리, 재측정의 중요성을 정리합니다.
[Part 3.] 오버레이 방식으로 드래그 리렌더 제거하기
타임라인 리전 드래그 중 Canvas 리렌더를 피하기 위해 overlay 기반 이동 구조로 바꾼 과정을 정리합니다.
썸네일 생성 최적화
3개 글
[Part 1.] 첫 화면과 전체 썸네일을 따로 최적화하기
첫 화면은 HTMLVideoElement seek로 빠르게 채우고, 나머지는 Web Worker에서 생성하도록 나눈 과정을 정리합니다.
[Part 2.] 화면에 필요한 썸네일부터 생성하기
영상 길이 기준의 일괄 생성을 poster, visible tile, background prefetch로 나눈 이유와 요청 관리 규칙을 정리합니다.
[Part 3.] Web Worker를 UI 응답성 기준으로 다시 검증하기
전체 생성 시간이 아니라 UI 루프 지연을 비교해 Web Worker를 유지할 근거와 아직 남은 불확실성을 정리합니다.
