Flutter로 첫 모바일 앱 배포까지

시작 배경

사내 공지사항을 전달할 간단한 모바일 앱이 필요했다. React Native와 Flutter 중 고민했는데, Flutter 1.0이 최근에 정식 출시됐고 UI 성능이 좋다는 평이 많아 Flutter를 선택했다.

웹 개발자가 느낀 Flutter

Dart 문법은 TypeScript와 비슷해서 적응이 빠르긴 했지만, Widget 트리 구조가 처음엔 낯설었다. 모든 게 Widget이라는 개념이 React의 Component와 유사하면서도 달랐다.

class NoticeList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: notices.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(notices[index].title),
          onTap: () => _showDetail(context, notices[index]),
        );
      },
    );
  }
}

StatelessWidget과 StatefulWidget의 구분은 명확했다. React Hooks가 아직 실무에 도입 전이라 Class Component를 쓰고 있는데, 오히려 그 패턴이 익숙해서 이해가 빠르긴 했다.

마주친 문제들

1. 한글 입력 이슈

iOS에서 한글 입력 시 중간에 커서가 튀는 버그가 있었다. Flutter 이슈 트래커를 찾아보니 알려진 문제였고, 1.2 버전에서 수정 예정이라고 한다.

2. 빌드 크기

첫 APK 빌드 결과가 40MB가 넘었다. flutter build apk --split-per-abi 옵션으로 아키텍처별로 분리하니 15MB 정도로 줄어들었다.

3. 네이티브 의존성

FCM 푸시 알림 설정이 생각보다 복잡했다. Android는 android/app/google-services.json, iOS는 ios/Runner/GoogleService-Info.plist 설정이 각각 필요했다.

배포

Android는 Play Console에 업로드하는 과정이 단순했다. iOS는 Xcode로 빌드하고 App Store Connect에 올리는데, 인증서 관리가 여전히 번거로웠다.

소감

Hot Reload가 정말 편했다. 웹의 HMR과 비슷한데 모바일에서도 이게 된다는 게 신기했다. 단순 CRUD 앱이라면 Flutter로 빠르게 개발 가능하다는 걸 확인했다. 다만 네이티브 기능이 많이 필요한 프로젝트라면 아직은 고민이 필요할 것 같다.