Flutter에서 Optimistic Response Cache 완벽 가이드

 

모바일 앱을 만들다 보면, 서버 응답이 지연되면서 유저 경험이 떨어지는 경우가 있습니다.

특히 네트워크가 느리거나 연결이 불안정할 때 더 그렇죠. 이런 상황을 개선하기 위해 Optimistic Response Cache라는 기술이 있습니다.

Flutter에서도 이 기술을 이용하면 앱 속도를 높이고 유저에게 더 매끄러운 경험을 제공할 수 있습니다.

 

Optimistic Response Cache는 초보자들이 이해하기 어려울 수 있는 기술이지만, 쉽게 풀어서 설명해드리겠습니다.

이 글에서는 Optimistic Response Cache가 무엇인지, 왜 필요한지, 그리고 Flutter에서 어떻게 구현하는지 단계별로 설명드리겠습니다.

1. Optimistic Response Cache란 무엇인가?

Optimistic Response는 사용자가 데이터를 서버로 보내자마자 바로 성공한 것처럼 처리하는 기술입니다.

사용자가 버튼을 누르고 서버에서 응답을 기다리지 않고, 화면에 변화가 즉시 반영되도록 하여 사용자에게 빠른 반응을 제공하죠.

 

예를 들어, 소셜 미디어 앱에서 "좋아요" 버튼을 누르면 서버에서 응답이 오기 전에 화면에 "좋아요" 표시가 즉시 보이는 것입니다.

서버에서 응답을 받기 전이지만, 사용자는 이미 "좋아요"가 성공했다고 생각하게 되는 것이죠.

 

Cache는 응답을 저장해서 다음 요청 시 재사용할 수 있도록 하는 기능입니다. Optimistic Response Cache는 이 두 가지 기능을 결합하여 사용자가 서버 응답을 기다리지 않고도 화면에서 즉각적인 피드백을 볼 수 있도록 하는 캐싱 기술입니다.

2. Optimistic Response Cache의 필요성

Optimistic Response Cache를 사용하면 다음과 같은 이점이 있습니다:

• 빠른 사용자 경험: 서버 응답을 기다리지 않고 즉시 화면에 변화가 나타나므로 사용자가 느끼는 반응 속도가 빨라집니다.
• 데이터 일관성: 서버 응답을 기다리면서 발생할 수 있는 데이터 불일치 문제를 줄입니다.
• 네트워크 부하 감소: 동일한 요청을 여러 번 서버에 보내는 대신 캐시를 사용하여 네트워크 사용량을 줄입니다.

3. Flutter에서 Optimistic Response Cache 구현하기

Flutter에서 Optimistic Response Cache를 구현하려면 상태 관리를 적절히 활용해야 합니다.

여기에서는 Provider 패키지를 사용해 간단한 예제를 만들어 보겠습니다.

3.1 필요한 패키지 추가

먼저, pubspec.yaml 파일에 필요한 패키지를 추가해 주세요.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

Provider는 Flutter에서 상태 관리를 간단하게 구현할 수 있도록 도와주는 패키지입니다.

3.2 Optimistic Response Cache를 적용한 예제

• 상황 설정: 사용자가 게시글에 “좋아요” 버튼을 누르면 서버에 요청을 보내고 성공 여부를 응답으로 받는 앱입니다.
• 목표: 사용자가 "좋아요"를 누르자마자 서버 응답 없이도 화면에 즉시 반영되도록 하는 것입니다.

Step 1. Provider 설정

우선, LikeProvider 클래스를 만들어 좋아요 상태를 관리합니다.

import 'package:flutter/material.dart';

class LikeProvider extends ChangeNotifier {
  bool _isLiked = false;
  bool get isLiked => _isLiked;

  // Optimistic Response를 위한 메서드
  void toggleLike() {
    // 사용자가 좋아요 버튼을 누를 때 상태를 변경
    _isLiked = !_isLiked;
    notifyListeners();
    
    // 서버로 데이터 전송 시도
    _sendLikeToServer();
  }

  // 서버에 좋아요 상태 전송 시뮬레이션
  Future<void> _sendLikeToServer() async {
    try {
      await Future.delayed(Duration(seconds: 2)); // 서버 지연 시간 시뮬레이션
      // 성공적으로 전송되었다고 가정
    } catch (error) {
      // 서버 오류가 발생하면 좋아요 상태를 롤백
      _isLiked = !_isLiked;
      notifyListeners();
    }
  }
}

코드 설명

1. _isLiked는 현재 "좋아요" 상태를 저장하는 변수입니다.
2. toggleLike는 Optimistic Response를 위한 메서드로, 사용자가 버튼을 누르면 즉시 _isLiked 상태를 반전시켜 화면에 표시합니다.
3. _sendLikeToServer는 서버로 데이터를 보내는 함수로, 여기서는 서버 지연을 시뮬레이션하고 있습니다. 실패하면 상태를 롤백합니다.

Step 2. UI 코드 작성

이제 UI에서 LikeProvider를 사용해 "좋아요" 기능을 구현해 보겠습니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'like_provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => LikeProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Optimistic Response 예제')),
        body: LikeButtonWidget(),
      ),
    );
  }
}

class LikeButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // LikeProvider의 현재 상태를 가져옵니다
    final likeProvider = Provider.of<LikeProvider>(context);
    
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            likeProvider.isLiked ? '좋아요 취소' : '좋아요',
            style: TextStyle(fontSize: 20),
          ),
          ElevatedButton(
            onPressed: () {
              likeProvider.toggleLike(); // 버튼을 누르면 Optimistic Response 실행
            },
            child: Text(
              likeProvider.isLiked ? '좋아요 취소' : '좋아요',
            ),
          ),
        ],
      ),
    );
  }
}

UI 설명

1. Provider.of<LikeProvider>(context)를 통해 LikeProvider의 상태를 가져옵니다.
2. ElevatedButton의 onPressed 이벤트에 likeProvider.toggleLike()를 연결하여 버튼을 누를 때 Optimistic Response가 실행되도록 합니다.
3. 버튼을 누르면 좋아요 상태가 즉시 변경되어 화면에 반영됩니다.

 

Flutter에서 Optimistic Response Cache를 구현하면 서버 응답을 기다리지 않고도 사용자 경험을 향상시킬 수 있습니다.

이번 예제에서는 Provider를 사용해 간단하게 구현해 보았지만, 실제 앱에서는 다양한 상태 관리 방법과 함께 사용할 수 있습니다.

캐싱 기술은 네트워크 연결이 불안정한 환경에서도 유저 경험을 높이는 데 큰 도움이 되니, 꼭 한 번 적용해 보세요!

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