스위프트로 UIKIT 방식으로 아이폰 앱 개발하기: 우리집에 핀 설치하기

스위프트(Swift)는 애플에서 만든 프로그래밍 언어로, iOS 및 macOS 플랫폼에서의 앱 개발에 많이 사용되고 있습니다. UIKIT은 iOS의 주요 프레임워크로, 앱의 사용자 인터페이스를 구성하는 데 필수적인 역할을 합니다. 이번 강좌에서는 스위프트와 UIKIT을 사용하여 자신의 집을 표시하는 핀을 설치할 수 있는 아이폰 앱을 개발하는 방법에 대해 자세히 설명하겠습니다.

1. 프로젝트 준비

앱을 개발하기 위해서는 먼저 Xcode를 설치해야 합니다. Xcode는 애플의 공식 IDE로, 스위프트 코드를 작성하고 UIKIT 기반의 애플리케이션을 개발하는 데 필요한 도구입니다.

1.1 Xcode 설치하기

Xcode는 Mac App Store에서 무료로 다운로드할 수 있습니다. 설치가 완료되면, 새로운 프로젝트를 생성해야 합니다.

1.2 새로운 프로젝트 생성하기

Xcode를 열고, “Create a new Xcode project”를 선택합니다. 다음으로 “iOS”에서 “App”을 선택하고, “Next”를 클릭합니다.

Product Name: PinYourHome
Team: 개인 또는 팀 계정 선택
Organization Name: 당신의 이름 또는 회사 이름
Organization Identifier: com.yourname (유니크한 식별자)
Interface: Storyboard
Language: Swift
Use Core Data: 체크 해제 (이번 예제에서는 사용하지 않음)
Include Tests: 체크 해제

모든 필드를 설정한 후 “Next”를 클릭하고, 프로젝트 저장 위치를 선택한 후 “Create”를 클릭합니다.

2. UI 설계하기

앱의 기본 UI는 간단한 지도와 핀을 추가할 수 있는 버튼으로 구성됩니다. UI를 설계하기 위해서는 Main.storyboard 파일을 수정해야 합니다.

2.1 지도 추가하기

UIKIT의 MKMapView를 사용하여 지도 뷰를 추가합니다.

Main.storyboard 파일을 열고, Object Library에서 Map Kit을 검색합니다.
MKMapView를 드래그하여 ViewController의 뷰에 추가합니다.
Constraints를 설정하여 한국에서의 일반적인 사용의 맞추어 지도를 전체 화면으로 만듭니다.

2.2 버튼 추가하기

사용자가 핀을 추가할 수 있도록 버튼을 추가합니다.

Object Library에서 UIButton를 검색하여 ViewController의 아래쪽에 추가합니다.
버튼의 제목을 “핀 추가하기”로 설정합니다.
Constraints를 설정하여 버튼이 화면의 하단 중앙에 위치하도록 합니다.

3. 코드 작성하기

이제 ViewController.swift 파일을 열어 앱의 기능을 구현하겠습니다. 목표는 사용자가 버튼을 클릭할 때마다 지도에 핀을 추가하는 것입니다.

3.1 MapKit 임포트하기

뷰에 MapKit을 사용할 수 있도록 상단에 import MapKit를 추가합니다.

import UIKit
import MapKit

3.2 ViewController 클래스 수정하기

기본적으로 생성된 ViewController 클래스를 수정하여 지도와 버튼을 설정합니다.

class ViewController: UIViewController {
    
    @IBOutlet weak var mapView: MKMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 초기 지도 설정
        let initialLocation = CLLocationCoordinate2D(latitude: 37.5665, longitude: 126.978)
        let region = MKCoordinateRegion(center: initialLocation, latitudinalMeters: 1000, longitudinalMeters: 1000)
        mapView.setRegion(region, animated: true)
    }

    @IBAction func addPin(_ sender: UIButton) {
        let pinLocation = CLLocationCoordinate2D(latitude: 37.5665, longitude: 126.978) // 기본 위치
        let annotation = MKPointAnnotation()
        annotation.coordinate = pinLocation
        annotation.title = "우리 집"
        mapView.addAnnotation(annotation)
    }
}

4. 핀 추가 기능 테스트하기

위의 코드를 작성한 후 이제 앱을 실행하여 핀 추가 기능을 테스트할 수 있습니다.

