web-performance

4 개의 포스트

네이버 통합검색 AIB 도입과 웹 성능 변화 분석 (새 탭에서 열림)

네이버 통합검색에 도입된 AI 브리핑(AIB)은 채팅 기반의 동적인 UI 특성으로 인해 기존의 핵심 웹 지표인 LCP(Largest Contentful Paint)를 지연시키는 결과를 초래했습니다. 분석 결과, 이는 서버 성능의 문제가 아니라 스트리밍 방식의 어절 단위 렌더링과 인터랙션을 위한 DOM 재구성 등 클라이언트 측의 구조적 특성이 LCP 측정 방식과 충돌하며 발생한 현상으로 확인되었습니다. 네이버는 이러한 UI 특성을 고려하여 LCP 위주의 단일 지표 관리에서 벗어나, TTFT(Time to First Token)와 같은 사용자 체감 성능에 특화된 새로운 측정 체계를 도입하여 성능 관리를 고도화할 계획입니다. **AIB 도입에 따른 성능 지표의 변화** * **LCP p95 지표 악화:** AIB 노출량이 증가함에 따라 통합검색의 LCP p95 값이 목표치인 2.5초를 상회하는 약 3.1초까지 상승하는 경향을 보였습니다. * **성능 분포의 변화:** AIB가 전체 LCP 분포의 꼬리(tail) 영역에 영향을 주면서, 'Good' 구간에 해당하는 사용자 비율이 감소하고 느린 구간의 사용자가 증가했습니다. * **렌더링 방식의 차이:** 구글의 AI Overview가 블록 단위로 렌더링하는 것과 달리, 네이버 AIB는 어절 단위의 점진적 노출과 적극적인 애니메이션을 사용하여 지표 측정에 더 큰 영향을 미쳤습니다. **채팅 UI에서 LCP 왜곡이 발생하는 기술적 원인** * **DOM 재구성 로직:** 텍스트 애니메이션이 끝난 후 하이라이트 기능을 위해 DOM 구조를 다시 변경하는 과정에서, 브라우저가 LCP 후보 영역의 렌더링 시점을 실제보다 늦게 기록하게 됩니다. * **어절 단위 렌더링의 한계:** 콘텐츠가 어절 단위로 쪼개져 렌더링되면 LCP 알고리즘이 '가장 큰 텍스트 블록'을 찾지 못하거나, 의미가 적은 작은 요소를 LCP로 잘못 선택하는 문제가 발생합니다. * **Chromium Paint Invalidation:** 스트리밍 방식으로 텍스트가 추가될 때마다 해당 레이어 전체에 페인트 무효화가 발생하며, 이로 인해 이미 화면에 그려진 요소의 `renderTime`이 프레임 단위로 계속 갱신되어 최종 측정값이 늦춰집니다. **네이버 통합검색의 성능 관리 개선 방향** * **독립적 성능 기준 수립:** AIB 영역을 제외한 일반 검색 결과의 LCP 'Good' 비율은 96%로 안정적이므로, AIB와 같은 특수 UI에는 별도의 성능 지표를 적용할 필요가 있습니다. * **TTFT(Time to First Token) 도입:** 사용자가 첫 번째 응답을 인지하는 시점을 측정하는 TTFT를 핵심 지표로 검토하여, 채팅 UI의 실제 체감 성능을 더 정확하게 반영하고자 합니다. * **지표 해석의 고도화:** 단순히 수치상의 LCP 최적화에 매몰되지 않고, UI의 특성과 사용자 경험을 더 잘 예측할 수 있도록 지표 분석 체계를 세분화하고 개선해 나갈 예정입니다. 현대적인 웹 환경에서는 스트리밍이나 동적 인터랙션이 강조되는 만큼, 기존의 정적 페이지 중심 지표인 LCP만으로 모든 성능을 대변하기 어렵습니다. 따라서 서비스의 UI 특성에 맞춰 TTFT와 같은 대안 지표를 함께 활용하고, 지표의 수치 너머에 있는 브라우저 렌더링 파이프라인의 동작 원리를 이해하는 것이 실질적인 사용자 경험 개선의 핵심입니다.

