📱 친구랑 같이 배우는 iOS 앱 개발 — UIKit Storyboard로 시작하는 네이티브 모바일의 세계

🍎 1. 일단 큰 그림부터: iOS 네이티브 개발이 뭐야?

"네이티브(Native)"라는 말은 그냥 그 플랫폼 전용 언어와 도구로 만든다는 뜻이야.
iOS에서 네이티브라고 하면 보통 Swift(또는 Objective-C) + Apple 프레임워크 + Xcode 조합을 말하지.
반대로 Flutter나 React Native는 한 코드로 iOS·Android를 동시에 노리는 크로스플랫폼 쪽이고.

네이티브의 장점은 확실해. 새 iOS 기능을 가장 빨리 쓸 수 있고, 성능과 시스템 통합(알림, 위젯, 카메라, Face ID 등)이 가장 매끄럽다는 거지. 대신 Android 버전은 따로 만들어야 하는 수고가 있어.

🧱 2. UIKit, 너 대체 정체가 뭐니?

UIKit은 쉽게 말해 "레고 블록 상자"야. 버튼(UIButton), 글자(UILabel), 이미지(UIImageView), 목록(UITableView), 화면 단위(UIViewController) 같은 블록이 다 들어 있지.
이름 앞에 붙은 UI는 클래스 접두사고, 대부분이 UIView를 조상으로 두고 있어.

🎨 3. Storyboard: 앱 화면을 "그리는" 설계도

Storyboard는 Xcode의 Interface Builder에서 화면을 시각적으로 배치하는 파일이야. 확장자는 .storyboard.
여기서 재미있는 팩트 하나! 보기엔 그림판 같지만 실제로는 XML 텍스트 파일이야. 빌드할 때 컴파일돼서 앱 번들 안에 .storyboardc 형태로 들어가지.

Storyboard는 iOS 5(2011년)에 처음 등장했어. 그 전에는 화면 하나당 XIB(NIB) 파일 하나를 쓰는 방식이었는데, Storyboard는 여러 화면과 그 사이의 이동(Segue)까지 한 장에 담을 수 있다는 게 혁신이었지. 앱의 "흐름"을 지도처럼 볼 수 있게 된 거야.

🔌 4. IBOutlet과 IBAction: 그림과 코드를 잇는 전선

Storyboard에 버튼을 예쁘게 올려놨다고 해서 저절로 동작하진 않아. 코드와 연결해야 하는데, 그게 바로 IBOutlet과 IBAction이야. (IB = Interface Builder)

Xcode에서 Control 키를 누른 채 Storyboard의 뷰를 코드 파일로 드래그하면 연결이 생겨. Assistant Editor(화면 분할)를 켜두면 편하지.

import UIKit

class ViewController: UIViewController {

    // 🔗 Storyboard의 라벨을 코드에서 참조
    @IBOutlet weak var greetingLabel: UILabel!

    private var tapCount = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        greetingLabel.text = "안녕, 친구!"
    }

    // 👆 버튼을 누르면 호출
    @IBAction func helloButtonTapped(_ sender: UIButton) {
        tapCount += 1
        greetingLabel.text = "\(tapCount)번 눌렀어 🎉"
    }
}

🔄 5. 뷰 컨트롤러의 하루: 생명주기(Lifecycle)

뷰 컨트롤러도 사람처럼 일과가 있어. 언제 무슨 일을 해야 하는지 알아야 버그가 줄어. 주요 메서드는 이 순서로 불려.

그리고 레이아웃 계산 때마다 viewWillLayoutSubviews, viewDidLayoutSubviews도 불려. 이건 화면 회전이나 크기 변화에 따라 여러 번 호출될 수 있다는 거 기억해 둬!

📐 6. Auto Layout: "모든 아이폰에서 예쁘게"의 비밀

아이폰 SE부터 Pro Max, 거기에 아이패드까지… 화면 크기가 진짜 다양하잖아? 좌표를 숫자로 박아버리면 어떤 기기에선 버튼이 화면 밖으로 탈출해 😱
그래서 등장한 게 Auto Layout(iOS 6, 2012년)이야. "이 버튼은 화면 가운데, 아래에서 20pt 위" 같은 관계(제약, Constraint)로 위치를 정하는 방식이지.

