본문 바로가기
Flutter

Flutter앱을 개발하면서 사용자 피드백을 수집하고 이를 활용해보기

by 난타코다옹 2023. 10. 7.

목차

    Flutter에서 사용자 피드백 수집 및 활용 방법

    사용자 피드백은 앱 개발에 있어서 매우 중요한 역할을 합니다. 이번 글에서는 Flutter를 사용하여 커플용 알람 앱을 개발하면서 사용자 피드백을 수집하고 이를 활용하는 방법에 대해 알아보겠습니다.

    1. 사용자 피드백 수집 방법

    Flutter에서는 Firebase를 사용하여 사용자 피드백을 수집할 수 있습니다. Firebase에서 제공하는 Crashlytics와 Analytics를 사용하여 앱의 성능과 사용자 행동을 추적할 수 있습니다. 또한, Feedback 모듈을 사용하여 사용자의 직접적인 의견을 수집할 수 있습니다.
    Flutter 코드 (main.dart):

    import 'package:firebase_crashlytics/firebase_crashlytics.dart';
    import 'package:firebase_analytics/firebase_analytics.dart';
    import 'package:firebase_analytics/observer.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_feedback/flutter_feedback.dart';
    
    void main() async {
      WidgetsFlutterBinding.ensureInitialized();
      await Firebase.initializeApp();
      FirebaseAnalytics analytics = FirebaseAnalytics();
      FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterError;
      runApp(MyApp(analytics: analytics));
    }
    
    class MyApp extends StatelessWidget {
      final FirebaseAnalytics analytics;
    
      MyApp({required this.analytics});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Couple Alarm',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          navigatorObservers: [
            FirebaseAnalyticsObserver(analytics: analytics),
          ],
          home: MyHomePage(title: 'Couple Alarm'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key? key, required this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      final FlutterFeedback feedback = FlutterFeedback();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Text(
              'Welcome to Couple Alarm',
              style: TextStyle(fontSize: 24),
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () async {
              await feedback.showFeedback(
                context,
                title: 'Send Feedback',
                hintText: 'What do you think about our app?',
                sendButtonText: 'Send',
                onCancelled: () => print('Cancelled by user'),
                onSubmit: (feedback) {
                  print('Feedback sent: $feedback');
                },
              );
            },
            tooltip: 'Send Feedback',
            child: Icon(Icons.feedback),
          ),
        );
      }
    }

    위 코드는 Flutter 앱에서 Firebase Feedback 모듈을 사용하여 사용자 피드백을 수집하는 예제입니다.

    2. 사용자 피드백 활용 방법

    수집한 사용자 피드백을 활용하여 앱을 개선할 수 있습니다. Feedback 모듈을 사용하여 수집한 사용자 피드백을 분석하고, Firebase Analytics를 사용하여 앱의 사용자 행동을 추적하여 개선할 부분을 파악할 수 있습니다.
    Flutter 코드 (main.dart):

    import 'package:firebase_analytics/firebase_analytics.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_feedback/flutter_feedback.dart';
    
    void main() async {
      WidgetsFlutterBinding.ensureInitialized();
      await Firebase.initializeApp();
      FirebaseAnalytics analytics = FirebaseAnalytics();
      runApp(MyApp(analytics: analytics));
    }
    
    class MyApp extends StatelessWidget {
      final FirebaseAnalytics analytics;
    
      MyApp({required this.analytics});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Couple Alarm',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          navigatorObservers: [
            FirebaseAnalyticsObserver(analytics: analytics),
          ],
          home: MyHomePage(title: 'Couple Alarm'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key? key, required this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      final FlutterFeedback feedback = FlutterFeedback();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Text(
              'Welcome to Couple Alarm',
              style: TextStyle(fontSize: 24),
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () async {
              await feedback.showFeedback(
                context,
                title: 'Send Feedback',
                hintText: 'What do you think about our app?',
                sendButtonText: 'Send',
                onCancelled: () => print('Cancelled by user'),
                onSubmit: (feedback) {
                  print('Feedback sent: $feedback');
                  analytics.logEvent(name: 'feedback_sent', parameters: {'feedback': feedback});
                },
              );
            },
            tooltip: 'Send Feedback',
            child: Icon(Icons.feedback),
          ),
        );
      }
    }

    위 코드는 Feedback 모듈을 사용하여 수집한 사용자 피드백을 Firebase Analytics를 사용하여 분석하는 예제입니다.

     

     

    app feedback analytics

    이번 글에서는 Flutter를 사용하여 커플용 알람 앱을 개발하면서 사용자 피드백을 수집하고 이를 활용하는 방법에 대해 알아보았습니다. Feedback 모듈과 Firebase Analytics를 사용하여 사용자 피드백을 수집하고 분석하는 방법을 익혀서 앱의 개선에 활용해보세요!