Tokopedia는 인도네시아의 기술 기업으로, 가장 큰 전자상거래 마켓플레이스 중 하나를 운영하며 플랫폼에서 40개 이상의 디지털 제품과 1,400만 명 이상의 등록된 판매자를 호스팅하고 있습니다.
Tokopedia의 비즈니스 카테고리 중 하나인 Mitra Tokopedia는 소규모 비즈니스 소유자가 크레딧 및 게임 쿠폰, 데이터 패키지, 전기 토큰, 국가 의료비 등의 디지털 제품을 판매할 수 있도록 지원하는 웹 애플리케이션입니다. 이 웹사이트는 700개 이상의 도시에 있는 Mitra Tokopedia 판매자의 주요 채널 중 하나이므로 원활한 사용자 환경을 보장하는 것이 중요합니다.
온보딩 프로세스의 주요 단계에서는 이러한 판매자가 본인 인증을 해야 합니다. 판매자는 판매자 인증을 완료하기 위해 주민등록증과 신분증을 들고 있는 셀카를 업로드해야 합니다. 이를 고객알기제도(KYC) 절차라고 합니다.
Mitra Tokopedia는 웹 앱 내의 이 중요한 KYC 프로세스에 머신러닝 기능을 추가함으로써 인증 실패를 20% 이상 줄여 더 나은 사용자 경험을 제공할 수 있었습니다. 또한 수동 승인을 거의 70% 줄여 운영 비용을 절감했습니다.
도전과제
대부분의 KYC 데이터가 거부되어 수동 인증을 위해 운영팀에 매주 수천 개의 티켓이 생성되었습니다. 이로 인해 운영 비용이 증가할 뿐만 아니라 판매자의 인증 절차가 지연되어 사용자 환경이 저하되었습니다. 거부의 가장 큰 이유는 판매자가 신분증을 들고 찍은 셀카를 올바르게 업로드하지 않았기 때문입니다. Mitra Tokopedia는 최신 웹 기능을 사용하여 이 문제를 확장 가능하게 해결하고자 했습니다.
솔루션
Tokopedia팀은 KYC 프로세스의 첫 단계인 사용자가 이미지를 업로드할 때 TensorFlow.js를 사용한 ML로 이 문제를 해결하기로 결정했습니다. 판매자가 신분증과 셀카 이미지를 업로드할 때 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의 오픈소스 머신러닝 라이브러리로, JavaScript 개발자를 대상으로 하며 브라우저에서 클라이언트 측을 실행할 수 있습니다. 브라우저 내에서 빠른 성능으로 사용할 수 있는 포괄적인 WebGL, WebAssembly, WebGPU 백엔드 연산자 지원을 갖춘 웹 AI를 위한 가장 성숙한 옵션입니다."—Adobe가 TensorFlow.js를 사용한 웹 ML로 웹용 Photoshop을 개선한 방법
기술적 구현
Mitra Tokopedia는 실시간 얼굴 인식을 실행하는 모델을 제공하는 패키지인 MediaPipe와 TensorFlow의 얼굴 인식 라이브러리를 사용했습니다.
구체적으로는 이 라이브러리에서 제공하는 MediaPipeFaceDetector-TFJS 모델이 이 솔루션에 사용되었으며, 이 모델은 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를 확인하는 추가 로직이 추가되었습니다.
기기에 4GB 이상의 RAM, 4G 이상의 네트워크 연결, 6개 이상의 코어가 있는 CPU가 있는 경우 이미지가 얼굴 인증을 위해 기기 내 모델로 전달됩니다. 이러한 요구사항이 충족되지 않으면 기기 내 모델을 건너뛰고 이미지가 서버로 직접 전송되어 이전 기기에 맞게 하이브리드 접근 방식을 사용하여 인증됩니다. 시간이 지남에 따라 하드웨어가 계속 발전하면서 더 많은 기기가 서버에서 컴퓨팅을 오프로드할 수 있게 될 것입니다.
영향
ML 통합 덕분에 Tokopedia는 높은 거부율을 성공적으로 해결할 수 있었으며 다음과 같은 결과를 얻었습니다.
- 거부율이 20% 이상 감소했습니다.
- 수동 승인 건수가 거의 70% 감소했습니다.
이를 통해 판매자에게 더 원활한 사용자 환경을 제공할 뿐만 아니라 Tokopedia팀의 운영 비용도 절감할 수 있었습니다.
결론
전반적으로 이 우수사례의 결과는 적절한 사용 사례의 경우 웹의 온디바이스 ML 솔루션이 사용자 환경과 기능의 효과를 개선하고 비용 절감 및 기타 비즈니스 이점을 창출하는 데 유용할 수 있음을 보여주었습니다.
MediaPipe 스튜디오와 웹용 MediaPipe 얼굴 감지기의 코드 샘플을 사용하여 MediaPipe 얼굴 인식 기능을 직접 사용해 보세요.
기기 내 ML로 자체 웹 앱의 기능을 확장하는 데 관심이 있다면 다음 리소스를 확인하세요.