Tuesday, June 20, 2023

플러터, 기초부터 실전 배포까지의 여정
  /   No comments   

플러터(Flutter)는 구글이 개발한 오픈소스 UI 툴킷으로, 단 하나의 코드베이스를 통해 안드로이드, iOS뿐만 아니라 웹, 데스크톱(Windows, macOS, Linux) 애플리케이션까지 구축할 수 있는 혁신적인 프레임워크입니다. 아름다운 UI, 빠른 개발 속도, 그리고 네이티브에 버금가는 성능을 자랑하며 전 세계 개발자 커뮤니티에서 폭발적인 인기를 얻고 있습니다. 하지만 이 강력한 도구를 효과적으로 사용하기 위해서는 체계적인 학습 과정이 필수적입니다. 이 글은 플러터 개발의 세계에 첫발을 내딛는 입문자부터 실력을 한 단계 끌어올리고 싶은 중급 개발자까지, 모두를 위한 포괄적인 학습 경로를 제시합니다.

1장: 여정의 시작 - Dart와 개발 환경 구축

모든 위대한 여정은 첫걸음에서 시작됩니다. 플러터 개발의 첫걸음은 그 기반이 되는 프로그래밍 언어 'Dart'를 이해하고, 코드를 작성하고 실행할 수 있는 개발 환경을 완벽하게 구축하는 것입니다.

1.1. 왜 Dart인가? 플러터의 심장, Dart 언어 이해하기

플러터는 왜 자바스크립트나 코틀린 같은 기존 언어가 아닌 Dart를 선택했을까요? 여기에는 명확한 기술적 이유가 있습니다. Dart는 구글이 직접 개발한 언어로, 클라이언트 애플리케이션 개발에 최적화된 여러 특징을 가지고 있습니다.

  • JIT와 AOT 컴파일의 조화: Dart는 개발 중에는 JIT(Just-In-Time) 컴파일을 통해 코드 변경 사항을 즉시 앱에 반영하는 '핫 리로드(Hot Reload)' 기능을 가능하게 합니다. 이는 개발 생산성을 극대화하는 플러터의 핵심 기능입니다. 반면, 앱을 배포할 때는 AOT(Ahead-Of-Time) 컴파일을 통해 고성능의 네이티브 기계어 코드로 변환되어 빠른 실행 속도와 부드러운 애니메이션을 보장합니다.
  • 강력한 타입 시스템: Dart는 정적 타입 언어로, 변수의 타입을 컴파일 시점에 명확히 지정합니다. 이는 개발 과정에서 발생할 수 있는 잠재적인 오류를 미리 발견하고, 코드의 안정성과 가독성을 높여 대규모 프로젝트 관리를 용이하게 합니다.
  • 비동기 프로그래밍 지원: 현대적인 앱은 네트워크 통신, 파일 입출력 등 시간이 걸리는 작업을 처리해야 합니다. Dart는 Future, Stream, 그리고 async/await 문법을 언어 차원에서 지원하여, 복잡한 비동기 코드를 직관적이고 간결하게 작성할 수 있도록 돕습니다. 이는 UI 스레드를 차단하지 않고 부드러운 사용자 경험을 제공하는 데 필수적입니다.
  • 객체 지향 프로그래밍: Dart는 클래스, 상속, 인터페이스, 믹스인(Mixin) 등 완전한 객체 지향 프로그래밍을 지원하여 재사용 가능하고 구조화된 코드를 작성하는 데 유리합니다.

플러터 공식 문서와 함께 Dart 공식 가이드를 통해 변수, 함수, 클래스, 비동기 처리 등 핵심 문법을 먼저 익히는 것이 중요합니다. 탄탄한 Dart 기본기는 플러터의 복잡한 개념을 이해하는 훌륭한 발판이 될 것입니다.

1.2. 개발 환경 설정: 나만의 작업 공간 만들기

