◆ ESSAY
세 번째 책이 나왔습니다. 이번 주제는 프런트엔드 성능 최적화입니다.
성능 최적화라고 하면 흔히 번들 사이즈를 줄이거나 memo를 붙이는 정도를 떠올리곤 합니다. 저 역시 그랬습니다. 하지만 실무에서 성능 문제를 마주할 때마다 느꼈던 것은, 문제의 원인이 한 곳에 있지 않다는 점이었습니다. CDN과 HTTP 프로토콜, 브라우저가 리소스를 받아 화면을 그리기까지의 렌더링 파이프라인, 자바스크립트 런타임, 그리고 프레임워크까지. 어느 한 계층만 이해해서는 "왜 느린가"라는 질문에 답하기 어려웠습니다.
이 책은 그 답답함에서 시작했습니다. 프레임워크와 라이브러리는 몇 년마다 바뀌지만, 그 아래에 있는 네트워크와 브라우저, 자바스크립트 런타임의 원리는 좀처럼 변하지 않습니다. 이번에는 그 변하지 않는 사실들을 정리해 보고 싶었습니다. 그래서 개별 최적화 팁을 나열하기보다는, 웹 성능을 계층별로 나누어 각 계층에서 무슨 일이 일어나는지, 그래서 어떤 최적화가 왜 효과가 있는지를 동작 원리 중심으로 정리했습니다.
크게 네 부분으로 구성되어 있습니다.
쓰다 보니 1,458쪽이 되었습니다. 전작들보다 두꺼워졌지만, 그만큼 성능이라는 주제가 넓고 깊다는 방증이라고 생각해 주시면 감사하겠습니다.
이번 책은 종이책 없이 전자책으로만 출간되었습니다. AI 관련 도서를 제외하면 출판 시장이 많이 어려워졌고, 이 분량을 종이책으로 내기도 쉽지 않았습니다. 종이책을 기대하셨던 분들께는 죄송하다는 말씀을 드립니다.
이번 책은 쓰는 내내 힘들었습니다. 리더 역할을 맡으면서 코드를 직접 만지는 시간이 예전 같지 않았고, 실무에서 한발 떨어져 있는 사이 감을 잃어버린 것은 아닌지, 이런 내가 실무 경험을 이야기하는 책을 쓰는 것이 독자에게 정직한 일인지 의심이 드는 순간이 많았습니다. 어쩌면 1,458쪽까지 파고든 것은 그 의심에 대한 저 나름의 대답이었는지도 모르겠습니다.
모두의 관심이 AI로 향하는 시기라는 점도 마음을 무겁게 했습니다. AI가 최적화 코드를 대신 작성해주는 시대에, 사람이 오래 쌓아온 지식이 여전히 가치가 있을까. 저는 프레임워크는 바뀌어도 계층을 관통하는 이해는 쉽게 대체되지 않는다는 쪽에 걸었지만, 책이 나오기 전까지는 그 판단이 맞는지 확인할 길이 없어 불안하기도 했습니다.
포기하고 싶은 순간마다 정신을 붙잡을 수 있게 해준 네이버 파이낸셜 팀원들, 그리고 전유정 님께 감사드립니다.
초고를 읽고 의견을 남겨주신 베타 리더분들, 이번에도 부족한 원고를 책으로 만들어주신 위키북스 편집팀에도 감사드립니다. 남아 있는 부족함은 모두 제 몫입니다.
성능 문제 앞에서 어디서부터 손대야 할지 막막했던 분들께 이 책이 도움이 되기를 바랍니다.
2편 끝에 남긴 "워커 경유 비용 500ms"를 확정하려 했지만, 대조군이 되는 하드 리로드는 하루 한 건이 안 됐다. 그래서 Playwright와 셰이핑 프록시로 대조군을 직접 만들어 재 보니 내비게이션에서 워커 비용은 2ms였고, 비용은 지연이 아니라 글 하나를 클릭할 때마다 배경에서 더 받는 바이트 쪽에 있었다. 랩과 실사용자 데이터 사이에 남겨 둔 간극은 글을 다 쓰고 나서야 103 Early Hints가 만든 측정 정의 차이였다는 것을 알았다. 서비스 워커 캐싱 딥다이브 시리즈의 세 번째 편이다.
1편의 일반론을 들고 이 블로그(Next.js App Router)를 오프라인에서도 열리게 만들었다. 첫 배포에서는 방금 읽은 글이 오프라인에서 안 열렸고, 두 번째 배포에서는 글은 열리는데 이미지가 전부 깨졌다. 소프트 내비게이션과 프리페치, next/image가 만든 함정들을 하나씩 고쳐 배포한 연대기와, 그 결과를 GA4 실사용자 데이터로 정산한 기록이다. 재방문자 FCP는 평균 634ms 좋아졌고, TTFB는 평균 525ms 나빠졌다. 서비스 워커 캐싱 딥다이브 시리즈의 두 번째 편이다.
서비스 워커는 사이트와 네트워크 사이에 선 프로그래밍 가능한 프록시다. 어디에 서 있는가, 캐시는 왜 썩는가, 배포했는데 왜 옛 버전이 보이는가, 무엇을 어떤 전략으로 담는가, 그래서 이걸 써야 하는가. 실무에서 마주치는 다섯 개의 질문을 붙잡고, opaque 응답이 104KB에서 6.6MB로 집계되는 실측과 상태 전이의 세부까지 내려간다. 『프런트엔드 성능 최적화 Deep Dive』의 캐시 장에서 못 다한 일반론이다. 서비스 워커 캐싱 딥다이브 시리즈의 첫 편이다.
벤치마크가 말해주는 불편한 진실