README

WHAAT: Auto Translate 🔠

소개

• 카메라가 비춘 글자를 실시간으로 번역해주는 앱
• iOS 16 이상의 환경에서 사용 가능합니다
• 프로젝트 기간 : 23/10/09~23/10/17

⚠️ 주의사항

API 활용을 위해서 SecretKey.plist 파일 생성이 필요합니다. plist에 들어가는 내용은 아래 두 가지입니다.

• PapagoClientSecret : Naver Developer의 Secret Key(String)
• PapagoClientId : Naver Developer의 Client ID(String)

목차

1. 👩‍💻 팀원 소개
2. 📅 타임 라인
3. 🛠️ 활용 기술
4. 📊 시각화 구조
5. 📱 실행 화면
6. 📌 핵심 경험
7. 🧨 트러블 슈팅
8. 📚 참고 자료

👩‍💻 팀원 소개

maxhyunm ([email protected])

📅 타임 라인

날짜	내용
2023.10.09.	활용할 기술스택 결정 프로젝트 구조 구상
2023.10.10.	Network, Model, Error 관련 기본 타입 생성 DataScanner 화면인식 기능 구현
2023.10.11.	API 통신을 위한 네트워크 기능 구현 Repository 타입 생성 ViewModel 생성
2023.10.12.	DataScannerViewController를 MainViewController 내부로 이동 언어 선택을 위한 PickerView 추가 Item 타입 생성 RxSwift 추가하여 ViewModel 변경
2023.10.13.	TextPickerField 타입 생성 네트워크 오류 픽스
2023.10.14.	NetworkManager 내부 메서드 분리 ColorNamespace 추가 Localization 추가
2023.10.15.	네트워크 테스트 추가 ResultViewModel 분리
2023.10.16.	아이콘 및 런치스크린 생성 Copy 작업 추가
2023.10.17.	Toast 메시지 기능 추가 ResultViewController -> TextLabel로 변경 README 작성

🛠️ 활용 기술

Framework	Architecture	Concurrency	API	Dependency Manager
UIKit	MVVM	RxSwift	Papago 번역, 언어감지	SPM

📊 시각화 구조

File Tree

.
├── README.md
└── TranslateApp
    ├── TranslateApp
    │   ├── en.lproj
    │   │   └── Localizable.strings
    │   ├── ko.lproj
    │   │   └── Localizable.strings
    │   ├── App
    │   │   ├── AppDelegate.swift
    │   │   └── SceneDelegate.swift
    │   ├── Network
    │   │   ├── NetworkConfiguration.swift
    │   │   ├── NetworkManager.swift
    │   │   ├── URLSessionDataTaskProtocol.swift
    │   │   └── URLSessionProtocol.swift
    │   ├── Model
    │   │   ├── DTO
    │   │   │   ├── LanguageDetectorDTO.swift
    │   │   │   └── TranslatorDTO.swift
    │   │   └── TranslatorRepository.swift
    │   ├── Utility
    │   │   ├── AlertBuilder.swift
    │   │   ├── CustomColors.swift
    │   │   ├── DecodingManager.swift
    │   │   ├── KeywordArgument.swift
    │   │   └── Languages.swift
    │   ├── Error
    │   │   ├── APIError.swift
    │   │   ├── DecodingError.swift
    │   │   └── TranslateError.swift
    │   ├── Presentation
    │   │   └── View
    │   │       ├── Protocol
    │   │       │   ├── ToastShowable.swift
    │   │       │   └── ViewModelType.swift
    │   │       └── Main
    │   │           ├── LanguagePickerField.swift
    │   │           ├── TextLabel.swift
    │   │           ├── MainViewController.swift
    │   │           └── MainViewModel.swift
    │   ├── Resource
    │   │   └── Assets.xcassets
    │   ├── Info.plist
    │   └── SecretKey.plist
    ├── TranslateApp.xcodeproj
    └── TranslateAppTests
        ├── TranslateApp.xctestplan
        ├── TestDouble.swift
        ├── NetworkTexts.swift
        └── ViewModelTest.swift

