작성자 : 배명진
shinytruth.dev@gmail.com

https://sunshine-kr.web.app/

이 포스팅에서 얻어가실 수 있는 부분은 아래와 같습니다.

1. 하나의 소스로 Android, iOS 앱 뿐 아니라 Web 동시에 빌드하는 방법을 배운다.
   • Web을 개발하며 자연스럽게 어떻게 다양한 크기의 화면에 대응하실 수 있는지 배우게 됩니다.
2. Material UI 위젯이나 플러그인을 처음부터 활용하기보다, 필요한 위젯을 직접 제작하여 써보면서 UI 이해도를 높인다.
   • 제가 생각하는 Flutter의 장점은 UI를 자유롭게 그리고, 애니메이션을 다양하게 활용할 수 있다는 점입니다. 이 부분을 배우시게 됩니다.

포스팅 대상은 아예 코딩을 처음 해보시는 분들보다는, 기존에 어떤 언어든지 코딩을 조금이라도 해보신 분을 타켓으로 합니다. 배경지식이 있으실거라고 여기고 생략하는 부분들이 존재할 것이기 때문인데요.
앱이나 웹사이트, 기타 프로그램을 구동하고 개선을 조금이라도 해보신 경험이 있는 분들이 듣는 것을 추천드립니다.

진행 환경은 아래와 같습니다.

1. OS : Mac
   • 저는 Mac으로 진행하지만, Windows도 별도 설치 및 환경 설정 포스팅을 올릴 예정입니다
2. Flutter 버전 : 2.8.1
3. IDE : intelliJ
   • Andorid Studio, VS Code를 사용하셔도 무방합니다. 자신이 편한 환경에서 작업하시면 되겠습니다.
   • 제가 intelliJ를 사용하는 이유는, Android Studio보다 제 체감상 가볍고, 함수로 추출, 변수로 추출, 변수 변경 등의 IDE 기능들이 별도 플러그인을 설치하지 않고도 강력하고 안정적으로 제공된다고 느껴졌기 때문입니다.

그럼 차근차근 따라오시면 되겠습니다.

개발환경 구축 (Mac)

Flutter 설치

1. https://flutter.dev/ 에 접속해서 flutter stable 버전이 담긴 zip 파일을 다운로드 받습니다.
   

2. 적절한 위치로 해당 zip 폴더를 옮긴 후 압축을 풀어줍니다.

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_2.8.1-stable.zip

3. ~/.zshrc 파일을 열어 아래 문구를 추가하고

export PATH="$PATH:~/flutter/bin"

해당 zshrc를 소싱하고 Flutter 버전을 체크해서 환경변수가 잘 적용됐는지 확인합니다.

$ source ~/.zshrc
$ flutter --version
Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (3 weeks ago) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1

IDE 설치 (intelliJ CE)

아래 사이트에 접속해서 커뮤니티 버전 dmg를 다운로드 받은 뒤 실행하여 설치합니다.
https://www.jetbrains.com/ko-kr/idea/download/#section=mac

실행하면 아래와 같은 화면이 보이는데요.

플러그인 탭을 눌러서 Flutter를 검색하고, 설치해줍니다.

설치시 아래와 같이 Dart도 설치할거냐고 묻는데, Install을 누릅니다.

잘 설치되면 아래와 같이 Restart IDE 버튼이 활성화되고, 버튼을 눌러서 IDE를 재시작 해줍니다.

재시작이 되면, New Project 버튼을 눌렀을 때 왼쪽 탭에 Flutter가 생성되어있는 것을 보실 수 있는데요. 오른쪽에 Flutter SDK path가 비어있는 것을 확인하실수 있어요. 이 Path를 조금 전 설치한 flutter 경로(이 경우 ~/development/flutter)를 입력해준 뒤, Next 버튼을 누릅니다.

프로젝트명을 원하는 값으로 입력 후, 저희 실습에서는 web도 사용될 것이므로 Platfoms 체크박스에 web도 추가 체크하신 뒤 Finish 버튼을 눌러 프로젝트를 생성해주세요!

잘 생성이 되면 아래 그림과 같은 화면을 보실 수 있습니다. Web 플랫폼도 추가해두었기 때문에 바로 프로젝트를 Web으로 실행해볼 수 있는데요. (Mac의 경우 Chrome이 설치되어 있어야 하니 먼저 설치해주세요!)

우측 상단에서 디바이스를 Chrome(Web)으로, 실행 파일을 main.dart로 해서 우측 ▶️ 버튼을 눌러주시면됩니다.

축하합니다👏 Flutter로 웹 어플리케이션을 실행하는 데 성공하셨습니다. 여기까지만 준비되어도 이후 강의를 수강하고 진행하시는 데에 문제가 없습니다. 하지만 안드로이드/iOS 에뮬레이터에서 보면서 개발하고 싶으실 경우 아래 과정을 추가로 따라해주시면 되겠습니다.

참고로 앱(Android/iOS) 에뮬레이터와 Web 에뮬레이터는 각각 장단점이 있는데요.

• 앱
  • 장점: 코드 변경하고 컴파일시 변경 사항이 새로고침 없이 바로 적용됩니다.
  • 단점: 코드 양이 많아지고 앱 규모가 커질수록 처음 실행하는 데 시간이 많이 걸립니다.
• 웹
  • 장점: 처음 빌드 및 실행하는 시간이 앱에 비해 짧습니다.
  • 단점: 코드 변경 사항이 적용될 때 화면이 새로고침됩니다. 새로 고침하는 동안 흰 화면이 보이며, input의 경우 입력됐던 정보들이 사라지게 됩니다.

앱 에뮬레이터 설정

Android

안드로이드 SDK를 별도 설정해서 연결할 수도 있지만, Android Studio를 설치하고 Studio를 통해 SDK를 설치하고 설정하는 것이 더 편리하기 때문에 추천드립니다.

https://developer.android.com/studio

터미널을 열고

$ flutter doctor

를 치시면 아래와 같은 결과를 얻으실 수 있는데요. Android toolchain쪽 에러는 Android SDK Command Line Tools를 설치하라는 의미입니다.

[✓] Flutter (Channel stable, 2.8.1, on macOS 11.6 20G165 darwin-x64, locale en-KR)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
...

아래 사진처럼 Android Studio의 Sdk manager로 이동하신 후

체크박스에 체크하고 아래의 Apply 버튼을 누르시고 OK를 누르시면 필요한 Tool이 다운로드 됩니다.

그 다음, 아래 명령을 실행하고 y를 눌러 모두 동의함으로써 설정을 완료합니다.

flutter doctor --android-licenses

잘 설정되었는지 flutter doctor를 실행해서 확인합니다.

$ flutter doctor
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.6 20G165 darwin-x64, locale en-KR)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)

Android Studio에서 이번에는 AVD Manager를 실행합니다.

에뮬레이터를 실행시켜줍니다.

실행시킨 후 intelliJ로 돌아와서 아까 실행했던 실행 탭을 보시면 이번에는 Android Emulator도 추가되어있는 것을 보실 수 있습니다. 실행시켜주세요~!

수 있습니다.

잘 실행된다면 성공입니다~!