왜 필요한가
연락처 5,000개를 한 번에 그리면 메모리가 부족해지고 첫 화면이 늦게 떠요. 가상화는 보이는 10~20개 행과 위아래 여유분만 그리고, 스크롤하면 사라진 행을 새 내용으로 재활용해요(Android Developers, n.d.; web.dev, n.d.). 밀러(1968)가 말한 0.1초 안의 반응을 지켜야 스크롤이 손가락을 따라가요. 무한 스크롤로 항목이 계속 쌓이는 화면이나 코어 웹 바이탈이 나쁜 페이지에 특히 효과적이에요.
구현할 때 주의점
행 높이가 다르면 예상 높이로 먼저 계산하고 그린 뒤 보정해요. 빠르게 넘길 때 빈 행이 비치지 않게 여유분을 넉넉히 두고, 이미지는 지연 로딩과 함께 써요. 카드와 동료들(1983)의 지각 시간처럼 잠깐의 빈칸도 사람은 알아채요. 간단한 웹 페이지라면 CSS content-visibility(MDN, n.d.)만으로도 화면 밖 렌더링을 줄일 수 있어요.
접근성과 검색
그리지 않은 행은 화면 읽기 프로그램도, 브라우저의 페이지 내 찾기도 못 봐요. 피드 패턴(W3C WAI, n.d.)처럼 aria-setsize와 aria-posinset으로 '전체 5,000개 중 12번째'를 알리고, 앱 안에 검색창을 따로 둬요. 포커스가 있던 행이 재활용돼 사라지면 포커스를 잃으니 WCAG 2.2(W3C, 2023)의 포커스 순서를 지켜요. 항목이 수십 개뿐이라면 가상화는 복잡함만 늘리니 쓰지 않아요.
자주 묻는 질문
- 항목이 몇 개부터 가상화가 필요한가요?
- 기기와 행 복잡도에 따라 다르지만, 수백 개 이상이거나 스크롤이 끊길 때 측정해 보고 적용해요.
- 가상화하면 Ctrl+F 찾기가 안 되나요?
- 그리지 않은 행은 찾을 수 없어서, 앱 내 검색 기능을 따로 제공하는 것이 좋아요.
출처 검토일: 2026-10-27
참고문헌
- web.dev. (n.d.). Virtualize large lists with react-window. 보이는 행만 그리는 원리와 react-window 사용법이라, 웹 긴 목록을 가상화할 때 참고하면 도움이 돼요.
- Android Developers. (n.d.). Create dynamic lists with RecyclerView. 뷰를 재활용하는 안드로이드 목록 문서라, 앱에서 같은 원리를 적용할 때 참고하면 도움이 돼요.
- MDN Web Docs. (n.d.). content-visibility. 화면 밖 렌더링을 건너뛰는 CSS 속성이라, 라이브러리 없이 가볍게 최적화할 때 참고하면 도움이 돼요.
- W3C WAI. (n.d.). Feed pattern. ARIA Authoring Practices Guide. aria-setsize·aria-posinset으로 전체 개수를 알리는 패턴이라, 가상 목록의 화면 읽기 대응에 참고하면 도움이 돼요.
- Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of the December 9–11, 1968, Fall Joint Computer Conference, Part I (pp. 267–277). ACM. 반응 시간 한계 연구라, 스크롤 끊김 없이 0.1초 안에 반응해야 하는 이유로 참고하면 도움이 돼요.
- Card, S. K., Robertson, G. G., & Mackinlay, J. D. (1991). The information visualizer, an information workspace. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 181–186). ACM. 사람의 지각·처리 시간 모델이라, 빈 행이 보이는 순간을 얼마나 짧게 해야 할지 판단할 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 포커스 순서와 이름·역할 기준이 있어, 행이 사라지고 생길 때 포커스를 지키는 데 참고하면 도움이 돼요.