이론을 배웠다면 이제 실습을 위한 환경을 구축할 차례입니다. 플러터 개발 환경 설정은 공식 문서에 매우 잘 설명되어 있지만, 각 단계의 의미를 이해하는 것이 중요합니다.

  1. Flutter SDK 설치: 플러터 공식 홈페이지에서 자신의 운영체제(Windows, macOS, Linux)에 맞는 SDK를 다운로드하고, 환경 변수(Path)를 설정합니다. 이는 터미널이나 명령 프롬프트 어디에서든 flutter 명령어를 실행할 수 있게 해줍니다.
  2. IDE(통합 개발 환경) 선택 및 설정:
    • Android Studio: 안드로이드 개발의 표준 도구로, 안드로이드 SDK, 에뮬레이터 관리, 빌드 도구 등이 통합되어 있어 가장 안정적인 환경을 제공합니다. 'Flutter'와 'Dart' 플러그인을 설치하면 플러터 개발에 필요한 모든 기능이 활성화됩니다.
    • Visual Studio Code (VS Code): 가볍고 빠르며 확장성이 뛰어난 코드 에디터입니다. 마켓플레이스에서 'Flutter' 익스텐션을 설치하면 코드 자동 완성, 디버깅, 핫 리로드 등 강력한 기능을 사용할 수 있습니다. 많은 개발자들이 VS Code의 빠른 속도와 유연성을 선호합니다.
  3. 플랫폼별 개발 도구 설치:
    • 안드로이드: Android Studio를 설치하면 안드로이드 SDK가 함께 설치됩니다.
    • iOS (macOS에서만 가능): Xcode를 App Store에서 설치해야 합니다. 또한, Cocoapods와 같은 의존성 관리 도구도 필요합니다.
  4. 환경 검사 (flutter doctor): 터미널에서 flutter doctor 명령어를 실행하면, 현재 개발 환경에 누락된 부분이나 설정이 필요한 항목이 있는지 진단해 줍니다. 모든 항목에 녹색 체크 표시가 나타날 때까지 안내에 따라 문제를 해결해야 합니다.
  5. 에뮬레이터 또는 실제 기기 연결:
    • 에뮬레이터/시뮬레이터: Android Studio의 AVD Manager를 통해 안드로이드 가상 기기를 생성하거나, Xcode를 통해 iOS 시뮬레이터를 실행할 수 있습니다.
    • 실제 기기: USB 디버깅을 활성화한 안드로이드 기기나 개발자 모드를 켠 iOS 기기를 컴퓨터에 연결하여 실제 하드웨어에서 앱을 테스트하는 것이 가장 정확합니다.

이 모든 과정이 완료되면, 터미널에서 flutter create my_app 명령어로 첫 플러터 프로젝트를 생성하고, cd my_app으로 해당 디렉토리로 이동한 뒤 flutter run을 실행하여 기본 카운터 앱이 에뮬레이터나 기기에서 실행되는 것을 확인할 수 있습니다.

2장: 플러터의 철학 - 모든 것은 위젯이다 (Everything is a Widget)

플러터의 세계에 들어서면 가장 먼저 마주하게 되는 핵심 철학은 "모든 것은 위젯이다"라는 개념입니다. 화면에 보이는 버튼, 텍스트, 이미지뿐만 아니라 보이지 않는 레이아웃 구조(정렬, 패딩, 간격)나 앱의 상태까지도 위젯으로 표현됩니다. 이 위젯들을 레고 블록처럼 조립하여 하나의 완성된 UI를 만드는 것이 플러터 개발의 본질입니다.

2.1. 위젯 트리의 이해

플러터 앱의 구조는 '위젯 트리(Widget Tree)'로 시각화할 수 있습니다. 최상위 위젯부터 시작하여 자식 위젯, 그리고 그 자식의 자식 위젯들이 계층적으로 연결된 나무와 같은 구조를 이룹니다. 예를 들어, 화면 중앙에 "Hello, Flutter"라는 텍스트를 표시하는 간단한 UI는 다음과 같은 트리로 표현될 수 있습니다.


Center (위젯)
└─ Text (자식 위젯)

플러터는 이 위젯 트리를 기반으로 실제 화면에 픽셀을 그려냅니다. 개발자는 UI를 직접 조작하는 것이 아니라, 원하는 UI 상태를 설명하는 위젯 트리를 구축하고, 상태가 변경되면 플러터 프레임워크가 이전 트리와 새로운 트리를 비교하여 최소한의 변경 사항만 화면에 효율적으로 다시 그립니다. 이러한 방식을 '선언형 UI(Declarative UI)'라고 부릅니다.

