오프라인 모드 구현 — 캐시 저장을 활용한 네트워크 없는 상황 대응

뉴스 앱은 기본적으로 온라인 기반이다.
하지만 출근길 지하철이나 해외 여행 중, 네트워크가 없는 순간에도 읽던 기사를 다시 보고 싶을 때가 있다.

이 글에서는 Flutter에서 오프라인 모드를 구현하는 방법,
즉 네트워크가 없을 때 캐시된 뉴스 데이터를 불러오는 전략을 정리해본다.

---

📦 기본 아이디어

핵심 흐름은 단순하다.

1. 뉴스를 받아올 때 JSON으로 SharedPreferences에 저장
2. 앱 시작 시 네트워크 연결 여부 확인
3. 오프라인이면 로컬에 저장된 JSON을 불러오기

이 구조는 작지만 강력한 사용자 경험을 만든다.

---

📡 네트워크 상태 확인

// pubspec.yaml
dependencies:
  connectivity_plus: ^5.0.2

Future<bool> hasNetwork() async {
  final result = await Connectivity().checkConnectivity();
  return result != ConnectivityResult.none;
}

Wi-Fi, 모바일 데이터 여부까지 파악 가능하다.

---

💾 뉴스 캐싱 로직 구현

✅ 뉴스 저장

Future<void> saveNewsToCache(List<News> newsList) async {
  final prefs = await SharedPreferences.getInstance();
  final jsonString = jsonEncode(newsList.map((n) => n.toJson()).toList());
  await prefs.setString('cached_news', jsonString);
}

✅ 캐시 로드

Future<List<News>> loadNewsFromCache() async {
  final prefs = await SharedPreferences.getInstance();
  final jsonString = prefs.getString('cached_news');
  if (jsonString == null) return [];
  
  final List decoded = jsonDecode(jsonString);
  return decoded.map((e) => News.fromJson(e)).toList();
}

이때 News 모델에는 toJson()과 fromJson()이 구현되어 있어야 한다.

---

🔁 전체 흐름 연결

Future<List<News>> fetchNewsWithFallback() async {
  if (await hasNetwork()) {
    final news = await fetchNewsFromApi();
    await saveNewsToCache(news);
    return news;
  } else {
    return await loadNewsFromCache();
  }
}

단 한 줄의 조건 분기로 네트워크 상황에 따라 앱이 우아하게 대처할 수 있게 된다.

---

📌 UX 팁: 오프라인 알림

• AppBar 또는 Snackbar에 “오프라인 모드” 안내
• 최신 데이터가 아님을 표시
• 업데이트 버튼 또는 자동 동기화 로직 추가

if (!await hasNetwork()) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text("현재 오프라인 상태입니다")),
  );
}

---

🧘 마무리하며

앱이 항상 온라인 상태일 거라는 가정은 너무 낭만적이다.
Flutter 뉴스 앱에 오프라인 대응을 추가하면, 사용자 신뢰도는 눈에 띄게 올라간다.

끊긴 인터넷보다, 연결된 경험이 중요하다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 뉴스 앱 만들기 여정입니다.