무한 스크롤 구현 — 더 보기 없이 계속 내려보는 뉴스 피드 만들기

뉴스 앱을 만들다 보면, “더 보기” 버튼 없이 계속 내려가면 새로운 뉴스가 자동으로 나오는 UI를 구현하고 싶어진다.
이런 기능을 흔히 무한 스크롤 (Infinite Scroll)이라고 부른다.

이번 글에서는 Flutter에서 ScrollController를 사용해 무한 스크롤을 구현하는 방법을 실제 코드와 함께 정리해본다.

---

🔁 무한 스크롤 동작 방식 요약

1. 스크롤을 감지해서 리스트 끝에 도달했는지 확인
2. 다음 페이지 데이터를 요청하고 리스트에 추가
3. 로딩 중에는 중복 요청 방지

이 3가지가 핵심이다. 이제 코드를 보면서 차근차근 구현해보자.

---

🧱 ScrollController 기본 셋업

class NewsFeedScreen extends StatefulWidget {
  @override
  State<NewsFeedScreen> createState() => _NewsFeedScreenState();
}

class _NewsFeedScreenState extends State<NewsFeedScreen> {
  final ScrollController _scrollController = ScrollController();
  final List<News> _newsList = [];
  bool _isLoading = false;
  int _page = 1;

  @override
  void initState() {
    super.initState();
    _loadNews();
    _scrollController.addListener(_onScroll);
  }

  void _onScroll() {
    if (_scrollController.position.pixels >=
        _scrollController.position.maxScrollExtent - 300) {
      _loadNews();
    }
  }

스크롤이 리스트 끝에서 300픽셀 이내일 경우 다음 페이지를 로드하는 방식이다.
이를 통해 사용자는 자연스럽게 콘텐츠를 이어서 읽을 수 있다.

---

📡 뉴스 API 호출 및 중복 방지

void _loadNews() async {
  if (_isLoading) return;

  setState(() => _isLoading = true);

  final newItems = await fetchNews(page: _page);  // ← API 요청
  setState(() {
    _newsList.addAll(newItems);
    _isLoading = false;
    _page++;
  });
}

_isLoading 플래그를 두면 스크롤을 내릴 때 중복 요청이 발생하는 것을 막을 수 있다.

---

🖼️ 전체 UI 예시 코드

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("뉴스 피드")),
    body: ListView.builder(
      controller: _scrollController,
      itemCount: _newsList.length + 1,
      itemBuilder: (context, index) {
        if (index < _newsList.length) {
          return NewsCard(news: _newsList[index]);
        } else {
          return _isLoading
              ? Center(child: Padding(
                  padding: EdgeInsets.all(16),
                  child: CircularProgressIndicator(),
                ))
              : SizedBox();
        }
      },
    ),
  );
}

마지막 아이템엔 로딩 인디케이터를 추가해 UX를 자연스럽게 만들 수 있다.

---

💡 UX 팁: 과도한 요청 방지하기

• 스크롤 이벤트는 디바운스 또는 throttle 로 제어
• 마지막 페이지면 hasMore 플래그를 둬서 요청 중단
• 네트워크 오류 대응: 재시도 버튼 제공

---

🧘 마무리하며

무한 스크롤은 단순한 기술처럼 보이지만, 사용자 경험에 큰 영향을 준다.
뉴스를 끝없이 읽게 만들고 싶다면, 자연스럽게 연결된 피드 구조가 필요하다.

다음 글을 클릭하게 하지 마라. 그냥 내려가게 하라.

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