패스트캠퍼스 환급챌린지 15일차 미션(2월 15일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 새 마음 새 뜻으로 Part 3에 들어섰다. 오리엔테이션에서 간단한 강사님의 소개와 모바일 앱 개론, Part 3에서 배우게 될 지식들에 대해 간단히 알아볼 수 있었다.

첫 번째 챕터에서 만들게 될 예제는 흔들기 카운트 앱인데, 모바일 디바이스의 가속도 센서를 활용하는 첫 프로젝트라서 기대된다.

 

프로젝트 세팅에 앞서 Flutter의 패키지 생태계에 대해 알아보자. 나는 이전 포스팅에서 외부(pub)에서 다운받아 사용하는 코드 모음을 라이브러리라고 불렀다. 웹 개발할 때 그렇게 배웠으니까. 그런데 Flutter 생태계에선 라이브러리를 '패키지'라고 부르는게 맞다고 한다.

이런 패키지는 두 가지 종류로 분리할 수 있다.

- Dart Package: Dart, Flutter 프로젝트 모두 이용 가능

- Flutter Package: Flutter 프로젝트에서만 이용 가능

 

Dart는 Flutter 개발을 위해 나온 언어가 아니고, 원래는 웹 개발을 위해 만들어진 언어라고 한다. 그래서 pub.dev에 처음 등록된 패키지가 js라고 한다.

 

그럼 이제 새로운 프로젝트를 세팅해보자. 생각해보니 이전 파트에서는 IOS Simulator만 사용했는데, AVD(Androiod Virtual Machine)를 활용해서 앱을 실행해보지 않았던 것 같다. 바로 AVD를 설치해서 실행해주었다.

 

오... 몇년간 아이폰만 사용하다가 안드로이드 화면을 굉장히 오랜만에 봤는데, UI가 굉장히 세련되어진 것이 보인다.

데모 앱도 한번 실행해봤는데 assembleDebug라는 작업이 좀 오래 걸렸던 것 같다.

그래도 실행은 잘 된다 ㅎㅎ 이번 예제는 이 데모 앱에서 텍스트만 조금 변경해서 사용한다고해서 몇몇 title, label 값만 변경시켜주었다.

다음으로 알아볼 것은 이 하단바를  쓸어올렸을 때 실행중인 앱들을 표시해주는 뷰(줄여서 뭐라고 부르던데 잘 모르겠다)에서 나타나는 앱의 아이콘과 이름을 변경해보려고 한다. 웹으로 치면 메타 태그에서 제공하는 title과 favicon 정도로 생각할 수 있겠다.

 

일단 저 앱의 이름은 pubspec 파일에 있는 title에 의존하는게 아니라 안드로이드 앱이기 때문에 AndroidManifest.xml 파일에 의존한다. 여기서 값을 변경해주면 된다.

저 android:label 값을 수정해주면 되는데, 만약 국제화를 고려해서 기기의 언어 설정에 따라 다른 앱 이름을 표시해주고 싶다면? 그것도 가능하다. 일단 "@string/app_name"이라고 설정해주자. 그리고 우측 상단에 Open for Editing in Android Studio 라는 버튼을 눌러서 Android 프로젝트를 별도로 열어주자.

로딩이 끝나서 디렉토리 구조를 확인할 수 있으면 res/values/styles 경로 아래에 strings.xml 파일을 만들어주자.

그리고 아래와 같이 작성해주자.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Shake Count App</string>
</resources>

 

Default Title은 영어로 제공하는게 좋다. 한글 제목도 별도로 설정해주자. 우측 상단에 Open Editor를 클릭해서 테이블 형식의 Editor를 열어줄 수 있다.

그리고 좌측 상단의 지구본 버튼을 클릭해서 남한을 선택해주고, 해당 국가에서 보여줄 앱의 이름을 입력해주면 된다.

그러면 아까 android:label 값에서 발생했던 에러가 사라진다.

 

와중에 IOS 앱은 또 XCode에서 별도로 설정해줘야한다;;

설정하는 흐름은 Android와 비슷하다. 차이점은 AndroidManifest.xml가 아닌 InfoPlist.strings라는 파일을 참조한다는 것.

그리고 info.plist 파일에서 Bundle display Name 행을 제거해주는 것.

 

아이콘은 appicon.co 사이트에서 1024 x 1024 사이즈의 png 파일을 활용하면 다양한 사이즈의 아이콘 파일을 쉽게 얻을 수 있다.

그리고 플랫폼에 따라 아래 경로에 해당 아이콘 파일들을 덮어씌워주면 된다.

- IOS: Project/ios/Runner/Assets.xcassets/Appicon.appiconset/

- Android: Project/android/app/src/main/

 

 

끝!

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N