2.2. 상태가 있는 위젯 vs 상태가 없는 위젯 (Stateful vs Stateless)

플러터의 모든 위젯은 크게 두 가지로 나뉩니다. 이는 위젯의 생명주기와 데이터 처리 방식의 핵심적인 차이를 만듭니다.

StatelessWidget (상태가 없는 위젯)

한번 그려진 후에는 내부 상태가 변하지 않는 정적인 위젯입니다. 부모 위젯으로부터 전달받은 값(예: 텍스트 내용, 아이콘 모양)에 의해서만 모습이 결정됩니다. 마치 인쇄된 사진과 같습니다. 한번 인쇄되면 스스로 내용을 바꿀 수 없습니다. Icon, Text, Container 등이 대표적인 예입니다. 앱의 로고, 정적인 제목, 설명 텍스트처럼 사용자와의 상호작용이나 데이터 변화에 따라 모습이 바뀔 필요가 없는 부분에 사용됩니다.


import 'package:flutter/material.dart';

// MyStaticWidget은 StatelessWidget을 상속받는다.
class MyStaticWidget extends StatelessWidget {
  final String title;

  // 생성자를 통해 외부로부터 데이터를 전달받는다.
  const MyStaticWidget({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // build 메서드는 위젯의 UI를 정의한다.
    // 이 위젯은 오직 'title' 값에 의해서만 모습이 결정된다.
    return Text(
      title,
      style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    );
  }
}

StatefulWidget (상태가 있는 위젯)

위젯의 생명주기 동안 내부 상태(State)가 변할 수 있으며, 상태가 변하면 UI를 다시 그릴 수 있는 동적인 위젯입니다. 사용자의 입력(체크박스 선택, 텍스트 입력)이나 데이터의 변화(타이머, 네트워크 응답)에 따라 모습이 바뀌어야 하는 부분에 사용됩니다. 마치 디지털 액자와 같습니다. 언제든지 새로운 사진으로 교체하여 화면을 업데이트할 수 있습니다.

StatefulWidget은 항상 두 개의 클래스로 구성됩니다.

  1. StatefulWidget 본체: 위젯의 설정값(configuration)을 저장하며, 불변(immutable)입니다.
  2. State 객체: 위젯의 실제 '상태'를 저장하며, 가변(mutable)입니다. 이 객체에서 setState() 메서드를 호출하여 플러터 프레임워크에 상태가 변경되었음을 알리면, 해당 위젯의 build 메서드가 다시 호출되어 UI가 업데이트됩니다.

import 'package:flutter/material.dart';

// StatefulWidget 자체는 불변(immutable)이다.
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

// 실제 상태를 관리하는 State 객체.
class _CounterWidgetState extends State<CounterWidget> {
  // _counter 변수가 이 위젯의 '상태'이다.
  int _counter = 0;

  void _incrementCounter() {
    // setState()를 호출하면 Flutter에게 상태 변경을 알린다.
    setState(() {
      // 이 블록 안에서 상태 변수를 변경하면,
      // build 메서드가 다시 실행되어 UI가 업데이트된다.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        const Text('You have pushed the button this many times:'),
        Text(
          '$_counter', // _counter 상태값을 화면에 표시
          style: Theme.of(context).textTheme.headlineMedium,
        ),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: const Icon(Icons.add),
        )
      ],
    );
  }
}

이 두 가지 위젯의 차이점을 명확히 이해하는 것은 효율적이고 성능 좋은 플러터 앱을 만드는 데 있어 가장 기본적이면서도 중요한 단계입니다.

3장: UI 빌딩 블록 - 레이아웃과 기본 위젯

위젯의 개념을 이해했다면, 이제 다양한 위젯들을 조합하여 실제 화면을 구성하는 방법을 배울 차례입니다. 플러터는 풍부한 내장 위젯 라이브러리를 제공하여 거의 모든 디자인을 구현할 수 있습니다.

3.1. 화면의 뼈대, 레이아웃 위젯

