Intro

어쨌든 주력 개발환경도 Ubuntu로 옮겼고, 애초에 공간이 부족해서 윈도우에서 삭제했다 안드로이드, 플러터 개발환경을 다시 설정하게 됐다. 마찬가지로 여기서도 항상 개발환경 설정하는데서 많이 헤맸었다. 특히 환경변수 설정이나, flutter sdk와 안드로이드 toolchain연동 등등….

그래서 또 정리해보려고 한다. 이번에도 역시 누군가에게 도움을 주는 정보글이라기보단, 나중에 참고하려고 쓰는 글이다.

Flutter의 경우 특히 문서화가 잘 되어 있다. 사실 Flutter 문서를 보고 그대로 따라가도 될 정도지만 정리하고 추가하거나 뺄 내용들이 있어 글로 남긴다. 한국어 번역도 잘 되어 있는 편이지만, 완전하지 않다.

필자는 가벼운 VS Code를 선호하지만 개발편의 때문에 Android Studio의 도구들을 사용할 때가 많아 두 환경 모두 준비하고자 한다.

Android Studio 환경 설정

openjdk 설치 및 설정

$ sudo apt install openjdk-14-jdk
$ javac -version
$ which javac

$ sudo vi /etc/profile

# add export JAVA_HOME=/usr/lib/jvm/java-14-openjdk-amd64
# add export PATH="$PATH:$JAVA_HOME/bin"

$ source /etc/profile
$ echo $JAVA_HOME

oracle 홈페이지에서 jdk deb배포판을 다운로드 받아 설치할 수도 있다. 그냥 귀찮아서 apt로 openjdk를 설치했다. 설치 전이라면, 터미널에 jdk라고만 입력해도 어떤 패키지를 설치하라고 안내할 것이다.

javac -version으로 jdk가 잘 설치됐음을 확인하면, 루트권한으로 /etc/profile 파일에 $JAVA_HOME 경로를 등록해 모든 계정 어느 터미널에서든 접근할 수 있도록 한다.

/etc/profile은 계정의 로그인 쉘 시작시 참조된다. 즉 적용이 되려면 수동으로 source /etc/profile 명령어를 사용하거나, 리눅스 시스템을 다시 시작하여야 한다. Bash의 Startup Script에 관련한 항목을 참고하라.

Android Studio 설치

마찬가지로 홈페이지에서 deb배포판을 다운로드 받아 설치할 수 있지만, 가뿐하게 snap으로 설치해주자. (Ubuntu Software Center에서도 설치할 수 있다.)

$ sudo snap install android-studio
error: This revision of snap "android-studio" was published using classic confinement and thus may perform arbitrary system changes outside of the security sandbox that snaps are usually confined to, which may put your system at risk.
$ sudo snap install android-studio --classic
android-studio 4.1.3.0 from Snapcrafters installed

--classic 옵션을 넣지 않으면 위와 같은 경고 문구가 발생한다.

나중에 삭제할때 sudo snap remove android-studio 만으로 깔금하게 제거되지 않는다. 설정한 경로에 따라 다르지만, 기본값으로 이야기하자면,

~/Anrdoid
~/Snap/android-studio
~/.android
~/.config/Google/AndroidStudio-4.1
~/.gradle
~/.local/share/Google/AndroidStudio4.1

등이 있으니 유의하여라.

설치가 끝난 후 Application 목록에서 Android Studio를 찾아볼 수 있으며, 실행해보면 위와 같이 설치마법사가 우리를 반겨준다.

SDK나 SDK Tools, Virtual Device 등을 설치할 수 있고 위와 같이 설치를 마친 후, 아래와 같이 시작 페이지가 나타난다.

아직 설치는 끝나지 않았다. 추가로 설치해야 할

Miscellaneous Component

Missing SDK and Tools

앞서 설치 마법사에서 SDK와 Tools 설치 옵션을 충분히 주지 않아 그 외 필요한 몇가지 구성요소들을 더 설치하여야 한다. 아래 사진처럼 ‘Configure’에서 SDK Manager를 찾을 수 있다.

넉넉하게 API 28, 29를 설치했다. 사실 갤럭시 S8+가 Pie까지만 업그레이드 되어서이다. 폰 언제 바꾸지…

Tools에서 좀 자세히 살펴보자.

NDK는 Native Development Kit으로, Android에서 C/C++ 코드를 사용할수 있게 해주는 도구모음이다. Flutter에서도 native library를 사용할 일이 있으면, flutter-android 간 method channel, android-native 간 method channel을 통해 이용하므로 NDK가 필요하다. (저장공간을 꽤 잡아먹으니 필요할때 설치하는게 좋겠다.)

Android SDK Command-line-Tools는 Flutter 개발도구에서 Android SDK에 접근할때도 필요할 거다.

