플머의 개발 연구소

플러터는 크로스플랫폼 개발 툴이다.

여기서 크로스플랫폼 개발이라 하면 Android/IOS 모바일 개발을 동시에 할 수 있는 것을 말한다.

나는 안드로이드 개발만 하다가 IOS 개발까지 해야함에 따라 크로스플랫폼 개발을 고려하게 되었다.

처음 크로스플랫폼을 접할 때 크로스플랫폼이 가질 수 있는 한계에 대해 매우 고심했고,

다양한 크로스플랫폼을 최대한 비교하여 가장 효율적이고 개발에 가장 유리할 수 있는 크로스플랫폼을 찾고자 했다.

크로스플랫폼을 쓰고자 하는 목적은 보통 생산성에 맞추어져 있다.

구현하고자 하는 기술에 문제가 되지 않는다면 크로스플랫폼 개발은 매우 효율적이고 올바른 선택이 될 것이다. 네이티브로 개발한다면 안드로이드와 IOS 플랫폼을 각각 개발하여 두배의 시간 혹은 두배의 인력이 드는데 크로스플랫폼을 쓴다면 비용적으로나 시간적으로나 매우 유리해지기 때문이다.

나는 크로스플랫폼 개발 툴 중 자마린, 리액트 네이티브, 플러터 셋중에 무엇을 사용할지 고민을 하였다.

자마린의 경우 나는 C#도 주로 사용했던 언어였기 때문에 그 접근성 때문에 고민했었고,

리액트 네이티브는 자바스크립트 기반인 부분에 이끌렸다. 자마린과 양대 산맥이기도 하고...

플러터의 경우는 자마린, 리액트네이티브 사이에서 혜성처럼 갑자기 떠오른 느낌이었고,

다트라는 조금 낯선 언어(그래봤자 자바와 비슷한 느낌)를 사용하지만 구글에서 밀고 있기도 하고, 여러 자료를 찾아본 결과 UI 구현에 대해 상당한 강점이 있으리라 판단했다. 

서론이 길었는데 내가 내린 판단은 플러터를 사용했을 때 가장 생산성 높은 개발을 이룰 수 있다라는 것이다.

우선, UI 구현 자체가 매우 수월하다. 초보자들도 복잡한 UI를 플러그인만 잘 갖다사용하여도 어렵지 않게 구현해낼 수 있다. UI가 별거 아닌 작업처럼 보이지만, 다이나믹한 UI를 구현하기 위해서는 상당한 시간을 할애해야 한다.

다른 개발툴을 플러터만큼 파보지 않아서 판단하기에 오류가 있을 수 있지만, 

UI 생산성은 자마린, 리액트 네이티브도 따라오기 어려울 것 같다는 판단이 든다.

사실 이 UI 구현에 대한 장점만으로도 플러터를 사용할 이유는 충분했다.

네이티브 개발시 레이아웃 구성이나, 다이나믹한 UI를 구현할 때마다 꽤 시간을 들여야 했던 것을 떠올려보면,

플러터는 그 시간을 날로 먹는(?) 수준으로 줄여준다. 거의 로직에만 신경 쓸 수 있도록 말이다.

한가지 더 기대하고 있는 것은 기획 디자인 툴인 Adobe XD에서 'XD To Flutter' 기능을 출시할 예정에 있다.

(얼마 전 출시는 된 상태인 것 같은데 어느 정도 수준인지 확인해보지는 못했다.)

현재 제플린에서 Flutter Extension을 제공하고 있지만, 경험자에게 듣기로는 수동으로 작업하는게 더 빠를 정도로 코드 변환이 매우 지저분하다고 한다. 그래서 XD To Flutter 기능이 완벽하게 출시된다면 UI 작업은 개발자가 거의 신경을 쓰지 않아도 될 수준이 되지 않을까 싶다. 디자이너가 넘겨준 XD파일을 그대로 변환시키면 될 것이므로..

하지만, 역시나 단점도 존재한다. 내가 꼽은 단점은 아직 플러터가 리액트네이티브나 다른 크로스플랫폼에 비해 활성도가 떨어진다는 점이다. 자료가 타 개발 도구에 비해 부족하다는 것. 예를 들어, 원하는 기능을 구현할 때 해당 기능에 대한 플러그인이 존재하면 가져다쓰면 금방 개발 가능하지만, 없다면 그에 해당하는 플러그인을 직접 만들어야 한다. 

혹은 존재하더라도 베타 버전의 플러그인이라 다른 플러그인과 충돌하여 컴파일에 오류가 발생하거나 하는 등의 문제도 존재한다. 그래도 이 부분은 점점 개선이 될 것으로 생각하고 있다. 내가 플러터를 접한지 1년이 안되었는데 그 사이에도 문제가 있었던(혹은 베타였던) 플러그인이 많이 개선되었다.

개발에 대한 안정성만 놓고 보면 아직까지는 리액트 네이티브가 한 수위라고 생각되지만,

UI 개발 생산성에 대한 매력이 너무 크기 때문에, 그 외 자료 부족 등의 불편한 부분은 감안할 정도라고 본다.

플러터로 간단한 앱부터, 플랫폼 수준의 앱까지 개발해보았는데, 앞으로도 플러터를 애용할 것 같다.

