Tokopedia에서 머신러닝을 사용해 판매자 웹 앱을 개선하여 운영 비용을 절감한 방법

Dendi Sunardi
Dendi Sunardi
Geoffrey Prasetyo
Geoffrey Prasetyo
Swetha Gopalakrishnan
Swetha Gopalakrishnan

Tokopedia는 인도네시아의 기술 기업으로, 인도네시아 최대 규모의 전자상거래 마켓플레이스를 운영하고 있으며, 플랫폼에 40개가 넘는 디지털 제품과 1,400만 명 이상의 등록 판매자를 호스팅하고 있습니다.

Tokopedia의 비즈니스 카테고리의 일부인 Mitra Tokopedia는 중소기업 소유자가 크레딧 및 게임 쿠폰, 데이터 패키지, 전기 토큰, 국가 의료비 청구서와 같은 디지털 제품을 판매하는 데 도움이 되는 웹 애플리케이션입니다. 이 웹사이트는 700개가 넘는 도시의 Mitra Tokopedia 판매자를 위한 주요 채널 중 하나이므로 원활한 사용자 환경을 보장하는 것이 중요합니다.

온보딩 프로세스의 핵심 단계에서 이러한 판매자는 신원을 확인해야 합니다. 판매자는 판매자 인증을 완료하기 위해 국가 신분증과 신분증이 포함된 셀카를 업로드해야 합니다. 이를 고객알기제도 (KYC) 프로세스라고 합니다.

Mitra Tokopedia는 웹 앱 내의 중요한 KYC 프로세스에 머신러닝 기능을 추가하여 인증 실패를 20% 이상 줄여 더 나은 사용자 환경을 제공할 수 있었습니다. 또한 수동 승인을 거의 70% 줄여 운영 비용도 절감했습니다.

도전과제

대부분의 KYC 데이터가 거부되어 운영팀에 수동 확인을 위해 매주 수천 건의 티켓이 생성되었습니다. 이로 인해 운영 비용이 많이 들었을 뿐만 아니라 인증 절차가 지연되어 판매자의 사용자 환경이 저하되었습니다. 거부된 가장 큰 이유는 판매자가 신분증과 함께 셀카를 올바르게 업로드하지 않았기 때문입니다. Mitra Tokopedia는 최신 웹 기능을 사용하여 이 문제를 확장형으로 해결하고자 했습니다.

솔루션

Tokopedia팀은 TensorFlow.js와 함께 ML을 사용하여 KYC 절차의 첫 번째 단계인 사용자가 이미지를 업로드할 때 이 문제를 해결하기로 결정했습니다. 판매자가 신분증과 셀카 이미지를 업로드할 때 MediaPipe 및 TensorFlow의 얼굴 감지 라이브러리를 사용하여 6개의 주요 지점으로 판매자의 얼굴을 감지했습니다. 그런 다음 모델의 출력을 사용하여 수락 기준을 확인합니다. 인증에 성공하면 정보가 백엔드로 전송됩니다. 인증에 실패하면 판매자에게 오류 메시지와 재시도 옵션이 제공됩니다. 휴대전화 사양에 따라 모델이 기기 내 또는 서버 측에서 추론을 실행하는 하이브리드 접근 방식이 사용되었습니다. 하위 기기는 서버에서 추론을 실행합니다.

KYC 절차 초기에 ML 모델을 사용하면 다음과 같은 이점이 있습니다.

  • KYC 절차의 거부율을 개선합니다.
  • 모델에서 평가한 품질을 기반으로 이미지가 거부될 수 있음을 사용자에게 경고합니다.

다른 솔루션이 아닌 ML을 선택하는 이유는 무엇인가요?

ML을 사용하면 시간 소모가 심하거나 수동으로 실행하기에 비현실적인 반복 작업을 자동화할 수 있습니다. Tokopedia의 경우 기존의 비 ML 솔루션을 최적화해도 큰 효과를 얻을 수 없었지만 ML 솔루션을 사용하면 매주 수천 건의 승인을 수동으로 처리해야 했던 운영팀의 부담을 크게 줄일 수 있었습니다. ML 솔루션을 사용하면 이미지 검사를 거의 즉시 실행할 수 있으므로 사용자 환경을 개선하고 운영 효율성을 높일 수 있습니다. 문제 프레이밍에 관해 자세히 알아보고 ML이 문제에 적합한 해결책인지 판단하세요.

모델 선택 시 고려사항

ML 모델을 선택할 때 다음 요소가 고려되었습니다.

비용

모델 사용에 드는 전반적인 비용을 평가했습니다. TensorFlow.js는 Google에서 잘 관리하는 오픈소스 패키지이므로 라이선스 및 유지보수 비용이 절약됩니다. 추론 비용도 고려해야 합니다. 클라이언트 측에서 추론을 실행하면 서버 측에서 값비싼 GPU로 처리하는 것보다 많은 비용을 절약할 수 있습니다. 특히 데이터가 잘못되어 사용할 수 없는 경우 그렇습니다.

