[iOS/Xcode] 기초 연습문제를 통한 프로그래밍 이해하기 7편: SwiftUI 공부 시작 iPhone iOS

 

 

프로그래밍 공부를 시작한 지 3일 차, Xcode Command Line Tool 템플릿을 사용해서 간단한 퀴즈를 프로그래밍해 보았다. 간단한 프로그래밍이지만 정말 많은 것을 배웠던 것 같다. 기본 프로그래밍 구조부터 다양한 함수들, 짧은 시간 안에 많은 정보들이 들어와서 정신이 없지만 그래도 재미는 있다.

 

오늘은 지금까지 작성한 퀴즈앱을 SwiftUI를 사용하여  iPhone앱 화면으로 옮기는 작업을 하려고 한다. 이젠 단순 코드를 보는 것이 아닌 시각적으로도 볼 수 있다고 하니 살짝 설렌다.

 

시작해 보자.

(사용할 코드는 이전 포스팅을 확인해 주길 바란다.)

https://dailyblessing.tistory.com/237

[iOS/Xcode] 기초 연습문제를 통한 프로그래밍 이해하기 5편

 

목차

1. SwiftUI 프로젝트 생성하기

2. 퀴즈앱 SwiftUI로 옮기기 전 Swift 구조 이해하기

3. SwiftUI 핵심 키워드 우선순위 정리 - Command Line Tool과 차이점

4. 함수 기본 구조와 용어

5. 지금까지 배운 걸 조합한 코드

 

 

1. SwiftUI 프로젝트 생성하기

Xcode SwiftUI 프로젝트 생성은 간단한 게 짚고 넘어가겠다.

• Xcode 열기 > Create New Project > iOS
• 템플릿 선택: App
• Product Name: QuizApp(예시)
• Interface: SwiftUI
• Language: Swift
• 프로젝트가 저장될 폴더 선택 후 Create

2. 퀴즈앱 SwiftUI로 옮기기 전 Swift 구조 이해하기

처음 SwiftUI 프로젝트를 생성하고 나면 ContentView.swift와 QuizApp.swift가 디폴트로 생성되어 있을 것이다. 이 두 파일의 역할과 차이점을 먼저 이해하면 SwiftUI 구조를 정확하게 파악할 수 있을 것 같았다.

 

QuizApp.swift - 앱의 시작점, 진입문

역할은 간단하게 앱 전체의 출발점이라고 생각하면 된다.

• 여기서 앱의 “진입점”이 설정된다.
• 어떤 View(화면)로 앱이 시작될지 지정한다.
• 옛날 UIKit의 AppDelegate.swift/SceneDelegate.swift를 대체한다.

import SwiftUI

@main
struct QuizAppApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

 

QuizApp.swift의 기본인데 해석을 하자면:

“앱이 실행되면 ContentView를 화면에 띄워주세요!”

가 된다.

 

 

ContentView.swift - 앱의 첫 번째 실제 화면

역할은 실제 사용자에게 보이는 첫 화면이라고 보면 된다.

• 여기서 버튼, 텍스트, 문제 출력, O/X 기능 등을 다 만들게 된다.
• 우리가 주로 작업하게 되는 "UI 설계 공간"이 바로 여기다.
• SwiftUI View는 body 안에서 Text, Button, VStack 등을 써서 화면 구성한다.

요약을 하자면,

항목	QuizApp.swift	ContentView.swift
위치	앱의 출발점	첫 번째 화면
역할	앱을 시작하고 어떤 View를 보여줄지 결정	실제 UI 코드 작성 위치
주로 하는 일	WindowGroup으로 시작 뷰 지정	화면 구성 (Text, Button, 등등)
수정 빈도	거의 안 건드림	자주 건드림 (UI 만들 때)

  

비유를 하자면,

역할	비유
QuizApp.swift	“앱의 안내판 / 입구”
ContentView.swift	“앱 안에 있는 실제 방 (퀴즈 화면)”

 

3. SwiftUI 핵심 키워드 우선순위 정리 - Command Line Tool과 차이점

SwiftUI에서의 핵심 키워드를 정리해 보자.

• 1순위: struct, @Binding, ObservableObject, @main
  - Swift의 기본 구조, 데이터 연결, 앱 시작점 이해에 필수
• 2순위: NavigationView, Image, some
  앱을 더 풍성하게 만들고, 화면 전환, UI 구성 등 응용에 필요
• 기타: View, body, @State
  앱을 더 풍성하게 만들고, 화면 전환, UI 구성 등 응용에 필요

1순위: struct, @Binding, ObservableObject, @main

struct - 구조체 (Swift에서 가장 기본적인 데이터 & UI 단위)

struct ContentView: View {
    var body: some View {
        Text("Hello")
    }
}

• SwiftUI에서 하나의 화면(View)은 대부분 struct로 정의
• 값 타입(value type)이라 복사되며, 안전하고 빠름
• 앱 구조, 데이터 묶기, 화면 설계 전부 구조체로 가능

@Binding - 다른 View의 상태값을 연결하는 도구 

struct ChildView: View {
    @Binding var isOn: Bool
    
    var body: some View {
        Toggle("스위치", isOn: $isOn)
    }
}

• @State는 “내부 상태”
• @Binding은 “외부에서 전달받은 상태를 연결”해서 수정 가능
• 부모 뷰가 가진 값을 자식 뷰에서 수정하고 싶을 때 사용

ObservableObject — 여러 View에서 공유되는 데이터 모델

class QuizData: ObservableObject {
    @Published var score = 0
}

