SwiftUI) SwiftUI Essentials

 

최근에 개발 컨퍼런스에 갔다가 스유 뽐뿌가 와서

스유 공부를 시작했어요. 새로운 걸 공부하는 건 역시 재밌네욤

 

자료는 애플 공식 문서에 있는 SwiftUI Tutorials로 하려구요.

우선 한번 전체적으로 가볍게 보고 추후 필요에 따라 깊게 공부해보려고 합니다.

 

공식문서라 믿음직스럽고 영어공부도 되는 것 같고 좋네요 ( 아직까진 ? )

그리고 뭔가 쉽게 설명해줘서 재밌네요. 키키. 

 

https://developer.apple.com/tutorials/swiftui

Introducing SwiftUI | Apple Developer Documentation

 

첫 챕터는 SwiftUI Essentials 입니다.

 

---

1. Creating and Combining Views : 뷰 만들고 결합해보기 ~

 

- 처음에는 어떤 앱을 만들 것인지 설명해줍니다. 어떤 앱이냐면요.

: 일명 랜드마크앱 ! 좋아하는 장소를 발견하고 공유할 수 있는 앱이라고 하네요.

 

- Landmarks uses stacks to combine and layer the image and text view components.

: 스택을 사용해서 이미지와 텍스트와 같은 뷰 컴포넌트들을 결합하고 계층화 한대요.

 

- To add a map to the view, you’ll include a standard MapKit component. As you refine the view’s design, Xcode provides real-time feedback so you can see how those changes translate into code.

: 뷰에 지도를 추가하려면 표준 MapKit 컴포넌트를 포함시켜야 한대요.

뷰 디자인을 세분화할 때 Xcode는 실시간 피드백을 제공하여 이러한 변경 사항이 코드로 어떻게 변환되는지 확인할 수 있게 해 줍니다.

 

---

 

1) 프로젝트 생성 및 파일 살펴보기

- 이 튜토리얼이 진짜 좋은게 이렇게 스크롤을 내리면서 하나씩 설명해줍니다.

- 이대로 따라서 프로젝트 만들고, 중요한 설명들만 읽어줬어요.

 

- LandmarksApp.swift 파일

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

An app that uses the SwiftUI app life cycle has a structure that conforms to the App protocol.

The structure’s body property returns one or more scenes, which in turn provide content for display. The @main attribute identifies the app’s entry point.

 

: 스유 앱 라이프 사이클을 사용하는 앱은 App이라는 프로토콜을 conform 하는 구조를 가진대요 !

이 구조의 바디 프로퍼티는 하나이상의 scenses를 반환합니다. 그리고, @main 은 앱의 진입점을 식별합니다  !

 

- ContentView.swift 파일

 

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

By default, SwiftUI view files declare two structures. The first structure conforms to the View protocol and describes the view’s content and layout. The second structure declares a preview for that view.

: 기본적으로 스유의 view 파일은 두개의 구조를 선언합니다

-> 첫번째 구조는 View라는 프로토콜을 conform 합니다. 그리고 뷰의 내용이랑 레이아웃을 갖고이써요.

-> 두번째 구조는 그 뷰의 preview를 선언합니다. ( 요렇게 프리뷰를 띄우는 거구나 ! )

 

 

- Text 를 바꿔주니까 프리뷰에 바로 반영이 되네요.. 아니 UIKit 만 쓰다가 스유는 신세계긴 하다 히히 재밌더

 

---

2) Text View 커스터마이징

- 코드나 인스펙터를 사용

 

- 커맨드 + 클릭하면 저렇게 뜨는데, 저기서 SwiftUI Inspector를 선택하십쇼. 누르면 인스펙터가 뜨는데, Turtle Rock이라고 바꿔주고 Title로 설정 해줍니다. 직접 코드로 추가해보기 : .forgroundColor(.green) 

struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")
            .font(.title)
            .foregroundColor(.green)
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

- swiftUI를 커스텀하기 위해서 modifiers라는 메서드를 호출하게 됩니다. modifiers는 뷰의 설정을 변경하기 위해서 뷰를 래핑합니다.

- 각 modifier는 새로운 뷰를 반환합니다. 여러 개의 modifier가 체인처럼 수직적으로 연결되어있는 것이 일반적입니다.

( 여기서 말하는 modifier는 .font , .foregroundColor와 같은 거 )

- 이렇게 코드에서 Text 부분을 Command를 누르고 클릭해도 인스펙터를 열 수 있어요.

- 다시 Color를 inherited로 바꿔주면 .foregroundColor 코드 라인이 사라짐. 와앙 신기하다 ~

 

 

 

---

3) Stacks을 사용해서 뷰들을 결합해보기

 

- 타이틀뷰 외에도 랜드마크에 관한 공원의 이름이나 위치같은 세부사항을 포함하는 텍스트뷰를 추가해보자.

