[iOS App Dev Tutorials] SwiftUI essentials

애플의 공식 문서인 iOS App Dev Tutorials를 보면서 SwiftUI 공부를 시작했다.

그중 SwiftUI의 Chapter 1 - SwiftUI essentials부터 시작해 보았다!

Figma에서 사용하던 기능들과 대응하면서 생각해 보니까 이해가 잘 됐다.

 

1. Create a project

Xcode에서 새로운 프로젝트를 생성하였다. 문서에서는 App으로 설정하였지만, 현재 프로젝트를 Swift Playgrounds App 기반으로 진행하기에 Swift Playgrounds App으로 선택하였다.

 

2. Build groups of views

📍 ProgressView

ProgressView(value: 5, total: 15)

Progressive bar를 보여준다. value / total

 

📍 Vstack

VStack {
	Text("Seconds Elapsed")
	Label("300", systemImage: "hourglass.bottomhalf.fill")
}

Figma에서 Vertical layout처럼 가로로 요소들을 보여준다.

 

📍 Hstack

VStack {
	Text("Seconds Elapsed")
	Label("300", systemImage: "hourglass.bottomhalf.fill")
}

Horizontal layout처럼 세로로 요소들을 보여준다.

 

📍 Label

Label("300", systemImage: "hourglass.bottomhalf.fill")

텍스트와 이미지를 함께 보여준다. 시스템 이미지는 SF기호를 사용한다.

 

3. Modify and style views

📍 Spacer

Text("Seconds Elapesed")

Spacer()

Text("Seconds Remaining")

요소들 사이에 Spcaer()을 넣으면 요소 사이에 공간이 생긴다. Spacing mode를 Space between으로 설정한 것과 유사하다.

 

📍alignment (.leading / .trailing)

VStack(alignment: .leading) {
    Text("Seconds Elapsed")
    Label("300", systemImage: "hourglass.bottomhalf.fill")
}

VStack(alignment: .trailing) {
    Text("Seconds Remaining")
    Label("600", systemImage: "hourglass.tophalf.fill")

.leading은 좌측 정렬, .trailing은 우측 정렬한다.

 

📍 .font

Text("Seconds Elapsed")
    .font(.caption)

텍스트의 크기를 지정할 수 있다.

 

📍 Button

Button(action: {}) {
    Image(systemName: "forward.fill")
}

버튼을 만든다.

 

📍 Image

Image(systemName: "forward.fill")

이미지를 넣는다.

 

📍 .padding

VStack(alignment: .leading) {
    Text("Seconds Elapesed")
                        .font(.caption)
    Label("300", systemImage: "hourglass.bottomhalf.fill")
}
.padding()

패딩을 추가한다.

 

4. Supplement accessibility data

📍 .accessibilityElement / .accessibilityLabel / .accessibilityValue

VStack(alignment: .trailing) {
    Text("Seconds Remaining")
        .font(.caption)
    Label("600", systemImage: "hourglass.tophalf.fill")
}
.accessibilityElement(children: .ignore)
.accessibilityLabel("Time remaining")
.accessibilityValue("10 minutes")

 

.accessibilityElement(children: .ignore)에서 하위 요소들에 대한 접근성을 무시하고

.accessibilityLabel로 접근성 레이블을 추가하고

.accessibilityValue로 접근성 레이블의 값을 추가한다.

 

 

-

 

 

내용들을 따라가다 보면 아래와 같이 뷰가 완성된다.

공부를 하면서 가장 크게 기억에 남는 것은 첫 번째 튜토리얼부터 접근성에 대한 내용이 나왔다는 것이었다. VoiceOver와 같은 기능을 사용하기 위해 접근성을 향상하는 것이 꽤나 부가적인 부분이라고 생각했는데 첫 번째 내용에 접근성에 대해 소개를 해준 것이 많이 놀라웠다. 애플이 접근성을 정말 중요하게 생각하고 신경 쓰는 것이 느껴졌다. 평소에 접근성에 대해 중요하다고 생각했지만, 막상 프로덕트를 만들 때 빨리 기능들을 구현하는데 집중하느라 접근성을 고려하지 못했다는 것을 깨달았다. 접근성을 향상하는 것에 대해 더 공부해보고 싶은 흥미가 생겼다.