[iOS / Uikit] 드래그 앤 드랍 구현하기 :interactiveMovement

최근에 멜론뮤직 클론코딩 프로젝트를 진행하였는데요!
해당 프로젝트에서는 컬렉션뷰에서 셀 전체가 아니라 셀 내부의 특정 버튼을 눌렀을 때만 드래그앤드랍이 동작해야 했습니다.

 

 

UIKit에서 Drag & Drop을 구현하는 방법은 크게 두 가지가 있어요.

1. UICollectionViewDragDelegate와 UICollectionViewDropDelegate를 사용하는 방식
2. LongPress 제스처를 활용하는 방식

두 가지 방식이 어떻게 다른지 간단히 정리해볼까요?

---

1) UICollectionViewDragDelegate · UICollectionViewDropDelegate 사용

UIKit에서 공식적으로 제공하는 Drag & Drop 방식입니다.

iOS 11 이후로 도입된 시스템 인터랙션이라 기본 제스처와 애니메이션이 자연스럽게 동작하고,

미리 제공되는 다양한 기능을 그대로 활용할 수 있다는 장점이 있어요.

장점

• 시스템에서 제공하는 기본 드래그 동작이 매우 자연스럽습니다.
• 다른 제스처와 충돌이 거의 없습니다.
• drag / drop 상태에 따라 delegate가 명확하게 분리되어 있어 유지보수하기 편합니다.
• 외부 앱 간 drag & drop도 기본적으로 지원합니다.

단점

• 셀 전체를 길게 눌렀을 때만 드래그가 시작되기 때문에, 버튼을 누를 때만 드래그를 시작해야 하는 UI와는 맞지 않습니다.
• 드래그 중 셀 외형(색상, 그림자 등)을 직접 제어하기 어렵습니다.

2) LongPressGestureRecognizer를 이용한 interactiveMovement

두 번째 방식은 LongPress 제스처를 컬렉션뷰(또는 특정 버튼) 위에 직접 달고, 제스처 상태에 따라
beginInteractiveMovement, updateInteractiveMovement, endInteractiveMovement를 호출하는 구조입니다.

 

장점

• 버튼을 눌러서만 드래그를 시작하는 UI처럼 커스텀 요구사항을 구현하기 좋습니다.
• 드래그 시작 시 셀 확대, 그림자 추가 등 비주얼 커스터마이징이 자유롭습니다.
• 시스템 DragDelegate보다 동작 제어 범위가 넓습니다.

단점

• x축 흔들림, indexPath nil 문제 등 예외 처리를 직접 해줘야 합니다.
• 시스템 기본 Drag & Drop보다 제스처 충돌 가능성이 있습니다.

 

저는 셀 전체가 아니라 셀 안의 특정 버튼을 눌렀을 때만 드래그앤드랍이 시작되어야 했기 때문에, 
LongPressGestureRecognizer를 사용해 구현했습니다!

---

1. 버튼에 LongPress 제스처 연결하기

먼저 드래그를 시작할 버튼(menuIconView)에 LongPress 제스처를 추가합니다.

menuIconView.isUserInteractionEnabled = true
menuIconView.addGestureRecognizer(
    UILongPressGestureRecognizer(target: self, action: #selector(handleDrag(_:)))
)

UILongPressGestureRecognizer의 기본 press duration은 0.5초입니다.

반응 시간을 더 빠르게 하고 싶다면 아래처럼 조절할 수 있어요.

let longPress = UILongPressGestureRecognizer(target: self,
                                             action: #selector(handleDrag(_:)))
longPress.minimumPressDuration = 0.0   // 원하는 시간으로 변경
menuIconView.addGestureRecognizer(longPress)

2. 드래그 동작을 처리하는 handleDrag 구현

@objc private func handleDrag(_ gesture: UILongPressGestureRecognizer) {
    guard let cv = superview as? UICollectionView else { return }
    guard let indexPath = cv.indexPath(for: self) else { return }

    switch gesture.state {
    case .began:
        cv.beginInteractiveMovementForItem(at: indexPath)

    case .changed:
        let location = gesture.location(in: cv)

        // 좌우로 흔들리지 않도록 x 값을 고정했어요!
        let fixedLocation = CGPoint(x: self.center.x, y: location.y)
        cv.updateInteractiveMovementTargetPosition(fixedLocation)

    case .ended:
        cv.endInteractiveMovement()

    default:
        cv.cancelInteractiveMovement()
    }
}

드래그 중인 셀은 사용자의 손가락 위치를 실시간으로 따라가야 하겠죠?

따라서 gesture가 전달하는 (x, y) 좌표 값을 기반으로 이동 위치를 계속 업데이트해줘야 해요.

그런데 이때.. 아래와 같은 문제가 발생할 때도 있습니다.

 

 

interactiveMovement는 기본적으로 x축·y축 전체를 그대로 따라가기 때문에,
리스트뷰에서는 셀이 좌우로 흔들리는 문제가 생길 수 있어요.

Solution: x축 고정으로 흔들림 해결하기

문제를 해결하기 위해서 아래 코드처럼 x 값을 self.center.x로 고정해 상하 이동만 가능하도록 구현하면 됩니다!

let fixedLocation = CGPoint(x: self.center.x, y: location.y)
cv.updateInteractiveMovementTargetPosition(fixedLocation)

 

 

그럼 요렇게 해결됩니다~

3. CollectionView 설정

뷰컨트롤러에서도 dragInteraction을 비활성화하고 기본 설정을 넣어줬습니다.

private func setupCollectionView() {
    cv.dragInteractionEnabled = false
    cv.isUserInteractionEnabled = true
    cv.isScrollEnabled = true
}

그리고 이동된 순서를 실제 데이터에 반영하는 코드가 꼭 필요해요!

extension MixUpViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView,
                        moveItemAt sourceIndexPath: IndexPath,
                        to destinationIndexPath: IndexPath) {

        let moved = music.remove(at: sourceIndexPath.item)
        music.insert(moved, at: destinationIndexPath.item)
    }
}

 

데이터 배열을 업데이트하지 않으면 UI는 움직이지만 실제 모델의 순서는 변경되지 않기 때문에 필수입니다.

---

 

이렇게 하면 기본적인 드래그앤드랍 기능은 완성됩니다.

 

 

하지만 여기까지 구현하면 조금 밋밋하게 느껴질 수 있어요.

이제 드래그앤드랍에 시각적 효과를 추가해볼까요?

 

+ 드래그 시 셀 확대 효과 넣기

case .began:
    cv.beginInteractiveMovementForItem(at: indexPath)

    UIView.animate(withDuration: 0.15) {
        self.transform = CGAffineTransform(scaleX: 1.03, y: 1.03)
    }

case .ended:
    cv.endInteractiveMovement()

    UIView.animate(withDuration: 0.15) {
        self.transform = .identity
    }

default:
    cv.cancelInteractiveMovement()
    UIView.animate(withDuration: 0.15) {
        self.transform = .identity
    }

 

+ 드래그 중 그림자 효과 추가하기

case .began:
    UIView.animate(withDuration: 0.15) {
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOpacity = 0.25
        self.layer.shadowRadius = 8
        self.layer.shadowOffset = CGSize(width: 0, height: 3)
    }

case .ended:
    UIView.animate(withDuration: 0.15) {
        self.layer.shadowOpacity = 0
        self.transform = .identity
    }

 

모든 코드를 추가해주면, 결과는 요렇게 나옵니다~~!