[Javascript Framework] Virtual scrolling vs Infinite scrolling

Virtual scrolling - Infinite Scrolling

참조 URL

1. http://www.datatables.net/blog/Introducing_Scroller_-_Virtual_Scrolling_for_DataTables
2. http://www.jeasyui.com/tutorial/datagrid/datagrid27.php
3. http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=
   
4. http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling
5. http://www.telerik.com/help/aspnet-ajax/grid-virtual-scroll-paging.html
   

 Virtual scrolling이란 사용자의 페이지 이동의 행위 없이 스크롤 만으로 사용자가 인식하지 못하는 상태에서 페이징처리가 되도록 지원하는 기능이라고 할 수 있겠다. 아래 '그림1' 보면 쉽게 이해가 갈 것이다.

[그림1] jQery EasyUI Virtual Scrolling

( http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem= )

( http://www.datatables.net/release-datatables/extras/Scroller/server-side_processing.html )

( http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling 에서도 확인 가능 - jqgrid )

 

 

 이번에는 Infinite scroll에 대해서 알아 보자. Infinite scroll은 일반 페이징 처럼 처음 1페이지에 해당하는 데이타와 그에 해당하는 스크롤 사이즈만 보여준다. 그렇지만 스크롤을 내리면 데이터가 추가되어 스크롤과 그리드가 동적으로 추가가 된다. 아래 '그림2'와 '그림3'을 비교해 보면 알 수 있을 것이다. 

[그림2] Infinite Scroll 초기 화면 - Scroll 사이즈 비교

[그림2] Infinite Scroll이 진행된 화면 - Scroll 사이즈 비교

( http://www.datatables.net/release-datatables/examples/basic_init/scroll_y_infinite.html )

 Virtual scroll vs Infinite scroll은 비슷한 기능이지만 다른 사용자 경험을 제공해 주고 있는 것이다. 개발자 입장에서는 Virtual Scroll을 구현하기가 더 어려울 것이다. Infinite는 스크롤된 값을 가지고 추가된 데이터만 관리하면 되지만 Virtual은 스크롤된 값으로 현재 화면에 가져와야할 데이터의 범위에 대해서 계산해야 하는 작업이 필요 하게 된다. 그렇지만 사용자의 입장에서는 Virtual이 전체 데이터의 사이즈를 인지하고 있기 때문에 더 낳은 경험을 제공해준다. 어떤 경험을 제공해 주는지는 개발 프로젝트의 성격과 선택에 달려 있을 것이다. 그리고 계산 문제에 대해서 우리가 고민할 필요 없이 이미 개발되어 있는 라이브러리 들이 있으니 적극 활용하여 사용해 보도록 하자.

- jqGrid

- DataTable

- jQuery EasyUI

 이 밖에도 Telerik이나 별도의 컴포넌트 회사에서 개발된 툴에서도 지원하고 있으니 원하는 입맛에 맞게 도입하면 될 것이다.