Figma 렌더링: Web (새 탭에서 열림)

Figma는 웹 브라우저라는 제한적인 환경에서 고성능 그래픽 도구를 구현하기 위해 전통적인 웹 개발 방식을 넘어선 혁신적인 엔지니어링 접근법을 취하고 있습니다. 핵심은 C++ 엔진과 WebAssembly를 활용한 저수준 최적화, 그리고 독자적인 데이터 구조를 통해 데스크톱 애플리케이션에 필적하는 속도와 안정성을 확보한 것입니다. 이러한 성능 최적화는 단순한 기능 개선을 넘어 수만 개의 레이어가 포함된 대규모 협업 환경에서도 지연 없는 사용자 경험을 제공하는 Figma의 핵심 경쟁력이 되었습니다. ### WebAssembly와 C++ 기반의 핵심 엔진 * 브라우저의 JavaScript 엔진이 가진 가비지 컬렉션(GC) 성능 저하와 예측 불가능한 실행 속도를 극복하기 위해, 서비스의 핵심 로직을 C++로 작성했습니다. * 작성된 C++ 코드를 WebAssembly(Wasm)로 컴파일하여 브라우저에서 실행함으로써, 네이티브 앱에 가까운 실행 속도를 확보하고 메모리 레이아웃을 직접 정밀하게 제어합니다. * 이를 통해 복잡한 벡터 연산이나 대량의 객체 렌더링 시에도 일정한 프레임 레이트를 유지하며, 대규모 디자인 파일 로딩 성능을 비약적으로 향상시켰습니다. ### 고성능 렌더링 파이프라인 및 GPU 활용 * 웹 표준 렌더링 방식의 한계를 넘기 위해 Skia 기반의 독자적인 렌더링 엔진을 구축하고, GPU 가속을 적극적으로 활용합니다. * 화면의 변경된 부분만 효율적으로 업데이트하는 '더티 렉트(Dirty Rect)' 알고리즘과 타일링 기법을 적용하여 불필요한 연산을 최소화합니다. * 고해상도 디스플레이 환경에서도 줌인/줌아웃 및 패닝(Panning) 시 끊김 없는 부드러운 화면 전환을 위해 픽셀당 연산 과정을 최적화했습니다. ### 실시간 협업을 위한 데이터 동기화 아키텍처 * 여러 사용자가 동시에 편집하는 환경에서 데이터 충돌을 방지하고 일관성을 유지하기 위해 CRDT(Conflict-free Replicated Data Types) 개념을 응용한 동기화 엔진을 운용합니다. * 전체 파일 데이터를 다시 전송하는 대신, 변경된 속성(Diff)만을 최소 단위로 패키징하여 전송함으로써 네트워크 대역폭 사용량을 획기적으로 줄였습니다. * 사용자의 조작을 로컬에서 즉각 반영하는 '낙관적 업데이트'와 서버와의 비동기 통신을 정교하게 결합하여, 네트워크 지연 시간이 있는 상황에서도 체감 속도를 높였습니다. ### 대규모 프로젝트를 위한 메모리 관리 전략 * 브라우저의 메모리 제한(특히 32비트 환경의 한계)을 극복하기 위해 64비트 WebAssembly를 도입하고 메모리 파티셔닝 기술을 적용했습니다. * 파일 내의 수많은 레이어와 에셋을 한꺼번에 불러오지 않고, 화면에 보이는 요소나 필요한 데이터만 우선적으로 로드하는 지연 로딩(Lazy Loading) 기법을 사용합니다. * 지속적인 성능 프로파일링을 통해 메모리 누수를 감지하고, 불필요한 객체를 즉각 해제하는 엄격한 리소스 관리 체계를 구축하여 장시간 작업 시에도 안정성을 유지합니다. Figma의 사례는 웹 기술의 한계를 탓하기보다 WebAssembly와 GPU 가속 같은 최신 표준을 밑바닥부터 활용하여 문제를 해결하는 방식의 중요성을 보여줍니다. 성능 최적화는 단기적인 작업이 아니라 제품의 설계 단계부터 고려되어야 하는 핵심 원칙이며, 특히 협업 툴에서는 성능이 곧 사용자의 생산성과 직결된다는 점을 명심해야 합니다. 최신 웹 기술 스택을 고려 중인 엔지니어라면 성능 병목 지점을 해결하기 위해 저수준 제어권을 확보하는 전략을 검토해 볼 필요가 있습니다.