레이아웃 위젯은 다른 위젯들을 화면에 어떻게 배치하고 정렬할지 결정하는 보이지 않는 틀입니다. 가장 핵심적인 레이아웃 위젯들은 다음과 같습니다.

  • Container: 가장 기본적인 박스 형태의 위젯입니다. color, width, height, padding, margin, decoration (테두리, 그림자, 그라데이션 등) 속성을 통해 다재다능하게 사용됩니다. 단일 자식 위젯을 가질 수 있습니다.
  • Row / Column: 각각 자식 위젯들을 수평(가로) 또는 수직(세로) 방향으로 나란히 배치합니다.
    • mainAxisAlignment: 주축(Row는 가로, Column은 세로) 방향의 정렬을 제어합니다. (start, center, end, spaceBetween, spaceAround, spaceEvenly)
    • crossAxisAlignment: 교차축(Row는 세로, Column은 가로) 방향의 정렬을 제어합니다. (start, center, end, stretch)
  • Stack: 자식 위젯들을 겹쳐서 배치할 때 사용합니다. 마치 포토샵의 레이어처럼 작동하며, 가장 나중에 추가된 위젯이 가장 위에 표시됩니다. Positioned 위젯과 함께 사용하면 자식의 위치를 정밀하게 제어할 수 있습니다. (예: 이미지 위에 텍스트나 아이콘 배치)
  • Expanded / Flexible: Row나 Column 내에서 자식 위젯이 남은 공간을 얼마나 차지할지 결정합니다. Expanded는 남은 공간을 모두 차지하도록 강제하고, Flexible은 필요에 따라 공간을 차지하거나 비워둘 수 있는 유연성을 제공합니다. flex 속성으로 위젯 간의 공간 차지 비율을 조절할 수 있습니다.
  • ListView: 스크롤이 가능한 위젯 목록을 만듭니다. 화면을 벗어나는 긴 목록을 표시할 때 필수적입니다. 특히, ListView.builder 생성자는 화면에 보이는 항목만 동적으로 생성하므로 메모리를 효율적으로 사용하여 성능을 최적화합니다.
  • GridView: 위젯을 2차원 격자 형태로 배치합니다. 갤러리 앱이나 상품 목록 화면 등에 유용합니다.

3.2. 화면의 살, 기본 UI 위젯

레이아웃 위에 실제로 사용자에게 보이는 콘텐츠를 채우는 위젯들입니다.

  • Text: 문자열을 표시합니다. style 속성에 TextStyle 위젯을 사용하여 폰트, 크기, 색상, 굵기 등 다양한 스타일을 적용할 수 있습니다.
  • Image: 이미지를 표시합니다. Image.asset()(프로젝트 내부 이미지), Image.network()(웹 URL 이미지), Image.file()(기기 파일 시스템 이미지) 등 다양한 소스로부터 이미지를 불러올 수 있습니다.
  • Icon: 머티리얼 디자인 아이콘을 표시합니다. Icons 클래스에 사전 정의된 수많은 아이콘을 사용할 수 있습니다.
  • 버튼 위젯: 사용자의 터치 입력을 받기 위한 위젯입니다.
    • ElevatedButton: 입체감이 있는 배경색 버튼.
    • TextButton: 배경색이 없고 텍스트만 있는 버튼.
    • OutlinedButton: 테두리만 있는 버튼.
    • IconButton: 아이콘으로만 구성된 버튼.
    모든 버튼 위젯은 onPressed 콜백 함수를 필수적으로 가지며, 이 함수 안에 버튼을 눌렀을 때 실행될 로직을 작성합니다.
  • TextField: 사용자로부터 텍스트 입력을 받는 위젯입니다. controller 속성을 통해 입력된 텍스트를 제어하고, decoration 속성으로 힌트 텍스트, 라벨, 아이콘 등을 추가하여 꾸밀 수 있습니다.
  • Scaffold: 일반적인 머티리얼 디자인 앱 화면의 기본 구조를 제공하는 매우 유용한 위젯입니다. appBar(상단 앱 바), body(화면의 주요 콘텐츠), floatingActionButton, bottomNavigationBar, drawer(측면 메뉴) 등을 쉽게 구현할 수 있도록 도와줍니다.

4장: 동적인 앱 만들기 - 상태 관리와 비동기 처리