UML

📱 실행 화면

언어 감지 번역	언어 선택	결과 복사

📌 핵심 경험

🌟 MVVM + Repository 패턴 활용

input 타입과 output 타입을 분리한 View Model을 적용한 MVVM 패턴을 활용하였습니다. 또한 네트워크 처리와 연결되는 로직은 Repository 타입으로 분리하였습니다.

상세코드

protocol MainViewModelType {
    var inputs: MainViewModelInputsType { get }
    var outputs: MainViewModelOutputsType { get }
}

protocol MainViewModelInputsType {
    func scanText(_ input: String)
    func touchUpTranslate(source: String, target: String)
}

protocol MainViewModelOutputsType {
    var outputItem: PublishRelay<String> { get }
    var errorMessage: PublishRelay<String> { get }
}

protocol ViewModelWithError {
    var errorMessage: PublishRelay<String> { get }
    func handle(error: Error)
}

final class TranslatorRepository {
    let networkManager: NetworkManager
    
    init(networkManager: NetworkManager) {
        self.networkManager = networkManager
    }

    func detectLanguage(_ text: String, completion: @escaping(Result<Languages, Error>) -> Void) {
        ...
    }
    
    func translate(source: Languages, target: Languages, text: String, completion: @escaping(Result<String, Error>) -> Void) {
        ...
    }
}

🌟 DataScannerViewController를 활용한 언어 스캔 구현

DataScannerViewController를 사용하려면 iOS 16 이상이어야 한다는 점이 고민되어, 처음에는 VNDocumentCameraViewController를 사용하려 하였습니다. 하지만 그렇게 하면 실시간이라기보다는 한 차례 이미지를 스캔한 뒤 그 중에서 선택하여 텍스트 인식을 하고, 그 후에 번역을 하는 등 단계가 추가되어 실시간 번역이라는 느낌이 들지 않는 것 같았습니다. 결국 DataScannerViewController와 DataScannerViewControllerDelegate를 활용하여 실시간으로 카메라에 비친 텍스트를 감지할 수 있도록 하였습니다.

상세코드

private let dataScanner: DataScannerViewController = {
    let scanner = DataScannerViewController(recognizedDataTypes: [.text()],
                                            qualityLevel: .balanced,
                                            recognizesMultipleItems: false,
                                            isHighFrameRateTrackingEnabled: true,
                                            isHighlightingEnabled: true)
    scanner.view.translatesAutoresizingMaskIntoConstraints = false
    return scanner
}()

...

extension MainViewController: DataScannerViewControllerDelegate {
    func dataScanner(_ dataScanner: DataScannerViewController,
                     didAdd addedItems: [RecognizedItem],
                     allItems: [RecognizedItem]) {
       translateLabel.removeFromSuperview()
        
        guard let item = addedItems.first,
              case .text(let text) = item else { return }

        let frame = CGRect(x: text.bounds.topLeft.x,
                           y: dataScanner.view.frame.origin.y + text.bounds.topLeft.y,
                           width: text.bounds.topRight.x - text.bounds.topLeft.x,
                           height: text.bounds.bottomRight.y - text.bounds.topRight.y)

        translateLabel.resetLabel(frame: frame)
        viewModel.inputs.scanText(text.transcript)
    }
}

🌟 RxSwift를 활용한 데이터 바인딩 구현

View와 View Model 간의 데이터 바인딩은 물론, View 내부의 버튼이나 PickerView 액션에도 RxSwift를 활용하였습니다.

상세코드

final class MainViewModel: MainViewModelType, MainViewModelOutputsType, ViewModelWithError {
    ...
    var outputItem = PublishRelay<String>()
    var errorMessage = PublishRelay<String>()
    ...
}

private func bindOutput() {
    viewModel.outputs.outputItem
        .subscribe(on: MainScheduler.instance)
        .bind { [weak self] output in
            guard let self else { return }
            self.translateLabel.text = output
            self.view.addSubview(self.translateLabel)
        }
        .disposed(by: disposeBag)
}

