iOS/Swift에서 OpenCV 사용

수년전에 iOS에서 OpenCV를 이용해서 작업을 해본적이 있었는데 새로 같은 작은 작업을 하려다보니 다 잊어버려서 OpenCV 프레임워크를 설치하는 과정을 잊어버려서 잊지 않기 위해서, 그리고 새버전의 Swift/Xcode에서 OpenCV와의 연결에 문제가 없는지 확인하기 위해 다시 한번 해보고 아래와 같이 정리 했다.

OpenCV 프레임워크 다운로드

iOS용 OpenCV 프레임워크를 다운 받는다. OpenCV가 버전업 될때마다 친절하게도 iOS용 프레임워크를 빌드해서 다운받을 수 있도록 준비가 되어 있다. 아래 링크에서 프레임워크를 다운 받을 수 있다. 현재 버전은 V4,5,2 최근 버전이 굉장히 빠르게 올라가고 있다. 머신러닝과 관련한 기능들이 많이 추가된것이 원인인듯하다.

https://opencv.org/releases/

다운 받아 압축을 해제 하면 iOS에서 바로 사용할 수 있는 프레임워크 형식의 파일과 폴더로 구성되어 있다.

Xcode 신규 프로젝트 생성

프레임워크 추가

Xcode에서 OpenCV-Test 라는 이름의 신규 프로젝트를 하나 생성 했다. 내가 쓰고 있는 Xcode의 버전은 12.5이다. 위에서 압축 해제한 OpenCV 프레임워크를 폴더를 생성한 프로젝트 폴더로 이동하고 프로젝트를 선택하고 [Build Phase] 에서 Link Binary With Libraries 의 + 버튼을 눌러서 프로젝트에 포함시킨다.

래퍼클래스 생성

File 메뉴에서 New -> File..을 선택해서 아래 그림과 같은 순서로 CVWrapper를 생성한다.

이때 주의할점은 Language 에 Swift 대신에 Objecitive-C 언어로 선택을 해주어야만한다. Next를 선택하면 Xcode는 자동으로 브릿지 Header 파일을 생성하겠냐는 메세지를 보여준다. Create Bridging Header를 선택해서 브릿지헤더파일을 생성한다.

그리고 생성된 CVWrapper.m 파일의 확장자를 CVWrapper.mm 으로 변경해준다.

Prefix Header 파일 생성

그리고 메뉴에서 File – New – File… 을 선택해서 PCH file을 위 그림과 같이 선택해서 주어진 파일명으로 생성하고 생성된 .pch 파일에 아래와 같은 코드를 삽입한다.

//
//  PrefixHeader.pch
//  OpenCV-Test
//
//  Created by Park Billy on 2021/05/07.
//

#ifndef PrefixHeader_pch
#define PrefixHeader_pch

#ifdef __cplusplus
#include <opencv2/opencv.hpp>
#endif

#endif /* PrefixHeader_pch */

생성한 Prefix 파일을 컴파일러에 등록해 주어야 하는데 아래의 그림과 같이 Build Settings에서 $(SRCROOT)/프로젝트명/PrefixHeader.pch의 형식으로 등록한다.

OpenCV 버전확인 하기

아래의 코드를 추가해서 OpenCV의 버전을 가져오는 기능을 만들어 봤다. CVWrapper.h / CVWrapper.mm

//
//  CVWrapper.h
//  OpenCV-Test
//
//  Created by Park Billy on 2021/05/07.
//

#import <Foundation/Foundation.h>

NS_ASSUME_NONNULL_BEGIN

@interface CVWrapper : NSObject

+ (NSString *)openCVVersion;

@end

NS_ASSUME_NONNULL_END
//
//  CVWrapper.mm
//  OpenCV-Test
//
//  Created by Park Billy on 2021/05/07.
//

#import "CVWrapper.h"
#import <opencv2/opencv.hpp>

@implementation CVWrapper

+ (NSString *)openCVVersion {
    return [NSString stringWithFormat:@"OpenCV Version %s",  CV_VERSION];
}

