2024-08-28-TIL
2024-08-28-TIL
Today I Learned
Infinite Scroll vs Pagination
- https://velog.io/@eunoia/%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4Infinite-scroll-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
- https://www.bucketplace.com/post/2020-09-10-%EC%98%A4%EB%8A%98%EC%9D%98%EC%A7%91-%EB%82%B4-%EB%AC%B4%ED%95%9C%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B0%9C%EB%B0%9C%EA%B8%B0/
- https://brunch.co.kr/@theopenproduct/58
- https://brunch.co.kr/@ebprux/99
무한 스크롤은 사용자가 아래로 내릴 때마다 다음 콘텐츠를 이어서 불러와, 페이지를 넘길 필요를 없앤 방식이다. 페이지네이션은 콘텐츠를 페이지 단위로 나누고 사용자가 다음 페이지를 직접 고른다.
Nielsen Norman Group은 둘을 고르는 기준을 사용자의 목적으로 둔다. 계속 흘러들어오고 구조가 평평한 콘텐츠, 즉 항목마다 위계가 같고 어느 것이 흥미로울지 비슷한 피드에서는 무한 스크롤이 맞다. 다음 페이지를 누르는 수고가 없어서 탐색에 몰입하게 된다. 반대로 특정 항목을 찾거나 여러 선택지를 비교하는 목표 지향 작업에는 권하지 않는다. 앞서 본 항목을 다시 찾기 어렵고(“3페이지에 있었다”고 기억하는 편이 쉽다), 끝이 보이지 않아 부담을 주며, 스크롤바가 남은 분량을 제대로 보여 주지 못하기 때문이다. 페이지네이션은 시작과 끝이 있어서 한 페이지를 다 봤다는 완료감과 계속 볼지 말지를 고르는 통제권을 준다.
구현 쪽에서는 스크롤 이벤트를 직접 계산하기보다 Intersection Observer API를 쓴다. 목록 끝에 둔 요소가 화면에 들어오는지를 비동기로 관찰하고, 들어오면 다음 데이터를 요청한다. MDN도 이 API의 대표 용도로 이미지 지연 로딩과 무한 스크롤을 든다.
목록이 길어지면 DOM 노드가 계속 늘어나는 문제가 남는다. 오늘의집 글은 화면에 보이는 항목만 그리는 가상 리스트를 직접 구현한 사례다. 피드 카드의 높이가 제각각이라 높이를 고정할 수 없어서, 지금까지 본 노드들의 평균 높이로 근사하고, 한 줄에 여러 카드가 놓이는 경우는 한 줄씩 묶어서 계산했다고 한다.
데이터를 가져오는 부분도 같이 볼 만하다. 당시 오늘의집은 SPA가 아니어서 지금까지 본 피드를 메모리에 계속 들고 있을 수 없었다. 그래서 페이지 내용 대신 어떤 페이지를 어떻게 불러왔는지에 대한 커서 정보만 sessionStorage에 저장하고, 스크롤 위치에 필요한 페이지만 다시 가져오도록 했다. API는 ‘1 페이지’, ‘2 페이지’처럼 가져오는 페이지 기반이었고, 커서 기반 API에서는 가장 가까운 페이지의 앞뒤 커서로 내용을 가져오게 했다고 한다. 무한 스크롤이라도 뒤로 가기를 했을 때 보던 위치로 돌아오게 하려면 이런 상태 저장이 따로 필요하다.
AI 키워드: GPT-4o mini
OpenAI가 7월 18일 GPT-4o mini를 공개했다. GPT-4o의 작고 저렴한 버전으로, ChatGPT에서 GPT-3.5 Turbo를 대체했다. 컨텍스트 창은 128K 토큰, 요청당 출력은 최대 16K 토큰이고, MMLU 82%를 기록했다고 한다. 여러 모델 호출을 이어 붙이거나 큰 컨텍스트를 자주 넘겨야 하는 애플리케이션을 겨냥했다. 가장 똑똑한 모델보다 싸고 빠른 모델을 여러 번 부르는 쪽이 맞는 일도 많다는 말이구나.
댓글
아직 댓글이 없습니다