🔎 이 글은 Apple Developer Documentation - SwiftUI App Dev Tutorials를 ChatGPT를 통해 번역하여 작성되었음을 알려드립니다.

---

Scrumdinger는 사용자가 참석하는 일일 스크럼 목록을 유지하며, 이 목록을 루트 뷰에 표시합니다.

이 튜토리얼에서는 일일 스크럼 요약을 표시하는 CardView를 만들 것입니다. 다음 튜토리얼에서는 List 뷰를 만들어 각 행에 이 CardView를 사용하는 방법을 배울 것입니다.

Section 1. Create a color theme

Step 1.

프로젝트 내비게이터에서 새로운 그룹을 생성하고 이름을 Models로 설정합니다.

Step 2.

Models 그룹 안에 새로운 Swift 파일을 생성하고 이름을 Theme.swift로 설정합니다.

Step 3.

Foundation 프레임워크 대신 SwiftUI 프레임워크를 임포트합니다.

이 섹션에서는 뷰를 생성하지 않지만, SwiftUI 프레임워크에서 Color 속성을 추가합니다. SwiftUI는 색상을 뷰 인스턴스로 취급하므로 뷰 계층에 직접 추가할 수 있습니다.

Step 4.

String 타입의 원시 값을 갖는 Theme라는 이름의 열거형을 만듭니다.

Swift는 Theme에 추가하는 각 케이스 이름과 일치하는 문자열을 자동으로 생성합니다.

컴파일러는 열거형이 원시 타입을 선언하려면 케이스를 가져야 하기 때문에 오류를 발생시킵니다.

Step 5.

스타터 프로젝트에는 에셋 카탈로그가 포함되어 있으며, 각 색상에 대한 RGBA 값이 정의되어 있습니다.

에셋 카탈로그의 Themes 폴더에 나열된 각 색상에 대한 케이스를 추가합니다.

에셋 카탈로그에서 명명된 색상은 코드에서 참조되는 이름과 일치해야 하므로, 각 케이스를 정확하게 입력하세요.

Step 6.

self의 값에 따라 .black 또는 .white를 반환하는 accentColor라는 이름의 Color 속성을 추가합니다.

accentColor는 테마의 주요 색상과 높은 대비를 제공하여 뷰가 접근성을 유지할 수 있도록 합니다.

Step 7.

열거형의 원시 값을 사용하여 색상을 생성하는 mainColor라는 이름의 Color 속성을 추가합니다.

이 속성은 에셋 카탈로그에서 색상을 초기화합니다.

Section 2. Create a daily scrum model

DailyScrum 모델은 다음 네 가지 속성을 포함합니다: title, attendees, lengthInMinutes, 그리고 theme. 이 속성들은 모두 간단한 값 타입을 가지고 있습니다. DailyScrum은 데이터 값을 주로 포함하므로, 이를 struct로 선언하여 값 타입으로 만들 것입니다.

Step 1.

Models 그룹에 DailyScrum이라는 이름의 새 Swift 파일을 추가합니다.

Step 2.

title, attendees, lengthInMinutes, 및 theme 속성을 가진 DailyScrum 구조체를 생성합니다.

Step 3.

샘플 데이터를 제공하는 확장을 추가합니다.

Section 3. Create the card view

CardView는 DailyScrum 모델 데이터를 요약하여 제목, 참가자 수, 그리고 지속 시간을 표시합니다. CardView는 DailyScrum 구조체의 데이터를 조각별로 표시하는 더 작은 뷰들로 구성됩니다.

뷰를 개발하면서 즉각적인 시각적 피드백을 받을 수 있도록 CardView_Previews 구조체를 업데이트할 것입니다.

Step 1.

CardView라는 이름의 새 SwiftUI 뷰 파일을 추가합니다.

프리뷰가 일시 중지된 경우, 코드를 변경할 때 프리뷰에서 변경 사항을 확인할 수 있도록 프리뷰를 다시 시작할 수 있습니다.

