[iOS] 프로그래밍 실무 복습 #12 Open API 기반 iOS앱 개발(3)

이 글은 한성현 교수님의 ‘iOS 프로그램 실무’ 강의를 수강한 후, 복습을 위해 작성된 글입니다.

주로 실습 위주의 내용을 다루고 있습니다.

2025.05.14 - [iOS프로그래밍실무] - [iOS] 프로그래밍 실무 복습 #11 Open API 기반 iOS앱 개발(2) - JSON parsing, 오토레이아웃(Auto Layout), 스택 뷰(Stack View), 천(3자리)단위 콤마 추가, tableView(_:titleForHeaderInSection:)

[iOS] 프로그래밍 실무 복습 #11 Open API 기반 iOS앱 개발(2) - JSON parsing, 오토레이아웃(Auto Layout), 스택

2025.05.21 - [iOS프로그래밍실무] - [iOS] 프로그래밍 실무 복습 #12 Open API 기반 iOS앱 개발(3)

[iOS] 프로그래밍 실무 복습 #12 Open API 기반 iOS앱 개발(3)

 

이어서 실습 진행하도록 하겠습니다.

---

• 화면 전환 방법 : 네비게이션 컨트롤러 + Segue
• Navigation Controller
• segue를 이용하여 화면 전환
• segue 실행되기 직전에 자동으로 호출되는 메서드: func prepare(for segue: UIStoryboardSegue, sender: Any?)
• WebKit
• 한글이 포함된 url 처리하기 : addingPercentEncoding(withAllowedCharacters:)
• Tab Bar Controller
• rounded Label
• 앱 아이콘 만들기
• LaunchScreen.storyboard 디자인

---

root view controller

• UIWindow의 가장 첫 번째, 최상위 뷰 컨트롤러

• 앱이 실행될 때 처음 사용자에게 보여지는 메인 뷰 컨트롤러

• UINavigationController, UITabBarController와 같은 컨테이너 뷰

컨트롤러가 주로 루트로 사용됨

 

segue type과 Action Segue vs Manual Segue

 

🍎 Segue Type (세그의 종류)

 

Segue Type 설명 사용 예시

Show (Push) : 네비게이션 컨트롤러 안에서 뷰를 스택으로 푸시하는 방식 Navigation 기반 앱에서 사용

Show Detail : Split View에서 디테일 뷰를 교체하는 방식 iPad 등 Split View에서 사용

Present Modally 새 뷰 컨트롤러를 모달 형식으로 전체 화면 또는 일부 화면에 표시 로그인 창, 설정 페이지 등

Popover Presentation iPad에서 팝업 형태로 화면을 띄움 날짜 선택, 간단한 설정창 등

Custom 개발자가 정의한 전환 방식 적용 가능 애니메이션 커스텀 필요할 때

Non-Adaptive / Adaptive 기기 종류나 방향에 따라 segue 형태가 자동 적응됨 iPhone ↔ iPad 전환 대응 시 사용

 

⚙️ Action Segue vs Manual Segue

구분 Action Segue Manual Segue
정의 위치 스토리보드에서 버튼 등 UI 요소에 직접 연결 스토리보드에서 뷰 컨트롤러 간 연결만 설정하고 코드로 실행
트리거 방법 사용자가 버튼 등을 직접 눌렀을 때 자동 실행 코드로 조건을 체크하고 수동으로 실행
사용 방식 버튼 → 드래그 → 다른 뷰 컨트롤러 → Segue 선택 뷰 컨트롤러 간 연결만 한 후 performSegue(withIdentifier:) 호출
장점 간단하고 직관적임 복잡한 조건 분기, 로직 필요 시 유용
단점 조건 분기 어려움 코드를 따로 작성해야 해서 번거로움
예시 로그인 버튼 누르면 바로 로그인 화면으로 이동 로그인 성공한 경우에만 다음 화면으로 이동

 

🧑‍💻 코드 예시

 

Manual Segue 사용 예시

1. 스토리보드에서 두 ViewController 간 Segue 연결하고 Identifier 설정 (예: "toNextVC")

2. 코드에서 조건에 따라 segue 실행:

 

if loginSuccess {

    performSegue(withIdentifier: "toNextVC", sender: self)

}

 

✅ 요약

 

항목 Action Segue Manual Segue

실행 방식 사용자 UI 액션 (버튼 클릭 등) 코드에서 직접 실행 (performSegue)

조건 제어 어려움 자유롭게 조건 설정 가능

코드량 적음 많음

유연성 낮음 높음

---

[Embed in]으로 뷰콘트롤러에 Navigation Controller 추가

• 먼저 Navigation Controller를 추가할 View Controller 선택

Navigation Controller를 추가하면 바뀌는 내용

---

상세정보 보여줄 View Controller 추가

---

DetailViewController라는 class만들기

• 주의 : 부모 먼저 지정

 

---

새로운 View Controller와 소스 작성할 class 연결

---