정적인 화면을 넘어 사용자와 상호작용하고, 외부 데이터를 가져와 보여주는 '살아있는' 앱을 만들기 위해서는 상태(State)를 효과적으로 관리하고 비동기(Asynchronous) 작업을 처리하는 방법을 반드시 익혀야 합니다.

4.1. 상태 관리(State Management)의 중요성

앱이 복잡해질수록 '상태'는 여러 위젯에 걸쳐 공유되고 변경되어야 합니다. 예를 들어, 로그인 상태, 장바구니 목록, 테마 설정 등은 앱의 여러 화면에서 필요로 하는 공통된 데이터입니다. 이런 상태를 단순히 setState()만으로 관리하려고 하면, 위젯 트리 상위에서 하위로 데이터를 계속 전달해야 하는 'Prop Drilling' 문제가 발생하고 코드가 복잡해지며 유지보수가 어려워집니다. 따라서 효율적인 상태 관리 솔루션을 도입하는 것이 필수적입니다.

플러터에는 다양한 상태 관리 패턴과 라이브러리가 존재하며, 프로젝트의 규모와 복잡도에 따라 적절한 것을 선택해야 합니다.

  • setState (Local State): 가장 기본적인 방법으로, 단일 위젯 내부의 상태를 관리하는 데 적합합니다. 간단하고 직관적이지만, 상태를 다른 위젯과 공유하기는 어렵습니다.
  • Provider: 플러터 팀에서 공식적으로 추천하는 접근 방식 중 하나로, '의존성 주입(Dependency Injection)' 컨테이너를 사용하여 위젯 트리 전체에 상태를 쉽게 제공하고 접근할 수 있게 해줍니다. 비교적 배우기 쉽고, ChangeNotifierProvider와 ChangeNotifier를 함께 사용하면 상태 변경을 감지하여 UI를 자동으로 업데이트할 수 있습니다. 
    
    // 1. 상태 모델 (ChangeNotifier)
    class CounterModel extends ChangeNotifier {
      int _count = 0;
      int get count => _count;

      void increment() {
        _count++;
        notifyListeners(); // 상태 변경을 구독자에게 알림
      }
    }

    // 2. 위젯 트리에 상태 제공 (ChangeNotifierProvider)
    void main() {
      runApp(
        ChangeNotifierProvider(
          create: (context) => CounterModel(),
          child: const MyApp(),
        ),
      );
    }

    // 3. 위젯에서 상태 사용 (Consumer 또는 context.watch)
    class CounterText extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // Consumer 위젯을 사용하거나,
        // final count = context.watch<CounterModel>().count; 와 같이 사용
        return Consumer<CounterModel>(
          builder: (context, counter, child) => Text('Count: ${counter.count}'),
        );
      }
    }
  • BLoC (Business Logic Component): UI와 비즈니스 로직을 완전히 분리하는 데 중점을 둔 패턴입니다. 이벤트(Event)를 입력으로 받아 상태(State)를 출력으로 내보내는 구조로, 복잡한 상태 변화와 비동기 작업을 체계적으로 관리할 수 있습니다. 초기 학습 곡선이 다소 높지만, 대규모 애플리케이션에서 코드의 테스트 용이성과 확장성을 크게 향상시킵니다. flutter_bloc 패키지를 사용하면 BLoC 패턴을 쉽게 구현할 수 있습니다.
  • Riverpod: Provider의 개발자가 만든 차세대 상태 관리 라이브러리입니다. 컴파일 시점에 오류를 잡을 수 있는 안전성, Flutter 위젯에 대한 의존성 제거 등 Provider의 단점을 개선하여 더욱 강력하고 유연한 상태 관리를 지원합니다.
  • 기타 솔루션: GetX, MobX 등 다양한 상태 관리 라이브러리가 있으며 각각의 장단점이 있으므로, 여러 가지를 비교해보고 프로젝트에 맞는 것을 선택하는 것이 좋습니다.

4.2. 비동기 프로그래밍: 기다림의 미학

