[SwiftUI/VisionKit] CS팀을 도와드리자! 서류 스캔과 이미지 글자 인식

  이전에 어느 서비스에서도 그랬지만 가입시 받아야 하는 서류 중 수기 처리가 필요한 경우가 있다. 이번 서비스 또한 최대 5개의 서류를 받아야 하고, 그 서류가 유효한지 수기로 검증 후에 가입시킬 수 있다고 한다. 

  첨부 후 사용자가 별도로 확인하는 것이 아닌 첨부됨- 상태 표시 후 끝이기 때문에, 사용자가 갤러리에서 터치 한번 잘 못 해서 이상한 사진이 들어가면 알 방법이 없다. 이 후 CS에서는 사용자와 연락하고 수정하는 과정을 거쳐야 한다. 

  완전히 VisionKit에게 맡기는 것은 무리이겠지만, 글자를 추출해서 의심스러운 서류는 얼럿 창 한번 띄워서 인식 시켜주는 것도 나쁘지 않겠다는 생각이 들었다. CS 팀 업무를 조금 줄여들일 수 있지 않을까?! 

 

애플에서 지원하는 VisionKit으로 텍스트를 인식할 때 애플 서버를 타는게 아니라 기기 내부에서 진행하게 된다. 보안적으로는 다른 라이브러리 쓰는 것 보다 안전하지 않을까 싶다. 

 

1. 문서 스캐너 만들기

2. 이미지 텍스트 인식하기

 

---

1. 문서 스캐너 만들기

VNDocumentCameraViewController

VNDocumentCameraViewController는 VisionKit에서 제공한다. 문서 스캔을 할 수 있도록 카메라 UI를 제공해 준다. 

struct DocumentScannerView: UIViewControllerRepresentable {
}

 

SwiftUI에서 사용하려면 UIViewControllerRepresentable로 구현해 주어야 한다. 

    @Binding var recognizedText: String

    func makeUIViewController(context: Context) -> VNDocumentCameraViewController {
        let viewController = VNDocumentCameraViewController()
        viewController.delegate = context.coordinator
        return viewController
    }

    func updateUIViewController(_ uiViewController: VNDocumentCameraViewController, context: Context) { }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

recognizedText는 VisionKit이 인식한 텍스트가 담기게 되고, 바인딩으로 연결되었기 때문에 이 값이 업데이트 되면 recognizedText State를 사용하는 View 또한 업데이트 되어 화면에 표시할 수 있게 된다

 

class Coordinator: NSObject, VNDocumentCameraViewControllerDelegate { }

 

Coordinator 코드를 작성한다. VNDocumentCameraViewController의 델리게이트를 사용하기 위해 프로토콜을 채택해 준다.

        var parent: DocumentScannerView

        init(_ parent: DocumentScannerView) {
            self.parent = parent
        }

Parent는 DocumentScannerView

 

        func documentCameraViewController(_ controller: VNDocumentCameraViewController, didFinishWith scan: VNDocumentCameraScan) {
            for pageIndex in 0..<scan.pageCount {
                let image = scan.imageOfPage(at: pageIndex)
                recognizeText(in: image)
            }
            controller.dismiss(animated: true)
        }

document camera로 부터 스캔된 문서가 성공적으로 저장되면 이 델리게이트를 호출한다. 여러장을 스캔할 수 있기 때문에 scan된 이미지들이 scan이라는 파라미터에 담겨 온다. scan.imageOfPage(at: index)은 UIImage를 반환하게 된다.

 

        private func recognizeText(in image: UIImage) {
            guard let cgImage = image.cgImage else { return }

            let request = VNRecognizeTextRequest { (request, error) in
                guard let observations = request.results as? [VNRecognizedTextObservation],
                      error == nil else { return }

                let recognizedStrings = observations.compactMap { observation in
                    observation.topCandidates(1).first?.string
                }

                DispatchQueue.main.async {
                    self.parent.recognizedText += recognizedStrings.joined(separator: "\n")
                }
            }
            
            request.recognitionLanguages = ["ko"]
            request.usesLanguageCorrection = true

            let requestHandler = VNImageRequestHandler(cgImage: cgImage, options: [:])
            do {
                try requestHandler.perform([request])
            } catch {
                print("\(error).")
            }
        }

 

VNRecognizeTextRequest는 Vision 프레임워크에 포함되어 있고 이를 이용하면 이미지에서 텍스트를 추출할 수 있다. 

 

