🔎 이 글은 Apple Developer Documentation - SwiftUI App Dev Tutorials를 ChatGPT를 통해 번역하여 작성되었음을 알려드립니다.
SwiftUI 선언적 구문을 사용하여 앱의 사용자 인터페이스를 구성하기 위해 뷰를 만들고, 수정하고, 결합합니다. 회의를 관리하는 앱인 Scrumdinger를 빌드하기 시작하려면 뷰 그룹을 배열하여 회의 타이머 화면을 만듭니다. 모듈을 진행하면서 최종 디자인을 향해 작업하면서 타이머 화면을 다시 살펴보게 됩니다.
Section 1. 프로젝트 만들기
Section 2. 뷰 작성
뷰는 사용자 인터페이스의 일부를 정의합니다.
작고 간단한 뷰를 구성하여 복잡한 뷰를 빌드합니다.
이 섹션에서는 타이머 화면의 헤더를 빌드하여 회의의 경과 시간과 남은 시간을 표시합니다.
Step 1.
기본 SwiftUI 뷰 파일은 두 개의 구조체를 선언합니다.
첫 번째 구조체는 View 프로토콜을 준수하며, 단일 요구 사항인 body 속성을 갖습니다. 이 body 속성은 View를 반환합니다. body 속성에서는 뷰의 내용, 레이아웃 및 동작을 설명합니다.
두 번째 구조체는 캔버스에 표시할 뷰의 미리보기를 정의합니다.
Step 2.
Control 키를 누른 상태에서 ContentView 구조체를 클릭한 다음, Refactor > Rename을 선택하고 구조체 이름을 MeetingView로 변경합니다.
미리보기 구조체도 일관성을 위해 이름을 MeetingView_Previews로 변경할 수 있습니다.
Step 3.
기존 body의 내용을 ProgressView로 교체하고, 뷰를 초기화할 때 플레이스홀더 데이터를 사용합니다.
프로젝트 탐색기에서 SwiftUI 파일을 선택하면, 캔버스가 편집기와 함께 열립니다. 캔버스는 실행 시 뷰가 어떻게 보일지 미리 보여줍니다.
Step 4.
ProgressView의 값을 10에서 5로 변경하고, 캔버스에서 프로그레스 뷰가 업데이트되는 것을 확인합니다.
프로그레스 뷰는 스크럼 동안 경과된 시간의 백분율을 표시하는 데 사용됩니다. 프로그레스 뷰는 또한 앱이 데이터를 로드하는 동안처럼 진행 상태를 알 수 없을 때도 사용할 수 있습니다.
Step 5.
ProgressView를 우클릭하고 “Embed in VStack”을 선택합니다.
스택은 뷰를 수평, 수직 또는 앞뒤로 그룹화합니다. 스택을 사용하여 뷰 구성 요소를 결합하고 계층화할 수 있습니다.
Step 6.
코드 편집기에서 HStack을 생성하고, 라이브러리 버튼을 클릭한 후 HStack 안에 "Seconds Elapsed" 값을 가진 텍스트 뷰를 드래그합니다.
소스 편집기, 캔버스, 라이브러리 또는 검사기를 사용하여 뷰를 수정하더라도 코드가 항상 업데이트됩니다.
Step 7.
"Seconds Remaining" 값을 가진 또 다른 텍스트 뷰를 추가합니다.
Step 8.
각 텍스트 뷰를 VStack로 감쌉니다.
Step 9.
첫 번째 텍스트 뷰 아래에 "300"이라는 제목과 "hourglass.tophalf.fill"이라는 시스템 이미지를 가진 레이블을 추가합니다.
이렇게 하면 첫 번째 텍스트 뷰 아래에 "300"이라는 제목과 "hourglass.tophalf.fill" 시스템 이미지를 가진 레이블이 추가됩니다. SF Symbols 4를 사용하여 이미지가 추가되며, 시스템은 이러한 기호를 폰트처럼 처리하여 사용자의 기기 설정에 따라 동적으로 크기가 조정됩니다.
Step 10.
두 번째 텍스트 뷰 아래에 "600"이라는 제목과 "hourglass.bottomhalf.fill"이라는 시스템 이미지를 가진 레이블을 추가합니다.
Section 3. 뷰 수정 및 스타일 지정
이제 헤더 내에서 기본 뷰를 만들었으므로 나머지 회의 타이머 화면의 프로토타입을 만들고 스타일을 지정합니다. 헤더의 모양을 조정하기 위해 built-in modifiers를 추가합니다. 또한 추가 스택과 뷰를 만들고 컨트롤을 추가하기 시작합니다.
Step 1.
각 VStack 사이에 spacer를 추가하여 부모 뷰에서 사용 가능한 공간을 활용합니다.
Step 2.
“Seconds Elapsed”와 “Seconds Remaining”을 감싸고 있는 각각의 VStack에 정렬을 추가합니다. “Seconds Elapsed”는 leading 정렬로, “Seconds Remaining”은 trailing 정렬로 설정합니다. 이러한 정렬은 기본적으로 중앙 정렬을 대체합니다. 일부 시스템은 왼쪽과 오른쪽 정렬을 사용하지만, SwiftUI는 앱의 지역화(언어 및 지역 설정)를 쉽게 하기 위해 leading과 trailing 정렬을 사용합니다.
팁: VStack을 선택한 후 Attributes inspector에서 Alignment 옵션을 사용하여 정렬을 설정할 수도 있습니다.
Step 3.
텍스트 뷰의 크기를 줄이기 위해 .font(.caption) 수정자를 추가합니다.
SwiftUI에서 뷰를 사용자 정의하려면 수정자(modifiers)를 호출합니다. 각 수정자는 새로운 뷰를 반환합니다. 하나의 뷰에 여러 수정자를 사용할 수 있으며, 수정자는 수직으로 쌓아 사용할 수 있습니다.
Step . 4
원형 모양과 테두리를 가진 플레이스홀더를 추가합니다. 원형 타이머 뷰의 디자인은 이후 튜토리얼에서 다듬을 것입니다.
Step 5.
"Speaker 1 of 3"을 표시하는 텍스트 뷰를 추가합니다
Step 6.
forward.fill 이미지를 라벨로 사용하는 버튼을 추가합니다.
Step 7.
텍스트와 버튼 사이에 Spacer 를 추가합니다.
Step 8.
최상위 VStack에 패딩을 추가하여 뷰들이 화면의 가장자리에서 들어오도록 합니다. 이렇게 하면 사용자 인터페이스가 가장자리에 너무 가까워지지 않아서 더 깔끔하고 보기 좋게 보입니다.
Section 4. 접근성 데이터 보충하기
SwiftUI는 기본적으로 접근성을 지원하므로, 최소한의 추가 작업으로도 접근성 기능을 활용할 수 있습니다. 예를 들어,
Text뷰의 문자열 내용은 자동으로 VoiceOver와 같은 장치 기능에 의해 읽히도록 지원됩니다. 하지만 때때로, 사용자의 접근성 경험을 향상시키기 위해 추론된 데이터에 보충 정보를 추가하고 싶을 수 있습니다.
Step 1.
헤더의 HStack 안에 있는 자식 뷰들에 대한 추론된 접근성 레이블 및 값들을 무시하고, 다음 단계에서 추가적인 접근성 데이터를 통해 접근성 경험을 향상시킬 준비를 합니다
SwiftUI는 기본적으로 UI 요소에 접근성 레이블과 값을 할당합니다. 이는 VoiceOver와 같은 접근성 기능이 자동으로 요소의 내용을 읽을 수 있게 합니다. 하지만 때때로 UI 디자인에 따라 이러한 기본 값들을 무시하고, 더 구체적이고 명확한 접근성 데이터를 추가하는 것이 좋습니다.
Step 2.
HStack에 접근성 레이블을 추가하고, 레이블에 의미 있는 이름을 전달합니다.
레이블과 값이 사용자가 요소의 목적을 이해하는 데 충분한 맥락을 제공하는지 고려합니다. 이 경우, VoiceOver 사용자가 두 개의 레이블 출력을 모두 듣게 하기보다는, 가장 중요한 정보를 표출하는 하나의 레이블로 데이터를 보충할 수 있습니다.
Step 3.
HStack에 남은 시간에 대한 접근성 값을 추가합니다.
자식 뷰의 값을 의도적으로 무시했기 때문에, HStack에 값을 추가해야 합니다. 그렇지 않으면 SwiftUI가 자식 뷰의 값을 자동으로 추론할 것입니다.
Step 4.
포워드 버튼을 설명하는 접근성 레이블 추가하기
기본적으로 VoiceOver는 이미지의 시스템 이름인 forward.fill을 읽습니다. 접근성 레이블을 추가하면, VoiceOver는 레이블 텍스트를 읽고, 그 다음에 내장된 접근성 특성인 "다음 스피커. 버튼."을 읽습니다.