앱이 네트워크에서 데이터를 다운로드하거나, 데이터베이스에서 정보를 읽어오는 동안 UI가 멈춰버린다면 사용자 경험은 최악일 것입니다. 비동기 프로그래밍은 이러한 작업을 백그라운드에서 처리하고, 완료되었을 때 UI를 업데이트하여 앱의 반응성을 유지하는 기술입니다.

  • Future: 미래의 특정 시점에 완료될 작업을 나타내는 객체입니다. "나중에 데이터를 줄게"라는 약속 어음과 같습니다. 작업이 성공적으로 완료되면 값을 반환하고, 실패하면 오류를 반환합니다.
  • async / await: Future를 더 쉽게 다룰 수 있게 해주는 문법적 설탕(Syntactic Sugar)입니다. 함수 선언부에 async를 붙이면 해당 함수 내에서 await 키워드를 사용할 수 있습니다. await는 Future가 완료될 때까지 코드 실행을 기다리게 하지만, UI 스레드를 차단하지는 않습니다. 이 덕분에 비동기 코드를 마치 동기 코드처럼 순차적으로 작성할 수 있어 가독성이 매우 높아집니다. 
    
    import 'dart:convert';
    import 'package:http/http.dart' as http;

    // async 키워드로 비동기 함수임을 선언
    Future<String> fetchData() async {
      try {
        final response = await http.get(Uri.parse('https://api.example.com/data')); // await: 응답이 올 때까지 기다림
        if (response.statusCode == 200) {
          return json.decode(response.body)['message'];
        } else {
          throw Exception('Failed to load data');
        }
      } catch (e) {
        return 'Error: $e';
      }
    }
  • FutureBuilder: Future의 상태(대기 중, 데이터 있음, 에러 발생)에 따라 다른 위젯을 동적으로 보여주는 매우 유용한 위젯입니다. 네트워크 요청 후 로딩 인디케이터를 보여주고, 데이터가 도착하면 목록을 표시하며, 에러가 발생하면 에러 메시지를 보여주는 UI를 쉽게 구현할 수 있습니다.
  • Stream: 한 번의 값이 아닌, 여러 번의 비동기 이벤트를 순차적으로 전달하는 통로입니다. 실시간 채팅, 주식 시세 업데이트, 센서 데이터 수신 등 지속적으로 데이터가 발생하는 경우에 사용됩니다. StreamBuilder 위젯을 사용하면 스트림에서 새로운 데이터가 올 때마다 UI를 자동으로 업데이트할 수 있습니다.

5장: 앱의 동선 설계 - 내비게이션과 라우팅

단일 화면으로 구성된 앱은 거의 없습니다. 사용자는 여러 화면을 오가며 앱의 기능을 사용하게 되며, 이 화면 간의 이동을 관리하는 것이 '내비게이션' 또는 '라우팅'입니다.

5.1. 기본 내비게이션: 스크린 스택의 이해

플러터의 Navigator는 화면(Route)들을 스택(Stack) 자료구조로 관리합니다. 새로운 화면으로 이동하는 것은 스택의 맨 위에 새 화면을 쌓는(push) 것과 같고, 이전 화면으로 돌아가는 것은 맨 위 화면을 제거하는(pop) 것과 같습니다.

  • Navigator.push(): 새로운 화면으로 이동합니다. MaterialPageRoute를 사용하여 이동할 화면 위젯을 감싸줍니다. 
    
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const DetailScreen()),
    );
  • Navigator.pop(): 현재 화면을 스택에서 제거하고 이전 화면으로 돌아갑니다. AppBar의 뒤로가기 버튼이나 안드로이드의 시스템 뒤로가기 버튼은 내부적으로 이 메서드를 호출합니다. 데이터를 이전 화면으로 전달하며 돌아갈 수도 있습니다.

5.2. 명명된 라우트 (Named Routes)

앱이 커지면 화면 이동 코드가 여러 곳에 흩어져 관리가 어려워집니다. 명명된 라우트는 각 화면에 고유한 문자열 이름(예: '/home', '/detail')을 부여하고, 이 이름을 통해 화면을 이동하는 방식입니다. 모든 라우트 정의를 MaterialApp 위젯의 routes 속성에 중앙 집중화하여 관리할 수 있어 코드가 깔끔해지고 재사용성이 높아집니다.


MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => const HomeScreen(),
    '/detail': (context) => const DetailScreen(),
  },
);

// 이동할 때
Navigator.pushNamed(context, '/detail');

5.3. 고급 라우팅과 내비게이션 패턴