- SwiftUI로 뷰를 생성하면 레이아웃이나 동작을 바디 프로퍼티에 구현하게 됩니다요.

 

But, 바디 프로퍼티는 단일 뷰만 반환할 수 있습니다 !!

그래서 스택을 쓰는거에요 ! 스택을 사용하면 여러 뷰를 조합할 수 있거등요.

 

- 스택은 뷰들을 수평적으로, 수직적으로 혹은 앞뒤로 그룹화할 수 있습니다.

- 이번 내용에서는 가로 스택안에 공원에 대한 세부 정보를 나타낼거에요

- 그리고 제목을 나타내기 위해 세로 스택을 사용하여 가로 스택 위에 세로 스택을 배치할 것입니다.

- 요렇게 가로 스택 안에 공원 세부정보를 담고, 세로 스택안에 제목과 공원정보가 담긴 가로스택을 넣을 거랍니당.

 

자, 1번. 커맨드 + 클릭으로 팝오버 띄우고, Embed in VStack을 선택한다. 

- 그러면 VStack으로 감싸져요.

- 그다음엔 + 버튼으로 Text 드래그해서 추가한다음에 Joshua Tree National Park라는 랜드마크를 추가.

- 폰트의 위치를 subheadline으로 셋 합니다.

- VStack 이니셜라이저를 편집하여 앞 가장자리를 기준으로 뷰를 정렬합니다. 

- 요렇게 VStack의 이니셜라이저에는 정렬 기준을 넣을 수 있습니당

- 그 다음에 저 조슈아 어쩌구 공원을 위에 했던 방법대로 Embed HStack을 해주세요. 

- 그런다음에 Text로 캘리포니아를 추가해주는거에여. 그러면 나란히 HStack에 들어가고, 가운데에 Spacer를 추가해줄거에요.

 

- 디바이스의 전체 가로 너비를 사용하려면 두 개의 텍스트뷰를 포함하는 수평 스택에 Spacer를 추가하여 공원과 주소를 분리할 수 있습니다. Spacer는 확장됩니다. 이것은 포함된 뷰가 콘텐츠에 의해 정의된 사이즈만 갖게 하는 것이 아닌 부모 뷰의 모든 공간을 사용할 수 있게 만듭니다 ! 아래처럼요 ! 

- 마지막으로 랜드마크와 세부 내용 사이에 약간의 거리를 주기 위해서 padding() 수정자(modifier)를 사용합니다.

 

---

4) 커스텀 이미지뷰 만들어보기

- 파일에 더 많은 코드를 추가하는 대신에 이미지에 마스크, 테두리, 그림자 효과 등을 적용하는 커스텀 뷰를 만들어봅시당.

- 이미지 에셋 추가하는 방법은 스루하겠습니다 ! 아래 이미지 추가하심 됩니당.

 

turtlerock.jpg

0.08MB

- 새로운 파일을 추가해줄겁니다 SwiftUI View라는 친구에요. UIKit 의 UIView랑 같은 애라고 생각하면 되겠죠?

- 그리고 Image(_:) 이니셜라이져를 사용하여 Turtle Rock 이미지로 바꾸세요. 진짜.. 간단하네 스유.. 폼 미쳤다.

- 이미지 모양을 원형 클리핑 모양으로 변경하기 위해 clipShape(Circle())를 추가하세요 !
: 원형 타입은 마스크로 사용할 수도 있고 채우거나 스트로크 효과를 주는 뷰로써 사용할 수 있습니다.

- 회색 선이 있는 다른 원을 만든 다음 오버레이로 추가하여 이미지에 테두리를 만들고, 7포인트 반경의 shadow를 만든다음 다시 stroke를 white로 바꿔주세용.

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay {
                Circle().stroke(.white, lineWidth: 4)
            }
            .shadow(radius: 7)
    }
}

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

---

5) 다른 프레임워크에서 SwiftUI 뷰들을 사용해보자. 

 

- 다음으로 지정된 좌표를 중심으로 하는 지도를 만듭니다. 

- Mapkit을 사용해서 지도를 렌더링 할거에요 !

- MapView라는 파일을 생성해줍니다. 

- 그리고 Step3을 읽어보면, 지도에 대한 지역 정보를 갖고 있는 private한 state변수를 만들어줘요.

- You use the @State attribute to establish a source of truth for data in your app that you can modify from more than one view. SwiftUI manages the underlying storage and automatically updates views that depend on the value.

: 여기서 @State 속성을 사용하면, 하나 이상의 뷰로부터 수정할수 있는 앱의 데이터에 대해서 신뢰할 수 있는 source를 설정할 수 있어요.

 

- SwiftUI manages the underlying storage and automatically updates views that depend on the value.