func bindPickerView(disposeBag: DisposeBag) {
    Observable.just(category.menu).bind(to: pickerView.rx.itemTitles) { _, item in
        return item
    }.disposed(by: disposeBag)

    pickerView.selectRow(0, inComponent: 0, animated: false)
    self.text = category.menu.first
}

🌟 Builder 패턴 활용

Builder 패턴을 활용해 Alert 처리를 조금 더 깔끔히 할 수 있도록 하였습니다.

상세코드

struct AlertBuilder {
    let configuration: AlertConfiguration
    
    init(prefferedStyle: UIAlertController.Style) {
        ...
    }
    
    @discardableResult
    func setTitle(_ title: String) -> Self {
        ...
    }
    
    @discardableResult
    func setMessage(_ message: String) -> Self {
        ...
    }
    
    @discardableResult
    func addAction(_ actionType: AlertActionType, action: ((UIAlertAction) -> Void)? = nil) -> Self {
        ...
    }
    
    func build() -> UIAlertController {
        ...
    }
}

let alertBuilder = AlertBuilder(prefferedStyle: .alert)
    .setMessage(errorMessage)
    .addAction(.confirm) { action in
        self.dismiss(animated: true)
    }
    .build()

🌟 Generic을 활용한 범용 메서드 구현

다양한 타입의 Entity를 반환해야 하는 DecodingManager의 메서드를 Generic으로 구현하였습니다.

상세코드

final class DecodingManager { static let shared = DecodingManager() let decoder = JSONDecoder()

private init() {}

func decode<T: Decodable>(_ data: Data?) throws -> T {
    guard let data = data,
          let decodedData = try? decoder.decode(T.self, from: data) else {
        throw DecodingError.decodingFailure
    }
    return decodedData
}

}

🌟 UITextField와 UIPickerView를 활용한 선택창 구현

Text Field에 Picker View를 연결한 LanguagePickerField 타입을 생성하여 언어 선택이 가능하도록 구현하였습니다.

상세코드

final class LanguagePickerField: UITextField {
    private let pickerView = UIPickerView()
    
    ...
    
    inputView = pickerView
    
    ...
    
    func bindPickerView(disposeBag: DisposeBag) {
        Observable.just(category.menu).bind(to: pickerView.rx.itemTitles) { _, item in
            return item
        }.disposed(by: disposeBag)

        pickerView.selectRow(0, inComponent: 0, animated: false)
        self.text = category.menu.first
    }
    
    ...
    
}

🌟 UIToolBar 활용

UIToolBar와 flexibleSpace를 활용하여 PickerView 상단 버튼을 구현하였습니다.

상세코드

private let toolbar: UIToolbar = {
    let toolBar = UIToolbar(frame: CGRect(origin: .zero, size: CGSize(width: UIScreen.main.bounds.width, height: 35)))
    toolBar.translatesAutoresizingMaskIntoConstraints = false
    toolBar.barStyle = .default
    toolBar.isTranslucent = true
    toolBar.tintColor = Colors.barButtonTitle
    toolBar.sizeToFit()
    return toolBar
}()
    
...
    
let cancelButton = UIBarButtonItem(primaryAction: cancel)
let selectButton = UIBarButtonItem(primaryAction: select)
let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)

toolbar.setItems([cancelButton, flexibleSpace, selectButton], animated: true)
toolbar.isUserInteractionEnabled = true
self.inputAccessoryView = toolbar

🌟 GestureRecognizer 활용

label에 Long Press Guesture를 연결하여 오래 터치하면 클립보드에 복사를 할 수 있도록 구현하였습니다.

상세코드

