WWDC24) SwiftUI 핵심 기능

 

✅ SwiftUI 기초 - 핵심 요약

1. SwiftUI란?
   • Apple의 선언적 UI 프레임워크.
   • iOS, macOS, watchOS, tvOS 등 Apple 전 플랫폼에서 사용됨.
   • 최신 앱과 기본 앱에도 점진적으로 광범위하게 채택 중.
2. SwiftUI의 장점
   • 적은 코드로 복잡한 UI와 기능 구현 가능.
   • 플랫폼 고유 기능을 쉽게 활용할 수 있어 자연스럽고 일관된 사용자 경험 제공.
   • 프로토타입 → 프로덕션 전환이 빠르고 효율적.
   • 앱의 핵심 가치에 더 집중할 수 있음.
3. 점진적 채택 가능
   • 앱 전체를 SwiftUI로 만들 필요 없음.
   • 기존 UIKit/AppKit과도 통합 가능해 점진적으로 도입 가능.
4. 학습 용이성
   • 위 특성들 덕분에 초보자도 SwiftUI를 쉽게 배울 수 있음.
5. 내용 구성 예고
   • ① SwiftUI 뷰가 작동하는 기본 구조
   • ② 내장 기능과 Apple 플랫폼에서의 활용 예
   • ③ 다른 프레임워크(Uikit 등)와의 통합 능력

 

✅ SwiftUI 뷰 작동 방식에 대한 기본적인 설명 

1. 앱 목표
   • 반려동물과 그들의 재주를 기록하고 비교할 수 있는 앱을 SwiftUI로 빌드할 예정
2. 뷰(View)의 역할
   • 사용자 인터페이스(UI)의 기본 구성 단위
   • 화면의 모든 픽셀은 뷰를 통해 정의됨
   • SwiftUI 작업의 핵심 요소
3. SwiftUI 뷰의 3가지 특징
   • 선언적(Declarative): 결과를 선언하여 UI를 구성
   • 구성적(Compositional): 뷰들을 조합하여 더 복잡한 UI 구성 가능
   • 상태 중심(State-driven): 데이터 상태에 따라 UI 자동 갱신

 

✅ SwiftUI의 선언적 프로그래밍 방식 

 

1. 선언적 UI 구성

• 개발자가 원하는 UI를 "설명"하면 SwiftUI가 그에 맞는 결과를 생성함.
• 텍스트, SF Symbols 기반 이미지, 버튼 등 다양한 컨트롤을 손쉽게 생성할 수 있음.

2. 예시: 수평 스택(HStack)

• 아이콘 + 제목 조합의 레이블(Label)을 구성.
• 스페이서(Spacer)와 텍스트 등을 활용하여 구성 가능.
• 이러한 구성은 스크롤 가능한 리스트(List) 같은 컨테이너에도 적용 가능.

 

3. 동적 리스트 구성

• 반려동물 컬렉션 데이터를 기반으로 각 반려동물마다 HStack을 생성.
• 각 반려동물의 고유 속성(예: 이름 등)을 활용하여 뷰가 자동으로 업데이트됨.

 

선언형 vs 명령형 

- 선언적 프로그래밍은 원하는 결과를 설명하고, 명령형 프로그래밍은 단계별 지시를 통해 결과를 얻는다.

ex) 명령형 : 홈런을 치는 단계를 지시 > 이리와, 배트 물어, 홈 플레이트로 가 , 선언형 : 홈런을 쳐서 득점하는 것을 보고싶다. 

- 선언형 코드는 달성하기 위한 단계 대신 예상되는 결과에 집중

- 명령형 코드는 상태를 변경할 때나 기존의 선언적 구성요소가 없을 때 유용.

- SwiftUI는 둘 다 사용하며, 예시로 버튼은 선언적으로 추가되고 탭 시 명령형 코드로 목록에 반려동물을 추가한다.

- SwiftUI 뷰는 상태 설명이며, 클래스 대신 구조체로 정의됩니다.

- 뷰는 선언적 설명이므로 뷰 하나를 여러 개로 나누어도 앱 성능은 저하되지 않는다

 

 

Compositional

hstack : container view > 레이아웃을 위한 것, 하위 항목을 수평 스택에 배치

- ViewBuilder 클로저를 사용하여 컨테이너의 하위 항목을 선언 

- ViewBuilder 콘텐츠 매개변수가 있는 HStack 초기화 프로그램을 사용하고 있음. 