: SwiftUI는 기본 storage를 관리하고 값에 따라 자동적으로 뷰를 업데이트 해준다고 합니다. 

 

---

@State에 대해서는 더 자세히 공부를 해줘야할 것 같습니다. 간단하게만 정리하자면,

 

- State는 뷰가 접근 가능하도록 값을 가지고 있는 프로퍼티 래퍼(Property Wrapper)입니다.

- 프로퍼티 래퍼는 Swift 5.1부터 추가된 어노테이션입니다.

- 프로퍼티 래퍼는 쉽게 말해 사용자가 별도의 코딩 없이 어노테이션만 선언해도 뷰에서 수정이나 읽기가 가능하도록 캡슐화를 대신해줍니다. 

- UIKit 을 사용했을 때는 어떠한 변수에 변화가 생기면 해당 변화를 직접 관찰하고 반영해 주어야 했는데 SwiftUI 에서는 property wrapper를 활용해 이러한 작업을 자동화 할 수 있도록 했다고 합니다. 

 

저도 처음 공부한 개념이라 공식문서와 블로그를 다시 살펴봐야겠네요 !

---

 

- 다음은 기본 Text를 지역을 바인딩해주는 Map view로 바꿔줍니다.

- By prefixing a state variable with $, you pass a binding, which is like a reference to the underlying value. When the user interacts with the map, the map updates the region value to match the part of the map that’s currently visible in the user interface.

: state 변수에 접두사 $를 사용하면, 기본 값에 대한 참조와 같은 바인딩을 전달합니다. 사용자가 map이랑 상호작용할 때, 현재 사용자 인터페이스에 보여지는 지도 부분과 일치하도록 지역 값을 업데이합니다.

 

When previews are in static mode, they only fully render native SwiftUI views. For the Map view, you’ll need to switch to a live preview to see it render.

: 프리뷰가 정적 모드일때는 네이티브 SwiftUI 뷰만 렌더링 한다고 합니다. 맵뷰의 경우 실시간 프리뷰로 바꿔줘야합니다.

struct MapView: View {
    // 지도에 대한 지역 정보를 보유하는 state 변수
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )
    
    var body: some View {
        Map(coordinateRegion: $region)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

 

---

6) 상세보기 구성하기

랜드마크 상세보기 앱의 최종 디자인 완성하기

 

1. 새  VStack을 추가합니다. 가장 상위에 위치한 VStack 은 두시고 그 안에 있던 3개의 텍스트뷰를 포함시키세요.

 

2. 커스텀 맵뷰를 스택 상단에 추가하시고 frame(width:height:)를 사용하여 맵뷰의 사이즈를 설정하세요.
- height 미터만 정의를 하면 자동적으로 콘텐츠의 width가 결정됩니다. 이 경우에는 맵뷰가 가능한 공간에 꽉 차게 설정됩니다.

 

3. 스택에 CircleImage를 추가하세요.

 

4. 맵뷰 위에 이미지뷰를 자리하게 하려면 이미지에 오프셋을 수직적으로 -130, 뷰로부터 하단 패딩(bottom padding) -130을 주세요
이렇게 하면 이미지를 위로 이동시켜서 텍스트에 대한 적절한 공간을 만들어줍니다.

 

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)

            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        }
    }
}

 

- 최상단에 있는 VStack에 spacer를 넣어서 콘텐츠를 화면 상단으로 밉니다.

- 지도 내용을 화면의 상단 가장자리로 확장하려면 edgeIgnoringSafeArea (.top) 수정자(modifier)를 맵뷰에 추가하십시오.

- 랜드마크 세부정보를 추가 : Divider 추가 !

- 마지막으로, HStack에 포함된 애들을 subheadline으로 설정하고 secondary color를 적용시켜줍니당.

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)

            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
                .font(.subheadline)
                .foregroundColor(.secondary)

                Divider()

                Text("About Turtle Rock")
                    .font(.title2)
                Text("Descriptive text goes here.")
            }
            .padding()

            Spacer()
        }
    }
}

최종 코드는 이렇게 됩니다요 !

그리고 맨 마지막엔 이렇게 개념을 잘 이해했는지 퀴즈도 나온답니다 ㅋㅋㅋ 친절한 애플 튜 토 리 얼

 

 

필요한 부분만 임의적으로 번역해서 정리했습니다 ! 

원본 설명은 공식 튜토리얼을 봐주세여 ~

 

 

생각보다 간단하게 정리될줄 알았는데 하나씩 하니까 내용이 많네요. 

다음부터는 굳이 다 정리하지는 않고, 전체 코드 및 중요한 내용들만 정리해야겠어요 ! ㅎㅎ

어차피 튜토리얼에 들어가면 하나씩 설명해주니까 그거 보면서 차근차근 따라하면 될 것 같네욤.