플러터(Flutter) 프로젝트 생성 · 앱 실행해보기

 

이전 글을 통해 플러터 SDK의 설치를 마쳤다면 이제 플러터의 프로젝트를 생성할 수 있다.

프로젝트는 일반적으로 단일 애플리케이션을 개발하기 위한 모든 필요한 파일과 구성 요소를 포함하는 단위이며, 즉 하나의 애플리케이션을 구성하는 패키지이다. 이번 글에서는 프로젝트를 생성하고, 가장 간단한 구성의 애플리케이션을 만들어 에뮬레이터로 실행하는 내용을 담고 있다.

 

 

 

플러터 프로젝트 생성

우선 안드로이드 스튜디오를 실행한다.

[Projects]에 위치한 'New Flutter Project'를 눌러 새 플러터 프로젝트를 생성한다.

이전에 프로젝트를 생성한 적이 없다면 왼쪽 사진처럼 중앙부의 플러터 로고를 눌러 프로젝트를 생성하고, 다른 프로젝트를 생성한 적이 있다면 최근 프로젝트 목록 위에 새로운 플러터 프로젝트 생성 버튼이 나타날 것이다.

 

플러터 SDK가 위치한 경로가 맞는지 확인 후 다음으로 넘어간다.

초기 애플리케이션 구성 단계에서 입력해야 할 내용이 많은데, 원하는 이름으로 짓고 패키지명과 플랫폼만 잘 확인하고 넘어가면 문제없다.

 

모바일 앱을 개발할 때 사용되는 고유한 식별자인 패키지명은 일반적으로 com.(도메인/사명).(프로젝트명) 으로 구성되며, 일례로 카카오톡의 패키지명은 com.kakao.talk이다. 따라서 Organization은 프로젝트명을 제외한 앞부분(조직)을 작성해 넣으면 된다. 만약, 사진과 같이 프로젝트명을 untitled로 정하고 Organization을 com.example로 입력한 후 프로젝트를 생성한다면, com.example.untitled가 이 프로젝트의 패키지명이 될 것이다.

 

모바일 애플리케이션을 개발할 목적이라면 안드로이드와 iOS의 체크박스가 활성화되어 있는지 확인한 후, Create를 눌러 패키지 생성을 마치면 된다. (생성한 이후에도 플랫폼을 추가/변경할 수 있다.)

 

 

만들어진 패키지명은 [Project] - untitled / android / app / build.gradle 에서 확인 가능하다.

 

 

 

---

안드로이드 스튜디오 알아보기

안드로이드 스튜디오는 JetBrains에서 제작한 안드로이드 애플리케이션 제작용 IDE로, 많은 부분에서 같은 회사의 다른 소프트웨어인 IntelliJ와 유사한 점이 많다. 또한 VSCode와 같은 다른 IDE와도 크게 다르지 않은 구성이기 때문에 이미 소프트웨어 개발에 능숙한 개발자라면 이 단락에서 설명하는 것들은 이미 알고 있을 것이다.

연두색 박스 부분이 프로젝트 트리이다. 일반적인 디렉터리 구조와 같이 프로젝트 또한 수많은 폴더(패키지)와 파일로 구성된다. 노란색 박스 부분이 제작한 앱을 빌드하고 실행시켜 원하는 대로 구동되는지 확인하는 디버그 영역이며, 하단부는 버전 관리와 콘솔, 터미널 등이 위치하여 앱 실행 중 발생되는 로그를 확인하고 터미널에서 Git 등의 명령어를 입력할 수 있다.

 

플러터는 핫 리로드(Hot Reload)가 가능하다는 특징이 있는데, 개발자가 애플리케이션의 구성 요소를 수정하고 다시 컴파일하거나 패키징 할 필요 없이, 사진의 노란색 박스 안에 위치한 번개 모양(⚡) 버튼을 누르면 수정사항이 그 즉시 반영된다. 디버깅 시간을 절약하고 원하는 UI/로직으로 빠르게 다시 수정할 수 있다.

 

프로젝트 최초 생성 시, lib 경로에 main.dart가 기본적으로 생성된다. lib 내에는 주요 Dart 소스코드가 포함되며, 화면에 보이는 모든 인터페이스와 컴포넌트들이 이곳에 위치한다. 기본 생성된 main.dart 내에는 Demo 애플리케이션 코드가 작성되어 있으며, 사용자가 어떠한 코드를 작성하지 않았어도 애플리케이션을 실행해 볼 수 있다.

 

💬 플러터 프로젝트 구조에 대해 더 알아보세요.
https://velog.io/@5yattree/flutternote002-플러터-프로젝트-구성요소-이해하기

 

 

데모 애플리케이션 실행(Run) 해보기

상단의 디바이스 드롭 다운 메뉴를 눌러 애플리케이션을 실행할 가상 기계를 선택할 수 있다.

만약 설치한 에뮬레이터다 해당 목록에 보이지 않는다면 Open Android Emulator를 선택 후, Refresh(새로고침) 하면 된다.

 

플러터는 Chrome 등의 웹 브라우저로도 실행해 볼 수 있는 특징을 가지고 있다. 에뮬레이터가 통상적으로 무겁고 실행 시간이 느린 편인데, 일부 API를 포함하지 않는 프로젝트라면 쉽고 빠르게 디버깅이 가능하다는 게 플러터의 장점이다.

 

 

 