@end

ContentView.Swift에서 래퍼클래스의 함수를 호출하여 실제 아이폰 화면에 OpenCV 버전을 보여주는 코드를 아래와 같이 추가했다.

//
//  ContentView.swift
//  OpenCV-Test
//
//  Created by Park Billy on 2021/05/07.
//

import SwiftUI

struct ContentView: View {
    @State var version = ""
    
    var body: some View {
        Text(self.version)
            .padding()
            .onAppear(){
                self.version = CVWrapper.openCVVersion()
            }
    }
}

실행결과

실행 결과는 아래와 같다.

실제로 iOS에서 OpenCV 기능을 활용하려면 위의 CVWrapper.h 에 함수를 정의 하고 CVWrapper.mm에 기능을 구현해서 Swift 코드에서 함수를 호출하는 방식으로 사용하면 된다.

소스코드

아래 링크에서 소스 코드를 다운 받을 수 있다. 이 프로젝트를 테스트 하려면 소스에 OpenCV 프레임워크는 포함되어 있지 않으므로 다운 받아서 이글의 첫번째 부분과 같이 프레임워크를 포함시켜야 한다.

https://github.com/bipark/opencv_ios_starter

20210507 박병일

Obj-C, AutoLayout, ReactNative, Flutter, SwiftUI, 개발생산성 등등

최근에 다시 Swift/SwiftUI를 스터디하며 그동안 iOS 개발을 하며 느꼈던 UI 개발에 대한 개인적인 생각을 정리해봤습니다. 시작과 끝에 대략 10년정도의 시간차이가 있습니다.

Obj-C, InterfaceBuilder 재미있었음

Objective-C를 접한건 2009년 4월. 델파이(Pascal)에 익숙해져 있던 나에겐 NS…로 시작하는 긴 함수명을 가진 프레임워크가 의외로 익숙했고 그해에 여러개의 앱을 스토어에 업로드해서 통산 100만 다운로드는 넘기는 경험을 해보기도 했다. 무료앱이라 그다지 수익을 내지는 못했지만… ^^;

Interface Builder는 델파이의 화면디자이너와 유사했고 시간이 지나며 StoryBoard로 화면이 통합되는 과정에 사이즈 때문에 느려지는 문제들이 있었지만 최소한의 일관성은 유지 했다는 측면에서 나쁘지 않았다는 생각

Obj-C, AotoLayout 재미없었음

iOS앱 개발이 재미가 없어지기 시작한 시점은 아마도 Xcode에 AutoLayout이 적용되기 시작한 시점이었던것 같은데 기껏 화면을 디자인해 놓으면 수정사항이 발생할때마다 Layout이 깨지고 화면전체의 레이아웃을 다시 잡아야하는 불편함을 감수해야 하는게 너무 싫었음. 시간이 지나면서 언어가 Obj-C에서 Swift로 바꿔었지만 UI를 만드는 과정에 너무 번거로운 상황이 반복되면서 점점 흥미를 잃기 시작

ReactNative, CSS 흥미로움

독립개발자에서 취직을 하면서 iOS와 Android를 동시에 지원해야 하는 일이 생기면서 멀티 플랫폼에 대한 고민을 하게 되었는데 적은 리소스로 목적을 달성해야하는 스타트업 비즈니의 환경에 적합한 솔루션을 찾은것이 ReactNative. (이하 RN)

RN은 웹개발 기술을 기반으로 하고 있는데 HTML, CSS를 이용한 화면 구성이 위에 언급한 AutoLayout과 대비되면서 Xcode에도 이런 방법이 도입되어야 하지 않을까 하는 생각을 했었던 기억.

Flutter, Widget 괜찮긴한데…

멀티플랫폼은 한번 발을 들이면 쉽게 빠져 나갈수 없는데, 아이폰과 안드로이드를 한번에 빌드할 수 있다는데 누가 관심을 갖지 않겠는가? 그런면에서 Flutter는 구글의 후광을 입고 가장 빠르게 성장하고 있는 모바일 개발 플랫폼. 성능도 꽤 괜찮다.