- 스유의 모든 컨테이너 뷰에서 사용되는 패턴

- compositional은  view modifiers라고 불리는 또 다른 스유의 패턴에서 중요한 역할

 

 

view modifiers는 기본 뷰에 수정사항을 적용하고 해당 뷰의 모든 측면을 변경할 수 있음 : 원으로 자르기, 그림자 추가 , 녹색테두리 오버레이

 

 

 

- 뷰 계층은 사용자 설정 뷰와 뷰 한정자로 캡슐화될 수 있음.

- custom view는 View 프로토콜 준수, 자신이 나타내는 뷰를 반환하는 body 속성 가짐 

프로필 이미지 구성을 개인 뷰 속성으로 리팩토링

 

 

원하는 방식으로 row뷰를 계속 반복하고 빌드할 수 있음.

 

custom views 는 body가 생성되는 방식을 변경하는 입력이 있을 수 있다. 행이 나타낼 반려동물에 대한 속성을 추가했음.

 

> 동일한 뷰를 재사용해서 각각 다른 반려동물 정보 표시

 

collection > foreach 뷰를 만드는 것이 편리,

ForEach : 컬렉션의 각 요소에 대한 뷰를 생성하고 해당 뷰를 해당 컨테이너에 제공.

section으로 구성된 여러 데이터 컬렉션과 같은 고급 구성 생성

 

 

view modifier를 사용하여 맞춤화. swipe action 추가

 

 

State-driven

: 상태중심. 시간이 지남에 따라 뷰의 상태가 변경되면 SwiftUI는 자동으로 상용구 및 업데이트 버그를 제거하여 UI를 최신상태로 유지

 

백그라운드에서 자동으로 사용자 인터페이스 표현을 유지. 데이터가 변경되면 새로운 뷰 값이 생성되어 스유에 제공됨. 해당 값을 사용하여 출력을 업데이트하는 방법을 결정

연결된 반려동물 객체가 수정되고, hasAward가 true로 변경됨. row 뷰와 같이 이 반려동물에 의존하는 모든 뷰를 추적.

 

- pet에 대한 참조가 있고, body에는 pet이 보상을 받았는지 또는 종속성이 설정되지 않았는지 판독.

- swiftui는 업데이트된 pet으로 이 뷰의 body를 다시 호출

- 보상을 반영하는 이미지가 포함된 결과를 반환 > swiftui는 이 결과를 기반으로 출력을 업데이트하여 화면에 새 이미지를 표시

 

뷰가 body에서 사용하는 모든 데이터는 해당 뷰의 종속성

- 이 경우에는 앱에서 Observable pet class를 생성.

- 뷰 body에 사용되는 특정 속성에 대한 종속성을 생성.

- 상태관리를 위한 여러 도구 : State, Binding

 

State

뷰에 대한 새로운 내부 데이터 소스를 생성

뷰 속성을 @State로 표시하면 SwiftUI는 저장 공간을 관리하고 뷰가 읽고 쓸 수 있도록 다시 제공 

 

Binding

다른 뷰의 상태에 대한 양방향 참조를 생성

 

 

반려동물의 재주를 평가하는 뷰

State 를 사용하여 현재 등급을 추적하고 시간이 지남에 따라 변경

SwiftUI는 백그라운드에서 자동으로 이 상태의 값을 유지 -> 5

 

증가 버튼을 누르면 버튼의 작업이 호출됨 > 뷰의 내부 state가 증가 -> 6

 

SwiftUI가 이 변화를 인지하고 RatingView에서 본문을 호출하여 새로운 텍스트 값을 반환 > 결과가 화면에 업데이트됨

 

 

상태변경을 withAnimatin으로 래핑 > 결과 뷰 업데이트가 기본 애니메이션과 함께 적용됨

- 텍스트엔 기본 크로스 페이드 전환 효과 > 전환 효과 맞춤화 가능

숫자 텍스트 콘텐츠 전환 효과

 

-> state 랑 animation을 사용하여 원하는 상호작용이 포함된 캡슐화된 뷰 구성요소를 빌드.

 

gauge와 Ratingview를 결합 > RatingContainerView

 

각각 고유한 state가 있으며, 이는 등급이 무엇인지에 대한 별도의 정보 소스 역할

 

RatingView의 자체 state가 증가할 때 컨테이너 뷰의 state와 gauge가 변경되지 않음을 의미.

 

Binding을 입력으로 사용하여 컨테이너 뷰에서 양방향 참조를 제공할 수 있도록 업데이트

