카카오웹툰 검색창 커서 끝 이동 구현: setSelectionRange와 setTimeout 0ms 활용기

카카오웹툰 검색 페이지에서 긴 제목의 작품을 검색 후 입력창에 포커스할 때, 커서가 클릭한 위치가 아닌 텍스트의 가장 끝으로 이동하도록 구현한 사례입니다. 단순히 scrollLeft만 조절하면 화면은 스크롤되지만 커서는 원래 위치에 남아 백스페이스나 입력 시 문제가 발생했습니다.

setSelectionRange 활용

커서 위치를 제어하기 위해 HTMLInputElement.setSelectionRange() 메소드를 사용했습니다. selectionStart와 selectionEnd에 동일한 인덱스(여기서는 최대 글자 수인 50)를 지정하면 특정 영역 선택이 아닌 커서 위치 지정이 가능합니다. 이때 scrollLeft를 약 30px 단위로 계산해 함께 조절하여 시각적 스크롤도 끝으로 이동시켰습니다.

타이밍 이슈와 setTimeout 해결

focus 이벤트 리스너에서 바로 실행하면 브라우저의 기본 클릭 동작이 콜백보다 늦게 처리되어 커서가 클릭 위치로 되돌아오는 버그가 있었습니다. mouseup 이벤트로 변경하면 키보드 접근성 문제가 생기고, setTimeout을 사용해 콜백 실행을 지연시키면 해결됩니다. setTimeout의 지연 시간을 0ms로 설정해도 이벤트 루프 특성상 최소 4ms 정도의 지연이 발생하여 브라우저 기본 동작보다 늦게 커서 위치가 확정되므로, 0ms 지연으로 타이밍 문제를 효과적으로 해결할 수 있었습니다.