확장성

모델과 기술의 확장성을 고려했습니다. 프로젝트가 진행됨에 따라 데이터와 모델 복잡성의 증가를 처리할 수 있나요? 다른 프로젝트 또는 사용 사례에 맞게 확장할 수 있나요? 기기 내 처리는 모델을 CDN에 호스팅하고 확장성이 뛰어난 클라이언트 측에 전송할 수 있으므로 유용합니다.

성능

라이브러리 크기 (KB)와 런타임 프로세스의 지연 시간을 고려했습니다. Mitra Tokopedia의 사용자층은 대부분 인터넷 속도와 연결성이 중간에서 낮은 수준인 중저가 기기를 사용합니다. 따라서 다운로드 및 런타임 측면의 성능 (즉, 모델이 출력을 생성하는 속도)은 특정 요구사항을 충족하고 우수한 사용자 환경을 보장하기 위한 최우선 과제입니다.

기타 고려사항

규정 준수: 선택한 라이브러리가 관련 데이터 보호 및 개인 정보 보호 규정을 준수하는지 확인해야 했습니다.

기술 역량: 팀의 전문성과 기술 역량을 평가했습니다. 일부 ML 프레임워크 및 라이브러리에는 특정 영역의 특정 프로그래밍 언어 또는 전문 지식이 필요할 수 있습니다. 이러한 요소를 고려하여 머신러닝 프로젝트에 적합한 모델을 선택할 때 정보에 입각한 결정을 내릴 수 있었습니다.

선택한 기술

TensorFlow.js는 이러한 요소를 고려하여 요구사항을 충족했습니다. WebGL 백엔드를 사용하여 기기의 GPU를 사용하여 완전히 기기 내에서 실행할 수 있습니다. 기기에서 모델을 실행하면 서버 지연 시간이 줄어들고 서버 컴퓨팅 비용이 절감되므로 사용자에게 더 빠르게 의견을 제공할 수 있습니다. 기기 내 ML의 이점 및 제한사항 도움말에서 기기 내 ML에 대해 자세히 알아보세요.

"TensorFlow.js는 브라우저에서 클라이언트 측을 실행할 수 있는 자바스크립트 개발자를 대상으로 하는 Google의 오픈소스 머신러닝 라이브러리입니다. 포괄적인 WebGL, WebAssembly, WebGPU 백엔드 연산자 지원을 갖춘 웹 AI를 위한 가장 성숙한 옵션으로, 빠른 성능으로 브라우저 내에서 사용할 수 있습니다."Adobe가 TensorFlow.js를 사용한 웹 ML로 웹용 Photoshop을 개선한 방법

기술적 구현

Mitra Tokopedia는 MediaPipe와 TensorFlow의 얼굴 인식 라이브러리(실시간 얼굴 인식 실행을 위한 모델을 제공하는 패키지)를 사용했습니다. 구체적으로 이 라이브러리에 제공된 tfjs 런타임을 구현하는 MediaPipeFaceDetector-TFJS 모델이 이 솔루션에 사용되었습니다.

구현을 시작하기 전에 MediaPipe가 무엇인지 간단히 살펴보겠습니다. MediaPipe를 사용하면 모바일 (Android, iOS), 웹, 데스크톱, 에지 기기, IoT 전반에서 기기 내 ML 솔루션을 빌드하고 배포할 수 있습니다.

이 게시물을 작성할 당시 MediaPipe에서 제공하는 14가지 솔루션이 있습니다. mediapipe 또는 tfjs 런타임을 사용할 수 있습니다. tfjs 런타임은 JavaScript로 빌드되며 웹 애플리케이션에서 외부로 다운로드할 수 있는 JavaScript 패키지를 제공합니다. 이는 C++로 빌드되고 WebAssembly 모듈로 컴파일되는 mediapipe 런타임과는 다릅니다. 주요 차이점은 성능, 디버그 가능성, 번들링입니다. JavaScript 패키지는 webpack과 같은 기존 번들러와 번들로 묶을 수 있습니다. 반면 Wasm 모듈은 더 크고 별도의 바이너리 리소스이며 (로드 시간 종속 항목이 아니므로 완화됨) 다른 Wasm 디버깅 워크플로가 필요합니다. 하지만 기술 및 성능 요구사항을 충족하기 위해 더 빠르게 실행됩니다.

FaceDetection을 예로 사용하여 MediaPipe 및 TensorFlow 모델이 다양한 런타임에서 작동하는 방식을 보여주는 다이어그램
FaceDetection을 예로 들며 MediaPipe 및 TensorFlow 모델이 다양한 런타임에서 작동하는 방식을 보여주는 일반적인 그림

Tokopedia 구현으로 돌아가면 첫 번째 단계는 다음과 같이 모델을 초기화하는 것입니다. 사용자가 사진을 업로드하면 HTMLImageElement가 감지기에 입력으로 전달됩니다.