Rust의 메모리 최적화 (새 탭에서 열림)

Figma는 파일 로드 속도를 혁신적으로 개선하기 위해 전체 파일을 한 번에 불러오는 방식에서 사용자가 현재 보고 있는 페이지만 불러오는 '페이지 단위 온디맨드 로딩' 방식으로 전환했습니다. 이 과정에서 메모리 사용량을 최적화하고 복잡한 동기화 메커니즘을 재설계하여, 특히 대규모 프로젝트에서의 초기 로딩 시간을 최대 50%까지 단축했습니다. 이는 협업 기능을 온전히 유지하면서도 효율적인 자원 관리를 통해 사용자 경험을 극대화한 기술적 성과입니다. **기존 모놀리식 로딩 방식의 한계** * 이전의 Figma는 파일 내 모든 페이지의 데이터를 초기 로딩 시점에 메모리에 전부 적재하는 방식을 사용했습니다. * 파일 규모가 커질수록 로딩 시간이 기하급수적으로 늘어났으며, 브라우저의 메모리 제한으로 인해 대형 파일 실행 시 충돌(Crash)이 발생하는 주요 원인이 되었습니다. * 사용자가 특정 페이지만 작업하더라도 당장 보지 않는 수십 개의 페이지 데이터를 모두 다운로드하고 해석해야 하는 비효율이 존재했습니다. **페이지 단위 온디맨드 로딩 도입** * 파일 저장 구조를 수정하여 각 페이지 데이터를 독립적인 단위로 분리하고, 사용자가 해당 페이지를 클릭할 때만 서버에서 데이터를 가져오도록 변경했습니다. * 초기 로딩 시에는 파일의 전체 구조(페이지 목록, 레이어 트리 등)와 사용자가 마지막으로 머물렀던 페이지만 로드하여 '유효 로딩 시간(Time to Interactive)'을 대폭 줄였습니다. * 페이지 전환 시 지연을 최소화하기 위해 백그라운드에서 데이터를 미리 가져오거나 스트리밍하는 최적화 기법을 적용했습니다. **기술적 난제와 동기화 엔진의 재설계** * Figma의 핵심인 실시간 협업(Multiplayer) 기능을 유지하기 위해, 현재 로드되지 않은 페이지에서 다른 사용자가 수행하는 변경 사항을 추적하고 병합하는 복잡한 로직을 구현했습니다. * C++로 작성된 엔진(Wasm)이 메모리에 없는 데이터에 접근하려 할 때 발생하는 오류를 방지하기 위해 데이터 접근 방식을 프록시화했습니다. * 전체 데이터를 다루던 기존 인덱싱 구조를 부분 로딩 모델에 맞게 재설계하여 데이터 일관성을 보장했습니다. **성능 개선 및 안정성 확보** * 로딩 전략 수정 후 대규모 파일의 초기 로드 속도가 이전 대비 약 30~50% 향상되는 결과를 얻었습니다. * 메모리 사용량을 획기적으로 낮춤으로써 저사양 기기에서의 안정성을 확보하고, 브라우저의 메모리 부족으로 인한 앱 종료 현상을 크게 줄였습니다. * 점진적인 롤아웃과 모니터링을 통해 대규모 데이터 마이그레이션 과정에서 발생할 수 있는 데이터 손실 위험을 성공적으로 관리했습니다. 대규모 데이터를 다루는 웹 애플리케이션에서 초기 로딩 속도와 메모리 관리는 서비스의 생존과 직결됩니다. Figma의 사례처럼 데이터 구조를 세밀하게 파편화하고 '필요한 순간에만 로드'하는 지연 로딩(Lazy Loading) 전략을 시스템 심층부(엔진 레벨)부터 설계하면, 확장성과 사용자 만족도를 동시에 잡을 수 있습니다.