복잡한 앱에서는 URL 기반 라우팅, 중첩 내비게이션, 전환 애니메이션 커스터마이징 등이 필요할 수 있습니다. 이럴 때는 go_router와 같은 패키지를 사용하는 것이 좋습니다. go_router는 선언적이고 URL 기반의 강력한 라우팅 API를 제공하여 웹과 모바일에서 일관된 내비게이션 경험을 구축하는 데 큰 도움을 줍니다.

또한, 사용자에게 친숙한 UI 내비게이션 패턴을 구현하는 것도 중요합니다.

  • BottomNavigationBar: 화면 하단에 2~5개의 주요 화면으로 바로 이동할 수 있는 탭을 제공합니다.
  • TabBar / TabBarView: 화면 상단이나 내부에 탭을 만들어 관련된 콘텐츠 섹션을 전환할 수 있게 합니다.
  • Drawer: 화면 측면에서 슬라이드되어 나타나는 메뉴로, 설정, 프로필 등 부가적인 기능으로의 접근 경로를 제공합니다.

6장: 기능 확장 - 외부 패키지 활용과 데이터 영속성

플러터의 진정한 강력함은 방대한 생태계에서 나옵니다. 모든 기능을 직접 만들 필요 없이, 잘 만들어진 외부 라이브러리(패키지)를 활용하여 개발 시간을 단축하고 앱의 기능을 풍부하게 만들 수 있습니다.

6.1. 패키지의 보물창고, pub.dev

pub.dev는 Dart와 Flutter 패키지를 위한 공식 저장소입니다. 상태 관리, 네트워크 통신, 데이터베이스, 기기 API 접근(카메라, 위치 정보) 등 상상할 수 있는 거의 모든 기능의 패키지를 찾을 수 있습니다.

패키지 사용법은 간단합니다.

  1. 프로젝트의 pubspec.yaml 파일의 dependencies 섹션에 원하는 패키지와 버전을 추가합니다. (예: http: ^1.1.0)
  2. 터미널에서 flutter pub get 명령어를 실행하거나, IDE의 저장 버튼을 눌러 패키지를 다운로드합니다.
  3. 사용하려는 Dart 파일 상단에 import 구문으로 패키지를 불러와 사용합니다.

6.2. 외부 세계와의 통신: 네트워킹

대부분의 앱은 서버와 데이터를 주고받아야 합니다. 플러터에서는 http 패키지가 REST API 통신을 위한 표준처럼 사용됩니다. GET, POST, PUT, DELETE 등의 HTTP 메서드를 사용하여 서버와 통신하고, JSON 형식의 데이터를 주고받는 것이 일반적입니다.

6.3. 데이터 영속성: 앱의 기억력 만들기

앱을 종료했다가 다시 켜도 데이터가 유지되게 하려면 데이터를 기기에 저장해야 합니다. 목적에 따라 다양한 저장 방식을 선택할 수 있습니다.

  • shared_preferences: 간단한 키-값(Key-Value) 데이터를 저장하는 데 사용됩니다. 사용자의 설정(다크 모드 여부, 알림 설정 등)이나 간단한 로그인 토큰을 저장하기에 적합합니다.
  • 로컬 데이터베이스: 구조화된 대량의 데이터를 저장하고 관리해야 할 때 사용합니다.
    • sqflite: 모바일에서 널리 사용되는 SQLite 데이터베이스를 플러터에서 사용할 수 있게 해주는 패키지입니다. SQL 쿼리에 익숙한 개발자에게 적합합니다.
    • Hive / Isar: 순수 Dart로 작성된 고성능 NoSQL 데이터베이스입니다. 네이티브 Dart 객체를 그대로 저장할 수 있어 사용이 간편하고 속도가 매우 빠릅니다. 복잡한 관계형 데이터가 필요하지 않은 대부분의 경우 훌륭한 선택이 될 수 있습니다.

7장: 세상에 내놓기 - 테스트, 최적화, 그리고 배포

앱 개발의 마지막 단계는 사용자가 신뢰하고 사용할 수 있는 완성도 높은 제품을 만들어 세상에 선보이는 것입니다.

7.1. 품질 보증을 위한 테스트

