[swift] Swift에서 NumberMorphView를 사용하여 바코드 스캐너 구현하기

29 Nov 2023

swift

이번에는 Swift에서 NumberMorphView를 사용하여 바코드 스캐너를 구현하는 방법에 대해 알아보겠습니다. NumberMorphView는 디지털 카운터처럼 숫자를 부드럽게 전환하는 애니메이션 효과를 제공하는 뷰입니다. 이를 이용하여 바코드 값을 실시간으로 표시하고 업데이트하는 스캐너를 만들어보겠습니다.

NumberMorphView란?

NumberMorphView는 iOS용 UI 라이브러리로, 숫자를 부드럽게 전환하는 애니메이션 효과를 제공합니다. 다음과 같이 Cocoapods을 통해 설치할 수 있습니다.

pod 'NumberMorphView'

바코드 스캐너 뷰 구성하기

먼저, 바코드 스캐너의 뷰를 구성해야 합니다. 스캐너 뷰는 카메라 뷰와 바코드 값을 표시할 NumberMorphView로 구성됩니다. 다음과 같이 구성할 수 있습니다.

import UIKit
import AVFoundation
import NumberMorphView

class BarcodeScannerViewController: UIViewController {

    // 카메라 뷰
    var cameraView: UIView!
    
    // 바코드 값 표시 뷰
    var numberMorphView: NumberMorphView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 카메라 뷰 초기화
        cameraView = UIView(frame: view.bounds)
        view.addSubview(cameraView)
        
        // 바코드 값 표시 뷰 초기화
        numberMorphView = NumberMorphView(frame: CGRect(x: 0, y: 0, width: 200, height: 60))
        numberMorphView.center = view.center
        view.addSubview(numberMorphView)
    }
    
    // ...
}

여기서는 AVFoundation을 사용하여 카메라 뷰를 구성하고, NumberMorphView를 사용할 준비를 합니다.

바코드 스캐너 구현하기

이제 바코드 스캐너를 구현해보겠습니다. AVFoundation의 AVCaptureSession을 사용하여 바코드 스캐닝을 처리할 수 있습니다. 다음과 같이 코드를 작성해보세요.

extension BarcodeScannerViewController: AVCaptureMetadataOutputObjectsDelegate {
    
    func startScanning() {
        guard let captureDevice = AVCaptureDevice.default(for: .video) else { return }
        
        do {
            let input = try AVCaptureDeviceInput(device: captureDevice)
            
            let session = AVCaptureSession()
            session.addInput(input)
            
            let output = AVCaptureMetadataOutput()
            session.addOutput(output)
            
            output.setMetadataObjectsDelegate(self, queue: DispatchQueue.main)
            output.metadataObjectTypes = [.ean13, .ean8, .pdf417]
            
            let previewLayer = AVCaptureVideoPreviewLayer(session: session)
            previewLayer.videoGravity = .resizeAspectFill
            previewLayer.frame = cameraView.bounds
            cameraView.layer.addSublayer(previewLayer)
            
            session.startRunning()
        } catch {
            print("Error initializing barcode scanner: \(error)")
        }
    }
    
    func metadataOutput(_ output: AVCaptureMetadataOutput, didOutput metadataObjects: [AVMetadataObject], from connection: AVCaptureConnection) {
        if let metadataObject = metadataObjects.first as? AVMetadataMachineReadableCodeObject {
            if let barcodeValue = metadataObject.stringValue {
                numberMorphView.setValue(Int(barcodeValue) ?? 0, animated: true)
            }
        }
    }
    
    // ...
}

위 코드에서는 startScanning() 메서드를 호출하면, 기기의 카메라로부터 바코드를 스캔하고 값을 표시하는 동작을 시작합니다. 바코드 값이 감지되면 metadataOutput(_:didOutput:from:) 메서드가 호출되며, 해당 값이 NumberMorphView에 표시됩니다.

바코드 스캐너 사용하기

마지막으로, 바코드 스캐너를 사용해보겠습니다. 예를 들어, 버튼을 누르면 스캐너를 시작하도록 구현해보겠습니다.

class BarcodeScannerViewController: UIViewController {

    // ...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // ...
        
        let scanButton = UIButton(type: .system)
        scanButton.setTitle("Scan Barcode", for: .normal)
        scanButton.addTarget(self, action: #selector(startScanning), for: .touchUpInside)
        view.addSubview(scanButton)
        
        scanButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            scanButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            scanButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20)
        ])
    }
    
    // ...
}

위 코드에서는 스캔 버튼을 추가하고, 버튼에 startScanning 메서드를 연결하여 클릭 이벤트에 대한 처리를 구현하였습니다.

이제 바코드 스캐너를 사용할 준비가 끝났습니다. 앱을 실행하고 “Scan Barcode” 버튼을 눌러 바코드를 스캔해보세요. 스캔된 바코드 값이 부드럽게 업데이트되는 것을 확인할 수 있습니다.

자세한 사용 방법은 NumberMorphView GitHub 페이지를 참조하시기 바랍니다.

이제 Swift에서 NumberMorphView를 사용하여 바코드 스캐너를 구현하는 방법에 대해 알아보았습니다. NumberMorphView를 적용하면 부드러운 애니메이션 효과를 가진 바코드 스캐너를 간편하게 만들 수 있습니다.