이 페이지는 Cloud Translation API를 통해 번역되었습니다.

이미지에서 객체를 감지하여 ML Kit를 사용한 시각적 제품 검색 빌드: Android

1. 시작하기 전에

휴대전화 카메라로 피사체를 가리키고 온라인으로 구매할 수 있는 곳을 찾을 수 있는 Google 렌즈 데모를 보신 적이 있나요? 앱에 동일한 기능을 추가하는 방법을 알아보려면 이 Codelab을 참고하세요. 이 과정은 제품 이미지 검색 기능을 모바일 앱에 빌드하는 방법을 설명하는 학습 과정의 일부입니다.

이 Codelab에서는 제품 이미지 검색 기능을 빌드하는 첫 번째 단계인 이미지에서 객체를 감지하고 사용자가 검색할 객체를 선택하도록 하는 방법을 알아봅니다. ML Kit 객체 감지 및 추적을 사용하여 이 기능을 빌드합니다.

학습 과정에서 Vision API 제품 검색을 사용하여 제품 검색 백엔드를 구축하는 방법을 포함한 나머지 단계에 대해 알아볼 수 있습니다.

빌드할 항목

이 Codelab에서는 ML Kit를 사용하여 Android 앱을 빌드합니다. 앱은 ML Kit Object Detection and Tracking API를 사용하여 지정된 이미지에서 객체를 감지합니다. 그런 다음 사용자는 제품 데이터베이스에서 검색할 객체를 선택합니다.
최종적으로 오른쪽 이미지와 비슷한 것을 볼 수 있습니다.

학습할 내용

ML Kit SDK를 Android 애플리케이션에 통합하는 방법
ML Kit 객체 감지 및 추적 API

필요한 항목

Android 스튜디오 최신 버전 (v4.1.2 이상)
Android 스튜디오 에뮬레이터 또는 실제 Android 기기
샘플 코드
Kotlin을 이용한 Android 개발에 관한 기본 지식

이 Codelab에서는 ML Kit에 중점을 둡니다. 다른 개념과 코드 블록은 학습하지 않으며 복사하여 붙여넣을 수 있도록 제공됩니다.

2. 설정

코드 다운로드

다음 링크를 클릭하면 이 Codelab의 모든 코드를 다운로드할 수 있습니다.

다운로드한 ZIP 파일의 압축을 해제합니다. 이렇게 하면 필요한 모든 리소스가 포함된 루트 폴더 (odml-pathways-main)의 압축이 해제됩니다. 이 Codelab에서는 product-search/codelab1/android 하위 디렉터리에 있는 소스만 있으면 됩니다.

mlkit-android 저장소의 객체 감지 하위 디렉터리에는 다음과 같은 두 개의 디렉터리가 있습니다.

starter: 이 Codelab의 기반이 되는 코드를 시작합니다.
최종: 완성된 샘플 앱의 완성된 코드입니다.

3. 프로젝트에 ML Kit 객체 감지 및 추적 API 추가

Android 스튜디오로 앱 가져오기

먼저 시작 앱을 Android 스튜디오로 가져옵니다.

Android 스튜디오로 이동하여 Import Project (Gradle, Eclipse ADT 등)를 선택한 다음, 이전에 다운로드한 소스 코드에서 starter 폴더를 선택합니다.

ML Kit 객체 감지 및 추적을 위한 종속 항목 추가

ML Kit 종속 항목을 사용하면 ML Kit ODT SDK를 앱에 통합할 수 있습니다.

프로젝트의 app/build.gradle 파일로 이동하여 종속 항목이 이미 있는지 확인합니다.

build.gradle

dependencies {
  // ...
  implementation 'com.google.mlkit:object-detection:16.2.4'
}

프로젝트를 Gradle 파일로 동기화

앱에서 모든 종속 항목을 사용할 수 있도록 하려면 이 시점에서 프로젝트를 Gradle 파일과 동기화해야 합니다.

Android 스튜디오 툴바에서 Sync Project with Gradle Files ( )를 선택합니다.