위젯기반의 UI 레이아웃은 좀 심하다 싶게 캐스케이드 되는것을 제외하면 화면 변경이 용이하고 코드와 레이아웃간의 연결성도 나쁘지 않은편. 이것은 위에 언급한 RN도 거의 동일한 개발 편의성을 가지고 있지만 Flutter가 Android Studio 지원등에서 장점이 있고, 패키지 관리등에서 RN보다 좋은점이 많이 있음.

1년이 넘게 Flutter를 쓰면서 문제점이 나타나기 시작한 부분은 UI는 아니고 패키지 관리 부분이었는데 과도하게 외부 패키지를 사용하면 각 버전들의 의존성이 달라서 업데이트에 애를먹는 상황이 발생하게 되는데 이부분 좀 심각함

Swift, SwiftUI 완전 괜찮은데?

애플에서 발표한지 2년이 다되어가는 기능을 두고 이제와서 좋다고 말하는데 어지간히 뒷북이긴 하지만 애플이 자존심을 버리고 CSS의 장점을 잘(?) 흡수해서 하나의 코드페이지에 통합한것은 늦었지만 훌륭한 작업이었다고 칭찬할만 하다고..

iOS만 지원하는 SwiftUI와 위의 멀티플랫폼 도구를 비교하는게 오류가 있을 수 있지만 UI 구성과 코드의 자연스러운 연결에 대한 부분만 본다면 SwiftUI가 가장 우수하지 않을까 하는게 최근 앱을 하나 만들어 보고 내린 결론. 물론 개인적인 생각!

SwiftUI 테스트 프로젝트

초심으로 돌아가 돈을 벌생각이 없는 무료앱을 하나 만들어봄. 대략 2주정도 걸렸고 익숙하지 않은 방법으로 화면을 만들어야 했지만 애플의 튜토리얼 프로젝트를 따라하다보니 위에 RN, Flutter에서 UI를 만들며 했던 경험들이 매우 도움이됨

https://developer.apple.com/tutorials/swiftui

위의 튜토리얼에서 iOS화면구성에 필요한 기본적인 컨트롤의 레이아웃을 구성하는 방법에 대한 정보를 얻을 수 있었고 여기에 더해 API통신(Alamofire), GoogleAnalytics등을 Pod으로 설치해서 프로젝트 생성

내연봉계산기

앱다운로드는 아래링크

https://apps.apple.com/kr/app/id1564866857

이 앱은 개인적으로 수년에 한번씩 만드는 테스트 프로젝트인데 새로운 개발 프레임워크를 테스트 할때마다 새로 만드는 앱. 해가 바꿜때마다 만들때마다 소득세를 포함한 각종 공제액의 비율이 달라져서 매년 업데이트를 해야만 해서 새로운 공부를 시작할때 유용하게 재사용하고 있음. 물론 완전히 새로 만드는거지만

결론

어느것이 더 좋다는 결론을 내리려고 하는것은 아니고 개인적으로 최근 수년간 Xcode를 그저 빌드 도구(RN, Flutter 역시 iOS 빌드는 Xcode로 한다)로만 사용하고 있었는데 멀티플랫폼에 대한 부담을 벗어버리니 Swift/SwiftUI가 개인적으로 다시 의미가 생겼다고나 할까?

SwuftUI가 UI빌딩과 메인터낸스에서 발군의 장점이 있는것과 동시에 그동안 깨닫지 못하고 있었던 빌드타임과 런타임성능이 RN, Flutter에 비해 현저하게 빠르다는것도 매우 큰 장점이다. 물론 멀티플랫폼을 지원하지 않는다는게 단점이라면… 그건 당연한거지만

20210501 박병일

SwiftUI Tabar/NavigationView (탭바/네비게이션뷰)

