ReadForU 💬

📖 목차

1. 소개
2. 팀원
3. 실행 화면
4. 트러블 슈팅

1. 📢 소개

5가지 언어 중 원하는 언어를 선택해주세요!
카메라를 켜고 실시간으로 번역을 사용해보세요
번역된 내용을 선택, 복사하여 기본 번역에서 추가 번역을 해보세요

5가지 Source Language, Target Language 선택 및 전환 버튼 뷰
언어 선택 뷰를 별도의 LanguageChangeButtonView로 만들어 뷰를 재사용
DataScannerViewController를 사용하여 실시간 번역 구현
실시간 번역 내용 선택 시 클립보드 복사
1초당 자동 번역 갱신되는 기본 번역 화면 구현

2. 👤 팀원

Serena 🐷

3. 📲 실행 화면

로딩 화면	언어 선택
실시간 번역	기본 번역
카메라 접근 권한	카메라 미지원 시

4. 🛎️ 트러블 슈팅

🔥 LoadingView를 gif로 띄우기

• 앱을 설치 후 처음 앱 구동 시 gif LoadingView를 띄우고자 하였습니다. 이때, 외부라이브러리를 사용하여도 LaunchScreen에선 gif를 사용할 수 없다는 것을 알게되었습니다.
• 이를 해결하기 위해 LaunchScreen에서 gif의 첫 시작 사진을 넣고, LaunchScreen이후 바로 gif LoadingView를 띄워주었습니다. 🔗 참고링크

🔥 DataScanner Constraints 오류

• DataScannerViewController의 isGuidanceEnabled=true로 주게되는 경우 하기와 같은 에러가 발생하였습니다.

"<NSLayoutConstraint:0x282c22e40 H:|-(10)-[UILabel:0x12f3152e0](LTR) (active, names: '|':VKKeyboardCameraGuidanceView:0x12f3148a0 )>",
"<NSLayoutConstraint:0x282c22ee0 H:[UILabel:0x12f3152e0]-(10)-|(LTR) (active, names: '|':VKKeyboardCameraGuidanceView:0x12f3148a0 )>",
"<NSLayoutConstraint:0x282c22f30 VKKeyboardCameraGuidanceView:0x12f3148a0.width <= 0.666667*VKAVCapturePreviewView:0x12f313be0.width (active)>",
"<NSLayoutConstraint:0x282c39cc0 'UIView-Encapsulated-Layout-Width' VKAVCapturePreviewView:0x12f313be0.width == 0 (active)>"

• 이는 VKAVCapturePreviewView의 가로폭사이즈가 지정되지 않으면서 생긴 문제라 생각되어, DataScannerViewController의 View사이즈를 지정해줌으로 해결하였습니다.

dataScanner.view.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            dataScanner.view.leadingAnchor.constraint(equalTo: realTimeView.scannerView.leadingAnchor),
            dataScanner.view.trailingAnchor.constraint(equalTo: realTimeView.scannerView.trailingAnchor),
            dataScanner.view.topAnchor.constraint(equalTo: realTimeView.scannerView.topAnchor),
            dataScanner.view.bottomAnchor.constraint(equalTo: realTimeView.scannerView.bottomAnchor)
        ])

🔥 StackView안의 View 사이즈 결정 시기

• DataScannerViewController의 view의 사이즈를 RealTimeTranslateViewController의 realTimeView의 사이즈에 맞추고자 하였습니다. 이때 realTimeView의 사이즈가 viewDidLoad에서 결정되지 않아 이 시점에서 DataScannerViewController의 view사이즈를 정할 수 없는 문제가 생겼습니다.
• 하여 StackView안에 있는 realTimeView의 사이즈가 결정된 시점인 viewDidAppear에서 DataScannerViewController의 view 사이즈를 지정하였습니다.

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        if scannerAvailable {
            startDataScanner()
        } else {
            refuseAdmission()
        }
    }
    
    private func startDataScanner() {
        dataScanner.view.frame = realTimeView.scannerView.bounds
        try? dataScanner.startScanning()
    }

🔥 Image위에 Text 배치 시 가독성 문제를 UIVisualEffect로 해결

• 실시간 번역 시 인식되는 텍스트 박스 위에 불투명한 Button을 배치하고자 하였습니다. 이때, 단순히 color의 alpha값을 조정하여 사용하게 되면 오히려 텍스트의 가독성이 떨어졌습니다.

• 이를 해결하고자 UIVisualEffect를 사용하여 배경을 blur처리하고 그 위에 text가 배치될 수 있도록 하였습니다.

  🔗 참고링크

🔥 ViewController 순환참조 문제

• API를 실시간으로 호출하기 위해 Timer를 사용하여 지정 시간마다 반복적으로 API호출을 하도록 구현하였습니다. 이때 각 ViewController의 RC가 0로 바뀌지 않는 문제가 생겼습니다.
• Timer의 인스턴스가 유지되고 있다는 것을 발견하여 ViewController가 viewWillDisappear 시 Timer를 삭제하였습니다.

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        timer?.invalidate()
    }

🔥 AlertController 반복 호출

• API를 자동 반복 호출하기 때문에, API호출 에러시 뜨는 AlerController의 창이 중복으로 호출된다는 문제가 생겼습니다.

• AlertController는 UIViewController를 상속하기 떄문에 UIViewController의 presentedViewController프로퍼티를 사용하여 present로 호출된 ViewController가 있을 시 AlertController를 추가 호출하지 않도록 하였습니다.

  🔗 참고링크