1. 서론.

1-1. 이슈.

• 개발을 하다 보면 같은 서비스라 할지라도 윈도우/리눅스/맥 프로그램은 아예 별개로 구분하는 반면 안드로이드/iOS 앱은 별개로 구분하지 않으려는 경향이 강합니다.
• 경영/운영/기획/디자인 파트는 물론이고 앱 개발자를 제외한 개발자들도 그렇게 인식합니다. 심지어 PC웹/모바일웹도 구분하는데 말이죠.
• 여기에서 문제가 발생하는데, 간단한 수정이라 할지라도 안드로이드/iOS 앱을 각각 개발해야 하는 것을 이해하지 않고 하나의 일정으로 산정하려 해 마찰이 자주 발생합니다.
• 인력도 안드로이드/iOS 앱 개발자 각각 필요하지 않다고 생각하는 경우가 많습니다.

1-2. 필요성.

• 이러한 이슈가 최근에만 있었던 것이 아니라 스마트폰 보급 초창기부터 이어져 왔습니다.
• 이를 완화하기 위한 노력으로 one source, multi platform 솔루션을 도입하려는 노력이 많이 있었죠.
• 하지만, 기본적으로 오류가 많았고 OS 업데이트에 대한 대응이 제대로 되지 않는 등 문제가 많아 웹앱으로 많이 전환했습니다.
• 이후 퍼포먼스 측면에서 네이티브로 다시 개발하는 사례가 많아지면서 또다시 일정 산정 및 인력 투입 이슈가 발생했습니다.

1-3. React Native.

• 지속적인 니즈가 있었던 one source, multi platform.
• Xamarin도 영향력이 상당하긴 했지만 React Native를 기준으로 제대로 정착되었다 생각합니다.
• 웹 개발자가 Javascript Reactive Programming을 그대로 앱에 적용할 수 있어 인력이 추가로 필요하지 않고, Android/iOS 모두 지원하며, 네이티브 보다는 느리지만 웹앱보다는 월등히 빨랐으니 한동안 많은 사랑을 받았습니다.
• 그러나, 페이스북에서 만든 것이라 페이스북 서비스에는 알맞았겠지만, 모바일 OS 특성을 이해하는 앱 개발자가 여전히 필요했고, React Native의 제약을 벗어난 요구사항은 네이티브로 개발해야 했으며, 시간의 흐름에 따라 웹앱의 속도가 빨라져 굳이 React Native로 한번 더 개발할 필요가 없어졌습니다.

1-4. Flutter.

• 이후 Flutter가 등장합니다.
• 구글에서 만든 UI 프레임워크인지라 최초에는 푸크시아 OS를 타겟으로 사용되었으며, 안드로이드/iOS/웹까지 하나의 소스로 지원하고, canvas에 직접 그리는 방식으로 네이티브 퍼포먼스를 제공합니다.
• 현 시점에서 React Native를 대체하고 있고, 향후 모바일/웹/데스크탑/임베디드 까지 하나의 코드 베이스로 지원할 예정입니다.
• Dart 언어로 개발되었으며, Flutter 설치 시 함께 설치됩니다. 언어에 대해 말이 많았지만 Flutter 발표 이후 인식이 많이 개선되었습니다.

 

2. 개발 툴 설치.

• Android Studio: https://developer.android.com/studio?hl=ko#downloads
• XCode: https://apps.apple.com/kr/app/apple-developer/id640199958
• VSCode: https://code.visualstudio.com/Download, Visual Studio Code (VSCode)
• CocoaPods: https://cocoapods.org
• Chrome: https://www.google.co.kr/chrome

 

3. Fultter 설치.

• 참고: https://flutter.dev/docs/get-started/install
• 맥 기준, 압축파일을 다운받아 특정 디렉토리에 풀고 PATH를 설정해 줍니다.
  • 압축해제 및 원하는 디렉토리에 이동.

      $ unzip flutter_macos_2.0.1-stable.zip
      $ mv flutter ~/tools/
    

  • Flutter 실행 PATH 추가.

     $ vi ~/.zshenv
     FLUTTER_HOME="/Users/username/tools/flutter"
     if [ -d "$FLUTTER_HOME/bin" ] ; then
         PATH="$FLUTTER_HOME/bin:$PATH"
     fi
    

  • Flutter 설치 확인.

      $ flutter --version
      Flutter 2.0.1 • channel stable • https://github.com/flutter/flutter.git
      Framework • revision c5a4b4029c (20 hours ago) • 2021-03-04 09:47:48 -0800
      Engine • revision 40441def69
      Tools • Dart 2.12.0
    

 

