클라이언트 측 AI의 성능 및 UX 개선

Maud Nalpas
Maud Nalpas

웹의 대부분의 AI 기능은 서버를 사용하는 반면 클라이언트 측 AI는 사용자의 브라우저에서 직접 실행됩니다. 이렇게 하면 지연 시간이 짧아지고 서버 측 비용이 줄어들며 API 키가 필요하지 않고 사용자 개인 정보 보호가 강화되며 오프라인 액세스가 가능해지는 등의 이점이 있습니다. TensorFlow.js, Transformers.js, MediaPipe GenAI와 같은 JavaScript 라이브러리를 사용하여 브라우저에서 작동하는 클라이언트 측 AI를 구현할 수 있습니다.

클라이언트 측 AI는 성능 문제를 야기하기도 합니다. 사용자가 더 많은 파일을 다운로드해야 하고 브라우저가 더 열심히 작동해야 합니다. 이 기능을 효과적으로 사용하려면 다음 사항을 고려하세요.

  • 사용 사례 클라이언트 측 AI가 기능에 적합한가요? 기능이 중요한 사용자 여정에 포함되어 있나요? 그렇다면 대체 옵션이 있나요?
  • 모델 다운로드 및 사용 권장사항 자세한 내용은 계속 읽어보세요.

모델 다운로드 전

Mind 라이브러리 및 모델 크기

클라이언트 측 AI를 구현하려면 모델과 일반적으로 라이브러리가 필요합니다. 라이브러리를 선택할 때는 다른 도구와 마찬가지로 크기를 평가합니다.

모델 크기도 중요합니다. AI 모델에 대해 대규모로 간주되는 크기는 다릅니다. 5MB는 유용한 경험 법칙이 될 수 있습니다. 이는 중앙값 웹페이지 크기의 75번째 백분위수이기도 합니다. 더 느슨한 숫자는 10MB입니다.

모델 크기와 관련하여 몇 가지 중요한 고려사항은 다음과 같습니다.

  • 많은 태스크별 AI 모델은 매우 작을 수 있습니다. 아시아 언어의 정확한 글자 나누기를 위한 BudouX와 같은 모델은 GZip으로 압축해도 9.4KB에 불과합니다. MediaPipe의 언어 감지 모델은 315KB입니다.
  • 시각 모델도 적절한 크기로 유지할 수 있습니다. Handpose 모델과 모든 관련 리소스의 총 크기는 13.4MB입니다. 이는 대부분의 축소된 프런트엔드 패키지보다 훨씬 크지만 2.2MB(데스크톱의 경우 2.6MB)인 중간 웹페이지와 비슷합니다.
  • 생성형 AI 모델은 웹 리소스의 권장 크기를 초과할 수 있습니다. 매우 작은 LLM 또는 간단한 NLP 모델(의견이 다양함)로 간주되는 DistilBERT의 크기는 67MB입니다. Gemma 2B와 같은 소규모 LLM도 1.3GB에 도달할 수 있습니다. 이는 중위 웹페이지 크기의 100배가 넘습니다.

브라우저의 개발자 도구를 사용하여 사용하려는 모델의 정확한 다운로드 크기를 평가할 수 있습니다.

Chrome DevTools 네트워크 패널에서 MediaPipe 언어 감지 모델의 다운로드 크기입니다. 데모
Chrome DevTools 네트워크 패널에서 생성형 AI 모델의 다운로드 크기: Gemma 2B (소형 LLM), DistilBERT (소형 NLP / 매우 작은 LLM)

모델 크기 최적화

  • 모델 품질 및 다운로드 크기 비교하기 더 작은 모델은 사용 사례에 충분한 정확성을 제공하면서 훨씬 작을 수 있습니다. 미세 조정 및 모델 축소 기법은 충분한 정확성을 유지하면서 모델 크기를 크게 줄이기 위해 존재합니다.
  • 가능하면 전문 모델을 선택합니다. 특정 작업에 맞게 조정된 모델은 더 작습니다. 예를 들어 감정 분석이나 유해성 분석과 같은 특정 태스크를 수행하려는 경우 일반 LLM이 아닌 이러한 태스크에 특화된 모델을 사용하세요.
j0rd1smit클라이언트 측 AI 기반 스크립트 작성 데모용 모델 선택기

이러한 모든 모델은 동일한 작업을 수행하지만 정확도는 다르며 크기는 3MB에서 1.5GB까지 다양합니다.

모델을 실행할 수 있는지 확인

일부 기기는 AI 모델을 실행할 수 없습니다. 모델을 사용하는 동안 다른 비용이 많이 드는 프로세스가 실행 중이거나 시작되는 경우 하드웨어 사양이 충분한 기기에서도 문제가 발생할 수 있습니다.

해결 방법이 제공될 때까지 다음과 같은 조치를 취하실 수 있습니다.

  • WebGPU 지원 여부 확인하기 Transformers.js 버전 3 및 MediaPipe를 비롯한 여러 클라이언트 측 AI 라이브러리에서 WebGPU를 사용합니다. 현재 이러한 라이브러리 중 일부는 WebGPU가 지원되지 않는 경우 Wasm으로 자동으로 대체되지 않습니다. 클라이언트 측 AI 라이브러리에 WebGPU가 필요하다면 AI 관련 코드를 WebGPU 기능 감지 검사 내에 묶어 이를 완화할 수 있습니다.
  • 저전력 기기를 제외합니다. Navigator.hardwareConcurrency, Navigator.deviceMemory, Compute Pressure API를 사용하여 기기 기능과 압력을 추정합니다. 이러한 API는 일부 브라우저에서만 지원되며, 지문 식별을 방지하기 위해 의도적으로 부정확하지만, 성능이 매우 낮아 보이는 기기를 제외하는 데 도움이 될 수 있습니다.