Step 2.

DailyScrum 타입의 scrum이라는 상수를 추가합니다.

컴파일러는 CardView() 초기화자가 이제 DailyScrum 매개변수를 요구하기 때문에 오류를 발생시킵니다.

Step 3.

CardView_Previews에서 scrum이라는 이름의 정적 변수를 생성하고, 이를 CardView 초기화자에 전달합니다.

Step 4.

scum.theme.mainColor를 사용하여 프리뷰의 배경 색상을 지정합니다.

Step 5.

previewLayout 수정자를 사용하여 프리뷰의 너비를 400, 높이를 60으로 설정합니다.

프리뷰 레이아웃과 배경 색상을 설정하면 CardView가 List 뷰 안에서 어떻게 나타날지를 미리 볼 수 있습니다. 다음 튜토리얼에서는 List 안에 이 뷰를 포함할 것입니다.

Step 6.

캔버스 설정을 Live에서 Selectable로 변경합니다.

Step 7.

Text 뷰를 업데이트하여 scrum의 제목을 표시하고, 글꼴 스타일을 headline으로 설정합니다.

Step 8.

Text 뷰를 VStack 안에 삽입하고, leading 정렬을 설정합니다.

VStack은 자식 뷰를 수직으로 배열하며, 뷰를 수평 축에 맞춰 배치하기 위해 정렬 인자를 사용합니다.

Step 9.

Spacer를 추가하고, 참석자 수를 표시하는 Label을 포함하는 HStack을 추가합니다.

Label과 Image는 SF Symbol에 약간 다른 매개변수 레이블을 사용합니다. 뷰를 정렬하기 위해 사용한 Image는 Image(systemName:_)을 사용하는 반면, Label(_:systemImage:)을 사용합니다.

Step 10.

HStack에 또 다른 Label을 추가하고, 그 시스템 이미지를 "clock"으로 설정합니다.

Step 11.

라벨을 수정하여 회의 길이를 표시합니다.

뷰는 속성 검사기를 사용하여 사용자 정의할 수 있으며, 코드가 이에 따라 업데이트됩니다. 또는 코드를 직접 변경하여 속성을 수정할 수 있습니다. 두 경우 모두, 프리뷰는 변경 사항을 반영하여 업데이트됩니다.

Step 12.

레이블 사이에 Spacer를 추가하여 정보를 뷰의 가장자리 주위에 배치합니다.

Section 4. Stylize the card

카드 뷰는 일일 스크럼에 대한 정보를 표시합니다. 이 섹션에서는 가장 중요한 정보를 강조하기 위해 카드를 스타일링하고, 텍스트와 배경 뷰 사이의 충분한 대비를 보장하기 위해 시각적 구성 요소를 수정할 것입니다. 이 작업은 밝은 모드와 어두운 모드에서 모두 적용됩니다.

Step 1.

회의 길이 라벨에 20 포인트의 오른쪽 패딩을 추가합니다.

뷰의 .leading, .top, 및 .bottom 가장자리에도 패딩을 추가할 수 있습니다.

Step 2.

HStack 안에 있는 모든 폰트를 캡션 스타일로 설정합니다.

레이블과 이미지에서 사용되는 SF Symbols는 폰트의 두께와 크기 변화에 따라 적절하게 크기가 조정되고 정렬됩니다.

Step 3.

VStack에 패딩을 추가하여 모든 콘텐츠를 가장자리에서 멀리 이동시킵니다.

Step 4.

Xcode의 프리뷰 모드를 Selectable에서 Color Scheme Variants로 변경하여 뷰를 밝은 모드와 어두운 모드에서 렌더링합니다.

기본적인 밝은 텍스트가 어두운 모드에서 노란색 배경과 충분한 대비를 제공하지 않습니다.

Step 5.

scrum.theme.accentColor를 사용하여 foregroundColor를 설정합니다.

