가상 스크롤 목록을 끝까지 빠짐없이 파싱하기

웹 · 앱 개발4분 읽기

목록을 크롤링할 때 초보가 흔히 하는 실수가 있습니다. 페이지를 끝까지 스크롤한 다음, 다 내렸으니 이제 화면에 모든 항목이 있겠지 하고 한 번에 읽는 것입니다. 그런데 지도 검색 결과처럼 항목이 많은 목록에서는 이렇게 하면 앞쪽 항목이 통째로 사라져 있습니다. 지도 업체 수집 도구를 만들며 이 함정에 정면으로 부딪혔고 스크롤과 파싱을 엮는 방식을 다시 설계해야 했습니다.

지나간 항목이 사라지는 이유

원인은 가상 스크롤이라는 기법에 있습니다. 수백 개의 항목을 한꺼번에 화면 요소로 만들어 두면 브라우저가 느려지므로, 요즘 목록은 지금 화면에 보이는 근처의 항목만 실제 요소로 두고 스크롤로 벗어난 항목은 요소에서 지웁니다. 사용자에게는 긴 목록을 매끄럽게 넘기는 것처럼 보이지만 실제로 존재하는 요소는 보이는 창 주변의 일부뿐입니다. 그래서 끝까지 내린 시점에는 마지막 근처의 항목만 남고 처음에 봤던 항목은 이미 요소에서 제거된 상태입니다.

이 사실을 모르면 결과가 이상하게 적게 나오는데 이유를 찾기 어렵습니다. 분명히 화면으로는 수백 개를 넘겼는데 읽어 보면 마지막 수십 개뿐이니까요. 코드에는 버그가 없고 목록도 분명히 길었는데 결과만 잘려 있는 상황이라, 파싱 로직을 아무리 뜯어봐도 원인이 안 보입니다. 문제는 파싱이 아니라 언제 읽느냐에 있었습니다.

스크롤하며 매 단계 누적한다

해법은 읽는 시점을 바꾸는 것입니다. 끝까지 내린 뒤 한 번에 읽는 대신, 스크롤을 조금 진행할 때마다 그 시점에 화면에 있는 항목을 읽어 누적합니다. 스크롤이 앞쪽 항목을 지우기 전에 그때그때 건져 두는 것입니다. 항목마다 고유 식별자가 있으니 이미 담은 것은 건너뛰고 새로 등장한 것만 더하면, 스크롤이 끝날 무렵에는 처음부터 끝까지의 항목이 빠짐없이 모여 있습니다. 한 번의 큰 읽기를 여러 번의 작은 읽기로 나눈 셈입니다.

이 방식은 가상 스크롤의 동작을 거스르지 않고 그대로 활용합니다. 화면에 잠깐 나타났다 사라지는 창을 스크롤로 밀고 가며 그 창에 담긴 것을 순간순간 포착하는 것이라, 목록이 아무리 길어도 요소가 몇 개만 유지되든 상관없이 전체를 훑을 수 있습니다. 매 단계 읽기가 조금씩 겹치므로 중간에 빠지는 항목도 없습니다.

언제 멈출지 판별하기

남는 문제는 끝을 아는 것입니다. 스크롤을 계속 내리다 보면 더 이상 새 항목이 나오지 않는 순간이 옵니다. 하지만 한 번 새 항목이 없다고 바로 멈추면 위험합니다. 목록이 다음 묶음을 불러오는 데 잠깐 시간이 걸리는 것뿐일 수 있기 때문입니다. 그래서 새 항목이 나오지 않는 상태가 일정 횟수 이어질 때 비로소 끝으로 판단합니다. 로딩 지연과 진짜 끝을 구별하기 위한 여유입니다.

여기에 한 가지 안전장치를 더 얹었습니다. 새 항목 수만 보지 않고 목록의 스크롤 위치가 실제로 더 내려갔는지도 함께 봅니다. 항목 수는 그대로여도 스크롤이 계속 움직이면 아직 로딩 중일 수 있고 항목도 안 늘고 위치도 멈췄으면 진짜 바닥입니다. 끝이라고 성급히 판단하기 전에 한 번 더 스크롤하고 잠깐 기다렸다가 마지막으로 확인하는 여지도 두었습니다. 이런 겹겹의 판별이 있어야 붐비는 도심의 긴 목록도 중간에 놓치지 않고 끝까지 담깁니다.

이렇게 건져 낸 항목들은 수집 데이터 정규화와 CSV로 다듬어지고 여러 칸에 걸친 중복은 중단 후 이어받는 크롤러의 전역 중복 제거로 정리됩니다. 전체 시스템은 지도 업체 정보 수집 자동화 사례에 있습니다.

자주 묻는 질문

왜 끝까지 스크롤한 뒤 읽으면 안 되나요?

가상 스크롤 목록은 화면에서 벗어난 항목을 요소에서 지우기 때문입니다. 끝까지 내린 시점에는 마지막 근처의 항목만 남아 있어 그때 한 번에 읽으면 처음에 지나간 항목이 통째로 빠집니다. 그래서 스크롤 도중에 매 단계 읽어 누적해야 합니다.

매 단계 읽으면 같은 항목을 중복으로 담지 않나요?

각 항목의 고유 식별자를 기준으로 이미 담은 것은 건너뛰고 새로 등장한 것만 더합니다. 읽기 구간이 조금씩 겹쳐도 식별자로 걸러지므로, 누락 없이 그리고 중복 없이 전체 목록을 모을 수 있습니다.

언제 스크롤을 멈추나요?

새 항목이 더 나오지 않는 상태가 일정 횟수 이어지고 스크롤 위치도 더 내려가지 않을 때 끝으로 봅니다. 한 번 새 항목이 없다고 바로 멈추면 로딩 지연을 끝으로 오해할 수 있어 여유를 두고 한 번 더 확인한 뒤 마칩니다.

#가상스크롤#HTML파싱#크롤링#스크래핑

업무자동화 구축이 필요하신가요?

무료 상담 신청