> 컨테이너 뷰 state가 유일한 정보 소스가 되며 guage에 값을 제공하고 ratingview에 binding을 제공. 

 

 

🔑 핵심 개념 요약

✅ @State

• **상태의 원본(Source of Truth)**입니다.
• SwiftUI 뷰 내부에서 직접 값 변경 권한을 가짐.
• 해당 값이 바뀌면 뷰가 자동으로 다시 그려짐.

✅ @Binding

• 외부 상태의 참조자(Proxy) 역할을 합니다.
• 상태의 원본을 직접 가지지 않고, 외부에서 전달된 값을 읽고 쓰기만 합니다.
• 자체적으로 상태를 갖지 않기 때문에 단독으로 정보의 기준이 될 수 없습니다.

struct RatingContainerView: View {
    @State private var rating: Int = 5  // <- 상태의 원본

    var body: some View {
        Gauge(value: rating, in: 0...10) {
            Text("Rating")
        }
        RatingView(rating: $rating)      // <- binding을 전달
    }
}

 

👉 여기서 중요한 포인트는:

• RatingContainerView는 rating이라는 상태를 직접 관리합니다 (@State).
• RatingView는 해당 상태를 전달받아 참조만 합니다 (@Binding).
• 따라서 RatingView는 정보의 소유자가 아니며, 단지 값을 표시하고 조작할 수 있는 역할만 수행합니다.

 

 

✅ SwiftUI 내장 기능

다크모드, 유동적 글자 크기 조절, 현지화

프리뷰 기능

 

 

기기에서 직접 진행 가능.

 

- 선언적 뷰의 한 가지 이점 : 적응성 

- 정확한 시각적 구성이 아닌 기능의 목적을 설명하는 경우가 많음

 

 

버튼은 적응형 뷰의 좋은 예.

- 2가지 기본적인 속성 : action, action을 설명하는 label

- 다양한 상황에서 사용할 수 있지만, 항상 레이블이 지정된 동작의 목적을 수행

 

다borderless, bordered, prominent 와 같은 다양한 스타일에 적응. swipe actions, menus, forms 등 다양한 상황에 자동으로 적응

이런 패턴은 토글을 포함하여 스유의 모든 컨트롤에 적용됨. 토글에는 스위치, 체크박스, 버튼과 같은 고유한 스타일이 있다.

 

idiomatic style로 나타난다 ? 

 

Toggle("Nocturnal Mode", systemImage: "moon", isOn: $pet.isNocturnal)
→ 이 한 줄의 Toggle 코드가 다양한 맥락(context)에 따라 자동으로 적절한 스타일(UI)로 바뀐다는 뜻이에요.

예시: 같은 코드, 다른 UI로 표현됨

• ✅ Switch (설정 화면이라면 이게 자연스러움)
• ☑️ Checkbox (체크리스트 맥락)
• 🌙 Button (툴바나 명령 버튼 맥락)
• ↔️ Swipe 액션 (리스트에서 스와이프 동작 맥락)
• ☰ 메뉴 항목
• 📝 Form 안 토글

SwiftUI가 내부적으로 이 Toggle을 자동으로 환경에 맞는 관용적인 UI 요소로 바꿔주는 것이죠.

Toggle 같은 컴포넌트가 다양한 UI 맥락에 맞게 자동으로 가장 자연스럽고 익숙한 UI 형태로 표현된다는 의미입니다.

 

즉, Toggle은 단순한 스위치에 국한되지 않고 체크박스, 버튼, 스와이프, 메뉴 항목 등 다양한 스타일로 유연하게 표현될 수 있는 '스마트한 UI 구성 요소'인 거죠.

 

 

 

Searchable

searchable modifier를 추가하면 해당 한정자가 적용된 뷰는 검색이 가능하다고 설명하는 것.

 

 

SwiftUI는 모든 세부 사항을 처리하여 관용적인 방식으로 이를 수행.

그리고 다른 한정자를 점진적으로 채택함으로써 경험을 맞춤화할 수 있음

 

-> 제안, 범위, 토큰 추가 등의 한정자

버튼, 토글, 피커 -> 컨트롤, 컨테이너뷰 또는 맞춤화 지원 다중 열 테이블 등등

하위 수준 제어를 제공하는 또 다른 API 레이어도 준비되어있음. 자신만의 컨트롤 스타일을 빌드

- 높은 성능의 명령형 그리기 : canvas 사용