버그가 없는 완벽한 소프트웨어는 없지만, 테스트를 통해 버그를 최소화하고 앱의 안정성을 높일 수 있습니다. 플러터는 세 가지 종류의 테스트를 강력하게 지원합니다.

  • 유닛 테스트 (Unit Test): 단일 함수, 메서드, 또는 클래스의 기능을 독립적으로 검증합니다. 비즈니스 로직이 예상대로 정확하게 동작하는지 확인합니다.
  • 위젯 테스트 (Widget Test): 단일 위젯이 UI를 올바르게 렌더링하고, 사용자의 상호작용에 제대로 반응하는지 테스트합니다. 가상의 환경에서 위젯을 빌드하여 테스트하므로 속도가 매우 빠릅니다.
  • 통합 테스트 (Integration Test): 앱 전체 또는 여러 부분이 함께 동작하는 시나리오를 테스트합니다. 실제 기기나 에뮬레이터에서 앱을 실행하며 테스트하므로 가장 신뢰도가 높지만 속도는 가장 느립니다. 로그인부터 상품 구매까지 이어지는 전체 흐름 등을 검증하는 데 사용됩니다.

7.2. 성능 최적화

부드러운 사용자 경험을 제공하기 위해서는 앱의 성능을 지속적으로 관리해야 합니다. Flutter DevTools는 앱의 성능 병목 현상을 진단하고 해결하는 데 필요한 강력한 도구 모음입니다.

  • 불필요한 리빌드 줄이기: const 생성자를 적극적으로 사용하고, 상태 관리 솔루션을 통해 꼭 필요한 위젯만 다시 그리도록 설계해야 합니다.
  • 레이아웃 성능: ListView.builder나 GridView.builder를 사용하여 긴 목록의 성능을 최적화하고, 렌더링 비용이 높은 위젯(예: Opacity, ClipRRect)의 사용을 최소화합니다.
  • 앱 시작 시간 및 용량 최적화: flutter build appbundle --build-name=1.0 --build-number=1과 같은 명령어로 앱 번들을 생성하여 스토어에 업로드하면, 사용자의 기기에 맞춰 최적화된 APK가 전달되어 다운로드 크기를 줄일 수 있습니다.

7.3. 앱 스토어 배포

드디어 완성된 앱을 사용자에게 전달할 시간입니다. 각 플랫폼의 배포 과정은 복잡하지만, 한 번 경험하고 나면 익숙해집니다.

  • Google Play Store (안드로이드):
    1. 앱 서명 키 생성.
    2. 앱 아이콘, 스크린샷, 설명 등 스토어 등록 정보 준비.
    3. Android App Bundle(.aab) 파일 빌드.
    4. Google Play Console에 앱을 등록하고 번들 파일을 업로드하여 검토 요청.
  • Apple App Store (iOS):
    1. Apple 개발자 프로그램에 가입 (연간 비용 발생).
    2. Xcode를 사용하여 인증서, 식별자, 프로비저닝 프로파일 설정.
    3. 앱 아이콘, 스크린샷 등 App Store Connect에 필요한 메타데이터 준비.
    4. Xcode의 Archive 기능을 사용하여 앱을 빌드하고 App Store Connect에 업로드.
    5. TestFlight를 통해 베타 테스트를 진행한 후, 심사를 위해 앱 제출.

결론: 끊임없는 학습과 성장의 길

이 글에서 제시한 로드맵은 플러터 개발의 광대한 세계를 탐험하기 위한 지도와 같습니다. 기초 문법부터 시작하여 위젯, 상태 관리, 그리고 배포에 이르기까지, 각 단계를 차근차근 밟아 나간다면 누구나 강력하고 아름다운 크로스플랫폼 앱을 만들 수 있습니다. 플러터는 지금도 빠르게 발전하고 있으며, 커뮤니티는 활발하게 성장하고 있습니다. 공식 문서, 커뮤니티 블로그, 오픈소스 프로젝트들을 통해 끊임없이 새로운 지식을 습득하고, 직접 작은 프로젝트라도 시작하여 배운 것을 실제로 적용해 보는 것이 최고의 학습 방법입니다. 이제 여러분의 아이디어를 플러터로 실현시킬 시간입니다.


0 개의 댓글:

Post a Comment