CMake는 Make와 같은 빌드 자동화 도구다. 정확히는 Makefile을 쉽게 작성해주는 Meta-Make이다. 필자는 아직 사용법을 모르지만 설치했다. 그냥.

Android SDK Platform-Tools에는 말그대로 SDK Platform Tools이 있는데, 여기 ADB(Android Debug Bridge)가 있다. 아래 후술할 유의사항을 참고하여라.

이 외에도 Google Play Service나 Web Driver 같은 쓸만한 도구들도 설치하면 좋겠다. 지금 설치하지 않더라도 언제든 SDK Manager에서 설치할 수 있다. 이제 그럼 아래와 같이 설치가 될 것이다.

Flutter Plugin

Android Studio에서 Flutter Project를 제대로 다루기 위해서는 Flutter plugin이 필요하다. (IntelliJ 플러그인이다.) 역시 Settings-plugin에서 설치 가능.

물론 Flutter SDK도 설치해줘야 Flutter Project를 제대로 구성할 수 있다.

Global Environment Variable PATH for ADB

이 부분을 제대로 이해하지 못하고 실수하여 한참 헤맨적이 많았다. Android Studio 내부에서는 이 Android/Sdk/platform-tools 경로를 참조하여 adb에 접근할 수 있다.

하지만 외부에서는 내가 환경변수를 설정하지 않는 이상 사용이 불가능하다. 그렇지만 adb를 사용할 일은 있고… 그래서 가벼운 마음으로 apt 또는 snap으로 adb를 설치해버리면 환경변수 설정을 하지 않아도 외부에서 잘 사용할 수 있지 않은가. 물론 이 adb는 platform-tools에서 사용하는 adb와 다르다.

문제가 여기서 생긴다. 업데이트가 동시에 이루어지지 않고 둘의 버전도 다르다보니 아래와 같은 충돌이 생기는 경우가 있다.

adb server version (41) doesn't match this client (39)

아오

어차피 platform tools는 계속 사용해야하고, adb야 어디있는걸 사용해도 비슷하니, apt나 snap으로 설치한 adb를 사용하지 않으면 된다.

그럼 Android/Sdk/platform-tools의 adb 경로를 쉘 실행시 참조할 수 있도록 하면 되겠다. 앞서 $JAVA_HOME PATH 설정과 비슷하다.

$ vi ~/.profile
# add export PATH=$PATH:$HOME/Android/Sdk/platform-tools
$ source ~./profile
$ adb --version

JDK는 /etc아래 전역으로 설정한 것과 달리 SDK Platform-tools는 현재 계정 경로 아래 있으므로 ~/.profile에 지역변수로 등록하였음에 유의하여라.(시스템마다 파일이름이 조금 다를수도 있다. ~/.bashrc를 사용하여도 좋다. ~/.profile을 사용한 경우 재로그인이 필요하다.) 또 $PATH변수에 단순히 경로를 대입한것이 아닌 이어 붙인 것임에 유의하여라.

자세한 내용은 Bash의 Startup Script의 관련한 항목을 참고하라.

apt 또는 snap으로 설치한 adb를 사용할때와 platform-tools경로를 환경변수로 설정한 후 adb --version 실행시 나타나는 경로가 달라야 해결된 것이겠다.

이제 Android Studio 설정은 거진 끝난 듯하다.

Flutter 설치

VS Code Dart/Flutter Extension

Flutter SDK와 관련한 내용은 아니지만 VS Code에서 Flutter 프로젝트를 제대로 다루기 위해서는 마찬가지로 Dart Extension, Flutter Extension이 필요하다.

Flutter SDK 설치

Android Studio와 설치가 비슷하다. 마찬가지로 홈페이지에서 deb 배포판을 받거나, Ubuntu Software Center에서 설치할 수 있고, 필자는 snap을 이용하였다. --classic옵션이 필요함에 유의하여라.

$ sudo snap install flutter --classic
$ flutter
$ flutter doctor

snap install flutter 명령어로는 Flutter SDK 설치마법사? 비슷한게 설치되는 듯하고, 이후 flutter를 입력하면 flutter sdk를 다운로드받아 설치과정에 들어간다.

이후 flutter doctor로 flutter 개발환경을 진단할 수 있다.

flutter doctor Troubleshooting

아마 위 과정을 그대로 따라왔다 하더라도 몇가지 애로사항이 있을듯 싶다.

1. Android Toolchain - Android Licenses Acception

간단한 문제이다. 아래 명령어를 통해 라이선스에 동의해주면 된다.

flutter doctor --android-licenses

여기서 앞서 언급한 Android SDK Command-line-tool이 필요하다.

2. Failure to detect Android Studio installed by snap

snap으로 안드로이드 스튜디오를 설치한 경우, 또는 flutter sdk보다 먼저 설치한 경우 flutter doctor에서 안드로이드 스튜디오를 인식하지 못한다.

