좋아요 및 북마크 기능 추가 — 내가 좋아한 뉴스 저장하기

사용자가 뉴스를 보다가 ‘좋아요’를 누르거나, ‘북마크’로 저장하는 기능은 단순해 보이지만 사용자 경험을 극대화시켜준다.
뉴스앱을 앱답게 만드는 요소 중 하나가 바로 이 내가 저장한 뉴스 목록이기 때문이다.

이번 글에서는 Flutter로 좋아요/북마크 기능을 추가하고, 이를 저장하고 불러오는 흐름을 다뤄보자.

---

❤️ 좋아요 기능: UI + 상태만 관리

좋아요는 서버 연동 없이 UI와 앱 내 상태만 관리해도 충분히 사용자 경험을 향상시킬 수 있다.

✅ 상태 정의

class News {
  final String id;
  final String title;
  bool isLiked; // ← UI에서만 변경

  News({required this.id, required this.title, this.isLiked = false});
}

✅ UI에 적용

IconButton(
  icon: Icon(
    news.isLiked ? Icons.favorite : Icons.favorite_border,
    color: news.isLiked ? Colors.red : Colors.grey,
  ),
  onPressed: () {
    setState(() {
      news.isLiked = !news.isLiked;
    });
  },
)

UI만 바뀌지만 사용자는 앱이 반응한다고 느낀다. 필수 기능은 아니지만, 감성을 더한다.

---

🔖 북마크 기능: 저장/조회까지

북마크는 사용자가 "나중에 다시 보고 싶은 뉴스"를 저장하는 기능이다.
SharedPreferences를 활용하면 간단히 구현할 수 있다.

✅ 패키지 설치

dependencies:
  shared_preferences: ^2.2.2

✅ 저장 로직

void toggleBookmark(String newsId) async {
  final prefs = await SharedPreferences.getInstance();
  List<String> bookmarks = prefs.getStringList('bookmarked') ?? [];

  if (bookmarks.contains(newsId)) {
    bookmarks.remove(newsId);
  } else {
    bookmarks.add(newsId);
  }

  await prefs.setStringList('bookmarked', bookmarks);
}

✅ 로딩 & 표시

Future<Set<String>> getBookmarkedIds() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getStringList('bookmarked')?.toSet() ?? {};
}

북마크된 뉴스만 따로 보여주려면, 전체 뉴스에서 ID 기준으로 필터링하면 된다.

---

🖥️ 북마크 뉴스 전용 페이지 구성

class BookmarkedNewsScreen extends StatelessWidget {
  final Set<String> bookmarkedIds;

  const BookmarkedNewsScreen({super.key, required this.bookmarkedIds});

  @override
  Widget build(BuildContext context) {
    final filtered = allNews.where((news) => bookmarkedIds.contains(news.id)).toList();
    return Scaffold(
      appBar: AppBar(title: Text("북마크 뉴스")),
      body: ListView.builder(
        itemCount: filtered.length,
        itemBuilder: (context, index) {
          return NewsCard(news: filtered[index]);
        },
      ),
    );
  }
}

이렇게 하면 내가 북마크한 뉴스만 모아서 보여주는 뷰를 쉽게 만들 수 있다.

---

📌 UX 팁

• 북마크한 뉴스는 탭 또는 마이페이지에서 접근 가능하게
• 공유 기능과 함께 위치시키면 효과적
• 북마크 아이콘은 앱 전반에 일관되게 사용

---

🧘 마무리하며

좋아요는 감성을, 북마크는 실용을 위한 기능이다.
Flutter로 만든 뉴스 앱이 ‘사용자 맞춤 뉴스’로 발전하기 위해서는, 이런 작지만 중요한 사용자 참여 기능이 필수다.

읽고 넘기지 않고, 다시 돌아오게 만드는 힘 — 바로 북마크다.

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