안녕하세요, GraceKim입니다! 🍎
Velog로는 처음 작성하게 되었는데요.
이번에 iOS App을 본격적으로 공부해보고자 애플 공식 문서 중 'iOS App Dev Tutorials를 보고 공부하고 있습니다.
해당 문서에서 알게 된 내용, 복습하고자 하는 내용을 위주로 풀어보려고 합니다.
애플 공식 개발자 문서로, 링크는 다음과 같습니다.
https://developer.apple.com/tutorials/app-dev-training
총 14시간 20분정도 걸린다고 하니, 틈틈히 공부하고자 합니다.
Using stacks to arrange views
프로젝트 만드는 과정은 생략하고, 제가 몰랐던, 혹은 새로 알게 되었던 부분의 핵심만을 정리해보려 합니다.
먼저, 뷰의 간격을 조정하여 스타일링을 하는 법에 대하여 공부하였습니다.
Stacks
Stack은 한 개 이상의 View를 묶어서 배치할 때 사용할 수 있는 것입니다.
그 중 HStack, VStack, ZStack이 있는데,
HStack
HStack은 SwiftUI에서 수평 방향으로 뷰를 배열하는 컨테이너 뷰(Container View) 중 하나입니다.
"H"는 수평(horizontal)을 나타내며, HStack은 포함된 뷰들을 수평으로 나란히 배치합니다.
예를 들어, 텍스트, 이미지, 버튼 등을 수평으로 나열하고 싶을 때 HStack을 활용할 수 있습니다.
배치 방향은 Trailing -> Leading으로 배치합니다.
import SwiftUI
struct ContentView: View {
var body: some View {
HStack {
Button("Click me") {
// 버튼 클릭 시 동작
}
Image(systemName: "heart.fill")
}
}
}
VStack
VStack은 SwiftUI에서 사용되는 수직 방향의 뷰를 배열하는 컨테이너 뷰(Container View) 중 하나입니다.
"V"는 수직(vertical)을 나타내며, VStack은 포함된 뷰들을 수직으로 나란히 배치합니다.
예를 들어, 텍스트, 이미지, 버튼 등을 수직으로 배열하고 싶을 때 VStack을 활용할 수 있습니다.
VStack은 'Vertical', 즉 '수직'으로 배치해주는 View다.
배치 방향은 Top -> Bottom으로 배치한다.
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Button("Click me") {
// 버튼 클릭 시 동작
}
Image(systemName: "heart.fill")
}
}
}
ZStack
ZStack은 SwiftUI에서 사용되는 뷰를 겹치게 배치하는 데 사용되는 컨테이너 뷰(Container View) 중 하나입니다.
"Z"는 깊이(depth)를 나타내며, ZStack은 포함된 뷰들을 3D 공간에서 앞뒤로 겹치게 배치합니다.
ZStack은 뷰를 앞뒤로 겹쳐서 표시하므로, 배경이나 이미지, 텍스트 등을 겹쳐서 표현하거나, 뷰 간에 쌓음 효과를 만들 때 유용합니다.
import SwiftUI
struct MeetingView: View {
var body: some View {
VStack {
ProgressView(value: 5, total: 15)
HStack {
VStack(alignment: .leading) {
Text("Seconds Elapsed")
.font(.caption)
Label("300", systemImage: "hourglass.tophalf.fill")
}
Spacer()
VStack(alignment: .trailing) {
Text("Seconds Remaining")
.font(.caption)
Label("600", systemImage: "hourglass.bottomhalf.fill")
}
}
}
}
}
struct MeetingView_Previews: PreviewProvider {
static var previews: some View {
MeetingView()
}
}그래서 위와 같이, HStack(수평)으로 배치한 상태에서 각각 VStack(수직)을 두고, .leading과 .trailing으로 양 끝에 배치한 후, Spacer()로 간격을 둔 View임을 알 수 있습니다.
SwiftUI 접근성(Accessibility)
접근성(Accessibility)이란, 산업 디자인, 사용자 인터페이스 디자인, 건축, 시스템 공학, 인간공학 등의 분야에서 쓰이는 용어로, 사용자의 신체적 특성이나, 지역, 성별, 나이, 지식 수준, 기술, 체험과 같은 제한 사항을 고려하여 가능한 많은 사용자가 불편없이 이용할 수 있도록 제품, 서비스를 만들어 제공하고 이를 평가할 때 쓰이는 말이다.
VoiceOver을 통해서 접근성을 제공하는데, 해당 튜토리얼에서 언급한 내용을 위주로 정리해보겠습니다.
| 코드 | 설명 |
|---|---|
| accessibilityLabel | 레이블을 설정하면 설정한 텍스트를 읽어줍니다. |
| accessibilityValue | 값이 달라지는 경우에 사용하며, 슬라이더의 값이나 텍스트 필드의 값에 사용할 수 있습니다. |
| accessibilityHint | 요소를 동작시키기 위한 방법을 안내합니다. |
| accessibilityAction | 요소에 접근성 작업을 추가합니다. |
| accessbilityElement | 새 접근성 요소를 만들거나, 기존 접근성 요소를 수정합니다. |
자세한 사항은 아래에서 확인할 수 있습니다.
https://www.apple.com/kr/accessibility/
https://developer.apple.com/documentation/swiftui/view-accessibility
앞으로 꾸준히, 열심히 공부하겠습니다!
감사합니다.
