[Part 7.] boolean으로 표현하지 못한 재생 전환을 상태 머신으로 관리하기
재생·정지·탐색 사이의 중간 상태를 Transport FSM으로 표현하고, Controller·transitionId·타임아웃으로 비동기 Audio Backend의 완료 결과를 통제한 과정을 설명합니다.
Archive
전체 글
공개된 글을 최신순으로 모았습니다.
[Part 0.] TypeScript DAW 엔진 구현기를 시작하며
DAW가 무엇인지, 오디오 편집 도메인의 특성, 미디 작곡에서 개발로 이어진 배경, 그리고 이 시리즈가 다루는 엔진 경계를 안내합니다.
네트워크가 끊겨도 편집을 지키는 Local-first 저장 설계
미디어 원본과 프로젝트 문서를 분리하고 Outbox와 revision을 도입해 네트워크 장애와 저장을 분리한 설계를 설명합니다.
Cubic Hermite Spline이란? 값과 접선으로 만드는 3차 보간
Cubic Hermite 보간식과 연속성 조건, 접선 선택에 따른 Overshoot를 살펴보고 DAW Automation Curve에 적용한 방법을 설명합니다.
DAG(Directed Acyclic Graph)란? 의존 관계에서 실행 순서 구하기
DAG의 방향성과 비순환 조건, 위상 정렬과 Cycle 탐지 원리를 살펴보고 DAW Audio Routing에 적용한 이유를 설명합니다.
대규모 타임라인에서도 부드럽게 동작하는 에디터 만들기
이진 탐색 기반 시간 인덱스와 rAF 기반 Signal 구독으로 Region 조회와 Canvas 갱신 경로를 분리하고, 측정 결과의 한계까지 설명합니다.
이진 탐색 기반 Region 시간 인덱스와 rAF Signal 구현하기
Viewport 내 Region만 조회하는 시간 인덱스와 React 실행에서 Canvas draw를 분리하는 rAF 기반 Signal 구독 패턴을 단계별로 구현합니다.
[아키텍처 회고] Electron에서는 공유 데이터를 어디에 둬야 할까?
여러 Renderer가 가진 오래된 상태가 최신 SRT 자막을 덮어쓴 원인을 추적하고, Main Process의 ProjectSession을 공유 데이터의 SSOT로 재설계한 과정을 정리합니다.
Design System 구축기
이 글에서는 디자인 시스템을 기획하면서, 당연하게 여겨지던 'npm 패키지 배포' 대신 'shadcn 스타일의 Registry 배포 방식'을 선택한 이유와, 프론트엔드 API 설계에 대한 치열했던 고민을 공유합니다.
상태 관리 도구 선택 기준과 Store 분리의 중요성
React Context 리렌더 문제를 기준으로 상태 관리 도구 선택과 Store 분리 기준을 정리합니다.
[Part 3.] 오버레이 방식으로 드래그 리렌더 제거하기
타임라인 리전 드래그 중 Canvas 리렌더를 피하기 위해 overlay 기반 이동 구조로 바꾼 과정을 정리합니다.
[Part 2.] 회고록: 정말 최선이었을까?
타임라인 드래그 성능 개선 과정을 다시 검토하며 측정, 병목 분리, 재측정의 중요성을 정리합니다.
[Part 1.] React 경로를 줄이고 한 프레임에 한 번만 그리기
타임라인 드래그 중 React commit과 Canvas draw 비용을 측정하고 rAF 기반 처리로 줄인 과정을 정리합니다.
[Part 3.] Web Worker를 UI 응답성 기준으로 다시 검증하기
전체 생성 시간이 아니라 UI 루프 지연을 비교해 Web Worker를 유지할 근거와 아직 남은 불확실성을 정리합니다.
[Part 2.] 화면에 필요한 썸네일부터 생성하기
영상 길이 기준의 일괄 생성을 poster, visible tile, background prefetch로 나눈 이유와 요청 관리 규칙을 정리합니다.
Runtime Scope로 프로젝트 전환 Race Condition 정리하기
프로젝트 전환 중 이전 비동기 작업 결과가 새 프로젝트 상태에 섞이는 문제를 Runtime Scope로 방지한 과정을 정리합니다.
[Part 1.] 첫 화면과 전체 썸네일을 따로 최적화하기
첫 화면은 HTMLVideoElement seek로 빠르게 채우고, 나머지는 Web Worker에서 생성하도록 나눈 과정을 정리합니다.
타임라인 Region 만들기 - Canvas 단일 레이어의 한계와 SVG 분리
타임라인 줌에서 Canvas 크기 한계로 리전이 사라지는 문제를 SVG 레이어 분리로 해결한 과정을 정리합니다.
[Part 3.] 웹브라우저 멀티에디터 만들기 - 프레임 좌표계를 이용한 멀티미디어 타임라인 동기화
프레임 좌표계를 기준으로 멀티미디어 타임라인과 도메인 상태를 동기화한 설계 과정을 정리합니다.
브라우저에서 멀티미디어 Export하기: 문제 정의와 아키텍처 설계
브라우저 기반 멀티미디어 에디터에서 MP4 export를 구현하기 위해 문제를 정의하고 아키텍처를 설계한 과정을 정리합니다.
[Part 6.] Audio Processor 실행 순서를 DAG로 모델링한 이유
분기와 합류가 있는 Audio Processing 의존성을 DAG로 표현하고, 위상 정렬·Cycle 탐지·병렬 Group을 계산한 구조를 설명합니다.
[AI] 에이전트 코딩 시대에 front-end 개발자로서의 역할에 대한 고찰
AI 코딩 시대에 프론트엔드 개발자가 어떤 판단과 품질 책임을 가져야 하는지 정리합니다.
[Part 2.] 웹브라우저 멀티에디터 만들기 - 아키텍처 설계 변화
멀티미디어 에디터 타임라인 구현 과정에서 Facade, Session Layer, 폴더 구조를 재정의한 이유를 정리합니다.
[Part 1.] 웹브라우저 멀티에디터 만들기 - 아키텍처 설계
웹브라우저 기반 멀티미디어 에디터에서 레이어드 아키텍처와 단방향 데이터 흐름을 선택한 과정을 정리합니다.
[Part 5.] 오디오 Export는 Encode 한 번으로 끝나지 않았다
Render, Normalize, True Peak Limit, Dither, Encode 순서를 고정한 Offline Export 파이프라인과 진행 상태·Stem 처리의 한계를 설명합니다.
오디오 파형 로딩 지연 해결기: 동적 stride를 이용한 Peak 연산 최적화
긴 오디오 파일에서 파형 Peak 추출이 메인 스레드를 점유하던 문제를 동적 stride 방식으로 줄인 과정을 정리합니다.
rAF로 오디오 에디터 줌 기능 버벅거림 잡기
오디오 에디터 줌 핸들 드래그가 버벅이던 문제를 rAF 기반 업데이트 분리로 줄인 과정을 정리합니다.
[Part 4.] MIDI 파일은 Note 배열이 아니라 Event Stream이었다
Standard MIDI File의 Chunk, Delta Time, VLQ, Running Status와 Note 수명 주기를 직접 파싱하고 다시 쓰는 구조를 설명합니다.
[Part 3.] Automation은 점을 연결하는 기능이 아니었다
DAW Automation에서 정렬된 Point, 곡선 보간, Write 상태, Guard Point와 Point Thinning을 하나의 모델로 구성한 과정을 설명합니다.
[Part 2.] Sample Peak만으로 부족해서 Meter DSP를 설계했다
K-weighting, 시간 창, loudness gate, 4배 oversampling을 조합한 블록 기반 Meter DSP의 구조와 블록 경계에서 발견한 한계를 설명합니다.
[Part 1.] 가변 Tempo DAW에서 Frame과 Beat를 어떻게 변환할까
Tempo와 박자표가 바뀌는 DAW 타임라인에서 Frame·Beat·BBT 변환을 구간 누적으로 설계한 과정과 남은 검증 범위를 설명합니다.