기록하는 개발자,
상초입니다.
복잡한 상태를 다루는 아키텍처 설계에 강점이 있는 6년 차 프론트엔드 개발자입니다. AI 영상 편집 에디터(캔버스·타임라인)처럼 상태가 복잡한 도메인에서 undo/redo 히스토리, 선언적 오디오 엔진 등 코어 아키텍처를 설계·구축해 왔고, 필요에 따라 백엔드와 인프라(Nginx, Docker, CI/CD)까지 다루며 서비스 전체를 봅니다. 여러 직무의 동료와 협업할 때 더 나은 결과물이 나온다고 믿으며, 스스로를 변화시키는 것은 결국 하루하루의 노력이라고 생각합니다.
Recent articles
- 링크는 걸렸는데 폰트가 안 먹는다 — 업로드한 .ttf를 FontFace로 그 자리에 렌더하기
사용자가 방금 올린 폰트 파일을 서버 왕복 없이 실서체로 미리보는 기능을 만들며 정리한 기록. File이 바이트를 갖고 있지 않다는 것, arrayBuffer가 필요한 이유, 그리고 new FontFace가 "컨테이너를 씌우는" 게 아니라 이미 들어 있는 컨테이너를 파싱한다는 것을 다룹니다.
- priority를 줬는데 fetchpriority가 없다 — 선언만 남은 최적화 2건, 측정이 뒤집은 판정 3건
같은 코드베이스를 다시 측정하다가, 제가 넣어둔 최적화 두 개가 실제로는 아무 일도 하지 않고 있었다는 걸 발견했습니다. Next 16의 priority가 fetchpriority를 붙이지 않는다는 것, webpackPreload 매직 코멘트가 무효였다는 것, 그리고 자동 오픈 모달이 LCP를 잡고 있었다는 것. 측정이 제 판정을 세 번 뒤집은 기록입니다.
- CLS 0.76을 고치며 버린 가설 두 개 — 문제는 배치 수가 아니라 도색 시점이었다
레이아웃 시프트를 줄이려고 세운 첫 두 가설이 모두 측정으로 기각됐습니다. shift 건수를 줄여도 CLS는 그대로였고, 청크를 미리 받아둬도 모달은 여전히 튀었습니다. 그 과정에서 무한스크롤 교착 버그도 하나 나왔습니다.
- @font-face를 넣었는데 캔버스에는 안 나온다 — 웹 에디터 폰트 파이프라인 4단계
캔버스 기반 영상 에디터에서 웹폰트를 다루며 배운 것. @font-face 등록과 폰트 다운로드가 다른 일이라는 것, CSS 주입과 상태 발행 사이의 순서가 계약이 되는 이유, 그리고 "폰트가 준비됐다"는 말에 네 가지 뜻이 있다는 것을 정리했습니다.
- Lighthouse 27점에서 65점까지 — 측정 도구부터 만든 성능 최적화
모바일 27점 페이지를 고치며 배운 것. 서드파티 지연로드, 트리셰이킹이 안 되는 아이콘 레지스트리, 폰트 서브셋과 배포에서만 터진 404, 상수폴딩 안 되는 env 게이트, 그리고 LCP 요소를 두 번 잘못 짚은 기록입니다.