적응형 가상 스크롤 Adaptive Virtual Scrolling

이번 undefine 이라는 소프트웨어 진흥원 산하 자바스크립트 팀 세미나에서 에서 마지막에 흥미로운 발표를 했다.

바로 네이버 오피스를 만들었다는 한 자스 개발자의 개발기, “자바스크립트, 어디까지 가봤니?” 라는 주제로 발표를 했다.

네이버 오피스를 만들면서 자바스크립트로 아주 그냥 철인 경기를 한 듯한 개발기를 한 그 개발자에게 먼저 경의를 표한다.

누군지 까먹어서 ㅈㅅ. 하지만 그는 정말 대단한 열정으로 자스계의 신의 경지에 올라왔다 해도 과언이 아니라고 말해주고 싶다.

어쨌든 이 발표가 끝나고 내 선배한테 헬프성 문자가 왔는데 그 중 하나가 바로 대용량 그리드 스크롤이 필요하게 생겼단다.

허.. 가는날이 장날인가..

나같은 경우 원리는 이해하나 구현해본 적이 없다. 그렇다고 직접 구현하기엔 여러가지 삽질이 필요했고

그거 생각할 시간은 너무나 부족했다.

그래서 내가 즐겨쓰던 그리드 플러그인인 SlickGrid 를 통해 답변을 찾기로 했다.

그리고 SlickGrid 는 나에게 정말 속 시원한 답변을 주었다.

왜 내가 SlickGrid 를 선택했냐면, 처음으로 대용량 그리드에 대한 스크롤링을 구현하여 몇십만 행의 데이터를 아무렇지도 않게 불러오는 스킬로 전 세계의 위엄을 떨친 그리드이기 때문이다. 게다가 라이센스가 MIT이다.

그리고 그 개발과정도 녹아 있었다. (제작자가 공개한 대용량 데이터 스크롤링 개발과정이 있다. 물론 영문이다.)

https://github.com/mleibman/SlickGrid/issues/22

그리고 그는 대용량 스크롤링을 구현하였고, 그것을 jsfiddle 에 공개햐였다.

http://jsfiddle.net/SDa2B/4/ (영어)

http://jsfiddle.net/wu7zq/ (내가 한글 번역)

이쯤에서 가상 스크롤이 뭔지 알아보자면,

사용자는 아무렇지도 않게 스크롤을 하는데, 스크롤을 하면서 개발자는 스크롤한 위치에 따라 컨텐츠 표시를 대응한다.

이게 가상 스크롤이라고 한다.

작년 웹 디자인 트랜드를 주름잡았던 패럴랙스 스크롤도 가상 스크롤에 해당되며,

SlickGrid 에서 스크롤한 위치만 보여주는 기술도 가상 스크롤이다.

이놈의 영감을 체험해보려면 바로 엑셀 프로그램이 있다.

엑셀은 수백만 행의 데이터를 똥컴에서도 랙없이 보여주는 기술을 가지고 있다.

만약 수백만 행이 렌더링 된 상태였다면 똥컴은 수백만 행에 대한 메모리를 이기지 못하고 뻗고도 남는다.

HTML도 마찬가지로, 눈에 보이는 모든 요소는 메모리에 담게 되며, 그래픽 처리를 하게 된다. 어느 프로그램이나 마찬가지.

그래서 HTML이던 자바던 닷넷이던 씨뿔뿔이던 다 이런 보이는 곳에 대한 대응은 안할래야 안할 수가 없다.

특히, 3D FPS 게임에서 보이는 곳만 렌더링 하는 것이 성능에 엄청난 차이를 보이기 때문에 민감할 수밖에 없다.

이런 류로 중요한 것이다.

제이쿼리 그리드 플러그인인 DataTable 도 한 업체의 도움을 받아 대량의 행도 아무렇지도 않게 보여줄 수 있는 가상 스크롤링을 구현하였다.

이 글을 통해 어떤 원리로 작동되는지 소개되어 있다. (조만간 번역해주겠다.)

https://datatables.net/blog/Introducing_Scroller_-_Virtual_Scrolling_for_DataTables

이리하여 웹 앱이라는 것이 어떤건지 아주 그냥 재대로 실감나게 한 한주가 되었다.

이제 와이프랑 놀아줘야겠다. 내 아내가 지금 삐친 상태라 오늘은 여기까지.

composite / 2013년 7월 27일 / 미분류
태그:, , , ,

답글 남기기

Your email address will not be published / Required fields are marked *