제약의 핵심 원칙은 단순해. 각 뷰의 X 위치, Y 위치, 너비, 높이가 모두 확정돼야 해. 하나라도 모자라면 "모호함(Ambiguous)", 서로 충돌하면 "충돌(Conflicting)" 경고가 떠. Storyboard에서는 빨간·주황 선으로 바로 알려줘서 편하지.

🗺️ 7. 화면 이동: Segue와 데이터 전달

목록에서 항목을 누르면 상세 화면으로 가는 거, 앱의 국룰이지? Storyboard에서는 셀이나 버튼에서 다음 화면으로 Control+드래그 하면 Segue가 생겨. 그런데 "어떤 항목을 눌렀는지"는 코드로 넘겨줘야 해. 그때 쓰는 게 prepare(for:sender:)야.

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "showDetail",
       let detailVC = segue.destination as? DetailViewController,
       let indexPath = tableView.indexPathForSelectedRow {
        detailVC.item = items[indexPath.row]
    }
}

Segue 없이 코드로 화면을 띄우고 싶다면, Storyboard에서 해당 화면에 Storyboard ID를 설정하고 이렇게 꺼내 쓰면 돼.

let storyboard = UIStoryboard(name: "Main", bundle: nil)
if let detailVC = storyboard.instantiateViewController(
    withIdentifier: "DetailViewController") as? DetailViewController {
    detailVC.item = selectedItem
    navigationController?.pushViewController(detailVC, animated: true)
}

📋 8. UITableView: iOS 개발자의 영원한 친구

설정 앱, 메일, 연락처… 다 테이블 뷰 기반이야. 핵심은 DataSource(뭘 보여줄지)와 Delegate(어떻게 반응할지) 두 프로토콜. 그리고 성능을 위해 셀을 재사용(dequeue)한다는 게 포인트야. 1만 개 데이터라도 화면에 보이는 만큼의 셀만 만들어서 돌려쓰거든.

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView,
                   numberOfRowsInSection section: Int) -> Int {
        return items.count
    }

    func tableView(_ tableView: UITableView,
                   cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(
            withIdentifier: "ItemCell", for: indexPath)
        var config = cell.defaultContentConfiguration()
        config.text = items[indexPath.row]
        cell.contentConfiguration = config
        return cell
    }
}

Storyboard의 Prototype Cell에 Identifier("ItemCell")를 꼭 똑같이 적어줘야 해. 오타 하나면 크래시! 😵
참고로 defaultContentConfiguration()은 iOS 14부터 쓰는 최신 방식이고, 데이터 변경을 애니메이션과 함께 안전하게 반영하고 싶다면 iOS 13의 UITableViewDiffableDataSource도 꼭 공부해 봐.

⚖️ 9. 솔직 토크: Storyboard vs 코드 UI vs SwiftUI

개발자 커뮤니티에서 끝나지 않는 논쟁 주제야 ㅋㅋ 공정하게 정리해 줄게.

현실은? 많은 회사가 섞어서 써. 기존 앱은 UIKit(Storyboard 또는 코드), 새 화면은 SwiftUI로 짜고 UIHostingController로 끼워 넣는 식이지. 그래서 UIKit을 아는 개발자는 레거시 유지보수와 신규 개발 양쪽에서 다 쓸모가 있어. 실무 채용 공고에 "UIKit 경험"이 여전히 자주 보이는 이유야.

🤝 10. 팀에서 Storyboard 쓸 때 살아남는 법

🚀 11. 첫 앱 만들기 로드맵 (진짜 해보자!)

🧠 12. 한눈에 정리

정리하자면, Storyboard는 "눈으로 보면서 배우는" 가장 친절한 iOS 입문 도구야. 여기서 UIKit의 뼈대—뷰 계층, 생명주기, Auto Layout, 델리게이트 패턴—를 몸으로 익히고 나면 코드 UI든 SwiftUI든 훨씬 빨리 흡수할 수 있어. 기초 체력이 튼튼한 사람이 어떤 운동이든 잘하는 것처럼 말이지 💪
자, 이제 Xcode 켜고 첫 번째 버튼부터 눌러보자고! 📱✨