[swift] PeekPop을 이용한 사진 편집 앱의 작업 힌트 미리보기 구현 방법

16 Nov 2023

swift

사진 편집 앱을 개발하는 과정에서 사용자가 이미지 위에 있는 작업 힌트를 미리볼 수 있는 기능을 추가하고 싶다면, PeekPop을 사용하여 이를 구현할 수 있습니다. 이 기능은 3D Touch를 지원하는 디바이스에서만 동작합니다.

PeekPop 개요

PeekPop은 3D Touch 기능을 이용하여 앱 내부의 콘텐츠를 미리보거나 세부 정보를 표시하는 기능입니다. PeekPop은 앱 내부에서 특정 뷰나 콘텐츠에 대한 미리보기를 제공하고, 사용자가 강력한 압력을 가하면 세부 정보를 보여줍니다. 이를 활용하여 사진 편집 앱의 작업 힌트를 구현할 수 있습니다.

작업 힌트 미리보기 구현 방법

3D Touch 기능을 지원하는지 확인 사용자가 사용하는 디바이스가 3D Touch를 지원하는지 확인해야 합니다. 다음 코드를 사용하여 디바이스의 3D Touch 지원 여부를 확인할 수 있습니다.
```
if view.traitCollection.forceTouchCapability == .available {
  // 3D Touch 지원
} else {
  // 3D Touch 미지원
}
```

PeekPop 구현 PeekPop을 사용하기 위해 UIViewControllerPreviewingDelegate 프로토콜을 적용한 후, registerForPreviewing(with:sourceView:) 메서드로 previewing을 등록합니다. 다음은 PeekPop을 구현하는 예시 코드입니다.

class PhotoEditingViewController: UIViewController, UIViewControllerPreviewingDelegate {
     
  override func viewDidLoad() {
    super.viewDidLoad()
       
    if traitCollection.forceTouchCapability == .available {
      // 3D Touch 지원시 PeekPop 등록
      registerForPreviewing(with: self, sourceView: view)
    }
  }
     
  // PeekPop 미리보기를 위한 메서드 구현
  func previewingContext(_ previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
    // 미리보기를 제공할 뷰 컨트롤러 생성
    let previewViewController = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "PreviewViewController") as! PreviewViewController
       
    // 미리보기 뷰 컨트롤러에 작업 힌트 이미지 설정
    previewViewController.hintImage = UIImage(named: "hint_image")
       
    return previewViewController
  }
     
  // PeekPop 세부 정보를 보여주는 메서드 구현
  func previewingContext(_ previewingContext: UIViewControllerPreviewing, commit viewControllerToCommit: UIViewController) {
    // 세부 정보를 보여줄 뷰 컨트롤러를 전환
    show(viewControllerToCommit, sender: self)
  }
     
}

미리보기 뷰 컨트롤러 구현 미리보기를 제공할 뷰 컨트롤러를 생성하고, 작업 힌트 이미지를 표시하는 기능을 구현합니다. 또한, 세부 정보를 보여줄 뷰 컨트롤러로 이동하는 기능을 구현할 수도 있습니다.

class PreviewViewController: UIViewController {
     
  @IBOutlet weak var hintImageView: UIImageView!
  var hintImage: UIImage?
     
  override func viewDidLoad() {
    super.viewDidLoad()
       
    // 작업 힌트 이미지 표시
    hintImageView.image = hintImage
  }
     
  // 세부 정보를 보여줄 뷰 컨트롤러로 이동하는 액션
  @IBAction func showDetails(_ sender: UIButton) {
    // 세부 정보를 보여줄 뷰 컨트롤러로 전환
    let detailsViewController = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "DetailsViewController") as! DetailsViewController
    navigationController?.pushViewController(detailsViewController, animated: true)
  }
     
}

위의 코드는 간단한 예시일 뿐이며, 실제 앱에 적용할 때에는 필요에 따라 Customize하거나 확장할 수 있습니다.

결론

PeekPop을 활용하여 사진 편집 앱에서 작업 힌트의 미리보기 기능을 구현하는 방법을 알아보았습니다. 사용자가 작업 힌트를 미리 볼 수 있으면 사용자 경험이 향상되고, 앱의 기능을 소개하기 위한 용도로도 활용할 수 있습니다. 다양한 기능을 갖춘 사진 편집 앱을 개발하고자 한다면, PeekPop을 고려해보세요.

PeekPop 개요

작업 힌트 미리보기 구현 방법

결론

참고 자료