Tokopedia는 가장 큰 전자상거래 마켓 중 하나를 보유한 인도네시아 기술 기업으로, 플랫폼에서 40개 이상의 디지털 제품과 1,400만 명 이상의 등록된 판매자를 호스팅합니다.
Tokopedia의 비즈니스 카테고리에 속하는 Mitra Tokopedia는 중소기업 소유자가 신용 및 게임 쿠폰, 데이터 패키지, 전기 토큰, 국민 의료 청구서 등의 디지털 제품을 판매할 수 있도록 지원하는 웹 애플리케이션입니다. 이 웹사이트는 700개가 넘는 도시에서 Mitra Tokopedia 판매자의 기본 채널 중 하나이므로 원활한 사용자 환경을 보장하는 데 중요합니다.
온보딩 프로세스의 핵심 단계에서는 이러한 판매자가 본인 인증을 해야 합니다. 판매자 인증을 완료하려면 판매자가 국가 신분증 및 신분증이 포함된 셀카를 업로드해야 합니다. 이를 고객알기제도 (KYC) 프로세스라고 합니다
Mitra Tokopedia는 웹 앱의 중요한 고객알기제도 프로세스에 머신러닝 기능을 추가하여 인증 실패를 20% 이상 줄여 더 나은 사용자 경험을 제공할 수 있었습니다. 또한 수동 승인을 거의 70% 줄여 운영 비용을 절감했습니다.
당면 과제
대부분의 고객알기제도 데이터가 거부되어 운영팀에 수동 확인을 위해 매주 수천 개의 티켓을 생성했습니다. 그 결과 운영 비용이 높아졌을 뿐만 아니라 인증 절차가 지연되는 판매자의 사용자 경험이 저하되었습니다. 거부된 가장 큰 이유는 판매자가 신분증이 포함된 셀카를 올바르게 업로드하지 않았기 때문입니다. Mitra Tokopedia는 최신 웹 기능을 사용해 이 문제를 확장 가능한 방식으로 해결하고 싶었습니다.
솔루션
Tokopedia의 팀은 고객알기제도 프로세스의 첫 번째 단계, 즉 사용자가 이미지를 업로드할 때 이 문제를 해결하기 위해 TensorFlow.js와 함께 ML을 사용하기로 결정했습니다. 또한 MediaPipe와 TensorFlow의 얼굴 감지 라이브러리를 사용하여 판매자가 신분증 카드와 셀카 이미지를 업로드할 때 6가지 핵심 요소로 판매자의 얼굴을 감지했습니다. 그런 다음 모델의 출력을 사용하여 승인 기준을 확인합니다. 확인에 성공하면 정보가 백엔드로 전송됩니다. 확인이 실패하면 판매자에게 오류 메시지와 재시도 옵션이 제공됩니다. 하이브리드 접근 방식은 모델이 휴대전화의 사양에 따라 기기 또는 서버 측에서 추론을 수행하는 경우에 사용되었습니다. 저성능 기기는 서버에서 추론을 수행합니다.
고객알기제도 프로세스 초기에 ML 모델을 사용하면 다음을 수행할 수 있습니다.
- 고객알기제도 절차에서 거부율을 개선합니다.
- 모델이 평가한 품질에 따라 이미지가 거부될 수 있음을 사용자에게 경고합니다.
다른 솔루션과 달리 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 디버깅 워크플로가 필요합니다. 기술 및 성능 요구사항을 충족하는 데 도움이 되도록 실행 속도가 더 빠릅니다.
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개의 핵심 포인트가 일치하는지 확인하여 유효한 신분증 및 셀카 이미지로 간주합니다.
인증에 성공하면 관련 판매자 정보가 백엔드로 전달됩니다. 인증에 실패하면 판매자에게 실패 메시지와 다시 시도할 수 있는 옵션이 제공됩니다. 백엔드로는 정보가 전송되지 않습니다.
저사양 기기를 위한 성능 고려사항
이 패키지는 크기가 24.8KB에 불과하므로 (축소 및 gzip) 실행 시 다운로드 시간에 큰 영향을 주지 않습니다. 그러나 저사양 기기의 경우 런타임 처리에 시간이 오래 걸립니다. 두 이미지를 머신러닝 얼굴 인식 모델에 전달하기 전에 기기 RAM과 CPU를 확인하는 추가 로직이 추가되었습니다.
기기에 RAM이 4GB 이상, 네트워크 연결이 4G 이상이며 코어가 6개 이상인 CPU가 있는 경우 얼굴 인증을 위해 이미지가 기기 내 모델로 전달됩니다. 이러한 요구사항이 충족되지 않으면 기기 내 모델을 건너뛰고, 이러한 구형 기기를 위한 하이브리드 접근 방식을 사용하여 인증을 위해 이미지가 서버로 직접 전송됩니다. 시간이 지남에 따라 하드웨어가 계속 발전함에 따라 더 많은 기기가 서버에서 컴퓨팅을 오프로드할 수 있게 될 것입니다.
영향
ML 통합 덕분에 Tokopedia는 높은 거부율을 해결하는 데 성공했으며, 다음과 같은 결과를 얻었습니다.
- 거부율이 20% 넘게 감소했습니다.
- 수동 승인 횟수가 거의 70% 감소했습니다.
이를 통해 판매자의 사용자 환경이 보다 원활해졌을 뿐만 아니라 Tokopedia팀의 운영 비용도 절감되었습니다.
결론
전반적으로 이 우수사례의 결과에 따르면 올바른 사용 사례의 경우 웹의 온디바이스 ML 솔루션이 사용자 환경 및 기능의 효율성을 개선하고 비용 절감 및 기타 비즈니스 이점을 창출하는 데 유용할 수 있습니다.
MediaPipe Studio와 웹용 MediaPipe 얼굴 감지기의 코드 샘플을 사용하여 MediaPipe 얼굴 감지 기능을 직접 사용해 보세요.
기기별 ML로 자체 웹 앱의 기능을 확장하려면 다음 리소스를 확인하세요.