dnd-kit, 그냥 쓰면 안 되는 이유 (dnd-kit 덮어쓰기 여정)

분야

프로그래밍/소프트웨어 개발

대상자

React 기반 드래그 앤 드롭 UI 개발자, 커스터마이징이 필요한 UX 구현자

• 난이도: 중급~고급 (dnd-kit 내부 로직 이해 필요)

핵심 요약

• *핵심요약_내용**
• dnd-kit은 React 친화적인 설계로 유연한 UX 구현이 가능하지만, 특정 조건(폴더 내 아이템 이동)에서는 기본 로직 커스터마이징이 필수적입니다.
• Collision Detection을 통해 드래그 중 충돌 감지가 이루어지지만, 폴더 활성화 조건은 좌표 기준이 아닌 시간 기준으로 변경해야 했습니다.
• transform 속성을 사용해 시각적 이동 효과를 구현하지만, 실제 DOM 순서 변경은 UI 간섭 최소화를 위해 제외했습니다.
• dnd-kit의 useSortable은 자동으로 드래그 핸들, 변형 스타일 등을 제공하지만, 커스터마이징 없이는 특정 UX 요구사항을 충족할 수 없습니다.

섹션별 세부 요약

1. dnd-kit 기반 기본 구현 및 문제점

• dnd-kit useSortable은 아이템의 드래그 가능성을 자동 설정하고, 충돌 감지로 순서 변경을 관리합니다.
• 폴더 내 아이템 이동은 기본 로직에서 제외되며, 드래그 중 폴더 위에 머무는 시간을 기준으로 활성화 여부를 판단해야 했습니다.
• Collision Detection 커스터마이징 시, 폴더 아이템의 중심 좌표 계산과 임계값 기반 필터링을 통해 swap 방지 로직을 구현했습니다.

2. 시간 기준 폴더 활성화 로직 개선

• 200ms 이상 폴더 위에 머무르면 drop 활성화 상태로 전환하고, 드래그 종료 시 실제 이동/정렬 처리를 합니다.
• transform 속성 대신 UI 인디케이터를 사용해 예측 가능성을 강화했습니다.
• handleDragMove, handleDragEnd, handleDragOver 3단계로 드래그 동작 타이밍 및 방향 감지를 구현해 UX 혼란 감소.

결론

• dnd-kit은 유연하지만, 특정 UX 요구사항 충족을 위해 내부 로직 커스터마이징이 필수적입니다.
• 시간 기준 폴더 활성화는 시각적 혼란을 줄이고, 클라이언트 코드를 간소화하는 효과가 있습니다.
• transform 속성 대신 UI 인디케이터를 사용해 DOM 순서 변경 없이 시각적 이동 효과를 제공하는 방식이 효과적입니다.
• 라이브러리 사용을 넘어 커스터마이징 능력이 UI/UX 개선에 핵심적인 역할을 합니다.