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 탭으로 이루어져 있습니다. 프로젝트를 진행하면서 자주 사용할 듯 합니다.