4. 개발환경 설정.

4-1. VSCode 확장 플러그인 설치.

• [ 상단 메뉴 - 보기 - 확장 ] 선택 또는 Shift+Command+X 를 입력해 확장 탭으로 이동해 Flutter를 검색한 후 Dart Code에서 배포하는 플러그인을 설치합니다.

4-2. Flutter doctor.

• Flutter doctor는 개발 환경 설정이 제대로 되었는지 검사하는 툴로, 미설치 또는 미설정 된 항목을 확인합니다.
• 상단 메뉴의 View - Command Palette를 선택하거나 Shift+Command+P를 입력해 커맨드 팔레트를 실행합니다.
• >Flutter: Run Flutter Docker 를 입력하고 엔터를 입력합니다.
• 완료된 항목은 [v]로 표시되며 하위 모든 항목이 • 로 표시됩니다.
• 조치가 필요한 항목은 [!]로 표시되며 하위 항목 중 ! 또는 x 로 표시됩니다.
• 제 경우 안드로이드 라이센스에 동의하지 않았고, CocoaPods가 설치되지 않아 초지가 필요합니다.

4-3. 안드로이드 라이센스 동의.

• 터미널에서

    $ flutter docker --android-licenses
  

• 를 입력해 All SDK package licenses accepted가 될 때까지 모두 동의합니다.
  
  
  
  
  
  
  
  

4-4. CocoaPods 설치.

• 참고: https://cocoapods.org
• CocoaPods는 Swift와 Objective-C 패키지 매니저로, 애플 플랫폼의 앱 개발에 널리 사용됩니다.
• 터미널에서

    $ suto gem install cocoapods
  

• 를 입력해 설치합니다.
  

4-5. 설정 완료.

• 모든 조치가 완료되었으면 다시 한번 확인합니다. 상단 메뉴의 View - Command Palette를 선택하거나 Shift+Command+P를 입력해 커맨드 팔레트를 실행합니다.
• >Flutter: Run Flutter Doctor 를 입력하고 엔터를 입력합니다.
• 설정이 완료되었습니다.

 

5. 프로젝트 생성.

• 상단 메뉴의 View - Command Palette를 선택하거나 Shift+Command+P를 입력해 커맨드 팔레트를 실행합니다.
• >Flutter: New Application Project 를 입력하고 엔터를 입력합니다.
• 저장할 디렉토리를 지정합니다.
• 프로젝트명을 입력합니다.
• 프로젝트가 생성되었습니다.
• 우측 하단 "Would you like to use recommended VS Code settings for Dart & Flutter?"의 'Yes'를 선택하면 좌측에 Flutter 탭이 추가됩니다.
• 좌측 Flutter 탭을 선택하면 프로젝트 구조를 좀더 쉽게 파악할 수 있습니다.

 

6. 실행 및 디버깅.

• VSCode에서 상단 메뉴의 Run - Start Debugging을 선택하거나 F5를 입력하면 크롬이 열리며 실행됩니다.
• 연결 포트는 실행 시 랜덤으로 결정됩니다. 이번에는 49960 포트네요.
• http://localhost:9100 또는 http://127.0.0.1:9100 에 접속하면 DevTools for Flutter & Dart를 사용할 수 있습니다.
• 일단 디버깅을 종료하고 다시 실행해 보니 포트가 50183으로 변경되었습니다.
• 해당 포트로 앱 http://localhost:50183 과 디버그 서비스 ws://127.0.0.1:50183/5OakZQK35vl=/ws 에 접속할 수 있습니다.
• 9100 포트로 DevTools에 접속 후 ws://127.0.0.1:50183/5OakZQK35vl=/ws 에 연결해 봅시다.
• 디버그 서비스는 Flutter Inspector, Debugger, Logging 탭으로 이루어져 있습니다. 프로젝트를 진행하면서 자주 사용할 듯 합니다.