VNRecognizeTextRequest 단계

1. request 생성

텍스트를 읽은 뒤 무엇을 할지 만들어주는 단계이다. 

            let request = VNRecognizeTextRequest { (request, error) in
                guard let observations = request.results as? [VNRecognizedTextObservation],
                      error == nil else { return }

                let recognizedStrings = observations.compactMap { observation in
                    observation.topCandidates(1).first?.string
                }

                DispatchQueue.main.async {
                    self.parent.recognizedText += recognizedStrings.joined(separator: "\n")
                }
            }

이미지로 부터 텍스트를 인식한 뒤 recognizedText 바인딩 값을 업데이트 해주는 로직이다. 

 

2. 속성 지정하기

            request.recognitionLanguages = ["ko"]
            request.usesLanguageCorrection = true

꼭 한국어가 포함될 수 있도록 recognitionLanguages에 지정해 주어야 한다! 같은 이미지라 할지라도 한국어를 영어로 인식했을 때랑 한국어로 인식했을 때랑 결과가 완전히 다르다!

 

3. requestHandler 생성하기

let requestHandler = VNImageRequestHandler(cgImage: cgImage, options: [:])

 

이미지와 옵션을 지정

 

4. 생성 한 request를 handler 통해 실행하기

            do {
                try requestHandler.perform([request])
            } catch {
                print("\(error).")
            }

perform 에 request들을 담아 주면 된다. 이렇게 하면 request에서 지정한 태스크가 실행된다.

 

ContentView

struct ContentView: View {
    @State private var recognizedText = ""
    @State private var isShowDocumentScanner = false

    var body: some View {
        VStack {
            ScrollView {
                Text(recognizedText)
            }

            Button("Scan Documents") {
                isShowDocumentScanner = true
                recognizedText = ""
            }
            .sheet(isPresented: $isShowDocumentScanner) {
                DocumentScannerView(recognizedText: $recognizedText)
            }
        }
        .padding()
    }
}

 

 

네모난 영역 인식하면 스캐너가 냅다 찍어버린다. 스캐너 카메라 너무 잘 만들어 놓음;;; 애플 감사해용

---

 

이미지에서 텍스트 추출하기

앞에서 VNRecognizeTextRequest 텍스트 추출하는 코드만 분리하면

    private func recognizeText(in image: UIImage?) {
        guard let cgImage = image?.cgImage else { return }

        let request = VNRecognizeTextRequest { (request, error) in
            guard let observations = request.results as? [VNRecognizedTextObservation],
                  error == nil else { return }

            let text = observations.compactMap { $0.topCandidates(1).first?.string }.joined(separator: "\n")

            DispatchQueue.main.async {
                print(text)
                self.recognizedText = text
            }
        }

        request.recognitionLanguages = ["ko"]
        request.usesLanguageCorrection = true

        let requestHandler = VNImageRequestHandler(cgImage: cgImage, options: [:])
        do {
            try requestHandler.perform([request])
        } catch {
            print("\(error)")
        }
    }

 

SwiftUI 에서 바로 써주면 된다

    @State private var selectedImage: UIImage? = UIImage()
    @State private var isShowingImagePicker = false
    @State private var recognizedText: String = ""

    var body: some View {
        VStack {
            if let selectedImage = selectedImage {
                Image(uiImage: selectedImage)
                    .resizable()
                    .scaledToFit()
                    .onChange(of: selectedImage) { image in
                        recognizedText = ""
                        recognizeText(in: image)
                    }
            }

            Button("Select Image") {
                isShowingImagePicker = true
            }

            if !recognizedText.isEmpty {
                Text(recognizedText)
                    .padding()
            }
        }
        .sheet(isPresented: $isShowingImagePicker) {
            ImagePicker(selectedImage: $selectedImage)
        }
    }

ImagePicker에 UIImage 타입의 State를 전달하면 선택한 사진을 쉽게 observing 할 수 있다 🥹

 

 

몇 개 글자 빼고 아주 잘 추출 됬다. 

아 애플 너무 좋아....

references

https://developer.apple.com/documentation/visionkit

VisionKit | Apple Developer Documentation

https://gwonran.tistory.com/54

Swift] privacy-sensitive data 해결하는 법

https://ohwhatisthis.tistory.com/17

[iOS/Swift] VisionKit OCR Api 예제 한글

 

 

 

혹시 글에 문제 있거나 수정해야 할 부분이 있다면

알려주시면 감사하겠습니다 :)