[플러터 강좌] 새로운 프로젝트 생성 및 에뮬레이터로 앱 실행하기

[이전글] 

2020/01/05 - [앱개발이야기] - [플러터] 플러터(Flutter) 시작하기 - 설치

2020/01/05 - [앱개발이야기] - [플러터] 플러터(Flutter) 시작하기 - VS Code 필수 익스텐션

플러터로 앱 만들기 #3: 새로운 프로젝트 만들기

플러터 설치와 코드 에디터를 설치 하였으면, 이제 본격적으로 플러터 개발을 시작해 봅시다. 앞선 글에서 언급했듯, 처음부터 안드로이드와 iOS를 모두 신경쓰려고 하지 말고, 시작하는 단계에서는 안드로이드쪽만 신경쓰길 추천합니다. 프로젝트를 시작할 때 한가지 신경써야 할 부분은, 플러터 시작하기 공식 문서에서 설명하는대로 "flutter create my_app" 으로 앱을 만들면 나중에 아주 피곤한 일을 겪게 될 수도 있다는 점. 아래의 명령처럼 --org 옵션을 반드시 지정하기 바랍니다.

$ flutter create --org com.poshpawstudio coolapp

여기서 --org 옵션은, 앱 ID의 핵심 부분인 기관명을 지정하는 옵션입니다. 기관명을 지정하지 않으면 "com.example" 이라는 기본 값으로 지정되는데, 이 값이 앱 전체에 자동으로 등록되어 버립니다. 기관명 + 앱 이름을 앱 ID로 자동으로 사용하게 되기 때문에, 결국 "com.example.coolapp" 이라는 앱 ID가 안드로이드와 iOS 설정 파일들에 등록 되어 버리죠. 문제는 이 값을 나중에 바꾸는게 상당히 노가다라는 점입니다. 기관명을 미리 생각해 두고, 앱 생성시 지정하는것이 가장 바람직 합니다.

플러터 프로젝트 폴더 구조

위의 명령을 실행하면 현재 폴더에 "coolapp" 이라는 폴더가 생성되고, 이 안에 프로젝트 파일들이 자동으로 생성됩니다. 스켈레톤 앱이 함께 생성 되기 때문에 아무것도 하지 않아도 앱이 하나 만들어진겁니다.

coolapp 폴더에 들어가보면 다음과 같은 파일들이 생성되어 있음을 알 수 있습니다. 주요 파일과 폴더들에 대해서 알아봅시다.

ios: iOS 빌드시에 필요한 파일들과 코드들이 생성됩니다.

android: Android 빌드시에 필요한 파일들과 코드들이 생성됩니다.

lib: 스켈레톤 앱의 코드가 들어있으며, 이후의 코드 구현은 거의(?) 모두 이 폴더 내에서 합니다.

pubspec.yaml: 플러터 프로젝트의 척추와도 같은 파일로, 앱 이름, 버전, 빌드, 의존성 (dependencies), 리소스 (이미지, 폰트 파일 등) 등이 모두 등록되어 있는 파일입니다.

논란의 여지가 있긴 하지만, 저는 이 파일 구조가 상당히 마음에 들고, 리액트 네이티브에 비해서 상당한 장점이 있다고 봅니다. 물론 단점도 아주 크지만 말이지요. 디펜던시 관리에 관해서 많은 욕을 먹고 있기는 하지만, 개인 프로젝트 수준에서는 무리없다고 생각이 듭니다.

플러터 스켈레톤 앱 실행해보기

기본 앱이 생성된다고 이야기 드렸는데요, 한번 볼까요? 앞서 설치했던 VS Code를 실행하고 "Open"으로 폴더를 엽니다. 이때 주의하실 것은 "Open Workspace"로 열거나, 상위 폴더를 열면 추후에 VS Code로 디버깅 하다가 종종 오류가 난다는 점입니다. 그러니 이 이슈가 해결될 때 까지는 깔끔하게 앱 폴더 자체를 여세요. 이 예제에서는 "coolapp" 이 되겠죠.

이렇게 lib 폴더 내에 main.dart 파일이 있는것을 볼 수 있습니다. 어떤 내용이 있을까 한번 살펴 봅시다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

데모 앱이 있습니다. 아래로 조금 내려보면 아시겠지만, 많이 익숙한 "카운터" 앱입니다. 버튼을 누르면 숫자가 하나씩 증가하는 앱이죠. 콘솔로 돌아가서 한번 실행 해 볼까요? 커맨드+시프트+Y를 눌러 디버그 콘솔을 엽니다. 그리고 터미널을 선택하면 VS Code 내에서 터미널을 사용할 수 있습니다.

# flutter run
No supported devices connected.

