무한 스크롤

목록을 쪽으로 끊어 보여 주던 시절에는 한 화면을 다 보고 나면 아래쪽 숫자 줄에서 다음 쪽을 눌러야 했습니다. 마우스를 쓰는 화면에서는 큰 문제가 아니었습니다. 문제는 손가락으로 조작하는 작은 화면이 주류가 되면서 드러났습니다. 목록 스무 개를 넘길 때마다 화면 맨 아래의 작은 숫자를 정확히 눌러야 했고, 잘못 누르면 3쪽 대신 5쪽으로 건너뛰었습니다.

훑어보려는 사람에게는 이 끊김이 특히 성가셨습니다. 무엇을 찾을지 정하고 들어온 게 아니라 뭐가 있나 보려고 들어온 사람은 20개마다 멈춰서 판단을 한 번씩 해야 했습니다. 지하철에서 한 손으로 화면을 넘기다가 숫자를 못 눌러 같은 쪽을 다시 보는 장면이 흔했습니다.

무한 스크롤은 이 판단을 없애려고 나왔습니다. 인터랙션 디자인 안에서 이것이 속한 자리는 사람이 무엇으로 조작하는지를 다루는 입력 갈래입니다. 제스처나 드래그 앤 드롭과 한 묶음인데, 앞의 둘이 손동작 하나를 새 조작으로 쓰는 쪽이라면 무한 스크롤은 이미 하고 있던 조작인 스크롤에 불러오기를 얹은 쪽입니다. 사용자가 새로 배울 동작이 없다는 점이 이 방식이 빠르게 퍼진 이유입니다.

화면 아래쪽에 눈에 보이지 않는 기준선을 하나 두고, 그 선이 화면 안에 들어오는 순간 다음 묶음을 불러와 목록 끝에 붙입니다. 사람이 보기에는 목록이 저절로 길어지지만 실제로는 짧은 목록을 여러 번 이어 붙이는 것입니다.

한 바퀴는 네 단계로 돕니다.

1. 첫 묶음을 불러옵니다. 보통 20개에서 50개 사이로 끊습니다. 처음부터 1000개를 다 보내면 화면이 뜨는 데 몇 초가 걸리고, 사용자는 그중 첫 10개만 봅니다.
2. 기준선이 화면에 들어왔는지 지켜봅니다. 기준선은 마지막 항목보다 조금 위, 화면 한두 개 분량 앞에 둡니다. 정확히 맨 끝에 두면 사용자가 끝에 닿은 뒤에야 불러오기 시작해서 빈 화면을 보게 됩니다. 이렇게 필요해지기 직전에 미리 가져오는 방식을 지연 로딩이라고 부릅니다.
3. 다음 묶음을 요청하는 동안 자리를 표시합니다. 회색 뼈대만 먼저 그려 두는 스켈레톤 UI를 쓰거나 작은 표시 하나를 둡니다. 아무것도 없으면 사용자는 목록이 끝났다고 생각하고 나갑니다.
4. 받아 온 항목을 끝에 붙이고 기준선을 새 끝으로 옮깁니다. 여기서 기존 항목의 위치가 밀리면 읽던 줄이 튀므로, 붙이는 동안 스크롤 위치를 고정합니다.

끝나는 지점을 처리하는 것이 마지막 몫입니다. 더 불러올 것이 없으면 "여기까지입니다" 같은 문구를 한 번 보여 줍니다. 요청이 실패했을 때도 마찬가지입니다. 실패를 조용히 넘기면 사용자는 목록이 끝난 것으로 오해하고, 그 상태로 나간 사람은 자기가 절반만 봤다는 사실을 모릅니다.

끝이 정해져 있지 않고 사람들이 훑어보려고 들어오는 목록에 맞습니다. 소셜 서비스의 피드, 사진 목록, 알림함이 그렇습니다. 이런 목록에는 사용자가 찾는 특정 항목이 없고, 47번째 항목으로 다시 돌아갈 일도 없습니다.

