Scrumdinger 분석하기 01. /scrum/CardView.swift

 

 

 

 

Big Idea (큰 주제)

- 코드분석

Essential Question (핵심 질문)

- Scrumdinger 에서 해당 코드를 쓴 이유에 대해 나는 잘 이해하고 있을까?

Challenge (도전 과제)

- 하나의 뷰에서 내가 모르는 코드에 대해 분석해보자

 

 

---

Activities (학습 활동)

 

완성된 코드를 전체적으로 모두 뜯어볼 생각이다.

 

 

 

전체 코드는 이정도.

 

파일 별로 정리해볼 것이다.

 

 

 

 

 

//
//  CardView.swift
//  Scrumdinger
//
//  Created by taeni on 3/31/25.
//
import SwiftUI

struct CardView: View {
    let scrum: DailyScrum

    var body: some View {
        VStack(alignment: .leading) {
            Text(scrum.title)
                .font(.headline)
                .accessibilityAddTraits(.isHeader)
            Spacer()
            HStack {
                Label("\(scrum.attendees.count)", systemImage: "person.3")
                    .accessibilityLabel("\(scrum.attendees.count) attendees")
                Spacer()
                Label("\(scrum.lengthInMinutes)", systemImage: "clock")
                    .accessibilityLabel("\(scrum.lengthInMinutes) minute meeting")  // 접근성
                    .labelStyle(.trailingIcon)
            }
            .font(.caption)
        }
        .padding()
        .foregroundColor(scrum.theme.accentColor)
    }
}


#Preview(traits: .fixedLayout(width: 400, height: 60)) {
    let scrum = DailyScrum.sampleData[0]
    return CardView(scrum: scrum)
        .frame(width: 400, height: 60)
}

 

 

let scrum: DailyScrum

CardView 에서는 값이 변경될 일이 없다.
리스트만 보여주고 상세뷰를 보고 나서 돌아왔을 때는 이미 값이 변경되어 뷰가 새로 그려져야하기 때문이다.
그래서 상수를 이용해 DailyScrum을 선언했다.

 

 

VStack 에 alignment 를 사용한 이유는 

요소 중에 Text(scrum.title) 을 좌측으로 붙이기 위해서이다.

 

accessibilityAddTraits

accessibilityAddTraits 는 VoiceOver 사용자에게 UI 요소의 특성에 대해 명확하게 하기 위한 접근성 메소드로

이 텍스트가 어떤 의미를 갖는지를 알려준다.

 

isHeader, isButton, isSelected, isLink, isImage, isStaticText 등의 Trait 을 표시한다.

 

기존 trait에서 제거도 할 수 있다.

 

.accessibilityAddTraits() vs .accessibilityRemoveTraits()

• accessibilityAddTraits()
  → 기존 traits에 추가

• • accessibilityRemoveTraits()
→ 기존 traits에서 제거

Text("선택됨")
    .accessibilityAddTraits(.isSelected)

Text("비선택됨")
    .accessibilityRemoveTraits(.isSelected)

 

accessibilityLabel

디자인상 표현된 텍스트가 사용자에게 명확하지 않거나, 다른 의미로 읽혀야 할 때 직접 문구를 지정

 

 

Solution (해결 결과)

- CardView에서 let을 이용하여 값을 받는 이유에 대해 알게 됐고, 설명할 수 있다.

- 접근성 측면에서 텍스트 뿐 아니라 이 텍스트가 어떤 것을 의미하는지를 추가하거나 제거할 수 있다는 것을 알게 됐다.

 

 

Reflection (회고)

오늘 배운 것: let 을 쓰는 뷰의 상황 조건, 접근성의 Trait

다음에 해보고 싶은 것: ScrumsView 에 대한 코드 분석