private func addGestureRecognizer() {
    let gestureRecognizer = UILongPressGestureRecognizer(target: self, action: #selector(handleLongPress))
    translateLabel.addGestureRecognizer(gestureRecognizer)
}

@objc private func handleLongPress() {
    showToast(Constants.copyToastMessage, withDuration: 3.0, delay: 0.1)
    UIPasteboard.general.string = translateLabel.text
}

🌟 Localization 추가

지역화를 위한 처리를 추가하여 영어와 한국어로 활용할 수 있도록 하였습니다.

상세코드

"languageAuto" = "Detect Language";
"languageKorean" = "Korean";
"languageEnglish" = "English";
"languageJapanese" = "Japanese";
...

"languageAuto" = "언어 감지";
"languageKorean" = "한국어";
"languageEnglish" = "영어";
"languageJapanese" = "일본어";
...

...
switch self {
case .auto:
    return String(format: NSLocalizedString("languageAuto", comment: "언어 감지"))
case .korean:
    return String(format: NSLocalizedString("languageKorean", comment: "한국어"))
case .english:
    return String(format: NSLocalizedString("languageEnglish", comment: "영어"))
case .japanese:
    return String(format: NSLocalizedString("languageJapanese", comment: "일본어"))
case .chineseSimple:
...

🧨 트러블 슈팅

1️⃣ 뷰컨트롤러 내부에 DataScannerViewController 배치

🚨 문제점
처음에는 DataScannerViewController에서 지니고 있는 overlayContainerView에 Button과 TextField를 배치하려 했습니다. 하지만 그렇게 하면 해당 요소들과 상호작용을 할 수 없다는 것을 깨달았습니다. 뷰를 split해야 할지, 어떻게 하면 뷰 컨트롤러 내부에 DataScannerViewController를 넣을 수 있을지 많은 고민을 거쳤습니다.

💡 해결 방법
DataScannerViewController의 View만을 뷰컨트롤러에 Subview로 추가해주는 방식으로 문제를 해결하였습니다.

private func configureScanner() {
    dataScanner.delegate = self

    addChild(dataScanner)
    view.addSubview(dataScanner.view)

    NSLayoutConstraint.activate([
        dataScanner.view.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
        dataScanner.view.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
        dataScanner.view.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 50),
        dataScanner.view.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
    ])

    dataScanner.didMove(toParent: self)
}

2️⃣ UILabel의 위치 설정

🚨 문제점
DataScannerViewContoller를 활용하면 스캔한 텍스트의 위치정보도 함께 얻을 수 있습니다. 때문에 카메라가 인식한 텍스트 위치에 Label을 올려 실시간으로 번역된 내용을 표시하면 좋겠다는 생각이 들었습니다. 이를 위해 UILabel에 frame 정보를 넘겨주었지만, 계속해서 크기와 위치를 잡지 못하고 상단으로 올라가는 오류가 있었습니다.

💡 해결 방법
label의 translatesAutoresizingMaskIntoConstraints 설정이 false로 되어 있기 때문에 해당 내용을 적용하지 못하는 것을 확인하였습니다. 해당 설정을 삭제하여 해결하였습니다.

3️⃣ UIToolBar Frame

🚨 문제점
버튼 처리를 위해 UIToolBar를 연결한 후 PickerView를 활성화하면 아래와 같은 Constraint 오류가 계속하여 발생하였습니다.

💡 해결 방법
UIToolBar의 frame 설정이 없어 오류가 나는 것으로 확인하여, 아래와 같이 frame을 설정해 해결하였습니다.

let toolBar = UIToolbar(frame: CGRect(origin: .zero, size: CGSize(width: UIScreen.main.bounds.width, height: 35)))

📚 참고 자료

🍎 : Apple Developer Documentations 🟢 : Naver Developers ⚪️ : 기타 자료

🍎 URLSession
🍎 URLRequest
🍎 URLComponents
🍎 UIAlertController
🍎 DataScannerViewController
🍎 Scanning data with the camera
🍎 UIPickerView
🍎 UIToolbar
🍎 Bounds
🍎 Frame
🟢 파파고 번역 API
🟢 파파고 언어 감지 API
⚪️ RxSwift
⚪️ Kodeco : New Scanning and Text Capabilities with VisionKit