Xcode의 상단 메뉴에서 Product > Run을 클릭하거나, ⌘R 단축키를 사용하여 앱을 빌드하고 실행합니다.
앱이 실행되면 지도와 함께 “핀 추가하기” 버튼이 보일 것입니다.
버튼을 여러 번 클릭하여 핀을 추가해 보세요.

5. 데이터 저장 및 불러오기

핀 위치를 저장하려면 간단한 데이터베이스를 사용하여 사용자가 추가한 핀을 기록할 수 있습니다. 예를 들어, UserDefaults를 사용하여 간단한 데이터를 저장할 수 있습니다.

5.1 UserDefaults 이해하기

UserDefaults는 간단한 데이터를 저장하고 읽어오는 데 유용한 방법입니다. 이 자료를 Persistent하게 사용하려면, 앱이 실행될 때마다 데이터가 남아 있어야 합니다.

5.2 핀 위치 저장하기

extension ViewController {
    func savePinLocations() {
        let userDefaults = UserDefaults.standard
        let pinLocations = mapView.annotations.map { ["latitude": $0.coordinate.latitude, "longitude": $0.coordinate.longitude] }
        userDefaults.set(pinLocations, forKey: "savedPins")
    }

    func loadPinLocations() {
        let userDefaults = UserDefaults.standard
        if let savedPins = userDefaults.array(forKey: "savedPins") as? [[String: Double]] {
            for pin in savedPins {
                let annotation = MKPointAnnotation()
                annotation.coordinate = CLLocationCoordinate2D(latitude: pin["latitude"]!, longitude: pin["longitude"]!)
                mapView.addAnnotation(annotation)
            }
        }
    }
}

위의 메서드를 viewDidLoad()에 호출하여 앱이 시작될 때 저장된 핀을 불러올 수 있습니다.

override func viewDidLoad() {
        super.viewDidLoad()
        // 기존 코드 ...
        loadPinLocations()
    }

    @IBAction func addPin(_ sender: UIButton) {
        // 기존 코드 ...
        savePinLocations()
    }

6. 앱 기능 확장하기

현재 앱에는 기본적으로 핀 추가 기능만 있지만, 사용자에게 더 나은 경험을 제공하기 위해 몇 가지 기능을 추가할 수 있습니다.

6.1 핀 세부 정보 보기

사용자가 핀을 클릭했을 때, 핀에 대한 세부 정보(예: 이름, 설명 등)를 보여줄 수 있습니다. 이를 위해 mapView(_:didSelect:) 메소드를 구현합니다.

extension ViewController: MKMapViewDelegate {
    func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
        let alert = UIAlertController(title: view.annotation?.title ?? "", message: "핀에 대한 설명", preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "확인", style: .default, handler: nil))
        present(alert, animated: true)
    }
}

6.2 핀 삭제 기능 추가하기

추가한 핀을 사용자 임의로 삭제할 수 있는 기능을 제공하면 좋습니다. mapView(_:annotationView:calloutAccessoryControlTapped:) 메소드를 구현하여 핀 삭제 기능을 연결할 수 있습니다.

extension ViewController: MKMapViewDelegate {
    func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped accessoryControl: UIControl) {
        mapView.removeAnnotation(view.annotation!)
    }
}

7. 앱 빌드 및 배포

기본적인 핀 추가 기능과 데이터 저장 기능이 구현된 후, 앱을 배포하기 위해서는 앱 스토어에 제출할 준비를 해야 합니다. Apple의 다양한 가이드라인을 참고하여 앱을 제출하는 과정을 진행합니다.

7.1 앱 스토어 준비하기

앱의 아이콘, 스크린샷, 메타데이터를 준비하고 앱을 App Store Connect에 업로드해야 합니다. 이를 위한 적절한 준비가 필요합니다.

7.2 테스트 및 피드백 받기

베타 테스터를 모집하여 피드백을 받고, 이를 반영하여 앱을 개선하는 작업도 필수적입니다.

결론

이 강좌에서는 스위프트와 UIKIT을 사용하여 간단한 핀 추가 기능을 가진 아이폰 앱을 만드는 과정을 다루었습니다. 앱 개발 과정에서 등장하는 다양한 개념과 기술을 응용하여, 자신만의 앱을 만들어보기를 바랍니다. 추가적으로, 더 많은 기능을 구현하여 나만의 프로젝트를 완성해보세요!