브라우저 AI, CWV에 어떤 영향을 줄까? 벤치마크 결과 공개!
브라우저 내 AI 모델 실행이 증가함에 따라 Core Web Vitals(CWV)에 미치는 영향을 측정하기 위한 벤치마크 구축
Transformers.js 라이브러리를 사용하여 4개의 양자화된(Quantized) AI 모델을 Chrome에서 실행하고 INP(Interaction to Next Paint) 측정
Whisper Tiny 모델은 39M 파라미터(Parameter)에도 불구하고 540.3ms의 INP를 기록하며 아키텍처의 중요성을 강조
인코더-디코더(Encoder-Decoder) 모델은 Web Worker를 통해 메인 스레드(Main Thread) 차단 문제를 해결해야 함을 제시
모바일 환경에서의 메모리 압박(Memory Pressure)을 고려하여 실제 하드웨어(Hardware) 테스트의 필요성을 강조
브라우저 내 AI 모델 실행의 기술적 배경
본문은 브라우저 기반 AI(Client-side AI)의 확산과 함께 Core Web Vitals(CWV), 특히 INP(Interaction to Next Paint)에 미치는 영향을 분석한다. Transformers.js를 활용하여 Hugging Face 모델을 브라우저에서 직접 실행하고, WebAssembly(WASM)를 통해 성능을 최적화한다. 이러한 접근 방식은 개인 정보 보호(Privacy)와 지연 시간(Latency) 감소라는 장점을 제공하지만, 메인 스레드(Main Thread) 차단으로 인한 사용자 경험 저하라는 잠재적 문제점을 야기한다. 따라서, 성능 측정(Performance Measurement)을 통해 실제 사용자 환경에서의 영향을 파악하는 것이 중요하다.
INP(Interaction to Next Paint) 측정 방법론
글에서는 INP(Interaction to Next Paint)를 측정하기 위해 자체 제작한 벤치마크 도구를 사용한다. INP는 사용자의 상호 작용(클릭, 탭, 키 입력)에 대한 브라우저의 응답 시간을 측정하는 지표로, 200ms 미만은 양호, 500ms 초과는 불량으로 평가된다. 벤치마크는 DistilBERT, BERT-base, Whisper Tiny, MobileViT-S 등 다양한 AI 모델을 대상으로 진행되었으며, 각 모델의 로드 시간(Load Time), 평균 추론 시간(Avg Inference), INP, 메모리 사용량(Mem Δ), 메모리 압박(Mem Pressure)을 측정했다. 측정 결과는 모델 아키텍처(Model Architecture), 파라미터 수(Parameter Count), 메모리 사용량 등 다양한 요소가 INP에 미치는 영향을 보여준다.
모델 아키텍처가 INP에 미치는 영향
본문에 따르면, Whisper Tiny 모델은 파라미터 수가 적음에도 불구하고 가장 높은 INP 값을 기록했다. 이는 모델의 아키텍처(Architecture)가 INP에 미치는 영향이 크다는 것을 시사한다. Whisper Tiny는 인코더-디코더(Encoder-Decoder) 모델로, 오토 리gressive(Autoregressive) 디코딩 루프를 통해 출력을 생성하므로 메인 스레드를 장시간 차단한다. 반면, DistilBERT와 같은 인코더(Encoder) 모델은 상대적으로 낮은 INP 값을 보였다. 따라서, 브라우저 환경에서 AI 모델을 사용할 때는 모델 아키텍처의 특성을 고려하여 Web Worker를 활용하는 등, 메인 스레드 차단(Main Thread Blocking)을 최소화하는 전략이 필요하다.
Web Worker를 활용한 성능 개선
글에서는 인코더-디코더(Encoder-Decoder) 모델의 경우, Web Worker를 사용하여 메인 스레드(Main Thread) 차단 문제를 해결해야 한다고 강조한다. Web Worker는 별도의 스레드에서 AI 모델을 실행하여 메인 스레드를 차단하지 않도록 한다. Transformers.js는 Web Worker 실행을 네이티브하게 지원하며, 이를 통해 사용자 인터랙션(User Interaction) 응답성을 유지할 수 있다. Web Worker를 사용하면 INP(Interaction to Next Paint) 개선뿐만 아니라, 전반적인 사용자 경험(User Experience) 향상에도 기여할 수 있다. 따라서, 브라우저 기반 AI 개발 시, Web Worker 활용은 선택이 아닌 필수적인 요소이다.
모바일 환경에서의 고려 사항
본문은 모바일 환경(Mobile Environment)에서의 AI 모델 실행 시, 메모리 압박(Memory Pressure)에 대한 중요성을 강조한다. MobileViT-S는 메모리 사용량은 적지만, 높은 메모리 압박을 보였다. 이는 중저가 안드로이드(Android) 기기에서 JS 힙(JS Heap) 제한으로 인해 성능 저하를 유발할 수 있다. 따라서, 모바일 환경에서는 실제 하드웨어(Hardware) 테스트를 통해 메모리 사용량(Memory Usage)과 메모리 압박(Memory Pressure)을 측정하고, 최적화(Optimization)를 수행해야 한다. 또한, TBT(Total Blocking Time)와 같은 다른 CWV 지표도 함께 고려하여, 종합적인 성능 분석(Comprehensive Performance Analysis)을 수행해야 한다.