대용량 다운로드 신호

대용량 모델의 경우 다운로드하기 전에 사용자에게 경고합니다. 데스크톱 사용자는 모바일 사용자보다 대용량 다운로드를 허용할 가능성이 더 높습니다. 휴대기기를 감지하려면 User-Agent 클라이언트 힌트 API의 mobile (또는 UA-CH가 지원되지 않는 경우 User-Agent 문자열)를 사용하세요.

대용량 다운로드 제한

  • 필요한 항목만 다운로드하세요. 특히 모델이 큰 경우 AI 기능이 사용될 것이라는 확신이 서면 한 번만 다운로드하세요. 예를 들어 자동 완성 AI 기능이 있는 경우 사용자가 입력 기능을 사용하기 시작할 때만 다운로드합니다.
  • Cache API를 사용하여 기기에 모델을 명시적으로 캐시하여 매번 방문할 때마다 모델을 다운로드하지 않도록 합니다. 암시적 HTTP 브라우저 캐시만 사용하지 마세요.
  • 모델 다운로드 청크 처리. fetch-in-chunks는 대용량 다운로드를 더 작은 청크로 분할합니다.

모델 다운로드 및 준비

사용자를 차단하지 않습니다.

원활한 사용자 환경 우선: AI 모델이 아직 완전히 로드되지 않은 경우에도 주요 기능이 작동하도록 허용합니다.

사용자가 계속 게시할 수 있는지 확인합니다.
클라이언트 측 AI 기능이 아직 준비되지 않은 경우에도 사용자는 리뷰를 게시할 수 있습니다. @maudnals님이 제공한 데모입니다.

진행률 표시

모델을 다운로드할 때 완료된 진행률과 남은 시간을 표시합니다.

  • 클라이언트 측 AI 라이브러리에서 모델 다운로드를 처리하는 경우 다운로드 진행률 상태를 사용하여 사용자에게 표시합니다. 이 기능을 사용할 수 없는 경우 문제를 제출하여 요청하거나 기여해 보세요.
  • 자체 코드에서 모델 다운로드를 처리하는 경우 fetch-in-chunks와 같은 라이브러리를 사용하여 모델을 청크 단위로 가져와 사용자에게 다운로드 진행률을 표시할 수 있습니다.
모델 다운로드 진행률 표시 fetch-in-chunks를 사용한 맞춤 구현 @tomayac데모

네트워크 중단을 적절하게 처리

모델 다운로드 시간은 크기에 따라 다를 수 있습니다. 사용자가 오프라인 상태가 된 경우 네트워크 중단을 처리하는 방법을 고려하세요. 가능한 경우 사용자에게 연결이 끊어졌음을 알리고 연결이 복원되면 오프라인 저장을 계속합니다.

불안정한 연결도 청크로 다운로드해야 하는 또 다른 이유입니다.

비용이 많이 드는 작업을 웹 작업자로 오프로드

다운로드 후 모델 준비 단계와 같은 비용이 많이 드는 작업은 기본 스레드를 차단하여 불안정한 사용자 환경을 초래할 수 있습니다. 이러한 태스크를 웹 작업자로 이전하면 도움이 됩니다.

웹 워커를 기반으로 한 데모 및 전체 구현을 찾아보세요.

Chrome DevTools의 성능 트레이스
상단: 웹 작업자가 사용됩니다. 하단: 웹 작업자가 없음

추론 중

모델이 다운로드되고 준비되면 추론을 실행할 수 있습니다. 추론은 계산 비용이 많이 들 수 있습니다.

추론을 웹 작업자로 이동

WebGL, WebGPU 또는 WebNN을 통해 추론이 발생하면 GPU를 사용합니다. 즉, UI를 차단하지 않는 별도의 프로세스에서 실행됩니다.

하지만 CPU 기반 구현 (예: WebGPU가 지원되지 않는 경우 WebGPU의 대체 수단이 될 수 있는 Wasm)의 경우 추론을 웹 작업자로 이동하면 모델 준비 중과 마찬가지로 페이지가 계속 응답합니다.

모든 AI 관련 코드 (모델 가져오기, 모델 준비, 추론)가 동일한 위치에 있으면 구현이 더 간단해질 수 있습니다. 따라서 GPU가 사용 중이든 아니든 웹 워커를 선택할 수 있습니다.

오류 처리

모델이 기기에서 실행되어야 한다고 확인했지만 나중에 사용자가 리소스를 많이 사용하는 다른 프로세스를 시작할 수 있습니다. 이 문제를 완화하려면 다음 단계를 따르세요.

  • 추론 오류 처리 추론을 try/catch 블록으로 묶고 상응하는 런타임 오류를 처리합니다.
  • 기기의 문제가 발생하여 GPU가 실제로 재설정될 때 발생하는 예기치 않은 오류와 GPUDevice.lost 오류 등 WebGPU 오류를 처리합니다.

추론 상태 표시

추론에 즉각적으로 느껴지는 것보다 시간이 더 걸리는 경우 사용자에게 모델이 생각하고 있다고 알립니다. 애니메이션을 사용하여 기다리는 시간을 줄이고 사용자에게 애플리케이션이 정상적으로 작동하고 있다고 알립니다.

추론 중 애니메이션의 예시
@maudnals@argyleink의 데모

추론을 취소 가능하게 만들기

사용자가 실시간으로 검색어를 수정할 수 있도록 허용합니다. 그러면 시스템에서 사용자가 보지 못할 응답을 생성하는 데 리소스를 낭비하지 않아도 됩니다.