라이브러리 없이 드래그로 순서 바꾸기, 1인 브랜드가 직접 만든 이유

혼자 브랜드를 운영하다 보면 순서를 바꿔야 하는 목록이 참 많아요. 이번 주에 올릴 콘텐츠 순서, 랜딩 페이지에 보여줄 섹션 순서, 오늘 처리할 우선순위 목록까지요. 손으로 끌어서 바꾸고 싶은데, 그때마다 드래그 라이브러리를 설치해야 하나 싶은 순간이 있죠.

혹시 이런 적 없나요? 작은 기능 하나 붙이려다 수십 KB짜리 패키지를 얹고, 의존성 목록만 길어지는 경우요.

포인터 이벤트 세 개면 충분해요

브라우저에는 이미 포인터 이벤트가 들어 있어요. 마우스·터치·펜을 하나로 묶어주는 표준이라, 데스크톱과 모바일을 따로 짤 필요가 없어요. 핵심은 세 개예요. 누를 때 pointerdown, 움직일 때 pointermove, 뗄 때 pointerup.

pointerdown(집는다)→pointermove(위치 감지·자리 교체)→pointerup(순서 확정)

동작 흐름은 단순해요. pointerdown에서 어떤 항목을 집었는지 기억하고, pointermove에서 지금 어느 항목 위에 있는지 계산해 자리를 바꿔주고, pointerup에서 최종 순서를 저장하면 끝이에요. 여기에 setPointerCapture 한 줄만 더하면 손가락이 항목 밖으로 나가도 이벤트를 놓치지 않아요.

직접 만들어 보니 핵심 로직은 40줄 안쪽으로 끝났어요. 10분 정도면 동작하는 초안이 나오더라고요.

왜 1인 브랜드에 이게 맞을까요

플랜비(plan-b)에서 출전 로테이션 순서를 바꾸는 화면에 이 방식을 적용해 봤어요. 선수 카드 8개를 끌어서 재배치하는 건데, 라이브러리 없이도 부드럽게 돌아갔어요.

혼자 만드는 입장에서는 이게 몇 가지로 남아요. 의존성이 없으니 나중에 어떤 라이브러리가 업데이트를 끊어도 무너질 일이 없고요. 내가 짠 코드라 색이나 움직임을 브랜드 톤에 그대로 맞출 수 있어요. 번들도 가벼워서 로딩이 빨라요.

• ✓의존성 0
• ✓브랜드 톤 그대로
• ✓가벼운 번들

순서를 바꾼다는 건 우선순위를 본다는 것

사실 이 기능은 콘텐츠 운영에서 더 자주 써요. 이번 주 발행할 글을 끌어서 앞뒤로 옮겨 보면, 지금 브랜드가 뭘 먼저 말하고 싶은지가 눈에 보여요. 목록을 손으로 만지작거리는 그 감각이, 머릿속 우선순위를 정리하는 과정이더라고요.

돌려 보니 결국 도구가 거창할 필요는 없었어요. 작은 도구 하나가 반복을 줄여주고, 그 줄어든 시간에 진짜 콘텐츠를 고민하게 돼요. 플랜엘(plan-l)처럼 월 3건 무료로 시작한 작은 서비스도, 이런 소소한 직접 구현이 쌓여서 만들어졌고요.

라이브러리를 얹기 전에 한 번만 물어보세요. "이거, 있는 걸로 되지 않을까?" 대개는 이미 브라우저 안에 답이 있어요.