페이지네이션2 자동완성 드롭다운 (바닐라JS, 페이지네이션, UX패턴) 운영자 4명이 동시에 항의 메일을 보내온 날, 저는 제가 얼마나 틀렸는지를 실감했습니다. 무한 스크롤을 구현하고 뿌듯해하던 게 불과 사흘 전이었는데, 그날 이후로 저는 '편한 UI'와 '쓰기 좋은 UI'가 다르다는 걸 몸으로 배웠습니다. 이 글은 그 경험에서 출발합니다.바닐라JS로 자동완성 드롭다운 만들기자동완성 기능은 구현 자체는 단순합니다. 프레임워크 없이 순수 바닐라 JavaScript만으로도 충분히 만들 수 있습니다. 제가 직접 써봤는데, 핵심은 이벤트 리스너(Event Listener)를 input 요소에 거는 것입니다. 여기서 이벤트 리스너란 특정 동작이 발생했을 때 실행할 함수를 등록해두는 메커니즘으로, 사용자가 키를 누를 때마다 실시간으로 반응하게 만드는 장치입니다.구현 흐름은 이렇습니다... 2026. 6. 3. 데이터 테이블 UX (배경, 핵심 설계, 실전 적용) 어드민 데이터 테이블을 전면 개편하면서 3일 연속 풀타임으로 매달린 적이 있습니다. 솔직히 시작 전에는 "레이아웃 좀 다듬으면 되겠지"라고 가볍게 봤는데, 막상 들어가 보니 그게 아니었습니다. 1만 행 이상의 데이터를 다루는 운영자들이 하루에도 수백 번씩 들여다봐야 하는 화면이라는 걸 실감하고 나서야, 데이터 테이블이 단순한 레이아웃 작업이 아니라는 걸 깨달았습니다.왜 데이터 테이블이 UX에서 가장 어려운 과제인가국내 B2B SaaS 어드민을 보면 공통적인 패턴이 있습니다. 페이지 하단에 단순 페이지네이션, 좁은 컬럼, 작은 폰트. 이 조합이 운영자의 실수율을 가장 빠르게 높이는 구조라고 제 경험상 확신합니다. 틀린 행을 수정하거나, 금액을 잘못 읽거나, 상태값을 오인하는 일이 반복되는 환경의 공통점이 .. 2026. 4. 29. 이전 1 다음