반대로 다음 세 경우에는 잘 맞지 않습니다.

1. 항목을 비교해 하나를 고르는 목록입니다. 상품 목록에서 세 개를 견줘 보려면 앞뒤로 오가야 하는데, 무한 스크롤은 뒤로 갔다 오면 처음부터 다시 내려가야 합니다.
2. 목록 아래에 고정된 내용이 있는 화면입니다. 문의처나 약관 링크를 목록 끝에 둔 화면에서는 목록이 계속 길어지는 탓에 그 자리에 영영 닿지 못합니다.
3. 검색 결과처럼 몇 건인지가 판단 재료인 화면입니다. "234건" 이라는 숫자와 쪽 번호가 있어야 검색어를 좁힐지 말지를 정합니다.

접근성 쪽 문제도 함께 따라옵니다. 접근성은 장애나 상황에 관계없이 쓸 수 있게 만드는 설계를 말하는데, 키보드만으로 조작하는 사용자는 목록이 계속 길어지면 그 아래의 요소로 넘어갈 방법이 없습니다. 그래서 더 보기 버튼을 함께 두는 절충안을 많이 씁니다. 스크롤로 두세 묶음까지는 자동으로 붙이고 그 뒤부터는 버튼을 눌러야 이어지게 하는 식입니다.

"피드는 무한 스크롤로 가고, 검색 결과는 페이지로 남기죠."

훑어보는 화면과 찾아보는 화면을 다르게 처리하자는 제안입니다.

"무한 스크롤 붙이면 푸터는 못 쓴다고 보셔야 해요."

목록이 계속 길어져서 아래쪽 고정 영역에 닿을 수 없다는 경고입니다.

"스크롤 위치 복원 안 되면 상세 갔다 뒤로 올 때마다 맨 위로 튑니다."

목록에서 상세로 들어갔다 돌아오는 흐름이 깨진다는 지적입니다.

페이지덱에서 이 논의가 붙은 곳은 문서 목록 화면이었습니다. 민서가 스크롤로 이어지는 시안을 가져왔고, 태오가 뒤로 돌아올 때 위치를 어떻게 되살릴지부터 물었습니다. 목록에서 문서를 열고 다시 목록으로 나오는 일이 한 세션에 열 번 넘게 일어나는 화면이라, 매번 맨 위로 튀면 쪽 번호가 있던 시절보다 나빠지기 때문입니다.

지현이 정한 선은 화면의 성격으로 갈랐습니다. 최근 문서는 훑어보는 목록이니 스크롤로 이어지게 두고, 검색 결과는 몇 건인지와 몇 번째인지가 필요하니 쪽으로 남겼습니다. 목록 화면을 떠날 때 스크롤 위치와 불러온 묶음 수를 함께 기억해 두는 일은 별도 작업으로 잡았습니다.

무한 스크롤을 붙이면 사람들이 더 오래 머문다고 읽는 경우가 가장 많습니다. 누를 일이 없어지니 더 많이 볼 것이라는 짐작은 자연스럽습니다. 실제로 피드처럼 끝없이 훑는 화면에서는 그렇게 되기도 합니다. 다만 목적을 갖고 들어온 사람에게는 반대로 작동합니다. 찾던 것을 지나쳤을 때 되돌아갈 방법이 스크롤을 거꾸로 올리는 것뿐이라, 몇 번 그러고 나면 검색으로 옮겨 가거나 나가 버립니다. 화면 성격을 보지 않고 전 목록에 적용하면 체류 시간 대신 이탈이 오릅니다.

페이지네이션보다 최신 방식이라고 읽는 것도 흔합니다. 둘은 세대가 다른 것이 아니라 용도가 다른 것입니다. 쪽 번호는 "지금 몇 번째를 보고 있고 전체가 몇 쪽인지" 를 알려 주는 정보이기도 해서, 그 정보가 필요한 화면에서는 지금도 쪽 번호가 맞는 답입니다. 최신인지로 고르면 검색 결과 화면에서 사용자가 자기 위치를 잃습니다.