Sangcho.log https://sangcho-log.vercel.app 복잡한 상태를 다루는 아키텍처 설계에 강점이 있는 프론트엔드 개발자 김상초의 개발 블로그입니다. ko 링크는 걸렸는데 폰트가 안 먹는다 — 업로드한 .ttf를 FontFace로 그 자리에 렌더하기 https://sangcho-log.vercel.app/articles/dev/fontface-binary-source https://sangcho-log.vercel.app/articles/dev/fontface-binary-source 사용자가 방금 올린 폰트 파일을 서버 왕복 없이 실서체로 미리보는 기능을 만들며 정리한 기록. File이 바이트를 갖고 있지 않다는 것, arrayBuffer가 필요한 이유, 그리고 new FontFace가 "컨테이너를 씌우는" 게 아니라 이미 들어 있는 컨테이너를 파싱한다는 것을 다룹니다. dev Thu, 06 Aug 2026 00:00:00 GMT priority를 줬는데 fetchpriority가 없다 — 선언만 남은 최적화 2건, 측정이 뒤집은 판정 3건 https://sangcho-log.vercel.app/articles/dev/declared-but-no-effect https://sangcho-log.vercel.app/articles/dev/declared-but-no-effect 같은 코드베이스를 다시 측정하다가, 제가 넣어둔 최적화 두 개가 실제로는 아무 일도 하지 않고 있었다는 걸 발견했습니다. Next 16의 priority가 fetchpriority를 붙이지 않는다는 것, webpackPreload 매직 코멘트가 무효였다는 것, 그리고 자동 오픈 모달이 LCP를 잡고 있었다는 것. 측정이 제 판정을 세 번 뒤집은 기록입니다. dev Thu, 06 Aug 2026 00:00:00 GMT CLS 0.76을 고치며 버린 가설 두 개 — 문제는 배치 수가 아니라 도색 시점이었다 https://sangcho-log.vercel.app/articles/dev/cls-layout-shift https://sangcho-log.vercel.app/articles/dev/cls-layout-shift 레이아웃 시프트를 줄이려고 세운 첫 두 가설이 모두 측정으로 기각됐습니다. shift 건수를 줄여도 CLS는 그대로였고, 청크를 미리 받아둬도 모달은 여전히 튀었습니다. 그 과정에서 무한스크롤 교착 버그도 하나 나왔습니다. dev Thu, 30 Jul 2026 18:00:00 GMT @font-face를 넣었는데 캔버스에는 안 나온다 — 웹 에디터 폰트 파이프라인 4단계 https://sangcho-log.vercel.app/articles/dev/canvas-editor-font-pipeline https://sangcho-log.vercel.app/articles/dev/canvas-editor-font-pipeline 캔버스 기반 영상 에디터에서 웹폰트를 다루며 배운 것. @font-face 등록과 폰트 다운로드가 다른 일이라는 것, CSS 주입과 상태 발행 사이의 순서가 계약이 되는 이유, 그리고 "폰트가 준비됐다"는 말에 네 가지 뜻이 있다는 것을 정리했습니다. dev Wed, 29 Jul 2026 00:00:00 GMT Lighthouse 27점에서 65점까지 — 측정 도구부터 만든 성능 최적화 https://sangcho-log.vercel.app/articles/dev/lighthouse-perf-optimization https://sangcho-log.vercel.app/articles/dev/lighthouse-perf-optimization 모바일 27점 페이지를 고치며 배운 것. 서드파티 지연로드, 트리셰이킹이 안 되는 아이콘 레지스트리, 폰트 서브셋과 배포에서만 터진 404, 상수폴딩 안 되는 env 게이트, 그리고 LCP 요소를 두 번 잘못 짚은 기록입니다. dev Tue, 28 Jul 2026 18:00:00 GMT API 에러를 도메인별로 쪼개기 — 상속 계층이 만드는 다섯 개의 함정 https://sangcho-log.vercel.app/articles/dev/domain-error-classes https://sangcho-log.vercel.app/articles/dev/domain-error-classes 모든 API 에러가 하나의 CommonError로 뭉쳐 있던 프론트엔드에 도메인 에러 클래스 11개를 도입한 과정. instanceof 상속 계층, 글로벌 핸들러 제외, 에러 코드의 소속 판정에서 만난 함정과 그 해결을 정리했습니다. dev Tue, 28 Jul 2026 00:00:00 GMT HyperFrames 탐구 5 — 코드를 직접 고치는 에디터, Studio의 닫힌 루프 https://sangcho-log.vercel.app/articles/dev/hyperframes-studio-editor https://sangcho-log.vercel.app/articles/dev/hyperframes-studio-editor HyperFrames Studio가 WYSIWYG 편집을 HTML 소스 파일에 되돌려 쓰는 방법을 해부합니다. 진실의 원본이 디스크의 텍스트 파일일 때 생기는 숙제와, selector 주소 약속·요소 피커·파일 감시가 만드는 닫힌 루프까지. dev Sun, 26 Jul 2026 19:00:00 GMT HyperFrames 탐구 4 — 커스텀 렌더러 없이 HTML을 영상으로 바꾸는 법 https://sangcho-log.vercel.app/articles/dev/hyperframes-html-to-video https://sangcho-log.vercel.app/articles/dev/hyperframes-html-to-video HyperFrames가 HTML을 MP4로 바꾸는 실제 메커니즘을 해부합니다. 크롬을 렌더러로 재사용하고 시간 제어 장치만 직접 만든 설계, Puppeteer와 CDP의 관계, beginframe 모드의 결정론, FFmpeg 스트리밍 인코딩까지. dev Sun, 26 Jul 2026 18:00:00 GMT HyperFrames 탐구 3 — Golden MP4 회귀 테스트, 완성된 방의 기념사진 https://sangcho-log.vercel.app/articles/dev/hyperframes-golden-testing https://sangcho-log.vercel.app/articles/dev/hyperframes-golden-testing 렌더링 엔진의 출력을 픽셀 단위로 지키는 HyperFrames의 Golden MP4 회귀 테스트를 해부합니다. PSNR·오디오 상관계수 같은 판정 지표와, 감이 아닌 규칙으로 굴러가는 스토리보드 시스템까지 정리했습니다. dev Sun, 26 Jul 2026 17:00:00 GMT HyperFrames 탐구 2 — 에이전트가 주 저자, 사람은 디렉터가 되는 설계 https://sangcho-log.vercel.app/articles/dev/hyperframes-agent-integration https://sangcho-log.vercel.app/articles/dev/hyperframes-agent-integration HyperFrames가 AI 에이전트를 위해 준비해 둔 장치들 — 스킬 자동 발동, 앵커 문서, HTML을 데이터 모델로 쓰는 data-* 스키마, 자기 검증 루프 — 을 정리했습니다. npx와 git clone 두 실행 방식의 비교도 함께 다룹니다. dev Sun, 26 Jul 2026 16:00:00 GMT HyperFrames 탐구 1 — URL 하나가 MP4가 되기까지, 영화 제작소의 7단계 https://sangcho-log.vercel.app/articles/dev/hyperframes-pipeline https://sangcho-log.vercel.app/articles/dev/hyperframes-pipeline 웹사이트 URL을 주면 홍보 영상 MP4를 만들어주는 HyperFrames의 전체 파이프라인을 유저 플로우 관점에서 추적했습니다. 준비 60%, 실행 30%, 검증 10%라는 제작 철학까지 정리합니다. dev Sun, 26 Jul 2026 15:00:00 GMT OpenCut 탐구 6 — IndexedDB, OPFS, 그리고 에디터를 떠받치는 외부 서비스 지도 https://sangcho-log.vercel.app/articles/dev/opencut-external-services https://sangcho-log.vercel.app/articles/dev/opencut-external-services OpenCut이 서버 없이 편집 데이터를 보관하는 두 저장소(IndexedDB와 OPFS)의 분업을 정리하고, 인증부터 자막 생성까지 프로젝트가 기대고 있는 외부 서비스 전체를 지도로 그렸습니다. dev Sun, 26 Jul 2026 14:00:00 GMT OpenCut 탐구 5 — Web Audio 재생 엔진, 두 개의 시계와 연착하는 열차들 https://sangcho-log.vercel.app/articles/dev/opencut-web-audio https://sangcho-log.vercel.app/articles/dev/opencut-web-audio OpenCut의 오디오 재생을 열차 시간표에 비유해 해부합니다. rAF 시계와 AudioContext 시계의 분업, lookahead 스케줄링, 그리고 버퍼가 늦게 도착했을 때의 3단계 지연 보상까지 정리했습니다. dev Sun, 26 Jul 2026 13:00:00 GMT OpenCut 탐구 4 — Command 패턴, 함수 호출을 주문서로 바꾸면 생기는 일 https://sangcho-log.vercel.app/articles/dev/opencut-command-pattern https://sangcho-log.vercel.app/articles/dev/opencut-command-pattern Undo/Redo의 근간인 Command 패턴을 식당 주문서 비유와 텍스트 에디터 예제로 익히고, OpenCut이 51개 커맨드로 이 패턴을 정석 구현한 방식을 정리했습니다. dev Sun, 26 Jul 2026 12:00:00 GMT OpenCut 탐구 3 — EditorCore와 10개의 매니저, 부서로 돌아가는 회사 https://sangcho-log.vercel.app/articles/dev/opencut-managers https://sangcho-log.vercel.app/articles/dev/opencut-managers OpenCut 편집 엔진을 구성하는 10개 매니저의 역할과 협업 방식, 그리고 모든 매니저가 공유하는 subscribe/notify 패턴이 React와 만나는 지점을 정리했습니다. dev Sun, 26 Jul 2026 11:00:00 GMT OpenCut 탐구 2 — 자동 저장은 누가, 언제, 무엇을 저장하는가 https://sangcho-log.vercel.app/articles/dev/opencut-save-load https://sangcho-log.vercel.app/articles/dev/opencut-save-load OpenCut의 저장/불러오기 파이프라인을 SaveManager·ProjectManager·storageService의 역할 분담으로 해부하고, 저장 경로가 둘로 갈라져 생기는 race condition까지 정리했습니다. dev Sun, 26 Jul 2026 10:00:00 GMT OpenCut 탐구 1 — 폴더 구조로 읽는 브라우저 비디오 에디터의 설계도 https://sangcho-log.vercel.app/articles/dev/opencut-folder-structure https://sangcho-log.vercel.app/articles/dev/opencut-folder-structure 오픈소스 웹 비디오 에디터 OpenCut의 apps/web 폴더 구조를 한 장의 지도처럼 훑으며, 에디터 아키텍처의 큰 그림을 정리했습니다. dev Sun, 26 Jul 2026 09:00:00 GMT 블로그를 시작하며 https://sangcho-log.vercel.app/articles/essay/hello-world https://sangcho-log.vercel.app/articles/essay/hello-world 직접 만든 블로그에 쓰는 첫 번째 글입니다. essay Sat, 25 Jul 2026 00:00:00 GMT TanStack Query와 Next.js 캐시 — 같이 쓰지 말라가 아니라, 주인을 정하라 https://sangcho-log.vercel.app/articles/dev/tanstack-query-nextjs-cache https://sangcho-log.vercel.app/articles/dev/tanstack-query-nextjs-cache prefetch + hydrate 패턴에 Next.js 캐시를 어떻게 조합해야 하는지, 이중 캐싱의 함정과 데이터별 주인 정하기 원칙으로 정리했습니다. dev Sat, 25 Jul 2026 00:00:00 GMT Next.js 16 — 알아서 해주던 것에서, 내가 지시하는 것으로 https://sangcho-log.vercel.app/articles/dev/nextjs-16 https://sangcho-log.vercel.app/articles/dev/nextjs-16 Next.js 16의 변화를 관통하는 철학 하나와 핵심 개념 5가지(use cache, PPR, proxy.ts, Turbopack, hydration diff)를 비유로 정리했습니다. dev Sat, 25 Jul 2026 00:00:00 GMT JS/WASM, 그리고 WebCodecs — 웹 미디어 처리의 삼분할 지형도 https://sangcho-log.vercel.app/articles/dev/js-wasm-webcodecs https://sangcho-log.vercel.app/articles/dev/js-wasm-webcodecs 브라우저에서 영상을 다룰 때 왜 JS/WASM 라이브러리와 WebCodecs가 역할을 나눠 갖는지, 재생·내보내기 파이프라인 구조와 함께 정리했습니다. dev Sat, 25 Jul 2026 00:00:00 GMT IndexedDB — 브라우저 안에 있는 내 전용 창고 https://sangcho-log.vercel.app/articles/dev/indexeddb https://sangcho-log.vercel.app/articles/dev/indexeddb 쿠키·localStorage와의 차이부터 트랜잭션 함정, 마이그레이션과 데이터 보존 전략까지 IndexedDB를 창고 비유로 정리했습니다. dev Sat, 25 Jul 2026 00:00:00 GMT flushSync — 택배 묶음배송 vs 퀵서비스 https://sangcho-log.vercel.app/articles/dev/flushsync https://sangcho-log.vercel.app/articles/dev/flushsync React의 배칭을 건너뛰고 화면 갱신 결과를 바로 읽어야 할 때, flushSync를 언제 쓰고 언제 쓰지 말아야 하는지 정리했습니다. dev Sat, 25 Jul 2026 00:00:00 GMT