(이 버튼이 사용 중지된 경우 전체 저장소가 아닌 starter/app/build.gradle만 가져와야 합니다.)

4. 시작 앱 실행

이제 프로젝트를 Android 스튜디오로 가져오고 ML Kit 객체 감지 및 추적을 위한 종속 항목을 추가했으므로 앱을 처음으로 실행할 수 있습니다.

USB를 통해 Android 기기를 호스트에 연결하거나 Android 스튜디오 에뮬레이터를 시작하고 Android 스튜디오 툴바에서 Run ( )을 클릭합니다.

앱 실행 및 탐색

Android 기기에서 앱이 실행됩니다. 여기에는 사진을 캡처하거나 미리 설정된 이미지를 선택하여 이 Codelab에서 빌드할 객체 감지 및 추적 파이프라인에 피드할 수 있는 상용구 코드가 있습니다. 코드를 작성하기 전에 앱을 조금 살펴보세요.

첫째, 하단에는 다음과 같은 버튼 ( )이 있습니다.

기기/에뮬레이터에 통합된 카메라 앱 실행
카메라 앱에서 사진 촬영
시작 앱에서 캡처된 이미지 수신
이미지 표시

'사진 촬영' 기능을 사용해 보세요. 버튼을 클릭합니다. 안내에 따라 사진을 찍고 수락한 후 시작 앱에 사진이 표시되는지 확인합니다.

둘째, 사전 설정된 이미지 3가지 중에서 선택할 수 있습니다. 나중에 Android Emulator에서 실행 중인 경우 이러한 이미지를 사용하여 객체 감지 코드를 테스트할 수 있습니다.

사전 설정된 이미지 3개 중에서 이미지를 선택합니다.
이미지가 더 크게 표시됩니다.

5. 온디바이스 객체 감지 추가

이 단계에서는 이미지에서 객체를 감지하는 기능을 시작 앱에 추가합니다. 이전 단계에서 확인한 것처럼 시작 앱에는 기기의 카메라 앱으로 사진을 찍기 위한 상용구 코드가 포함되어 있습니다. Android Emulator에서 Codelab을 실행하고 있다면 객체 감지를 사용해 볼 수 있는 미리 설정된 이미지도 앱에 3가지 있습니다.

미리 설정된 이미지에서 또는 카메라 앱으로 사진을 촬영하여 이미지를 선택하면 상용구 코드가 해당 이미지를 Bitmap 인스턴스로 디코딩하여 화면에 표시하고 이미지와 함께 runObjectDetection 메서드를 호출합니다.

이 단계에서는 runObjectDetection 메서드에 코드를 추가하여 객체 감지를 실행합니다.

이미지에서 기기 내 객체 감지 설정 및 실행

3가지 API로 이루어진 간단한 3단계만으로 ML Kit ODT를 설정할 수 있습니다.

이미지 준비: InputImage
감지기 객체 만들기: ObjectDetection.getClient(options)
위의 두 객체 process(image)를 연결합니다.

이는 MainActivity.kt 파일의 **runObjectDetection(bitmap: Bitmap)**함수 내에서 실행합니다.

/**
 * ML Kit Object Detection Function
 */
private fun runObjectDetection(bitmap: Bitmap) {
}

지금은 함수가 비어 있습니다. 다음 단계로 이동하여 ML Kit ODT를 통합하세요. 이 과정에서 Android 스튜디오는 필요한 가져오기를 추가하라는 메시지를 표시합니다.

com.google.mlkit.vision.common.InputImage
com.google.mlkit.vision.objects.ObjectDetection
com.google.mlkit.vision.objects.defaults.ObjectDetectorOptions

1단계: InputImage 만들기

ML Kit는 Bitmap에서 InputImage를 만드는 간단한 API를 제공합니다. 그러면 ML Kit API에 InputImage를 제공할 수 있습니다.

// Step 1: create ML Kit's InputImage object
val image = InputImage.fromBitmap(bitmap, 0)

위의 코드를 runObjectDetection(bitmap:Bitmap) 상단에 추가합니다.

