본문 바로가기
iOS 프로그래밍 실무

iOS 개발자를 위한 필수 UI 요소 및 화면 전환 완전 정리

by 노아입니다 2025. 5. 22.

📱 Navigation Controller + Segue로 화면 전환하기

iOS 앱은 여러 개의 화면(ViewController)로 구성되며, 화면 간 전환은 매우 중요한 개념입니다. 가장 자주 사용되는 방식은 Navigation Controller를 사용하는 것입니다.

📌 Navigation Controller란?

  • 스택(Stack) 구조로 화면을 쌓아가는 컨트롤러입니다.
  • 주로 ‘목록 > 상세보기’ 같이 계층적인 구조에 사용됩니다.
  • 스토리보드에서 ViewController를 선택하고 Editor > Embed In > Navigation Controller로 쉽게 추가할 수 있습니다.

🔁 Segue를 이용한 전환

  • Segue는 스토리보드에서 ViewController 간 연결을 설정하는 기능입니다.
  • 종류: Show (Push), Present Modally, Custom
  • 화면 전환 시 데이터를 전달하고 싶다면 아래 메서드를 활용하세요.
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "toDetailVC" {
        let destinationVC = segue.destination as! DetailViewController
        destinationVC.titleText = "Hello!"
    }
}

⚠️ 실무 꿀팁

  • Segue의 identifier를 설정하지 않으면 prepare가 호출되지 않습니다.
  • Navigation Controller 없이 Show Segue를 사용하면 Modal 전환으로 작동될 수 있습니다.

🌐 WebKit 사용 + 한글 URL 인코딩 방법

웹 페이지를 앱 내에서 보여주고 싶을 땐 WKWebView를 사용합니다. 그런데 한글이 포함된 URL은 인코딩하지 않으면 앱이 크래시 날 수 있어요!

✅ 기본 사용 코드

import WebKit

let webView = WKWebView(frame: view.bounds)
view.addSubview(webView)

let rawURL = "https://ko.wikipedia.org/wiki/스위프트"
if let encoded = rawURL.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed),
   let url = URL(string: encoded) {
    let request = URLRequest(url: url)
    webView.load(request)
}

⚠️ 주의사항

  • 반드시 addingPercentEncoding으로 URL을 인코딩해야 앱이 안전하게 작동합니다.

🧭 Tab Bar Controller로 탭 형식 앱 만들기

하단에 메뉴 탭을 두어 각기 다른 화면으로 전환하는 기능은 Tab Bar Controller로 구현합니다. 홈/검색/마이페이지 같은 구성에서 필수입니다.

✅ 구성 방법

  1. 스토리보드에서 Tab Bar Controller 생성
  2. 각 ViewController와 **Relationship Segue(viewControllers)**로 연결
  3. 각 탭마다 Navigation Controller를 넣어 계층 구조 유지 가능

🎯 둥근 모서리 Label 만들기 (Rounded Label)

깔끔하고 모던한 디자인을 위해 라운드 처리된 라벨은 필수죠!

✅ 코드 예시

label.layer.cornerRadius = 10
label.clipsToBounds = true
label.backgroundColor = .systemBlue
label.textColor = .white

⚠️ 주의사항

  • clipsToBounds = true를 하지 않으면 cornerRadius가 적용되지 않음!
  • AutoLayout 적용 이후 라운딩 처리할 것 (프레임 크기가 정해진 뒤에)

🖼 앱 아이콘 만들기

아이콘은 앱의 얼굴입니다. 고해상도 이미지를 여러 사이즈로 만들어야 합니다.

✅ 아이콘 준비 팁

  • https://appicon.co/ 에서 이미지 업로드 시 자동 생성 가능
  • AppIcon asset catalog에 드래그해서 넣으면 끝!

🚀 LaunchScreen.storyboard 디자인

앱이 시작할 때 보이는 첫 화면, 이건 실제 화면이 아닌 런치 스크린입니다.

✅ 유의사항

  • UIView, UILabel, UIImageView 등 기본적인 UI만 사용 가능
  • 코드 작성이나 애니메이션은 불가
  • 오토레이아웃을 이용해 디바이스별 대응 필수

💼 iOS 취업 준비를 위한 핵심 키워드

다음은 iOS 개발자 취업 준비 시 꼭 알아야 할 기술 키워드입니다.

분류 키워드
UI UIKit, SwiftUI, AutoLayout, Storyboard
구조 MVC, MVVM
통신 URLSession, Codable, Alamofire
기능 Navigation Controller, TabBar, Segue, WebView
실무 Git, TestFlight, 앱스토어 배포 경험
기타 앱 생명주기, UserDefaults, NotificationCenter