최근 Flutter가 좀 지루해져서 – 지루해진 이유는 다음에 쓰기로 하고 – iOS 네이티브 개발을 다시 해보고 싶다는 충동(?)에 SwiftUI 스터디를 시작했다. iOS 개발은 Obj-C 부터 거의 10여년을 하고 있지만 아직 SwiftUI를 써보지 못해서 아래 링크의 튜토리얼을 따라해보고 대략의 감을 잡을 수 있었다.

아래 링크를 따라가면 SwiftUI의 기본적인 Interface에 대한 이해를 얻을 수 있다.

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

각설하고… 아래 코드는 iOS의 대표적인 UI인 탭바네비게이션 셈플코드이다. Xib 파일도 없고 폼디자이너도 없다. 이렇게 심플하게 코드를 만들 수 있는데 그동안 왜 그렇게 했는지 이해 할 수 없지만… 매우 만족 스럽다. Group, VStack, HStack 등을 이용해서 뷰 상세를 꾸미다보면 CSS에서 본것 같기도 하고 Flutter 에서 본것 같기도한데 각종UI 프레임워크의 좋은 점을 잘 가져와서 만들었다는 생각이 들었다.

//
//  ContentView.swift
//  study1
//
//  Created by Park Billy on 2021/04/20.
//

import SwiftUI

struct View1: View {
    var body: some View {
        
        // 네이게이션뷰로 만들어 줘야 BarTitle을 만들며 상세뷰로 이동 할 수 있다.
        NavigationView {
            // DetailView로 이동
            NavigationLink(destination: DetailView()){
                Text("Go Detail View")
            }
            .navigationBarTitle("첫번째뷰")
        }
        .tabItem { // 탭바 타이틀과 아이콘
            Text("View1")
            Image(systemName: "tray.full")
        }
    }
}

