[Part 7.] boolean으로 표현하지 못한 재생 전환을 상태 머신으로 관리하기
재생·정지·탐색 사이의 중간 상태를 Transport FSM으로 표현하고, Controller·transitionId·타임아웃으로 비동기 Audio Backend의 완료 결과를 통제한 과정을 설명합니다.
Tag
#architecture
Published writing tagged with architecture.
[Part 0.] TypeScript DAW 엔진 구현기를 시작하며
DAW가 무엇인지, 오디오 편집 도메인의 특성, 미디 작곡에서 개발로 이어진 배경, 그리고 이 시리즈가 다루는 엔진 경계를 안내합니다.
네트워크가 끊겨도 편집을 지키는 Local-first 저장 설계
미디어 원본과 프로젝트 문서를 분리하고 Outbox와 revision을 도입해 네트워크 장애와 저장을 분리한 설계를 설명합니다.
대규모 타임라인에서도 부드럽게 동작하는 에디터 만들기
이진 탐색 기반 시간 인덱스와 rAF 기반 Signal 구독으로 Region 조회와 Canvas 갱신 경로를 분리하고, 측정 결과의 한계까지 설명합니다.
Design System 구축기
이 글에서는 디자인 시스템을 기획하면서, 당연하게 여겨지던 'npm 패키지 배포' 대신 'shadcn 스타일의 Registry 배포 방식'을 선택한 이유와, 프론트엔드 API 설계에 대한 치열했던 고민을 공유합니다.
Runtime Scope로 프로젝트 전환 Race Condition 정리하기
프로젝트 전환 중 이전 비동기 작업 결과가 새 프로젝트 상태에 섞이는 문제를 Runtime Scope로 방지한 과정을 정리합니다.
[Part 3.] 웹브라우저 멀티에디터 만들기 - 프레임 좌표계를 이용한 멀티미디어 타임라인 동기화
프레임 좌표계를 기준으로 멀티미디어 타임라인과 도메인 상태를 동기화한 설계 과정을 정리합니다.
브라우저에서 멀티미디어 Export하기: 문제 정의와 아키텍처 설계
브라우저 기반 멀티미디어 에디터에서 MP4 export를 구현하기 위해 문제를 정의하고 아키텍처를 설계한 과정을 정리합니다.
[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 처리의 한계를 설명합니다.