네이버 모바일 '무한 스크롤' 개발기

지난 달 네이버 모바일 홈이 바뀌었다. 가장 눈에 띄는 변화는 스크롤을 내리면 끝도 없이 콘텐츠가 노출되는 일명 ‘무한 스크롤’이 적용됐다는 점이다.

이미 페이스북, 핀터레스트, 구글 플러스 등도 이런 무한 스크롤을 적용해 서비스한다. 하지만 네이버는 이들 서비스와는 환경에 많은 차이가 있다. 기본적으로 순환형태로 돌아가는 10개의 판(뉴스, 연예, 스포츠, 라이프 등)에 이미지나 동영상 같은 대용량 콘텐츠가 들어 있는데 여기에 무한스크롤을 적용할 경우 페이지 로딩 속도 같은 성능에 문제가 생길 수 있다.

네이버는 이런 문제를 어떻게 해결했을까? 29일 네이버 개발자 컨퍼런스 ‘데뷰2014’에서 손찬욱 네이버 개발자는 무한 스크롤을 구현하는데 기술적으로 고민했던 부분을 공유했다.

그에 따르면 네이버는 ‘마크업(노드)가 증가하는지 아닌지’와 ‘브라우저 스크롤을 쓸 것인지 버추얼 스크롤 쓸 것인지’ 두 가지 문제를 중심으로 무한스크롤에 접근했다.

앞서 언급한 것 처럼 노드가 증가하는 구조는 네이버에서 쓸 수가 없는 상태였다. 그래서 노드 개수를 고정시키고 재사용하는 방식을 선택했다.

손찬욱 개발자는 “그리드 레이아웃을 유지하면서 돔(DOM)을 순환적으로 구현했고 사용자가 스크롤을 내릴 때 각 돔에 데이터를 바꿔가며 배치했다”고 설명했다. 카드를 물리적 돔과 논리적 데이터로 분리한 것이다.이렇게 되면 컨텐츠 양이 늘어나도 마크업 수는 고정이기 때문에 큰 문제가 없게 된다.

아직 문제가 남아 있다. 돔을 이동하고 새로운 데이터로 갱신해야 할 때 생기는 성능 부담이 그것.

손찬욱 개발자는 돔의 내용이 변경될 때 발생하는 비용에 대해 “웹페이지는 하나의 큰 레이어를 가지고 있는데 각각 카드의 하나 내용이 바뀌면 실제 페이지 전체에 영향을 미치게 된다”고 설명했다.

네이버는 이 문제를 카드별로 렌더레이어를 따로 구성하는 방법으로 해결했다. 이렇게 하면 카드 내용이 바뀌어도 카드 크기에 대해서만 영향을 받게 된다.

스크롤 시 돔이 이용하는 비용도 해결해야 한다. 그는 “레이아웃을 유발하는 대표적 속성이 ‘레프트/탑(left/top)’인데 이 것을 트랜스폼(transform)으로 바꿔 사용하면 레이아웃 비용이 줄어든다. 또 페인트(paint)를 유발하는 ‘borde-radius’, ‘box-shadow’ 같은 스타일 사용을 금지했다”고 설명했다.

브라우저 스크롤이냐 버추얼 스크롤이냐에 대한 고민도 이어졌다. 네이버 모바일은 특히 안드로이드에서 버추얼스크롤이 느린 것 같다는 체감 성능상 차이가 있어 브라우저 스크롤을 선택했다.

손찬욱 개발자는 “버추얼 스크롤의 장점도 많지만 우리가 선택하지 않은 이유는 ‘현재’ (디바이스나 브라우저 상황에서) 성능이 안 나오기 때문”이라며 “향후 1-2년 후에는 버추얼 스크롤을 이용하는 게 더 빠를 수도 있다”고 설명했다.