이때 아래와 같이,flutter config에 수동으로 안드로이드 스튜디오 경로를 등록할 수 있다.

flutter config --android-studio-dir=/snap/android-studio/current/android-studio

이제 flutter 개발 환경이 잘 설정되었다.

Flutter Project 시작하기

Android Studio에서

Flutter Plugin이 설치되어 있다면, ‘New Android Project’ 밑에 바로 ‘New Flutter Project’ 항목이 있을 것이다. 이제 아래와 같이 Flutter Project를 만들 수 있다.

Plugin, Package, Module등도 만들 수 있다. 필자는 그럴만한 위인이 아니므로 Application을 선택하였다.

Project Name을 지정하고, SDK 경로와 프로젝트 경로를 설정한다. 특이하게도 flutter 프로젝트 이름은 lowerCamelCase를 따르기 때문에 반드시 소문자로 시작해야한다. 이유없이 UpperCamelCase를 선호하는 필자로선 매우 거슬린다.

불편해…

식별되는 유효한 고유 패키지 이름을 설정하면 된다. 개발중에야 중복되는 Package Name이 있어도 문제가 없지만, 개발기기에서, 또는 나아가 스토어 등록시 문제가 되니 미리 패키지 이름이 중복되지 않는지 확인하는게 좋겠다. 나중에 바꾸려면 골치아프다.

더불어 Flutter와 연동될 Platform Channel의 언어를 선택할 수 있다. 둘다 선택하지 않을 경우 각각 Java와 Objective C를 사용하게 된다. 필자는 아직 Kotlin을 사용해보지 않아 선택하지 않았다.

프로젝트 구조를 살펴보아라. ios 개발을 해본적이 없어서 ios 앱 구조를 잘 알지 못하기때문에 그냥 넘겼다. 다만 안드로이드 폴더 안에 안드로이드 어플리케이션 프로젝트 구조가 그대로 담겨있다. 자세히 살펴보면 flutter와 통신하는 method channel을 위한 main activity가 구현되어 있다.

Dart로 구현된 flutter 소스들은 lib 폴더 아래에 위치하게 된다.

Launch Target Device를 설정후 ‘Run’ (Shift+F10)을 통해 Target Device에 Launching 시킬수 있다.

기기에 디버그 모드로 실행시키는 중 변경사항을 Ctrl+S로 저장하면 자동으로 Hot Reload되어 디자인이나 기능 구현을 확인하며 디버깅하기 매우 유리하다. Flutter App 구조상 Hot Reload로 적용하기 어려운 변경사항들(Assets 추가 등)은 Hot Restart나 Cold Restart(연결을 끊고 Debug모드를 다시 시작)로 적용해야한다.

VS Code에서

VS Code에도 Flutter Project를 만들 수 있는 기능이 있다. Flutter Extension이 설치되었다면, Ctrl+Shift+P로 Command Palette를 띄운 후 Flutter를 입력해보자.

‘Flutter: New Application Project’로 새 Flutter Application Project를 시작할 수 있다.

프로젝트의 경로를 지정해준 후, 프로젝트 이름을 설정해준다. Project 이름이 lowerCamelCase를 따르는 것은 Flutter 정책이므로, VS Code에서도 같은 제약이 있다.

놀랍게도 이게 프로젝트 설정의 전부이다. 나머지는 알아서 바꿔줘야 한다. 패키지 이름은 com.example.(프로젝트 이름) 으로 설정된다.

flutter 프로젝트가 생성되었다. flutter 프로젝트 내의 .dart 파일을 열어볼때는 좌측 사이드바에 flutter 메뉴가 활성화 되어 해당 소스의 클래스 및 메소드 구조도를 확인할 수 있다.

Target Device를 연결하고 설정한 후, Debug 메뉴에서 실행시키면 Debug 모드로 Target Device에 Launching 된다. 마찬가지로 Debug 모드로 실행 중 변경사항을 저장하면 Hot Reload로 바로 Target Device에 반영된다.

‘Build Task’를 찾을경우 ‘flutter build apk/ios/web’ 등의 task가 추천된다. build 실행시 아래와 같이 빌드된다.

Outro

각자 IDE에서 생성한 Flutter Project들을 다른 IDE에서 열어도 디버깅 및 빌드가 가능했다. 프로젝트 설정이나 개발도구 지원은 Android Studio가 훨씬 강력하니 필요할때는 Android Studio를 사용하고, 가벼운 수정사항이 있거나 평소에는 VS Code를 애용하지 않을까 싶다.

Windows에서 사용할때는 Android Studio가 그렇게 무거웠는데, Ubuntu에서는 꽤 쓸만한거 같다. VS Code만 쓰다 IntelliJ 기능들도 보니 좀 탐나기도 하고…