웹의 대부분의 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배가 넘습니다.
브라우저의 개발자 도구를 사용하여 사용하려는 모델의 정확한 다운로드 크기를 평가할 수 있습니다.
모델 크기 최적화
- 모델 품질 및 다운로드 크기 비교하기 더 작은 모델은 사용 사례에 충분한 정확성을 제공하면서 훨씬 작을 수 있습니다. 미세 조정 및 모델 축소 기법은 충분한 정확성을 유지하면서 모델 크기를 크게 줄이기 위해 존재합니다.
- 가능하면 전문 모델을 선택합니다. 특정 태스크에 맞게 조정된 모델은 더 작습니다. 예를 들어 감정 또는 유해성 분석과 같은 특정 작업을 수행하려면 일반 LLM 대신 이러한 작업에 특화된 모델을 사용합니다.
이러한 모든 모델은 동일한 작업을 수행하지만 정확도는 다르며 크기는 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 라이브러리에서 모델 다운로드를 처리하는 경우 다운로드 진행률 상태를 사용하여 사용자에게 표시합니다. 이 기능을 사용할 수 없다면 문제를 열어 요청하거나 기여하는 것이 좋습니다.
- 자체 코드에서 모델 다운로드를 처리하는 경우 fetch-in-chunks와 같은 라이브러리를 사용하여 모델을 청크 단위로 가져와 사용자에게 다운로드 진행률을 표시할 수 있습니다.
- 자세한 내용은 애니메이션 진행률 표시기 권장사항 및 긴 대기 시간 및 중단을 고려한 설계를 참고하세요.
네트워크 중단을 적절하게 처리
모델 다운로드 시간은 크기에 따라 다를 수 있습니다. 사용자가 오프라인 상태가 된 경우 네트워크 중단을 처리하는 방법을 고려하세요. 가능한 경우 사용자에게 연결이 끊어졌음을 알리고 연결이 복원되면 오프라인 저장을 계속합니다.
불안정한 연결도 청크로 다운로드해야 하는 또 다른 이유입니다.
비용이 많이 드는 작업을 웹 작업자로 오프로드
다운로드 후 모델 준비 단계와 같은 값비싼 작업이 기본 스레드를 차단하여 사용자 환경이 불안정해질 수 있습니다. 이러한 태스크를 웹 작업자로 이전하면 도움이 됩니다.
웹 작업자 기반의 데모 및 전체 구현을 찾아보세요.
추론 중
모델이 다운로드되고 준비되면 추론을 실행할 수 있습니다. 추론은 계산 비용이 많이 들 수 있습니다.
추론을 웹 작업자로 이동
WebGL, WebGPU 또는 WebNN을 통해 추론이 발생하면 GPU를 사용합니다. 즉, UI를 차단하지 않는 별도의 프로세스에서 발생합니다.
하지만 CPU 기반 구현(예: WebGPU가 지원되지 않는 경우 WebGPU의 대체 수단이 될 수 있는 Wasm)의 경우 추론을 웹 작업자로 이동하면 모델 준비 중과 마찬가지로 페이지가 계속 응답합니다.
모든 AI 관련 코드(모델 가져오기, 모델 준비, 추론)가 동일한 위치에 있으면 구현이 더 간단해질 수 있습니다. 따라서 GPU가 사용 중이든 아니든 웹 워커를 선택할 수 있습니다.
오류 처리
모델이 기기에서 실행되어야 한다고 확인했지만 나중에 사용자가 리소스를 많이 사용하는 다른 프로세스를 시작할 수 있습니다. 이 문제를 완화하려면 다음 단계를 따르세요.
- 추론 오류를 처리합니다. 추론을
try/catch블록으로 묶고 상응하는 런타임 오류를 처리합니다. - 기기의 문제가 발생하여 GPU가 실제로 재설정될 때 발생하는 예기치 않은 오류와 GPUDevice.lost 오류 등 WebGPU 오류를 처리합니다.
추론 상태 표시
추론에 즉각적으로 느껴지는 것보다 시간이 더 걸리는 경우 사용자에게 모델이 생각하고 있다고 알립니다. 애니메이션을 사용하여 기다리는 시간을 줄이고 사용자에게 애플리케이션이 정상적으로 작동하고 있음을 알립니다.
추론을 취소 가능하게 만들기
사용자가 실시간으로 검색어를 수정할 수 있도록 허용합니다. 그러면 시스템에서 사용자가 보지 못할 응답을 생성하는 데 리소스를 낭비하지 않아도 됩니다.