2단계: 감지기 인스턴스 만들기

ML Kit는 빌더 디자인 패턴을 따르며, 구성을 빌더에 전달한 후 검사기를 획득합니다. 다음과 같은 세 가지 옵션을 구성할 수 있습니다 (굵게 표시된 옵션은 Codelab에서 사용됨).

검사 프로그램 모드 (단일 이미지 또는 스트림)
감지 모드 (단일 또는 다중 객체 감지)
분류 모드 (사용 또는 사용 중지)

이 Codelab은 단일 이미지 - 다중 객체 감지 및 다음과 같이 분류해 보겠습니다.

// Step 2: acquire detector object
val options = ObjectDetectorOptions.Builder()
   .setDetectorMode(ObjectDetectorOptions.SINGLE_IMAGE_MODE)
   .enableMultipleObjects()
   .enableClassification()
   .build()
val objectDetector = ObjectDetection.getClient(options)

3단계: 감지기에 이미지 제공

객체 감지 및 분류는 비동기 처리입니다.

process()를 통해 이미지를 감지기에 전송하는 경우
감지기가 상당히 열심히 노력하고 있습니다.
감지기가 콜백을 통해 결과를 다시 보고합니다.

다음 코드가 작업을 수행합니다 (복사하여 fun runObjectDetection(bitmap:Bitmap)): 내부의 기존 코드에 추가).

// Step 3: feed given image to detector and setup callback
objectDetector.process(image)
   .addOnSuccessListener {
       // Task completed successfully
        debugPrint(it)
   }
   .addOnFailureListener {
       // Task failed with an exception
       Log.e(TAG, it.message.toString())
   }

완료되면 감지기가 다음과 같이 알려줍니다.

감지된 총 객체 수
감지된 각 객체는

trackingId: 프레임 간을 추적하는 데 사용하는 정수입니다 (이 Codelab에서는 사용되지 않음).
boundingBox: 객체의 경계 상자
labels: 감지된 객체의 라벨 목록(분류가 사용 설정된 경우에만)
index (이 라벨의 색인 가져오기)
text('패션 용품', '음식', '가정용품', '장소', '식물' 등 이 라벨의 텍스트 가져오기)
confidence (0.0과 1.0 사이의 부동 소수점 수, 1.0은 100%를 의미함)

코드가 감지된 결과를 debugPrint()를 사용하여 Logcat에 출력하는 것을 확인했을 것입니다. MainActivity 클래스에 추가합니다.

private fun debugPrint(detectedObjects: List<DetectedObject>) {
   detectedObjects.forEachIndexed { index, detectedObject ->
       val box = detectedObject.boundingBox

       Log.d(TAG, "Detected object: $index")
       Log.d(TAG, " trackingId: ${detectedObject.trackingId}")
       Log.d(TAG, " boundingBox: (${box.left}, ${box.top}) - (${box.right},${box.bottom})")
       detectedObject.labels.forEach {
           Log.d(TAG, " categories: ${it.text}")
           Log.d(TAG, " confidence: ${it.confidence}")
       }
   }
}

이제 감지를 위해 이미지를 허용할 준비가 되었습니다.

Android 스튜디오 툴바에서 Run ( )을 클릭하여 Codelab을 실행합니다. 미리 설정된 이미지를 선택하거나 사진을 찍은 다음 IDE 내에서 logcat 창( )을 확인해 보세요. 다음과 비슷한 모습이어야 합니다.

D/MLKit Object Detection: Detected object: 0
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (481, 2021) - (2426,3376)
D/MLKit Object Detection:  categories: Fashion good
D/MLKit Object Detection:  confidence: 0.90234375
D/MLKit Object Detection: Detected object: 1
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (2639, 2633) - (3058,3577)
D/MLKit Object Detection: Detected object: 2
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (3, 1816) - (615,2597)
D/MLKit Object Detection:  categories: Home good
D/MLKit Object Detection:  confidence: 0.75390625

이는 감지기가 다음과 같은 3개의 객체를 인식했음을 의미합니다.