배경색, 레이블(영화제목 출력) 추가, 레이블 constraint지정

 

---

레이블에 Outlet 지정 : nameLabel

---

nameLabel.text에 대입할 movieName 프로퍼티 선언

• 셀을 클릭하면 해당 영화 제목이 DetailViewController의 movieLabel에 보이게 하고 싶음
• 일단 DetailViewController.swift파일에 movieLabel.text에 대입할 movieName 프로퍼티 선언하고, viewDidLoad()에서 대입

import UIKit

class DetailViewController: UIViewController {
    @IBOutlet weak var nameLabel: UILabel!
    var movieName = ""
    override func viewDidLoad() {
        super.viewDidLoad()
        nameLabel.text = movieName
    }
}

---

Table의 cell과 Detail View Controller를 Segue연결

• myCell에서Ctrl키 누르면서 Detail View Controller에 연결 후
• [Selection Segue]-[show]선택

---

Segue의 identifier지정 : detailView

---

func prepare(for segue: UIStoryboardSegue, sender: Any?)

 

prepare(for:sender:)란?

• Segue가 실행되기 직전에 호출되는 메소드

• 현재 ViewController에서 다음 ViewController로 데이터를 전달할 때 사용

• 스토리보드에서 Segue를 연결했을 때 자동 호출됨 (Manual Segue도 동일)

 

 

 

 

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        let dest = segue.destination as! DetailViewController
        let myIndexPath = table.indexPathForSelectedRow!
        let row = myIndexPath.row
        dest.movieName = (movieData?.boxOfficeResult.dailyBoxOfficeList[row].movieNm)!
    }
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }

---

navigationItem의 title지정

• DetailViewController.swift

import UIKit

class DetailViewController: UIViewController {
    @IBOutlet weak var nameLabel: UILabel!
    var movieName = ""
    override func viewDidLoad() {
        super.viewDidLoad()
        nameLabel.text = movieName
        navigationItem.title = movieName
    }

}

---

WKWebView Outlet지정 : webView

• 내용이 URL에 따라 바뀌므로 변수(outlet)로 지정해야 함
• Assistant editor(ctrl+alt+command+enter)

---

프레임워크 추가

import WebKit

 

DetailViewController.swift 최종 소스

import UIKit
import WebKit

class DetailViewController: UIViewController {
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var webView: WKWebView!
    var movieName = ""
    override func viewDidLoad() {
        super.viewDidLoad()
        navigationItem.title = movieName
        guard let url = URL(string: "https://m.naver.com") else { return }
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

---

한글이 포함된 url 처리하기

• url 복사하여 소스에 붙여넣기
• 그런데 한글 부분이 주소창에서 보는 url과 좀 다름 (%가 많고 이상한 숫자들이 있음)
• Safari로 URL 복사
• Dock에서 Safari브라우저 실행
• 네이버에 접속하여 “영화순위”로 검색
• 주소창에 있는 url 복사하기
• 주소를 소스에 복사하면 이번에는 한글이 정상적으로 나옴
• 그러나, url에 한글이 있어서 동작하지 않음

addingPercentEncoding(withAllowedCharacters:)

• .urlQueryAllowed : url에 한글이 있으면 퍼센트 인코딩을 해야 함.

import UIKit
import WebKit

class DetailViewController: UIViewController {
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var webView: WKWebView!
    var movieName = ""
    override func viewDidLoad() {
        super.viewDidLoad()
        nameLabel.text = movieName
        navigationItem.title = movieName
        // let urlKorString = "https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query="+movieName
        let urlKorString =  "https://namu.wiki/w/"+movieName
        let urlString = urlKorString.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed)!
        guard let url = URL(string: urlString) else { return }
        let request = URLRequest(url: url)
        webView.load(request)
    }

}

---

Tab Bar Controller

---

1. 새로운 화면(View) 추가 : View Controller 추가

2. 새로 만든 View Controller를 Tab Bar Controller와 연결

• Tab Bar Controller에서 새로 만든 View Controller로 Control키 누르면서 드래그
• 버튼을 떼면 나타나는 검은 창에서 [Relationship Segue]-[view controllers]선택

---

연결되면 Segue가 생김

---

뷰컨트롤러의 Tab Bar item 타이틀과 이미지 변경

---

MapViewController클래스 만들기

• 클래스명: MapViewController
• 부모 : UIViewController

theater Scene 스토리보드와 MapViewController클래스 연결

---

WebKit 추가

---

webView 아웃렛 지정 : Assistant editor

• ctrl+alt+command+enter

---

MapViewController.swift 파일 소스

import UIKit
import WebKit

class MapViewController: UIViewController {
    @IBOutlet weak var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let urlKorString = "https://map.naver.com/p/search/영화관"
        let urlString = urlKorString.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed)!
        guard let url = URL(string:urlString) else { return }
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

---

rounded Label : 3개 Label 같은 작업

---

앱 아이콘 만들기(1)

 

---

LaunchScreen.storyboard 디자인

---

실행결과 확인