Flutter는 Google에서 개발한 UI 툴킷으로, 하나의 코드베이스로 Android, iOS, 웹, 데스크톱 등 다양한 플랫폼에서 동작하는 앱을 만들 수 있다는 매력적인 장점을 가지고 있습니다. 생산성이 높고 UI 개발이 용이하여 많은 개발자들에게 사랑받고 있죠. 저 또한 Flutter의 간편함과 빠른 개발 속도에 매료되어 꾸준히 사용하고 있습니다.
이 글에서는 Flutter를 처음 접하는 분들도 쉽게 따라 할 수 있도록 간단한 앱을 만들어보는 과정을 소개하려 합니다. 아주 기본적인 내용부터 차근차근 설명할 예정이니, 코딩 경험이 부족하더라도 걱정하지 마세요. 함께 Flutter의 세계로 발을 내딛어 봅시다. 간단한 앱을 만들면서 Flutter의 기본적인 개념과 사용법을 익히고, 나아가 자신만의 아이디어를 담은 멋진 앱을 개발하는 데 도움이 되기를 바랍니다. 자, 그럼 시작해 볼까요?
개발 환경 구축하기
가장 먼저 Flutter 개발 환경을 구축해야 합니다. Flutter SDK를 다운로드하고, Android Studio 또는 VS Code와 같은 개발 도구를 설치해야 하죠. Flutter 공식 홈페이지에서 자세한 설치 방법을 확인할 수 있습니다. 운영체제에 맞는 설치 가이드를 따라 차근차근 진행하면 어렵지 않게 환경 구축을 완료할 수 있습니다.
Android Studio를 사용하는 경우, Flutter와 Dart 플러그인을 설치해야 합니다. VS Code를 사용하는 경우에는 Flutter 확장 프로그램을 설치하면 됩니다. 플러그인 또는 확장 프로그램을 설치하면 Flutter 프로젝트를 생성하고 실행하는 데 필요한 기능들이 추가됩니다. 환경 변수 설정도 잊지 마세요! Flutter 명령어를 어디서든 사용할 수 있도록 환경 변수를 설정하는 것이 중요합니다.
새 프로젝트 생성 및 구조 이해
개발 환경 구축이 완료되었다면, 이제 새로운 Flutter 프로젝트를 생성해 보겠습니다. 터미널 또는 명령 프롬프트를 열고, 원하는 디렉토리로 이동한 후 `flutter create 프로젝트명` 명령어를 입력합니다. 그러면 Flutter가 기본 프로젝트 템플릿을 생성해 줍니다.
프로젝트가 생성되면, lib 폴더 안에 main.dart 파일이 있습니다. 이 파일이 앱의 시작점이 됩니다. 프로젝트 구조를 살펴보면, 다양한 폴더와 파일들이 존재하는데, assets 폴더에는 이미지나 폰트와 같은 리소스를 저장하고, pubspec.yaml 파일에는 프로젝트의 의존성 및 메타데이터를 관리합니다. lib 폴더 안에는 앱의 핵심 코드를 작성하게 됩니다.
간단한 UI 만들기
이제 간단한 UI를 만들어 보겠습니다. main.dart 파일을 열고, MaterialApp 위젯을 사용하여 앱의 기본 테마를 설정하고, Scaffold 위젯을 사용하여 앱의 기본적인 레이아웃을 구성합니다. Scaffold 위젯은 AppBar, Body, BottomNavigationBar 등을 포함할 수 있습니다.
Body 영역에는 Center 위젯을 사용하여 텍스트를 화면 중앙에 배치하고, Text 위젯을 사용하여 “Hello, Flutter!”라는 문구를 표시해 보겠습니다. 스타일을 적용하여 텍스트의 크기, 색상, 폰트 등을 변경할 수도 있습니다. Container 위젯을 사용하여 여백을 추가하거나 배경색을 설정할 수도 있습니다. 다양한 위젯들을 조합하여 원하는 UI를 만들 수 있습니다.
상태 관리 맛보기
Flutter에서 상태 관리는 매우 중요한 개념입니다. 간단한 예제를 통해 상태 관리를 경험해 보겠습니다. 버튼을 누르면 텍스트가 변경되는 기능을 구현해 볼까요? StatefulWidget을 사용하여 화면의 상태를 관리하고, setState() 메서드를 사용하여 상태를 변경할 수 있습니다.
버튼을 누를 때마다 카운터 변수의 값을 증가시키고, 텍스트 위젯에 카운터 값을 표시하는 방식으로 구현할 수 있습니다. 상태 관리 라이브러리를 사용하면 더욱 복잡한 상태 관리를 효율적으로 처리할 수 있습니다. Provider, Riverpod, BLoC 등 다양한 상태 관리 라이브러리가 존재합니다.
앱 실행 및 디버깅
코드를 작성했다면, 이제 앱을 실행해 볼 차례입니다. Android 에뮬레이터 또는 실제 기기를 연결하고, 터미널에서 `flutter run` 명령어를 입력합니다. 그러면 Flutter가 앱을 빌드하고 실행해 줍니다. 에뮬레이터 또는 연결된 기기에서 앱이 실행되는 것을 확인할 수 있습니다.
앱을 개발하면서 오류가 발생할 수 있습니다. 디버깅 도구를 사용하여 오류를 찾고 수정할 수 있습니다. Android Studio 또는 VS Code에는 강력한 디버깅 기능이 내장되어 있습니다. 로그를 확인하고, 중단점을 설정하여 코드 실행을 일시 중지하고 변수 값을 확인할 수 있습니다. 디버깅은 앱 개발 과정에서 필수적인 과정입니다.