• @State는 한 View 안에서만 작동한
• 앱 전체에서 공유 가능한 상태가 필요할 땐 ObservableObject 사용⭐⭐⭐
• SwiftUI가 자동으로 감지하고 화면 업데이트

@StateObject var quiz = QuizData()

• View에서 @StateObject, @ObservedObject로 받아 사용

@main — 앱 시작점을 알려주는 마크

@main
struct QuizApp: App {
    ...
}

 

• SwiftUI 앱에서 App의 진입점(Main 함수 역할)을 맡음
• 예전 iOS 앱의 main.swift, AppDelegate.swift를 대체
• 프로젝트에 딱 1개만 있어야 함! ⭐⭐⭐⭐⭐

2순위: NavigationView, Image, some

NavigationView — 화면 간 이동을 가능하게 하는 UI 구조

NavigationView {
    NavigationLink("다음 화면", destination: SecondView())
}

• SwiftUI 앱에서 화면 전환(페이지 이동) 기능을 제공
• NavigationLink와 함께 사용함
• 스택 구조로 push/pop 방식의 이동이 됨

Image — 이미지 보여주는 View

Image(systemName: "star.fill")
Image("coffee") // Assets에 넣은 이미지

• systemName:은 SF Symbols (애플 기본 아이콘)
• "이름"은 프로젝트 안의 이미지 리소스 사용

some — SwiftUI에서 View의 반환 타입을 추상화한 것

var body: some View

• body는 하나의 View를 반환해야 하지만 정확한 타입을 쓰기 어렵기 때문에 Swift가 자동으로 "어떤 View인지는 내가 알아서 할게"라는 의미로 some 사용

기타: View, body, @State

View — SwiftUI에서의 화면 설계 도면

SwiftUI에서 모든 UI 요소는 View다.

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
    }
}

• struct ContentView: - View ContentView는 하나의 화면(View)을 나타낸다
• View - 화면 구성 부품 / SwiftUI 앱은 View 부품들을 조립해서 만들게 됨
  SwiftUI의 기본 프로토콜: 화면을 구성할 수 있는 모든 것의 기반 (Text, Button, Image, VStack, HStack 등 다 View)

body — 이 View의 화면 내용(설계도)

var body: some View {
    Text("안녕하세요")
}

• body는 "이 View 안에 어떤 UI를 보여줄지"를 정의하는 곳이다.
  💡 항상 some View를 반환해야 하고,한 번만 정의할 수 있다. (var body: some View {})
• 비유하자면 View는 방이라 보면 되고 body는 그 방 안에 배치할 가구들이라고 보면 되겠다. (Text, Button 등)

@State — 값이 바뀌면 화면도 자동으로 바꿔주는 마법 속성

@State private var count = 0

Button("증가") {
    count += 1
}
Text("현재 값: \(count)")

• @State는 화면 속 값(상태)을 저장하는 변수
• 값이 바뀌면 → SwiftUI가 자동으로 화면을 새로 그림 (re-rendering)

이해를 돕기 위한 @State 예시: 클릭하면 값이 올라가는 버튼

struct ContentView: View {
    @State private var count = 0
    
    var body: some View {
        VStack {
            Text("현재 점수: \(count)")
            Button("점수 올리기") {
                count += 1
            }
        }
    }
}

• 위 예시에서 count 값이 바뀔 때마다 Text도 자동으로 업데이트 된다. 이게 바로 @State의 강력한 매력이라 할 수 있겠다. 😍

Command Line Tool과의 차이

앞서 포스팅한 기초 예제는 Command Line Tool 환경에서 프로그래밍을 하였다. 두 환경의 차이를 아래와 같이 정리하면:

항목	Command Line Tool	SwiftUI
UI	없음 (텍스트 출력)	화면(View) 구성
상태 변수	그냥 var로 선언	@State로 선언해야 화면이 자동 반응
화면 새로고침	print로 직접 출력	값이 바뀌면 자동으로 화면이 바뀜
프로그램 흐름	top-down 순차	View 안에 선언형으로 작성

4. 함수 기본 구조와 용어

func greet(name: String) -> String {
    return "Hello, \(name)"
}

요소	설명
func	함수 정의 키워드
greet	함수 이름 / 함수 중 하나
(name: String)	매개변수 (파라미터)
-> String	반환 타입
return	값을 돌려주는 키워드

 

5. 지금까지 배운 걸 조합한 코드

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("점수: \(count)")
            Button("증가") {
                count += 1
            }
            NavigationLink("다음 화면", destination: ResultView(score: count))
        }
    }
}

struct ResultView: View {
    var score: Int

    var body: some View {
        Text("최종 점수는 \(score)점입니다.")
    }
}

 

📌 우선순위 요약 표

우선	키워드	한 줄 설명
🥇	struct	화면과 데이터의 기본 단위
🥇	@Binding	부모의 상태를 자식 View에서 연결
🥇	ObservableObject	앱 전역 상태 공유
🥇	@main	앱의 시작점
🥈	NavigationView	화면 전환 UI
🥈	Image	이미지 표시
🥈	some	View 반환 추상화
기타	View	SwiftUI의 모든 UI 구성요소 (Text, Button 등 포함)
기타	body	화면에 보여줄 UI를 작성하는 공간
기타	@State	값이 바뀔 때 화면도 자동으로 다시 그리게 하는 변수

 

공부와 복습이 최선이긴 하지만 포스팅을 작성하는게 만만한 일은 아닌거 같다.

하지만 공부한 것이 정리가 되는 큰 장점이 있으니 계속 해야겠지?

 

계속 프로그래밍 공부하면서 배운 내용을 정리하도록 하겠다.