MediaPipe로 웹에서 ML을 사용할 때의 7가지 권장 사항과 금지 사항

10월 05, 2023

Jen Person Developer Relations Engineer

웹 앱에 머신러닝(ML)의 강력한 기능을 적용하고자 하는 웹 개발자라면 MediaPipe Solutions를 확인해 보세요! MediaPipe Solutions를 사용하면 사용자 설정 작업을 배포하여 몇 줄의 코드만으로 일반적인 ML 문제를 해결할 수 있습니다. 문서에 제공된 가이드를 보고 Codepen에서 웹 데모를 사용해 보면 얼마나 간편하게 시작할 수 있는 확인할 수 있습니다. MediaPipe Solutions가 웹에 ML을 적용할 경우 경험하는 복잡성 중 많은 부분을 처리해 주지만 일반적인 JavaScript 권장 사항을 벗어나는 몇 가지 사항에 대해서는 여전히 유의해야 합니다. 여기서는 7가지 권장 사항과 금지 사항을 정리해 보았습니다. 유용한 팁을 얻으려면 계속 읽어보세요!

❌ 앱에서 모델을 번들로 제공하지 마세요

웹 개발자들은 최고의 사용자 경험을 보장하기 위해 앱을 최대한 가볍게 만드는 데 익숙합니다. 더 큰 항목을 로드해야 하는 경우 사용자가 오래 걸리는 다운로드를 기다릴 필요 없이 콘텐츠와 빠르게 상호 작용할 수 있도록 배려하는 방식으로 다운로드를 수행하고자 합니다. 양자화와 같은 전략으로 인해 ML 모델이 더 작아지고 에지 기기에 액세스할 수 있지만, 여전히 웹 앱에 번들로 제공하기에는 부담스러울 정도로 큽니다. 모델을 원하는 클라우드 스토리지 솔루션에 저장하세요. 그런 다음 작업을 초기화하면 모델 및 WebAssembly 바이너리가 다운로드되고 초기화됩니다. 첫 번째 페이지가 로드된 후에는 로컬 스토리지 또는 IndexedDB를 사용하여 모델과 바이너리를 캐시하므로 향후 페이지 로드가 훨씬 더 빠르게 실행됩니다. GitHub의 이 터치리스 ATM 샘플 앱에서 이에 대한 예를 볼 수 있습니다.

✅ 작업을 조기에 초기화하세요

작업 초기화는 모델 크기, 연결 속도, 기기 유형에 따라 약간의 시간이 걸릴 수 있습니다. 따라서 사용자와 상호 작용하기 전에 솔루션을 초기화하는 것이 좋습니다. Codepen의 대다수 코드 샘플에서 초기화는 페이지 로드 시 이루어집니다. 이러한 샘플은 코드를 이해하고 고유한 사용 사례에 적용할 수 있도록 가능한 한 단순화해야 합니다. 페이지 로드 시 모델을 초기화한다는 점이 잘 이해되지 않을 수도 있습니다. 다만 작업이 어떻게 처리되는지 사용자가 확인할 수 없도록 적절한 장소를 찾아서 작업을 가동하는 데에만 집중하세요.

초기화 후에는 모델을 통해 자리표시자 이미지를 전달하여 작업을 워밍업해야 합니다. 이 예에서는 Pose Landmarker 작업을 통해 1x1 픽셀 캔버스를 실행하는 기능을 보여줍니다.

function dummyDetection(poseLandmarker: PoseLandmarker) {
  const width = 1;
  const height = 1;
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
 
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgba(0, 0, 0, 1)';
  ctx.fillRect(0, 0, width, height);
  poseLandmarker.detect(canvas);
}

✅ 리소스를 정리하세요