패션 굿과 홈 굿이 있습니다.
알 수 없는 클래스이므로 두 번째 경우에는 반환된 카테고리가 없습니다.
trackingId 없음 (단일 이미지 감지 모드이므로)
boundingBox 직사각형 안의 위치 (예: (481, 2021) – (2426, 3376))
감지기가 첫 번째가 패션 좋음 (90%) (드레스)임을 상당히 확신합니다.

기술적으로 ML Kit 객체 감지가 작동하는 데 필요한 모든 사항은 이것뿐입니다. 지금은 모든 작업을 완료했습니다. 축하합니다.

맞습니다, UI 측면에서는 시작했을 때 여전히 단계에 있지만 경계 상자를 그려내는 등 UI에서 감지된 결과를 활용하여 더 나은 환경을 만들 수 있습니다. 다음 단계는 감지된 결과를 시각화하는 것입니다.

6. 감지 결과 후처리

이전 단계에서는 감지된 결과를 logcat에 간단하고 빠르게 출력했습니다.

이 섹션에서는 이미지의 결과를 활용합니다.

이미지에 경계 상자 그리기
경계 상자 안에 카테고리 이름과 신뢰도를 그립니다.

시각화 유틸리티 이해

Codelab에는 감지 결과를 시각화하는 데 도움이 되는 상용구 코드가 있습니다. 다음 유틸리티를 활용하여 시각화 코드를 간단하게 만드세요.

class ImageClickableView 시각화 및 감지 결과와의 상호작용을 위한 편리한 유틸리티를 제공하는 이미지 뷰 클래스입니다.
fun drawDetectionResults(results: List<DetectedObject>) 이 메서드는 감지된 각 객체의 중앙에 흰색 원을 그립니다.
fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) 사용자가 탭한 객체만 포함된 잘린 이미지를 수신하는 콜백입니다. 이후 Codelab에서 잘린 이미지를 이미지 검색 백엔드로 전송하여 시각적으로 유사한 결과를 얻습니다. 이 Codelab에서는 아직 이 메서드를 사용하지 않습니다.

ML Kit 감지 결과 표시

시각화 유틸리티를 사용하여 입력 이미지 상단에 ML Kit 객체 감지 결과를 표시합니다.

debugPrint()를 호출하는 위치로 이동하여 그 아래에 다음 코드 스니펫을 추가합니다.

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

실행하기

이제 Android 스튜디오 툴바에서 Run ( )을 클릭합니다.

앱이 로드되면 카메라 아이콘이 있는 버튼을 누르고 카메라로 대상을 가리키고 사진을 찍고 카메라 앱에서 사진을 수락합니다. 또는 사전 설정된 이미지를 손쉽게 탭해도 됩니다. 감지 결과가 표시됩니다. 버튼을 다시 누르거나 다른 이미지를 선택하여 몇 번 반복하고 최신 ML Kit ODT를 경험해 보세요.

7. 축하합니다.

ML Kit를 사용하여 앱에 객체 감지 기능을 추가했습니다.

3단계 API 3개
입력 이미지 만들기
감지기 만들기
감지기로 이미지 전송

이제 설정만 하면 사용할 수 있습니다.

학습한 내용

Android 앱에 ML Kit 객체 감지 및 추적을 추가하는 방법
ML Kit의 기기 내 객체 감지 및 추적을 사용하여 이미지 속 객체를 감지하는 방법

다음 단계

감지된 객체를 제품 검색 백엔드로 전송하고 검색결과를 표시하는 방법을 알아보려면 이 codelab을 사용해 보세요.
더 많은 이미지와 라이브 동영상이 포함된 ML Kit ODT로 더 자세히 탐색하여 감지와 분류 정확성과 성능
커스텀 모델을 학습시키는 방법을 알아보려면 객체 감지로 더 나아가기 학습 과정을 확인하세요.
객체 감지 라이브 카메라 및 정적 이미지에 관한 Material Design 권장사항 읽기
자체 Android 앱에 ML Kit ODT 적용

자세히 알아보기

https://developers.google.com/ml-kit/vision/object-detection