연결된 장치가 없다고 나옵니다. 앱을 실행하기 위해서는 에뮬레이터나 실제 장치를 연결 하셔야 하는데요, 대부분은 상황에서 안드로이드 에뮬레이터로도 충분합니다. 실제 장치를 연결하면 성능이 더 좋기 때문에 전반적으로 좀더 쾌적하기는 한데 한편으로는 모니터와 장치를 번걸아가면서 보는게 불편할 때도 있습니다. 일단 지금 목표는 앱을 한번 실행해 보는 것입니다. 맛을 한번 봐야 제대로 시작을 하겠죠? ㅎㅎ 안드로이드 에뮬레이터를 띄워봅니다.

안드로이드 에뮬레이터 구동하기

1) 안드로이드 스튜디오를 이용해서 띄우는 법

처음에는 에뮬레이터가 없기 때문에 일단 최초 한번은 안드로이드 스튜디오를 실행하셔야 합니다. 아주 간단하니 제 설명대로 따라해 보세요. 한번만 하고나면 안드로이드 스튜디오를 띄우는 번거로움을 피할 수 있습니다.

안드로이드 스튜디오를 실행하면, 작은 다이얼로그 페이지가 뜨고, 오른족 아래에 보면 "Configure" 버튼이 있습니다. 이 버튼을 눌러서 드랍다운 메뉴를 열면 "AVD manager"가 있는데요, 이걸 클릭합니다.

AVD Manager 실행하기

처음 실행했다면 당연히 에뮬레이터가 없기 때문애 "+Create Virtual Device" 라는 버튼이 보일겁니다. 이걸 클릭하세요.

"Select Hardware" 창으로 넘어가는데, 이때 적절한 장치를 선택하시면 됩니다. 지금은 일단 크게 고민하지 말고, Pixel2 를 선택하시고, 계속 Next 버튼을 누르고 마지막으로  Finish 를 누르시면 Pixel2 가 가상 장치로 추가됩니다.

여기서 계속 Next 누르시고 Finish!

아래처럼 가상 장치가 추가되는데, "Actions"에 있는 플레이 버튼을 클릭하면 에뮬레이터가 구동되며 이 에뮬레이터에 플러터 앱을 구동할 수 있습니다.

 

2) AVD 매니져를 바로 띄우는 법 (나중에)

에뮬레이터를 띄우기 위해서 안드로이드 스튜디오를 띄우고 버튼을 누르고 하는 과정이 나중에는 상당히 귀찮아 집니다. 그래서 편리하게 에뮬레이터를 구동하는 법을 알려드립니다. 일단 위에서 가상장치를 등록 하셨으면, 등록된 가상장치의 목록을 확인해 봅니다.

$ ~/Library/Android/sdk/tools/emulator -list-avds
Pixel_2_API_28

"Pixel_2_API_28"이 등록되어 있는것을 보실 수 있습니다. 가상 장치가 여러개 등록되어 있으면 여기에도 여러개가 보여집니다. 이것이 에뮬레이터 ID 입니다. 한번 구동 해 봅시다.

$ ~/Library/Android/sdk/emulator/emulator -avd Pixel_2_API_28

emulator: WARNING: Running on a sytem with less than 8 logical cores. Setting number of virtual cores to 1
Your emulator is out of date, please update by launching Android Studio:
 - Start Android Studio
 - Select menu "Tools > Android > SDK Manager"
 - Click "SDK Tools" tab
 - Check "Android Emulator" checkbox
 - Click "OK"

 

드디어 처음으로 플러터 앱을 에뮬레이터에 띄워보기!

에뮬레이터가 구동되었습니다. 다시 명령어를 실행 해 볼까요?

$ flutter run

플러터 앱이 실행 되었습니다!!

이번에는 커맨드창에서 말고 VS Code에서 띄워봅시다. 커맨드창에서 flutter run 을 할 일은 앞으로도 거의 없습니다. CTRL+C로 flutter run을 구동중이던 창을 종료하고, 에뮬레이터는 그대로 둡니다. 그리고 VS Code에서 "Run Without Debugging"을 실행해 봅니다.

에뮬레이터에서 앱이 자동으로 종료되고 다시 구동되는 것을 볼 수 있죠? 이게 VS Code에서 구동되는지 어떻게 아냐구요? Hot Refresh 가 이를 증명해 줄겁니다. Hot Refresh는 소스코드가 변경되면 즉시 Dart 코드를 빌드하여 앱에 반영되는 기능을 말하는데요, 한번 테스트 해 봅시다.

소스코드에서 "Flutter Demo Home Page" 를 검색해서 "플러터로 앱만들기" 라고 바꾼 후 저장(커맨드+S) 합니다. 그러면 저장되는 즉시 앱이 업데이트 되는 것을 확인할 수 있습니다.

 

지루한 준비과정을 마쳤습니다. 이제 플러터로 개발할 만반의 준비가 되었습니다. 다음 글을 통해서 플러터 개발을 본격적으로 시작해 봅니다. 간단하면서도 재미있는 앱을 처음부터 끝까지 함께 만들어보고 구글 플레이스토어와 애플 앱스토어에 출시까지 해볼까 합니다. 게으름을 딛고 완주할 수 있길 바라며.. 질문과 피드백 환영입니다.