logo
Nostrss
Published on

[Youtube] Web AI use cases and strategies in the real world

Authors

Web AI use cases and strategies in the real world

출처 : Chrome for Developer

notebookLM을 이용해 작성되었습니다.

웹 인공지능 활용 사례 및 전략

"Web AI use cases and strategies in the real world" 발췌 영상

핵심 요약

본 문서는 웹사이트에 AI 기능을 통합하는 실질적인 접근 방식과 실제 성공 사례를 살펴봅니다. 기존의 이론적인 논의를 넘어, 현재 웹 환경에서 구현되고 있는 AI 활용 사례와 이를 가능하게 하는 기술적 기반에 초점을 맞춥니다. 핵심적으로 서버 측 AI, 클라이언트 측 AI, 그리고 두 가지를 결합한 하이브리드 접근 방식의 특징과 장점을 설명하고, 실제 기업들이 이러한 전략을 통해 달성한 비즈니스 성과를 소개합니다. 또한 WebGPU, WebAssembly, MediaPipe, Transformers.js 등 웹 AI 구현을 위한 주요 기술과 라이브러리에 대한 개요를 제공합니다.

1. 웹사이트에서 AI 기능 구현을 위한 세 가지 접근 방식

  • 서버 측 모델 (Server-side models):Vertex AI와 같은 플랫폼을 활용합니다.
  • 복잡한 사용 사례를 위한 대규모 모델 실행이나 자체 데이터 기반 모델 학습 및 재학습에 적합합니다.
  • "대형 셰프 주방에서 요리하는 것"에 비유될 수 있으며, 풍부한 자원을 활용할 수 있습니다.
  • 클라이언트 측 모델 (Client-side models):사용자의 브라우저에서 직접 AI 모델을 실행합니다.
    • 주요 장점:성능: 네트워크 의존성이 없어 빠르며, 오프라인에서도 작동합니다.
    • 개인 정보 보호: 모든 처리(프롬프트, 데이터, 응답)가 기기 내에서 이루어지므로 개인 정보가 외부로 유출되지 않습니다. "집 주방에서 요리하는 것"에 비유되며, 개인 정보 보호가 뛰어납니다.
  • 비용 효율성: 모델 다운로드 후 실행 비용이 무료입니다.
  • 하이브리드 접근 방식 (Hybrid approach):클라이언트 측 모델과 서버 측 모델을 함께 활용합니다.
    • 주요 이유:모델 기능 보완: 클라이언트 측 모델의 데이터가 부족하거나 복잡한 질의에 대한 응답이 필요한 경우 서버 측 모델로 전환합니다. 예를 들어, 챗봇이 자체 데이터로 답변이 불가능할 때 더 큰 데이터셋으로 학습된 서버 모델을 사용합니다.
  • 기기 성능 및 환경 대응: 다양한 기기 사용자를 지원하기 위해 사용자의 기기 성능이나 네트워크 환경(온라인/오프라인)에 따라 실행 방식을 결정합니다. 예를 들어, 오프라인이고 브라우저에 캐시된 모델이 있으면 클라이언트 측에서 실행하고, 저사양 기기는 서버 측으로 대체합니다.

2. 웹 AI 구현을 위한 기술 및 라이브러리

  • 저수준 API:WebGPU: GPU 가속을 활용하여 복잡한 계산을 빠르게 처리합니다.
  • WebAssembly (WASM): C++와 같은 다른 언어로 작성된 코드를 웹에서 실행할 수 있도록 하여 네이티브에 가까운 성능을 제공합니다. 무거운 연산에 특히 유용합니다.
  • 고수준 라이브러리:MediaPipe: 다양한 AI 작업(예: 이미지 분할, 손 감지)을 위한 사전 학습된 모델 및 도구를 제공하며, WebAssembly 및 GPU를 활용하여 실시간 처리가 가능합니다.
  • Transformers.js: Hugging Face 생태계와 긴밀하게 연결되어 있으며, 다양한 AI 모델(분할, 분류, 음성 인식 등)을 웹에서 사용할 수 있도록 지원합니다. WebGPU 지원으로 성능이 향상되었습니다.
  • 브라우저 내장 모델 및 API:Chrome의 Built-in AI APIs와 같이 브라우저 자체에 내장된 모델 및 API를 통해 JavaScript API 호출만으로 쉽게 AI 기능을 활용할 수 있습니다. (언어 감지, 번역 API 등)