JavaScript에서 제가 가장 좋아하는 특징으로 자동 가비지 컬렉션이 있습니다. 사실, 메모리 관리에 대한 생각을 마지막으로 떠올린 때가 언제인지 기억나지 않습니다. MediaPipe 작업을 최대한 활용하려면 약간의 메모리가 필요하므로 메모리에 대한 약간의 정보를 자체 메모리에 캐시하셨기를 바랍니다. 웹용 MediaPipe Solutions는 WebAssembly(WASM)를 사용하여 브라우저 내 C++ 코드를 실행합니다. C++를 알 필요는 없지만 C++에서는 가비지를 직접 처리해야 한다는 점을 알면 도움이 됩니다. 사용하지 않는 메모리를 정리하지 않으면 웹 페이지가 시간이 지남에 따라 점점 더 많은 메모리를 사용한다는 것을 알 수 있습니다. 그러면 성능 문제가 발생하거나 비정상적으로 종료되기까지 합니다.

솔루션이 완성되면 .close() 메서드를 사용하여 리소스를 확보하세요.

예를 들어, 다음 코드를 사용하여 동작 인식기를 만들 수 있습니다.

const createGestureRecognizer = async () => {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-models/gesture_recognizer/gesture_recognizer/float16/1/gesture_recognizer.task",
      delegate: "GPU"
    },
  });
};
createGestureRecognizer();

동작 인식이 완료되면 close() 메서드를 사용하여 동작 인식기를 폐기합니다.

gestureRecognizer.close();

각 작업마다 close 메서드가 있으므로 관련성이 있는 곳에는 꼭 사용해야 합니다! 일부 작업에는 반환된 결과에 대한 close() 메서드가 있으므로 자세한 내용은 API 문서를 참조하세요.

✅ MediaPipe Studio에서 작업을 시도해 보세요

솔루션을 결정하거나 사용자 설정할 때는 자체 코드를 작성하기 전에 MediaPipe Studio에서 시험해 보는 것이 좋습니다. MediaPipe Studio는 애플리케이션에 대해 온디바이스 ML 모델 및 파이프라인을 평가하고 사용자 설정하기 위한 웹 기반 애플리케이션입니다. 이 앱을 사용하면 자체 데이터와 사용자 설정 ML 모델을 사용하여 브라우저에서 MediaPipe 솔루션을 빠르게 테스트할 수 있습니다. 또한 각 솔루션 데모를 통해 전체 결과 수에 대한 모델 설정, 결과 보고를 위한 최소 신뢰도 기준점 등을 실험할 수도 있습니다. 이 기능은 솔루션을 사용자 지정할 때 특히 유용하므로 테스트 웹 페이지를 만들지 않고도 모델의 성능을 확인할 수 있습니다.

✅ 다른 기기에서도 테스트해 보세요

다양한 기기와 브라우저에서 웹 앱을 테스트하여 예상대로 작동하는지 확인하는 일은 항상 중요하지만, 개발 초기부터 자주 다양한 플랫폼에서 테스트하도록 여기에 미리 알림을 추가할 만한 가치가 있다고 생각합니다. MediaPipe Studio를 사용하여 기기를 테스트할 수도 있으므로 솔루션이 사용자의 기기에서 작동할지 여부를 바로 알 수 있습니다.

❌ 가장 큰 모델로 기본 설정하지 마세요

각 작업마다 하나 이상의 권장 모델이 나열됩니다. 예를 들어, Object Detection 작업에는 속도, 크기, 정확도를 기준으로 각각 장점과 단점이 있는 세 가지 다른 모델이 나열됩니다. 가장 정확도가 높은 그런 모델을 선택하는 것이 가장 중요하다고 생각하기 쉽지만, 그렇게 하면 속도가 떨어지고 모델의 크기는 늘어나는 결과로 이어집니다. 사용 사례에 따라서는 사용자가 더 정확한 결과가 아닌 더 빠른 결과를 얻게 되기합니다. MediaPipe Studio에서 모델 옵션을 비교하는 최선을 방법을 찾을 수 있습니다. 이 말이 MediaPipe Studio 홍보 표현처럼 들릴 수도 있겠지만 정말 편리하게 이용할 수 있습니다.

✅ 언제든 연락해 주세요!

웹에서 ML을 사용할 때의 권장 사항과 금지 사항에 대해 필자가 놓쳤다고 생각하는 점이 있으신가요? 어떻게 시작해야 하는지 궁금하신가요? 아니면 공유하고 싶은 멋진 프로젝트가 있으신가요? 무엇이든 LinkedIn을 통해 제게 연락하여 알려주세요!