struct View2: View {
    var body: some View {
        NavigationView {
            Text("Hello View2")
                .navigationBarTitle("두번째뷰")
            
        }
        .tabItem {
            Text("View2")
            Image(systemName: "tray")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("Hello Detail View")
            .navigationBarTitle("상세뷰")
    }
}

struct ContentView: View {
    var body: some View {
        // 탭바를 만든다 ... 이렇게 간단히?
        TabView {
            View1()
            View2()
        }
    }
}

아래는 실행 결과 – 첫번째뷰에서 [Go Detail View]를 누르면 상세뷰로 이동한다. 상세뷰는 상단에 네비게이션 타이틀이 뷰 스크롤되면 자동으로 상단으로 붙어올라가는 기능이 있다. 그리고 빌드하지 않아도 Xcode에서 프리뷰를 볼 수도 있다.

오랜만에 네이티브로 스토어에 앱을 하나 올려야겠다고 생각했다.

iOS/Swift – iCloud Drive에 파일 업로드 하기

2011년 4월에 애플 앱스토어에 업로드한 Fake Location이 어뷰징 요소가 있다는 이유로 2020년 4월에 스토어에서 강제로 퇴출당했다. 이걸 마지막으로 앱스토어에 판매중인 앱이 한개도 남지 않게되어 새로운 앱을 하나 만들기로 했다.

몇일간 남는 시간을 쪼개어 그럭저럭 보이스를 녹음하고 플레이하는 작업을 하고 있었는데 알수 없는 문제에 봉착했다. 녹음된 보이스 파일은 아이폰에 저장되어야 하고 옵션으로 iCloud Drive에 저장되어야 해서 iCloud에 저장하는 기능을 추가 했는데 파일은 분명히 저장이 되고 원격 플레이까지 정상적으로 되는데 iCloud Drive에 폴더와 파일이 보이지 않는 문제가 발생했다.

알고보면 간단한 문제였지만 문제라는게 항상 그렇듯 모르면 괴로울 뿐이다. 게다가 코드 문제라기보단 설정(?) 문제라면 해결후 허무함까지 동반한다.

아이폰 로컬 폴더 얻기

아이폰 로컬 도큐먼트 폴더를 얻는 방법은 아래의 코드로 저장할 파일을 생성 할 수 있다. 생성된 audioFilename을 AVAudioRecorder에 넘겨주면 녹음이 완료된후 파일이 생성되는 것을 확인 할 수 있다. 아래 코드의 결과로 대략 이런 로케이션이 얻어진다.

file:///var/mobile/Containers/Data/Application/9F57DEC2-3A40-40AA-9EC5-5D104E94053F/Documents/voice.m4a

let saveFilename = "voice.m4a"
let path = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first
let audioFilename = path!.appendingPathComponent(saveFilename) 

iCloud Drive 원격 폴더 얻기

원격 폴더를 얻는 방법은 약간의 설정작업을 해야한다. Xcode의 Signning & Capability탭에서 +Capability 탭을 선택하여 iCloud 사용설정을 해야한다. 물론 이걸 하려면 개발자 계정이 필요하다.

설정방법

위와 같은 설정을 해주면 .entitlement 파일이 생성된다. 그리고 아래 코드를 이용하면 iCloud Drive 폴더에 파일을 생성 할 수 있다. 파일명이 아래처럼 생성된다. 레코딩 결과가 생성된 파일명으로 잘 저장되었다.

file:///private/var/mobile/Library/Mobile%20Documents/iCloud~com~*****/Documents/voice.m4a

let saveFilename = "voice.m4a"
let path = FileManager.default.url(forUbiquityContainerIdentifier: nil)?.appendingPathComponent("Documents")
let audioFilename = path!.appendingPathComponent(saveFilename) 

그런데 폴더가 보이지 않는다

iCloud Drive에 파일을 업로드 했으니 당연히 나의 맥북 Finder 에 iCloud Drive에 오디오 파일이 보여야 하는데 보이지 않았다. 여기에 보이지 않으면 파일을 복사하거나 이동 시킬 수 없다. 난감하네… 그래서 3일을 까먹었다. 결론적인 이야기지만 클라우드에 파일을 업로드 하고 사용자가 손대지 못하게 하려면 여기까지만 하면 된다. 물론 아이폰의 설정 – iCloud – 저장공간관리 – (앱) – 에서 삭제 할 수는 있다.

문제의 해결은 매우 간단했다. info.plist에 아래와 같은 Key값을 추가 해주면 된다. 물론 key는 각자의 것을 사용해야 한다. 개발자가 코드로 문제를 해결 못하고 설정때문에 몇일씩 까먹고 나면 매우 허무해진다. ^^; 이건 아래의 stackoverflow 링크의 중간쯤에 ‘난 이렇게 해결했어’ 가 있었는데… 글타래가 길어서 대충 읽고 넘어가느라 못본거 였던것 뿐이었다. 결국 3일째 모든 대답들을 다시 꼼꼼히 읽고 다 시도해 보고서야 문제를 찾을 수 있었다. 교훈은 좀 더 꼼꼼해 져야 한다.. 정도?

<key>NSUbiquitousContainers</key>
<dict>
    <key>iCloud.net.redacted.docTest</key>
    <dict>
        <key>NSUbiquitousContainerIsDocumentScopePublic</key>
        <true/>
        <key>NSUbiquitousContainerSupportedFolderLevels</key>
        <string>Any</string>
    </dict>
</dict>

https://stackoverflow.com/questions/25203697/exposing-an-apps-ubiquitous-container-to-icloud-drive-in-ios-8

이 설정을 추가하면 아이폰의 파일앱 그리고 계정이 연결된 맥북 또는 다른 컴퓨터에서 생성된 폴더와 파일을 확인 할 수 있다.

이 프로젝트는 현재 대략 20% 정도 진행되었다. 시작만 해놓고 마무리는 하지 못한 일들이 너무 많아서 이제는 외부에 공표를 해가며 스스로를 채찍질을 해보려고 하고는 있지만 과연 마무리를 할 수 있을지는 잘 모르겠다. 블로그 한개 썻으니 그나마 보람이 있는것일까?