핫 리로드(Hot Reload)

 

안드로이드 에뮬레이터를 통해 데모 애플리케이션을 실행시켜 보았다. + 버튼을 누르면 숫자가 늘어나는 간단한 구조이다.

 

 

타이틀명을 변경하고 핫 리로드(Hot Reload) 시키면 오른쪽 사진처럼 수정 사항이 즉시 반영된다.

 

 

---

Hello World 앱 만들기

Hello World 앱을 제작하기 위해 main() 메서드를 제외한 하단의 모든 데모 코드를 지운다.

 

 

stless를 입력하면 오른쪽 사진처럼 StatelessWidget의 구조가 자동 생성된다. 이어서, 클래스명을 MyApp으로 변경했다.

StatelessWidget은 StatefulWidget의 반대 개념으로, 간단히 요약하면 데이터 변동이 없는 컴포넌트를 말한다. 다음 글에서 플러터의 State에 대한 더 자세한 내용을 담을 예정이다.

 

 

return 아래에 자동 생성된 Placeholder 위젯을 지우고, MaterialApp() 위젯을 추가한다. 여기서 Material은 무엇일까?

 

 

 

머티리얼 디자인(Material Design)과 플러터 위젯(Widget)

구글은 2014년 이래 안드로이드 UI로 Material Design을 계속해서 밀고 있고, 애플은 본인들의 UI/UX를 특별히 명명하지는 않았으나 (플러터 기준) cupertino 디자인을 채택하고 있다. MaterialApp() 위젯은 이런 안드로이드 머티리얼 스타일의 애플리케이션 구조를 빠르면서도 미려하게 만들어주는, 일종의 거푸집 틀같은 개념이다.

 

머티리얼 3 디자인

 

윗 단락에서 언급한 위젯(Widget)은 사용자 인터페이스(UI)를 구성하는 기본적인 구성 요소를 말한다. 플러터 앱은 위젯들의 계층 구조로 이루어져 있으며, 위젯들은 각각 특정한 역할과 동작을 담당하는 것이다.

 

아이폰 애플리케이션도 이 MaterialApp()으로 제작할 수 있지만, 익숙한 iOS 디자인을 사용하고 싶다면 쿠퍼티노 위젯을 사용할 수 있다. 물론 나중에 디자인 분기 처리를 통해 플랫폼 별 다른 UI/UX를 적용할 수도 있다.

 

앞으로의 글에서는 MaterialApp()을 사용하여 앱을 제작할 예정이고, 나중에 여러 스타일 위젯을 사용해 머티리얼과는 다른 인터페이스로 차차 변경해 나갈 예정이다. (개인적으로 머티리얼 디자인을 선호하지 않기 때문이다.)

 

다시 에디터로 넘어가서, 이제 Hello World 텍스트를 작성해 보자.

 

 

Scaffold 위젯 삽입하기

스마트폰이 세상에 나온 지 15년이 넘었다고 한다. 그동안 서드파티 애플리케이션은 수만, 수십만 개가 세상에 나오고 사라지기를 반복했다. 그 과정에서 좋게 말하면 사용성 좋은 앱들이 살아남았고, 나쁘게 말하면 공장에서 찍어낸 듯 모두 똑같은 모양새가 되었다.

카카오톡

위에는 타이틀 바가 있고, 가운데는 상호작용, 아랫부분은 보통 화면을 넘어 다니는 버튼들이 위치한 내비게이션 바가 위치한다. 인스타그램도, 카카오톡도 그렇다.

 

스캐폴드(Scaffold)는 이러한 앱의 기본적인 구조와 레이아웃을 구성하는 위젯이다. 상단바, 하단바 등의 기본적인 요소를 위젯 하나로 만들 수 있도록 돕는다.

 

MaterialApp() 위젯의 괄호 안에 'home : ,'이라는 파라미터를 넣었다.

플러터의 구조는 위젯 - 속성(파라미터) - 위젯 - 속성 ... 의 반복인데, 이 'home: ,'과 같은 속성이 위젯과 위젯을 잇는 전달자 정도로 생각하면 좋다.

 

이어서 home 안에 Scaffold() 위젯을 삽입하고, 또 Scaffold() 내에 appBar, body, bottomNavigationBar 세 가지의 파라미터를 추가했다. 순서대로 상단 타이틀 바, 바디(일반적으로 앱의 주요 내용), 하단 내비바 순이다.

 

appBar에 AppBar 위젯을 추가하고, title로 'Hello World' 텍스트를 넣어주었다. 당장 어느 파라미터에 어느 위젯이 들어가는지를 전부 외울 필요는 없다. 또한 헷갈린다면, 마우스를 위젯 위로 올리거나 Ctrl을 누른 채로 위젯을 클릭하면 내부에 삽입할 수 있는 속성을 볼 수 있다.

 

 

앱 실행하기

Hello World를 제목으로 하는 앱이 정상적으로 실행되었다.

 

 

 

---

마치기

가장 짧은 글로 기획했는데, 생각보다 포함해야 할 내용이 많아 조금 길어져버렸다. 플러터 프로젝트의 생성 방법과 코드가 위젯들의 계층 구조로 계속해서 쌓인다는 점, 두 가지만 이해하면 완벽하다.