하위수준의 도구를 사용하여 고전적인 플립보드를 연상시키도록 함. 애니메이션, 그래픽 트릭과 약간의 metal 셰이더를 사용

- 높은 성능의 명령형 그리기 : canvas 사용

 

 

App definition

 

전체 앱 정의는 뷰가 따르는 동일한 원칙을 기반으로 빌드. 앱은 scene별로 정의된 선언적 구조.

- WindowGroup은 Scene의 한 종류이며 화면에 표시할 콘텐츠 뷰로 생성됨 

 

맥 OS와 같은 멀티 윈도우 플랫폼에서는 추가 장면이 앱 기능과 상호작용하는 다양한 방법을 제공

 

맞춤형 위젯 빌드로 확장

- 위젯 : 홈 화면과 데스크탑에 표시, 점수판 뷰 중 일부를 재사용하여 등급 표시 

 

 

✅ 모든 플랫폼에서 활용

- SwiftUI의 기능은 사용되는 모든 플랫폼으로 확장되므로 한 플랫폼에서 투자하고 다른 플랫폼에서 네이티브 앱을 빌드 할 수 있음

하나의 플랫폼에 대해 SwiftUI를 사용하여 빌드한 사용자 인터페이스가 있으면 해당 UI를 모든 플랫폼에 적용할 수 있는 시작이 됨

 

맥에서는 키보드 탐색이나 여러 윈도우 생성과 같은 기능을 자동으로 지원

검색 제안 : 맥에서는 표준 드롭다운 메뉴 생성, iOS에서는 오버레이 목록 생성

 

 

하위수준 API에서 맞춤형으로 제작된 뷰는 플랫폼 전체에서 동일한 결과를 생성하며 필요할 때 동일한 뷰 재사용 가능

한번 작성하면 어디서나 실행되는건 아니지만, 한번만 익히면 모든 상황에서 사용할 수 있음

 

각 플랫폼에 특화된 API 도 있음

 

모든 플랫폼은 사용방식과 설계 방식 고유함. HIG에서는 구성요소, 패턴 해당 플랫폼의 고려사항 설명

 

워치 OS에 navigationSplitView는 자동으로 적응

터치나 키보드 대신 워치에서는 디지털크라운을 사용해서 등급을 선택하려면 ??

 

동일 점수판 뷰를 기반으로 watchOS용 추가 한정자인 digitalCrownRotation 추가

 

맥에서는 유연한 윈도우 모델을 활용

 

비전 OS로 가져와서 뷰를 활용. 입체 콘텐츠 추가 가능

 

 

✅ 다른 프레임워크와의 통합 

 

SwiftUI는 각 플랫폼의 SDK와 함께 제공되는 프레임워크

SwiftUI는 이 모든 기능에 대한 상호 운용성을 제공

SwiftData

: 앱에 영구적인 모델을 빠르게 추가할 수 있고, SwiftUI뷰에서 해당 모델을 연결하고 쿼리할 수 있는 API가 함께 제공됨.

 

SwiftCharts

: SwiftUI를 기반으로 구축된 맞춤화가 가능한 차트 프레임워크

UIKit 및 AppKit은 필수적인 객체 지향 사용자 인터페이스 프레임워크

 

- SwiftUI와 유사한 빌딩 블록을 제공하지만 뷰 생성 및 업데이트에 다른 패턴을 사용 

- 하지만 상호운용이 가능

 

 

 

- SwiftUI에서 사용하려는 UIKit 또는 AppKit의 뷰 또는 뷰 컨트롤러가 있는 경우 ViewRepresentable을 생성할 수 있음.

- 명령형 코드를 사용하여 연관된 UIKit 또는 AppKit뷰를 생성하고 업데이트 하기 위한 특수 SwiftUI 뷰 프로토콜임

- 결과는 SwiftUI의 선언적 뷰 빌더 내에서 사용할 수 있고 HStack에서 사용하는 것과 같이 다른 뷰 처럼 사용할 수 있는 뷰

 

 

<반대의 경우>

 

- SwiftUI뷰를 UIKit 또는 AppKit의 뷰 계층 구조에 포함하려면 Hosting View Controller와 같은 클래스를 사용할 수 있음

- 루트 SwiftUI로 생성

- 앱이 전부 스유일 필요는 없음.

 

 

 

정리하자면, SwiftUI는 선언적/구성적/상태중심뷰를 기반으로 구축되었고 아래와 같은 장점이 있다 !!

적은 코드, 광범위한 구성요소, 점진적인 채택