Colin's Blog
[flutter] 플러터 Riverpod를 사용하여 앱에 OCR(광학 문자 인식) 기능을 추가하는 방법은 어떻게 되나요?

이번 포스트에서는 Flutter 앱에 OCR(광학 문자 인식) 기능을 추가하는 방법을 알아보겠습니다. OCR은 사진이나 이미지에 포함된 텍스트를 인식하고 추출하는 기술로, 텍스트를 자동으로 읽을 수 있게 해줍니다. 이를 위해 Flutter의 상태 관리 라이브러리인 Riverpod를 사용하여 구현해 보겠습니다.

1. Riverpod 라이브러리 추가하기

먼저, pubspec.yaml 파일에 다음과 같이 Riverpod 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0

그리고 다음 명령어를 사용하여 패키지를 가져옵니다:

flutter pub get

2. OCR 서비스 설정

OCR 서비스를 사용하기 위해 해당 서비스의 API 키 또는 인증 정보를 받아와야 합니다. OCR 기능을 제공하는 서비스는 다양하며, 무료 또는 유료로 제공되는 서비스 중 하나를 선택할 수 있습니다. 예를 들면, Google Cloud Vision API, Microsoft Azure Cognitive Services OCR 등이 있습니다.

선택한 OCR 서비스의 가이드에 따라 계정을 생성하고 API 키 또는 인증 정보를 받아옵니다.

3. Riverpod 상태 관리 설정

OCR 기능을 사용하기 위해 텍스트 입력 상태를 관리하기 위한 상태 관리 코드를 작성합니다. Riverpod를 사용하여 상태를 관리하면 다른 위젯들이 해당 상태에 접근하여 텍스트를 사용할 수 있습니다.

먼저, ocr_provider.dart 파일을 생성하고 다음과 같이 코드를 작성합니다:

import 'package:riverpod/riverpod.dart';

final ocrTextProvider = StateProvider<String>((ref) => '');
final ocrLoadingProvider = StateProvider<bool>((ref) => false);

final ocrServiceProvider = Provider<OCRService>((ref) {
  return OCRService(); // OCR 서비스를 초기화하고 반환합니다.
});

위 코드에서 ocrTextProvider는 OCR로 인식된 텍스트를 저장하는 Provider입니다. ocrLoadingProvider는 OCR 작업이 실행 중인지 여부를 저장하는 Provider입니다. ocrServiceProvider는 OCR 서비스를 초기화하고 제공하는 Provider입니다.

4. OCR 서비스 구현

OCR 서비스의 구현은 선택한 OCR 서비스에 따라 달라집니다. 여기에서는 예시로 Google Cloud Vision API를 사용하여 구현하겠습니다.

ocr_service.dart 파일을 생성하고 다음과 같이 코드를 작성합니다:

import 'package:google_ml_kit/google_ml_kit.dart';

class OCRService {
  final textDetector = GoogleMlkit.vision.textDetector();

  Future<String> recognizeTextFromImage(String imagePath) async {
    final inputImage = InputImage.fromFilePath(imagePath);
    final RecognisedText recognisedText = await textDetector.processImage(inputImage);

    String result = "";
    for (TextBlock block in recognisedText.blocks) {
      for (TextLine line in block.lines) {
        result += line.text;
      }
    }

    return result;
  }
}

위 코드에서 recognizeTextFromImage 함수는 이미지 파일 경로를 매개변수로 받아 해당 이미지에서 텍스트를 추출하는 기능을 구현합니다. Google Cloud Vision API의 textDetector() 메서드를 사용하여 이미지에서 텍스트를 인식합니다. 인식된 텍스트는 RecognisedText 객체로 반환되며, 이를 이용하여 텍스트를 추출하여 결과 문자열로 반환합니다.

5. OCR 기능 사용하기

이제 OCR 기능을 사용하는 위젯에서 상태 프로바이더와 OCR 서비스를 활용하여 텍스트 인식을 수행할 수 있습니다. 예를 들어, 이미지 파일이 선택되고 인식 버튼이 눌린 경우 다음과 같이 코드를 작성합니다:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class OCRScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OCR Screen'),
      ),
      body: Column(
        children: [
          // 이미지 선택 버튼
          ElevatedButton(
            onPressed: () async {
              final pickedImage = await ImagePicker().pickImage(source: ImageSource.gallery);
              final imagePath = pickedImage.path;

              final ocrService = context.read(ocrServiceProvider);
              final ocrText = await ocrService.recognizeTextFromImage(imagePath);

              context.read(ocrTextProvider).state = ocrText;
            },
            child: Text('Select Image'),
          ),
          // 텍스트 인식 결과 출력
          Consumer(
            builder: (context, watch, _) {
              final ocrText = watch(ocrTextProvider).state;
              final ocrLoading = watch(ocrLoadingProvider).state;

              if (ocrLoading) {
                return CircularProgressIndicator();
              } else if (ocrText.isNotEmpty) {
                return Text(ocrText);
              } else {
                return Container();
              }
            },
          ),
        ],
      ),
    );
  }
}

위 코드에서 이미지 선택 버튼이 클릭되면 ImagePicker를 사용하여 이미지를 선택하고 이미지 파일 경로를 가져옵니다. 그런 다음 OCR 서비스를 사용하여 텍스트를 추출하고, 결과를 ocrTextProvider를 통해 상태로 업데이트합니다. 이후 Consumer 위젯에서 ocrTextProvider와 ocrLoadingProvider를 읽어와 텍스트나 로딩 상태에 따라 UI를 갱신합니다.

마무리

위의 단계들을 따라가면 Flutter 앱에 Riverpod를 활용하여 OCR(광학 문자 인식) 기능을 추가할 수 있습니다. OCR 서비스를 설정하고 상태 관리 및 UI 코드를 구현하여 텍스트를 추출하고 표시할 수 있습니다. 각 서비스의 문서와 예시 코드를 참고하여 자신의 앱에 적용해보세요.

참고 자료

© 2018 Colin. All rights reserved.