Linear 앱의 초고속 성능을 가능하게 하는 핵심 웹 성능 최적화 방법

Linear 앱의 초고속 성능을 가능하게 하는 핵심 웹 성능 최적화 방법

2026. 5. 29. 14:58ㆍDev

IndexedDB를 실제 DB로 사용하고, MobX observable로 in-memory 그래프를 만듦.
UI는 항상 로컬 데이터를 읽음 → 네트워크 요청 없이 즉시 반영.
Mutation(변경)은 로컬에서 먼저 적용 → UI 즉시 re-render → 백그라운드에서 서버 동기화.
- issue.title = "new title"; issue.save(); 형태 (optimistic update).
서버는 Sync Target (동기화 대상)이지 Truth Source가 아님.
Sync Engine: WebSocket으로 delta(변경분)만 주고받음. 변경 시 granular re-render (필드 단위 MobX observer).

효과: Spinner, skeleton, loading state를 거의 없앰. 네트워크가 가장 큰 병목인데, 이를 사용자 경험에서 완전히 숨김.

실무 적용 팁:

Linear는 Client-Side Rendering(CSR)을 유지하면서도 첫 로드가 매우 빠름.

번들 최적화:
- Parcel → Rollup → Vite → Rolldown으로 여러 번 마이그레이션.
- Legacy 브라우저 지원 포기 (polyfill, ES5 transpilation 제거) → JS 크기 50% 감소.
- Aggressive Code Splitting: Route-level + Vendor per package chunk.
- 결과: Cold cache 로드 10~30% 빨라짐, 메모리 70-80% 감소.
Preloading & Parallel Fetch:
- <link rel="modulepreload">로 entry script가 필요로 하는 모든 chunk를 병렬로 미리 로드.
- Waterfall 방지 → import 시 이미 캐시에 있음.
Service Worker Precache:
- 로그인 화면에서 background로 ~1,200개 asset (route chunks, icons, fonts) precache.
- 이후 navigation은 네트워크 완전 스킵 (Cache-first).
- 오프라인 지원까지 제공.
Inlined App Shell:
- <head>에 critical CSS + JS 인라인 (테마, sidebar width, login 상태 등 localStorage 기반).
- 첫 페인트 전에 사용자 맞춤 shell 렌더링 → "앱이 바로 준비된" 느낌.
Font 최적화:
- Variable Font (Inter Variable.woff2 하나로 100-900 weight).
- font-display: swap + crossorigin preload로 FOUT/FOIT 방지.
Render First, Auth Second:
- 로컬에 데이터 있으면 바로 렌더링 → 백그라운드에서 auth/ sync 검증.
- Happy path 가정 (optimistic auth).

성능은 엔지니어링뿐 아니라 디자인 문제:

계층	전통적 방식	Linear 방식	성능 영향
데이터	Server → API	Browser (IndexedDB + MobX)	즉시 반영
Mutation	Await network	Optimistic + background sync	No spinner
Initial Load	Heavy bundle + sequential	Tiny chunks + preload + SW	Instant feel
Update	Full re-render	Granular observable	Smooth even with many changes
Navigation	Network each time	SW cache	Instant

핵심 교훈:

이 접근은 모든 웹 앱에 적용할 수 있습니다. 특히 생산성 도구, 대시보드, 협업 앱에서 Local-first + Optimistic update + 철저한 code splitting + SW를 조합하면 Linear에 가까운 경험을 낼 수 있어요.

더 구체적인 부분(예: sync engine 세부나 코드 예시)이 필요하시면 말씀해주세요!

heene