Theme.swift에서 정의된 accentColor 변수는 밝은 색상의 테마에는 검은색을, 어두운 색상의 테마에는 흰색을 반환합니다.

foregroundColor 는 주로 text color 를 변경할 때 사용합니다.

Section 5. Customize the label style

다음으로, 스크럼 길이와 시계 아이콘을 가로로 쌓기 위한 라벨 스타일을 생성할 것입니다. LabelStyle 프로토콜을 사용하여 여러 뷰에서 동일한 라벨 스타일을 재사용하여 앱 전반에 일관된 디자인을 만들 수 있습니다.

Step 1.

TrailingIconLabelStyle.swift라는 이름의 새 Swift 파일을 생성합니다.

Step 2.

SwiftUI를 임포트합니다.

Step 3.

LabelStyle을 준수하는 TrailingIconLabelStyle이라는 새로운 구조체를 생성합니다.

만약 사용자 정의 라벨 스타일을 만들고 싶지 않다면, 시스템 표준 레이아웃을 사용하여 아이콘과 제목을 모두 표시하는 내장된 라벨 스타일 중 하나를 사용할 수 있습니다.

Step 4.

빈 makeBody(configuration:) 함수를 생성합니다.

시스템은 이 스타일이 현재 라벨 스타일인 뷰 계층의 각 Label 인스턴스에 대해 이 메서드를 호출합니다.

Step 5.

HStack을 추가합니다.

Step 6.

HStack 안에 configuration.title과 configuration.icon을 추가합니다.

configuration 매개변수는 LabelStyleConfiguration으로, 이 객체는 아이콘과 제목 뷰를 포함하고 있습니다. 이 뷰들은 라벨의 이미지와 텍스트를 나타냅니다.

Step 7.

LabelStyle에 trailingIcon이라는 이름의 정적 속성을 생성하는 확장을 추가합니다.
정적 속성으로 라벨 스타일을 정의했기 때문에, 이를 점 표기법(leading-dot syntax)을 사용하여 호출할 수 있어 코드가 더 읽기 쉬워집니다.

Step 8.

CardView.swift 파일에서 lengthInMinutes 라벨에 있는 패딩을 새로운 라벨 스타일로 바꿉니다.

이제 시계 아이콘이 가장자리에 정렬되어 참석자 수를 나타내는 선행 라벨과 대칭으로 배치됩니다.

Section 6. Make the card view accessible

이제 CardView가 시각적으로 배치되었으므로, 모든 사용자가 접근할 수 있도록 개선할 차례입니다. 접근성 수정자를 뷰에 추가하여 VoiceOver를 통해 인터페이스를 이해하고 탐색하는 것을 더 쉽게 만들어 줄 것입니다.

CardView에는 회의 길이를 나타내는 시계 이미지와 숫자가 포함된 라벨과 참석자 수를 나타내는 사람 이미지와 숫자가 포함되어 있습니다.

문자열 보간법을 사용하는 접근성 라벨을 추가하여 라벨이 뷰에 대한 의미 있는 설명이 되도록 할 것입니다. VoiceOver는 "4 attendees"와 "10 minute meeting"이라고 읽어줍니다.

Step 1.

스크럼의 제목을 표시하는 텍스트 뷰에 accessibilityAddTraits(.isHeader) 수정자를 적용합니다.

이 수정자는 뷰의 정보 구조를 전달하는 데 도움을 주며, 스크럼 제목 뒤에 “heading”이 읽히도록 합니다.

Step 2.

첫 번째 Label의 내용을 설명하는 라벨을 추가하기 위해 접근성 수정자를 사용합니다.

Step 3.

두 번째 Label에도 유사한 접근성 수정자를 추가합니다.

다음 튜토리얼에서는 CardView를 SwiftUI List 내에서 사용하는 방법을 보여줍니다. SwiftUI가 어떻게 방금 만든 것과 같은 작은 뷰들을 조합하여 큰 복잡한 뷰를 쉽게 구성할 수 있는지를 배울 것입니다.