피그마가 게임 세계에서 (새 탭에서 열림)

피그마는 단순한 웹 애플리케이션을 넘어 고성능 게임 엔진과 유사한 기술적 아키텍처를 기반으로 구축된 창의적 협업 도구입니다. 이 글은 피그마가 실시간 멀티플레이어 시스템, 물리 기반 애니메이션, 그리고 C++와 WebAssembly, Rust와 같은 고성능 스택을 통해 어떻게 디지털 세계를 구축하는지 설명합니다. 결과적으로 피그마는 게임 개발의 복잡한 시스템 상호작용 원리를 차용하여 사용자들에게 몰입감 있고 매끄러운 디자인 경험을 제공하고 있습니다. ## 디지털 세계를 구축하는 엔진으로서의 피그마 * 피그마의 핵심은 웹 기반의 2D 그래픽 및 렌더링 시스템으로, 이는 마인크래프트와 같은 게임 엔진의 근간과 동일한 구조를 가집니다. * 사용자가 생성하는 모든 텍스트, 도형, 선을 브라우저에서 실시간으로 구현하며, 방대한 캔버스에서의 팬(pan)과 줌(zoom) 조작 시에도 정확한 위치에 객체를 렌더링합니다. * 실시간 동시 편집 기능을 게임의 개념에서 착안한 '멀티플레이어(multiplayer)' 엔진이라고 명명하여 협업의 핵심 시스템으로 발전시켰습니다. * 브라우저 및 모바일 앱의 메모리와 성능 제약을 극복하기 위해 일반적인 웹 스택 대신 C++로 캔버스를 구축한 후 WebAssembly로 컴파일하여 로딩 속도를 3배 개선했으며, 서버 측 성능 향상을 위해 Rust 언어를 도입했습니다. ## 시스템 기반의 창의적 협업과 상호작용 * 게임 스튜디오에서 엔지니어와 아티스트가 협업하듯, 피그마 엔지니어들은 시스템의 한계를 밀어붙이기 위해 디자이너, PM, 데이터 과학자들과 긴밀하게 소통합니다. * '젤다의 전설: 브레스 오브 더 와일드'의 불(fire) 시스템이 빛, 온기, 공격 수단 등 다양한 방식으로 상호작용하는 것처럼, 피그마의 오토세이브, 멀티플레이어, 렌더링 시스템도 서로 유기적으로 연결되어 작동합니다. * 단순한 도구 기능을 넘어 스프링 물리 법칙을 적용한 애니메이션 시스템, 커서 채팅, 하이파이브 기능 등을 통해 사용자가 도구 내에서 살아있는 피드백을 느낄 수 있도록 설계했습니다. * 베리언트(Variants) 기능과 플러그인/위젯 시스템을 통해 디자인 컴포넌트와 코드를 긴밀하게 연결하고, 사용자가 직접 생태계를 확장할 수 있는 개방형 플랫폼을 지향합니다. 웹 환경에서 복잡하고 성능 집약적인 도구를 개발해야 한다면, 전통적인 웹 프레임워크의 틀을 벗어나 게임 엔진의 설계 방식과 고성능 언어(WASM, Rust) 도입을 검토해야 합니다. 기술적 한계를 극복하는 열쇠는 도구를 하나의 살아있는 '시스템'들의 집합으로 바라보고, 각 요소 간의 상호작용이 사용자 경험에 미치는 영향을 정교하게 설계하는 데 있습니다.