// Create the detector.
const model = faceDetection.SupportedModels.MediaPipeFaceDetector;
const detectorConfig = {
  runtime: 'tfjs'
};

const detector = await faceDetection.createDetector(model, detectorConfig);

// Run inference to start detecting faces.
const estimationConfig = {flipHorizontal: false};
const faces = await detector.estimateFaces(image, estimationConfig);

얼굴 목록의 결과에는 이미지의 각 얼굴에 대해 감지된 얼굴이 포함됩니다. 모델이 얼굴을 감지할 수 없는 경우 목록은 비어 있습니다. 얼굴별로 감지된 얼굴의 경계 상자와 감지된 얼굴의 6개 키포인트 배열이 포함됩니다. 여기에는 눈, 코, 입과 같은 특징이 포함됩니다. 각 키포인트에는 x, y, 이름이 포함됩니다.

[
  {
    box: {
      xMin: 304.6476503248806,
      xMax: 502.5079975897382,
      yMin: 102.16298762367356,
      yMax: 349.035215984403,
      width: 197.86034726485758,
      height: 246.87222836072945
    },
    keypoints: [
      {x: 446.544237446397, y: 256.8054528661723, name: "rightEye"},
      {x: 406.53152857172876, y: 255.8, "leftEye },
      ...
    ],
  }
]

box는 이미지 픽셀 공간에서 얼굴의 경계 상자를 나타내며, xMin, xMax는 x 경계를 나타내고, yMin, yMax는 y 경계를 나타내며, width, height는 경계 상자의 크기입니다. keypoints, x, y는 이미지 픽셀 공간의 실제 키포인트 위치를 나타냅니다. name는 키포인트의 라벨을 제공하며, 라벨은 각각 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion', 'leftEarTragion'입니다. 이 게시물의 시작 부분에서 언급했듯이 판매자는 판매자 인증을 완료하기 위해 국가 신분증과 신분증이 포함된 셀카를 업로드해야 합니다. 그런 다음 모델의 출력은 수락 기준을 확인하는 데 사용됩니다. 즉, 앞서 언급한 6가지 키포인트가 일치하면 유효한 신분증 및 셀카 이미지로 간주됩니다.

인증에 성공하면 관련 판매자 정보가 백엔드로 전달됩니다. 인증에 실패하면 판매자에게 실패 메시지와 다시 시도할 수 있는 옵션이 표시됩니다. 백엔드로 정보가 전송되지 않습니다.

Mitra KYC 페이지, TensorFlow.js 모델, 서버가 서로 상호작용하는 다이어그램
Mitra KYC 페이지, TensorFlow.js 모델, 서버 간의 상호작용 방식

저사양 기기의 성능 고려사항

이 패키지는 24.8KB (축소 및 GZIP 처리됨)에 불과하므로 다운로드 시간에 큰 영향을 미치지 않습니다. 그러나 매우 저사양 기기의 경우 런타임 처리가 오래 걸립니다. 두 이미지를 머신러닝 얼굴 감지 모델에 전달하기 전에 기기 RAM 및 CPU를 확인하는 로직이 추가되었습니다.

기기의 RAM이 4GB를 초과하고, 네트워크 연결이 4G를 초과하며, CPU의 코어가 6개를 초과하는 경우 이미지가 기기 내 모델에 전달되어 얼굴 인증을 실행합니다. 이러한 요구사항이 충족되지 않으면 기기 내 모델이 건너뛰어지고 이러한 이전 기기를 지원하기 위해 하이브리드 접근 방식을 사용하여 이미지가 서버로 직접 전송되어 인증됩니다. 하드웨어가 계속 발전함에 따라 시간이 지남에 따라 더 많은 기기에서 서버의 컴퓨팅을 오프로드할 수 있게 됩니다.

영향

ML 통합 덕분에 Tokopedia는 높은 거부율 문제를 해결하고 다음과 같은 결과를 얻었습니다.

  • 거부율이 20% 넘게 감소했습니다.
  • 수동 승인 수가 거의 70% 감소했습니다.

이를 통해 판매자의 사용자 환경이 개선되었을 뿐만 아니라 Tokopedia팀의 운영 비용도 절감되었습니다.

결론

전반적으로 이 사례 연구의 결과에 따르면 적절한 사용 사례의 경우 웹의 온디바이스 ML 솔루션이 사용자 환경과 기능의 효과를 개선하고 비용 절감 및 기타 비즈니스 이점을 창출하는 데 유용할 수 있습니다.

MediaPipe 스튜디오웹용 MediaPipe 얼굴 감지기의 코드 샘플을 사용하여 MediaPipe 얼굴 감지 기능을 직접 사용해 보세요.

기기 내 ML을 사용하여 자체 웹 앱의 기능을 확장하는 데 관심이 있다면 다음 리소스를 확인하세요.