스위프트로 UIKIT 방식 아이폰앱 개발, 이미지 뷰어 만들기

본 강좌에서는 스위프트(Swift) 언어와 UIKit 프레임워크를 사용하여 간단한 이미지 뷰어 애플리케이션을 만드는 방법을 다룰 것입니다. 이 애플리케이션은 사용자가 선택한 이미지를 화면에 표시하고, 이미지를 확대/축소할 수 있는 기능을 포함합니다. 이 강좌는 iOS 애플리케이션 개발에 대한 기초 지식을 갖춘 분들을 위한 것입니다.

목차

  1. 프로젝트 설정하기
  2. 기본 UI 구성하기
  3. 이미지 선택 기능 구현하기
  4. 이미지 뷰어 기능 구현하기
  5. 제스처 인식 추가하기
  6. 마무리 및 배포

1. 프로젝트 설정하기

Xcode를 열고, 새로운 프로젝트를 생성합니다. File 메뉴에서 New > Project를 선택하세요. iOS 탭을 클릭한 후, App을 선택합니다. 다음으로, 프로젝트 이름과 조직 이름을 입력하고, 언어는 Swift, 사용자 인터페이스는 Storyboard를 선택합니다.

프로젝트 설정값

  • Product Name: ImageViewer
  • Team: 해당 팀 선택
  • Organization Name: 개인 또는 조직 이름 입력
  • Organization Identifier: com.yourname
  • Interface: Storyboard
  • Language: Swift

프로젝트가 생성되면, Xcode에서 자동으로 기본 뷰 컨트롤러가 생성되어 있습니다. 이 뷰 컨트롤러를 기반으로 진행하겠습니다.

2. 기본 UI 구성하기

이미지 뷰어 앱의 기본 UI는 이미지 뷰와 버튼으로 이루어져 있습니다. Xcode의 Interface Builder를 사용하여 UI를 구성합니다.

UI 요소 추가하기

  1. Main.storyboard 파일을 열고, 기본 뷰 컨트롤러를 선택합니다.
  2. 우측 상단의 Library에서 Image View를 찾아서 뷰 컨트롤러에 추가합니다. 이 이미지 뷰는 이미지가 표시될 영역입니다.
  3. 다시 Library에서 두 개의 Button을 추가하여 ‘이미지 선택’ 버튼과 ‘닫기’ 버튼을 만듭니다. 각 버튼을 적절한 위치에 배치합니다.
  4. 이미지 뷰와 버튼들의 제약 조건을 설정하여 화면에 잘 배치되도록 합니다.

Auto Layout 설정하기


imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
imageView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
imageView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
imageView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.8).isActive = true

selectButton.translatesAutoresizingMaskIntoConstraints = false
selectButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20).isActive = true
selectButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true

closeButton.translatesAutoresizingMaskIntoConstraints = false
closeButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20).isActive = true
closeButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true

3. 이미지 선택 기능 구현하기

사용자가 이미지를 선택할 수 있도록 UIImagePickerController를 통해 이미지 선택 기능을 구현하겠습니다. 이를 위해, 뷰 컨트롤러에 UIImagePickerControllerDelegate와 UINavigationControllerDelegate를 채택해야 합니다.

UIImagePickerController 설정하기


class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func selectImage(_ sender: UIButton) {
        let imagePicker = UIImagePickerController()
        imagePicker.delegate = self
        imagePicker.sourceType = .photoLibrary
        present(imagePicker, animated: true, completion: nil)
    }

    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        if let selectedImage = info[.originalImage] as? UIImage {
            imageView.image = selectedImage
        }
        dismiss(animated: true, completion: nil)
    }
}

위 코드는 이미지 선택 버튼을 눌렀을 때 이미지 피커를 여는 기능과 사용자가 이미지를 선택했을 때 그 이미지를 이미지 뷰에 표시하는 기능을 포함합니다.

4. 이미지 뷰어 기능 구현하기

사용자가 이미지를 선택한 후에는 해당 이미지를 확대/축소하고, 이동할 수 있어야 합니다. 이를 위해 UIScrollView를 사용하여 이미지 뷰를 감싸주는 구조로 변경하겠습니다.

UIScrollView 추가하기


@IBOutlet weak var scrollView: UIScrollView!

override func viewDidLoad() {
    super.viewDidLoad()
    scrollView.delegate = self
    setupScrollView()
}

func setupScrollView() {
    let imageViewFrame = CGRect(x: 0, y: 0, width: imageView.image?.size.width ?? 0, height: imageView.image?.size.height ?? 0)
    imageView.frame = imageViewFrame
    scrollView.addSubview(imageView)
    scrollView.contentSize = imageView.frame.size
}

위 코드에서 UIScrollView의 콘텐츠 크기를 이미지 뷰의 크기로 설정하여 사용자가 이미지를 확대하고 이동할 수 있게 합니다.

5. 제스처 인식 추가하기

사용자가 이미지를 확대/축소할 수 있도록 UIPinchGestureRecognizer를 추가하겠습니다. 


override func viewDidLoad() {
    super.viewDidLoad()
    let pinchRecognizer = UIPinchGestureRecognizer(target: self, action: #selector(handlePinch(_:)))
    imageView.addGestureRecognizer(pinchRecognizer)
    imageView.isUserInteractionEnabled = true // 사용자의 상호작용을 허용
}

@objc func handlePinch(_ sender: UIPinchGestureRecognizer) {
    if sender.state == .began || sender.state == .changed {
        imageView.transform = imageView.transform.scaledBy(x: sender.scale, y: sender.scale)
        sender.scale = 1.0
    }
}

이제 사용자는 두 손가락으로 이미지를 확대하거나 축소할 수 있습니다. 이를 통해 직관적인 이미지 탐색 경험을 제공합니다.

6. 마무리 및 배포

이제 기본적인 이미지 뷰어 애플리케이션이 완성되었습니다. 이 앱은 이미지 선택, 확대/축소, 이동 기능을 갖추고 있으며, 기본적인 사용자 경험을 제공합니다.

배포 준비

  • Xcode에서 Product > Archive 메뉴를 선택하여 앱을 아카이빙합니다.
  • 아카이빙이 완료되면 Organizer 창에서 Distribute App를 선택하여 App Store 또는 Ad Hoc 배포를 진행할 수 있습니다.

결론

이번 강좌에서는 스위프트와 UIKit을 사용하여 간단한 이미지 뷰어 앱을 만들었습니다. 앞으로는 더 복잡한 기능을 추가하거나 다른 요소들을 활용하여 앱을 발전시키는 데 도전해 보세요. iOS 개발의 매력은 무궁무진하니 여러분의 창의성을 펼쳐보시기 바랍니다!

감사합니다.