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에서 프리뷰를 볼 수도 있다.

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

내가 개발에 사용한 플러터 패키지

플러터 (Flutter)를 이용해서 앱을 개발하는데 패키지는 필수불가결한 요소입니다. 물론 온전히 기본제공하는 위젯(Widget)과 기능만으로 목적하는 기능을 구현할 수도 있겠지만 기본으로 지원하지 않거나 특별한 디자인과 기능을 원하는 요구사항을 만족시키기는 기본 패키지만으로는 매우 어렵습니다. 하지만 공개된 패키지를 잘 사용하면 쉽고 빠르게 목표물에 도달 할 수도 있습니다.

이 글에서는 내가 스캐니(Scanny – http://practical.kr/?p=71) 를 개발하면서 사용한 패키지들을 용도 위주로 정리했습니다. 여러 패키지들을 테스트해서 검토하고 실제 사용해서 릴리즈까지 해봤으니 개발자들에 도움이 되길 바랍니다.

패키지 검색 & 설치

플러터 패키지 검색은 https://pub.dev 에서 키워드를 입력하면 됩니다. 검색 결과에서 Popularity 숫자가 높은것을 선택하면 비교적 안심하고 쓸 수 있습니다. 하지만 자신에게 맞는것을 확인 하려면 결국 설치 해보고 테스트 해보는것이 최선입니다. 일반적으로 github 리파지터리에 셈플 프로젝트가 있으므로 다운 받아서 실행해보고 자신의 프로젝트에 적용하는 것이 좋습니다.

설치는 검색 결과에서 Installing 탭에 있는 dependencies아래에 있는 패키지명과 버전을 복사해서 자신의 프로젝xm 안에 pubspec.yaml 파일에 붙여넣고 터미널에서 아래와 같이 입력하면 설치됩니다.

> flutter pub get

그리고 실제 사용할 코드에서 아래와 같이 Import 해서 사용합니다.

import 'package:url_launcher/url_launcher.dart';

pub.dev 에는 패키지가 굉장히 많습니다. 기존에 iOS/Android를 지원하던 많은 오픈소스 패키지를 Flutter에 맞도록 포팅했기 때문에 거의 필요한건 웬만하면 다 있다고 생각하면 될것 같습니다.

개발에 사용한 패키지 목록

아래는 최근 릴리즈한 스캐니(Scanny)를 개발하며 사용 피키지 목록과 개략적인 설명

Provider - https://pub.dev/packages/provider

상태관리에 거의 필수적으로 쓰는 패키지
image_picker - https://pub.dev/packages/image_picker

사진촬영 과 사용자 앨범에서 이미지를 가지고 올때 쓴다. 파라메카 옵션을 카메라와 앨범을 선택 할 수 있고 해상도 조정도 가능합니다
http - https://pub.dev/packages/http

http 통신을 위해 사용합니다. Rest Api- GET, POST들을 이것으로 했습니다. 또한가지 많이 사용하는 패키지가 Dio(https://pub.dev/packages/dio)가 있는데 장단점이 있고 내가 보기엔 Dio가 조금 더 좋아보이지만 http를 먼저 사용하기 시작해서 그냥 이걸로 쓰고있습니다. 다음엔 Dio를 고려해볼 생각입니다.
photo_view - https://pub.dev/packages/photo_view

이미지 조회용 - 여러장의 이미지를 좌우 스와이프로 조회 할 수 있습니다. 이미지 앨범을 만들때 유용합니다.
modal_progress_hud - https://pub.dev/packages/modal_progress_hud

통신중이거나 처리중에 모달로 대기화면을 만들때 사용했습니다. 이런류의 프로그래스 컨트롤은 워낙 많지만 단순한게 제일 좋다고 생각합니다.
event_bus - https://pub.dev/packages/event_bus

컨트롤러 사이에 데이터를 주고 받을때 쉽게 사용할 수 있는 데이터버스. 사용상에 주의할 점은 싱글톤으로 개발해야 한다는 점입니다. 이벤트버스 클래스를 별도로 만들고 한번만 생성되도록 만들어야 데이터를 주고 받을 수 있습니다. 
toast - https://pub.dev/packages/toast

제목 그대로 토스트 - 간단한 메세지를 뿌립니다. 역시 심플한게 최고죠
path_provider - https://pub.dev/packages/path_provider

폴더명을 얻어올때 사용했습니다. 파일 읽기, 저장할때. pub.dev에 보면 Favorite아이콘이 붙어 있는 패키지가 있는데 이것도 그렇습니다. 좋은거라는 말이겠죠? ^^;
image_crop - https://pub.dev/packages/image_crop

말그대로 이미지 잘라내는 용도
flutter_cache_manager - https://pub.dev/packages/flutter_cache_manager

캐시된 파일을 읽어서 앨범에 저장하거나 공유하는 용도로 사용했습니다.
공유(Share)는 과거 버전에서는 소셜별로 기능별로 구현해야 했지만 최근 프레임워크가 통합관리되어 개발은 편해졌지만 커스터마이즈가 어려워진건 불만요소. 하지만 개발은 편합니다. 사용자 인터페이스도 일관성이 있고.. 아래 두가지 패키지가 미묘하게 기능이 달라서 두개를 한꺼번에 쓰게 되었습니다. 여기도 중국 개발자들이 많네요 중국어 코맨트... 영어로 좀 쓰지 말입니다. 번역기 좋은데 ㅋ

share_extend - https://pub.dev/packages/share_extend
esys_flutter_share - https://pub.dev/packages/esys_flutter_share
keyboard_attachable - https://pub.dev/packages/keyboard_attachable

UI 만들면서 좀 어려웠던것이 키보드와 뷰의 연동이었는데 앱의 키보드가 올라오면 하단의 버튼바가 같이 올라와야 하는데 기존에 디자인과 충돌이 있어서 이걸 사용했는데 구현방법에 차이가 있어서 디자인에 일관성이 나오지 않아 좀 애를 먹었지만 해결은 했습니다.  
easy_localization - https://pub.dev/packages/easy_localization

다국어 지원 - 다국어용 패키지가 많은데 이게 비교적 사용하기 쉽습니다. 언어별로 json 파일을 만들면 됩니다. 이말은 다른건 그보다 복잡하다는 말입니다. 스캐니는 일단 영어, 한글만 지원했습니다. 
url_launcher - https://pub.dev/packages/url_launcher

주어진 URL Schemes에 따라 브라우저를 띄우거나 이메일 클라이언트를 자동으로 호출해 줍니다. 매우 편해요.
package_info - https://pub.dev/packages/package_info

프로젝트 정보 - 버전, 패키지 이름, 빌드번호 등을 자져올 수 있습니다.

플러터 패키지는 잘 쓰면 매우 유용합니다. 하지만 너무 많고 옥석을 골라내기가 힘들기 때문에 꽤 많은 시간을 투자해서 나만의 패키지들을 구성하는게 중요한것 같습니다. 위에 사용한 패키지들의 실제 동작은 아래 링크의 앱 – 스캐니(Scanny) – 에서 확인 할 수 있습니다.

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

박병일

스캐니(Scanny) – 아이폰용 스캐너앱

저는 개인적으로 개발언어를 스터디 하는 방법으로 마켓 릴리즈를 목표로 제품을 하나 만들어가며 스터디하는 것을 좋아합니다. 목적이 분명하면 생각보다 빠르게 프레임워크의 구조와 내용을 파악할 수 있습니다. 플러터(Flutter)를 스터디하기 시작하면서 벌써 세번째 앱을 앱스토어 릴리즈 했는데요. 앞의 두개는 이것을 만들면서 앱스토어에서 플러터가 어떻게 업로드 되고 돌아가는지를 확인하기 위해 짬짬이 만든것 이었습니다.

스캐니(Scanny)는 폰카메라를 이용해 문서를 촬영해서 자동으로 문서를 인식하고 사진내에서 문서만 추출해서 노이즈를 제거하는 등의 전처리를 거치고 최종적으로 OCR을 위한 깨끗한 문서를 만들어 문자인식(OCR)을 하거나 PDF로 변환하는 기능을 가진 앱입니다.

책을 단위별로 스캔하기위하여 폴더 시스템의 UI를 만들어 책단위 혹은 챕터 단위로 스캔을 할수도 있습니다. PDF 출력을 위하여 리스트에서 전체를 선택하거나 일부 그리고 드랙 & 드롭으로 순서를 바꾸어 PDF를 만들 수도 있습니다.

촬영한 문서는 OCR 문자인식 기능을 이용하여 한글/영문을 자동인식하여 텍스트로 변환하여 저장하고 공유할 수 있습니다. 향후 더 많은 언어를 지원할 계획입니다.

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

앱은 무료 아닙니다. 4,900원입니다. 광고 없습니다. 현재 목표는 앞으로 10년간은 업그레이드를 하려고 생각하고 있습니다. 아래 링크에서 확인하세요.


둘째가 만들어준 아이콘

이 앱은 플러터를 이용해 개발되었기 때문에 당연히 안드로이드를 지원합니다. 플레이스토어에 런칭도 할 수 있습니다. 앞의 테스트 앱에서 테스트 해봤습니다. 하지만 앱의 기능상 카메라에서 문서 인식 기능이 매우 중요한데 안드로이드에서 약간 불안정한 상황이 발생하고 있어서 좀더 보완을 거친후에 업로드 하려고 생각중입니다.

위의 글은 스토어 런칭 광고성 글입니다. 여기서부터는 개발자 입장입니다. 플러터(Flutter)는 모바일 개발을 위한 다할나위없이 훌륭한 도구입니다. 기본적으로 아이폰과 안드로이드를 동시에 지원하는 멀티 플랫폼 개발툴이구요. 참! 최근에는 베타상태 이긴 하지만 웹과 윈도우도 지원하기 시작했습니다. 그리고 프레임워크가 수년째 접어들면서 패키지 라이브러리와 개발자 생태계도 아주 훌륭해 졌습니다.

개인적으로는 지난 수년간 React & Vue 들을 통하여 상태(State)와 그 상태의 변경이 익숙해져 있었기 때문에 여럽지 않게 적응 했을 수도 있지 않았을까 싶지만 네이티브만 개발하던 개발자라면 Provider와 State 에대한 개념이 약간(?)은 걸림돌이 되지 않을까 싶기도 합니다만 매우 좋은 도구이고 충분히 투자 할만한 가치가 있다고 생각합니다.

Change Log

2020-11-13 : V1.0 Initial Release
2020-11-19 : V1.1.0
컬러문서 스캔 기능 추가