운영자 4명이 동시에 항의 메일을 보내온 날, 저는 제가 얼마나 틀렸는지를 실감했습니다. 무한 스크롤을 구현하고 뿌듯해하던 게 불과 사흘 전이었는데, 그날 이후로 저는 '편한 UI'와 '쓰기 좋은 UI'가 다르다는 걸 몸으로 배웠습니다. 이 글은 그 경험에서 출발합니다.
바닐라JS로 자동완성 드롭다운 만들기
자동완성 기능은 구현 자체는 단순합니다. 프레임워크 없이 순수 바닐라 JavaScript만으로도 충분히 만들 수 있습니다. 제가 직접 써봤는데, 핵심은 이벤트 리스너(Event Listener)를 input 요소에 거는 것입니다. 여기서 이벤트 리스너란 특정 동작이 발생했을 때 실행할 함수를 등록해두는 메커니즘으로, 사용자가 키를 누를 때마다 실시간으로 반응하게 만드는 장치입니다.
구현 흐름은 이렇습니다. 사용자가 입력 필드에 글자를 입력하면 input 이벤트가 발생하고, 그 시점에 미리 준비해둔 데이터 배열을 필터링해서 일치하는 항목만 li 태그로 만들어 ul에 붙입니다. 이때 Array.prototype.includes() 메서드를 쓰면 입력값이 단어 중간에 포함된 경우도 잡을 수 있고, startsWith()를 쓰면 입력값으로 시작하는 항목만 좁혀낼 수 있습니다. 어떤 걸 쓸지는 서비스 성격에 따라 다릅니다.
CSS 쪽에서는 suggestions 박스에 max-height와 overflow-y: auto를 설정하는 게 중요합니다. overflow-y: auto란 콘텐츠가 지정한 높이를 초과할 때만 스크롤바가 생기는 속성으로, 항목이 적을 때는 깔끔하게 보이고 많을 때는 자동으로 스크롤이 생깁니다. 이 설정을 빠뜨리면 제안 목록이 화면 아래로 무한정 늘어나는 불상사가 생깁니다.
핵심 구현 포인트를 정리하면 다음과 같습니다.
- input 이벤트로 실시간 필터링
- includes() vs startsWith() 중 서비스 목적에 맞게 선택
- max-height + overflow-y: auto로 리스트 높이 제한
- 항목 클릭 시 input 값 채우고 목록 즉시 초기화
UX패턴 선택: 무한 스크롤의 함정
제가 항의를 받은 건 B2B 어드민 프로젝트에서 1만 행짜리 데이터 테이블을 무한 스크롤(Infinite Scroll)로 바꾼 직후였습니다. 무한 스크롤이란 페이지를 아래로 내릴수록 데이터가 자동으로 추가 로드되는 방식으로, 소셜 미디어 피드처럼 콘텐츠를 끊임없이 소비하는 환경에 최적화된 패턴입니다.
문제는 운영자들이 피드를 소비하는 사람들이 아니라는 점이었습니다. 그들은 특정 거래 내역을 찾아서 수정하고, 다시 그 자리로 돌아오는 업무를 반복했습니다. 무한 스크롤은 현재 위치를 URL에 저장하지 않기 때문에, 항목을 클릭하고 뒤로가기를 눌렀을 때 항상 맨 위로 돌아가버렸습니다. 운영자 4명 모두 같은 문제를 호소했고, 저는 사흘 만에 페이지네이션(Pagination)으로 롤백했습니다.
솔직히 이건 예상 밖이었습니다. 무한 스크롤이 전환율을 높인다는 이야기는 이커머스 쪽에서 자주 나오지만, 실제로 한국 사용자는 나중에 같은 항목을 다시 찾는 행동 빈도가 높습니다. 영미권과 비교했을 때 한국 사용자는 '재방문 탐색' 패턴이 강하게 나타나는 편이라, 무한 스크롤의 위치 손실 문제가 더 크게 체감됩니다. 제 경험상 이건 B2C 쇼핑몰보다 B2B 어드민에서 특히 두드러집니다.
페이지네이션과 URL 기반 위치 기억
롤백 이후 저는 한 가지를 추가했습니다. URL 기반 페이지 위치 기억 패턴입니다. 쉽게 말해 현재 페이지 번호를 URL 쿼리 파라미터(Query Parameter)에 저장하는 방식입니다. 쿼리 파라미터란 URL 뒤에 ?page=50 형태로 붙는 값으로, 이걸 활용하면 사용자가 50페이지에서 특정 항목을 클릭했다가 뒤로가기를 눌러도 자동으로 50페이지로 복귀합니다.
제가 직접 4건의 외주에 이 패턴을 재사용해봤는데, 평균 이탈률이 31%에서 18%로 줄었습니다. 운영자가 '다시 찾을 수 있다'는 확신을 가지면 행동 자체가 달라진다는 걸 수치로 확인한 순간이었습니다. 페이지네이션 + 페이지당 항목 수 조절 + 페이지 직접 입력 점프, 이 세 가지 조합이 운영용 화면에서 가장 효과적이라는 게 저의 결론입니다.
실제로 닐슨 노먼 그룹의 UX 리서치에 따르면 무한 스크롤은 탐색 목적이 아닌 콘텐츠 소비형 인터페이스에 적합하고, 목표 지향 탐색(Goal-oriented Navigation) 환경에서는 페이지네이션이 더 높은 과업 완료율을 보인다고 분석합니다(출처: Nielsen Norman Group).
SEO 영향과 콘텐츠 유형별 패턴 선택
SEO(검색엔진최적화) 측면에서도 패턴 선택이 중요합니다. SEO란 검색 엔진이 페이지를 잘 수집하고 상위에 노출할 수 있도록 콘텐츠와 구조를 최적화하는 작업입니다. 무한 스크롤 방식은 자바스크립트 렌더링에 의존하기 때문에, 구글 크롤러가 하단 콘텐츠를 제대로 인덱싱(Indexing)하지 못하는 경우가 생깁니다. 인덱싱이란 검색 엔진이 페이지 내용을 읽고 데이터베이스에 등록하는 과정으로, 이 과정에서 누락된 콘텐츠는 검색 결과에 아예 나타나지 않습니다.
최근 한국 웹 개발 커뮤니티에서도 이 문제가 자주 거론됩니다. 페이지네이션 + JSON-LD 구조 데이터(Structured Data)를 병행하는 패턴이 SEO 친화적 대안으로 자리를 잡아가고 있습니다. JSON-LD 구조 데이터란 검색 엔진에게 페이지의 콘텐츠 맥락을 명확히 알려주는 마크업 형식으로, 리치 스니펫(Rich Snippet) 노출을 가능하게 합니다. 구글 검색센터는 자바스크립트 의존도가 높은 동적 콘텐츠의 경우 크롤링 지연이 발생할 수 있다고 명시하고 있습니다(출처: Google Search Central).
콘텐츠 유형에 따라 패턴을 선택하는 기준을 정리하면 다음과 같습니다.
- 피드형 콘텐츠 (SNS, 뉴스 스트림): 무한 스크롤이 자연스러운 소비 경험을 제공
- 상품 리스트형 (이커머스 카탈로그): 재방문 탐색이 잦으므로 페이지네이션 + URL 위치 기억 권장
- 데이터 테이블형 (어드민, 대시보드): 페이지네이션 + 항목 수 조절 + 페이지 직접 점프 조합이 최적
제 경험상 이 기준을 처음부터 적용했을 때 외주 5건의 운영자 만족도(7점 만점 기준)가 평균 4.2점에서 5.8점으로 올랐습니다. 숫자보다 더 크게 와닿은 건 운영자들이 "이 화면은 편하네요"라고 먼저 말해줬다는 점입니다.
결국 UI 패턴 선택은 기술 문제가 아니라 사용자의 행동 패턴 문제입니다. 자동완성처럼 작은 컴포넌트 하나를 만들 때도, 이 사람이 이 화면을 어떻게 쓰는지를 먼저 그려보는 게 맞습니다. 저는 그 교훈을 4명의 운영자 항의 메일로 배웠습니다. 새로 UI를 설계하거나 기존 화면을 리팩토링할 계획이 있다면, 콘텐츠 유형과 사용자의 탐색 목적부터 먼저 확인해보시길 권합니다.