위와 같은 오류 발생시 대처 방법

[1] 아래와 같이 android/app/build.gradle 에 아래 코드를 추가한다.

packagingOptions {
    exclude 'META-INF/proguard/androidx-annotations.pro'
}

위와 같이 buildTypes{} 아래에 새로 추가해준다.

[2] android/build.gradle 에서 gradle 버전을 3.3.0 으로(혹은 그 이후 버전) 변경해준다.

classpath 'com.android.tools.build:gradle:3.3.0'

위 코드처럼 수정해주면 되며, 기존에 버전이 3.2.1 이하 버전이었다면, gradle 버전 문제일 확률이 높다.

즉, [1]번 해결책보다 [2]번 해결책이 더욱 적합하다.

이 포스트에서는 안드로이드 스튜디오에 플러터를 설치해보기로 한다.

당연히 플러터를 설치하기 전에 기본적으로 안드로이드 스튜디오가 설치되어있어야 한다.

(필자는 안드로이드 스튜디오 3.4.2 버전이 설치되어있음)

먼저 https://flutter.dev/ 로 이동하여 'Get started' 버튼을 클릭한다.

그 다음 설치할 OS를 지정한다.(필자는 Windows에 설치할 것이므로 Windows를 선택했다.)

그 후에는 파일을 다운로드할 수 있는 버튼이 아래와 같이 생기며 해당 파일을 다운로드해준다.

모두 다운로드되었다면 압축을 풀어준다.

압축을 푼 내용 자체가 안드로이드 스튜디오 자체에서 참조할 SDK 경로가 된다.

(나는 C:\flutter\flutter 에 압축을 풀었다.)

압축 푼 경로로 이동하여 'flutter_console.bat' 을 실행한다.

위와 같이 해당 경로에서 'flutter doctor' 를 입력해준다.

이 명령어를 통해 어떤 부분이 부족한지를 확인할 수 있다.

보면 세가지의 문제가 있다. 

먼저 X 표시가 되어있는 플러터와 다트 플러그인 설치가 되지 않은 부분을 해결해보자.

안드로이드 스튜디오를 켠다. 프로젝트를 불러오기 전 Configure -> Plugins 을 선택한다.

(프로젝트를 불러온 상태라면 File->Setting->Plugins 로 들어가면 된다.)

아래의 창이 뜨면 flutter, dart를 각각 검색하여 설치해주기만 하면 된다.

위와 같이 Dart 플러그인을 설치했다면, 이제 flutter를 검색한다.

이제 플러그인은 모두 설치했으니 다시 flutter_console.bat 을 실행하여, 'flutter doctor' 를 입력해보자.

플러그인 부분은 해결이 되었고,

안드로이드 라이센스가 허가되어있지 않다고 나와있는 부분만 해결하면 된다.

이 부분은 위에 나와있는대로 해당 명령어만 쳐주면 해결된다.

위와 같이 입력 후 나오는 문구는 모두 y를 입력해준다.

그리고 다시 'flutter doctor'를 쳐보면 모두 해결되어있을 것이다.

위와 같이 안드로이드 스튜디오를 실행하면,

플러터 프로젝트가 생겨난 것을 확인할 수 있다.

플러터에서 앱 아이콘을 변경하는 방법을 설명한다.

해당 내용을 검색하다가 어이없는 설명을 발견...

플러터 사용자라면 모두가 알다시피 멀티플랫폼 개발이 가능하게 해주는 도구이다.

따라서, 앱 아이콘 또한 플러터에서만 한번 세팅을 해주면

각각의 플랫폼별로 세팅을 하지 않아도 자동적으로 동작하여야 한다.

그런데 내가 보았던 자료 중 하나는 각 플랫폼별로 직접 아이콘을 세팅해주는 내용이었다.

그러한 비효율적인 작업은 하지 않길 바라며 이 글을 작성해본다.

우선 원하는 아이콘을 구한 뒤 아래와 같이 세팅한다. (아이콘은 512x512로 작업하였다.)

위와 같이 프로젝트 루트에 icon 폴더를 만들고 아이콘 파일을 넣는다.

(경로는 자유롭게 지정하여도 된다.)

위와 같이 pubspec.yml 파일을 열어서 빨간박스의 내용들을 입력해준다.

image_path는 아이콘을 넣어준 경로를 지정하면 된다.

android: true

ios: true

이 두 부분이 플러터 자체에서 해당 아이콘을 알아서 각각의 플랫폼에 덮어씌워주는 역할을 한다.

거의 다 됐다. 

이제 실제로 위와 설정된 파일과 이미지를 패키지에 넣어주는 일만 해주면 된다.

위와 같이 Terminal 로 이동하여 위 두 명령어를 입력해주기만 하면 끝이 난다.

참고로 나는 플러터의 경로를 환경변수에 넣어주지 않아서 저렇게 실행 경로를 지정해주었으나,

환경변수에 넣어주면 실행파일명만 입력하면 된다

그리고 저 명령을 실행하는 위치는 반드시 자신의 프로젝트 경로에서 실행하여야 한다.

그렇지 않으면 오류가 발생하게 된다.

위처럼 완료되었다면 앱을 실행해보자.

아이콘이 바뀌어있는 것을 확인할 수 있을 것이다.