3. 실제 웹 AI 활용 사례

  • Bilibili (클라이언트 측):사용 사례: 라이브 스트리밍에서 스피커 뒤에 댓글을 표시하기 위한 이미지 분할 (Image Segmentation).
    • 기술: MediaPipe, tensorflow.js의 Selfie Segmentation 모델 (클라이언트 측 실행). WebAssembly 및 GPU 활용.
    • 성과: 세션 지속 시간 30% 증가, 라이브 스트리밍 영상 클릭률 19% 증가.
    • 중요 사실: "저렴하고 대기 시간이 짧으며 정확한 솔루션"이 필요했습니다. "MediaPipe와 tensorflow.js의 셀피 분할 모델을 완전히 클라이언트 측에서 실행"하여 이를 달성했습니다.
  • Vision Nanny (클라이언트 측):사용 사례: 시각 장애 아동을 위한 AI 기반 시각 자극 활동 (손-눈 협응, 오디오 분류 등).
    • 기술: MediaPipe의 핸드 랜드마크 감지 모델, 오디오 분류 모델 (클라이언트 측 실행). WebGPU 활용 (가능한 경우).
    • 성과: 응답 속도 5배 향상, 치료사 활동 설정 시간 절약.
    • 중요 사실: "부모와 교육자들이 시골이나 인터넷 환경이 좋지 않은 곳과 같은 언제 어디서든" 접근할 수 있도록 클라이언트 측 실행 방식을 선택했습니다. "아동의 이미지가 기기를 떠나지 않아" 개인 정보 보호 문제도 해결했습니다.
  • Google Meet (클라이언트 측):사용 사례: 영상 통화 화질 개선 (Studio Lighting, Studio Look, 배경 분할 및 블러).
    • 기술: AI 모델 파이프라인, WebAssembly, MediaPipe C++ 라이브러리 (WASM으로 컴파일하여 실행), WebGPU.
    • 성과: 실시간 비디오 처리 성능 향상, WebGPU 사용 시 전력 소비 감소 (MacBook Air M2에서 최대 22% 감소), 배터리 수명 연장.
    • 중요 사실: "WebAssembly 또는 WASM이 등장"하여 "C++ 코드를 웹 친화적인 바이너리 형식으로 컴파일"하고 "브라우저에서 거의 네이티브 속도로 직접 실행"할 수 있게 되었습니다. 이를 통해 "실시간 AI 비디오 향상"이 가능해졌습니다.
  • Tokopedia (하이브리드):사용 사례: 판매자 신원 확인 과정 자동화 (ID 사진 및 셀카 기반 얼굴 감지).
    • 기술: MediaPipe, TensorFlow.js의 얼굴 감지 라이브러리 (클라이언트 측 실행 가능 시, 아니면 서버 측으로 대체).
    • 성과: 수동 승인 건수 약 70% 감소, 온보딩 거부율 20% 이상 감소.
    • 중요 사실: "하이브리드 접근 방식을 구현하여 기기가 지원하면 클라이언트 측에서 얼굴 감지 모델을 실행하고, 그렇지 않으면 서버에서 실행했습니다." 이를 통해 "빠른 사용자 피드백"과 "구형 또는 저사양 기기 지원"을 동시에 달성했습니다.
  • Policy Bazaar (하이브리드):사용 사례: 텍스트 및 음성 기반 보험 챗봇 (Finova AI), 부적절한 메시지 감지.
    • 기술: 내장 언어 감지 API, 내장 번역 API (클라이언트 측), 서버 측 모델 (Policy Bazaar 데이터 기반), 클라이언트 측 독성 감지 모델.
    • 성과: 고객 서비스 확장 (영업 시간 외), 불필요한 메시지 필터링, WebGPU 사용 시 독성 감지 모델 속도 10배 향상.
    • 중요 사실: "클라이언트 측과 서버 측 모델 중에서 선택할 필요가 없다"는 것을 보여줍니다. "각 모델을 전체 흐름의 특정 작업에 맞춰" 여러 모델을 결합하거나 연결할 수 있습니다. 개인 정보 보호 및 낮은 지연 시간이 필요한 경우 클라이언트 측 솔루션을 사용하고, 복잡하거나 사용자 정의 데이터로 학습된 모델이 필요한 경우 서버 측 솔루션을 사용합니다.

결론

본 문서에서 제시된 실제 사례들은 웹 환경에서 AI가 더 이상 이론이 아닌 현실임을 명확히 보여줍니다. 클라이언트 측 AI는 성능, 개인 정보 보호, 비용 효율성 측면에서 강점을 가지며, 서버 측 AI는 복잡한 작업이나 대규모 데이터 처리에 적합합니다.

하이브리드 접근 방식은 이러한 두 가지 모델의 장점을 결합하여 다양한 사용 사례와 기기 환경에 유연하게 대응할 수 있도록 합니다. WebGPU, WebAssembly, MediaPipe, Transformers.js와 같은 기술과 라이브러리는 개발자들이 웹에서 강력하고 효율적인 AI 기능을 구축할 수 있도록 지원합니다. 이러한 기술 발전에 힘입어 웹은 AI 개발 및 배포를 위한 중요한 플랫폼으로 자리매김하고 있으며, 앞으로 더 많은 혁신적인 AI 활용 사례가 등장할 것으로 기대됩니다.