[iOS 5주차] 키오스크 앱 4일차

황석범·2024년 11월 28일

내일배움캠프_iOS_5기

목록 보기

35/76

🐝 CardView의 layer.borderColor만 다크모드 변환 시 실시간으로 변하지 않는 문제

// 카드 뷰 UI 설정
    private func setupView() {
        // 카드뷰 스타일 설정
        self.clipsToBounds = true
        self.layer.borderColor = UIColor(named: "CardViewShadowColor")?.cgColor
        self.layer.borderWidth = 2
        self.layer.cornerRadius = 12
        self.backgroundColor = UIColor(named: "CardViewColor")

위 코드에서 backgroundColor 값은 Assets 파일에 분리한대로 동적으로 잘 바뀌었는데 layer.borderColor 값은 동적으로 바뀌지 않았다.

해결

traitCollectionDidChange(_:)는 UIKit에서 제공하는 메서드로, 기기의 환경 변화(예: 다크 모드와 라이트 모드 간 전환) 또는 트레이트 변경이 발생할 때 호출됩니다. 이 메서드를 오버라이드하면, 변경된 트레이트에 따라 UI를 업데이트할 수 있습니다.

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
}

적용

// 다크/라이트 모드 변경 시 호출되는 메서드
   override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
       super.traitCollectionDidChange(previousTraitCollection)

       // 색상 외형 변경이 있는 경우 업데이트
       if self.traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
           updateBorderColor()
       }
   }

// 보더 색상 업데이트 메서드
    private func updateBorderColor() {
        // 다크 모드와 라이트 모드에 따라 색상 설정
        if self.traitCollection.userInterfaceStyle == .dark {
            self.layer.borderColor = UIColor(named: "CardViewShadowColor")?.cgColor
        } else {
            self.layer.borderColor = UIColor(named: "CardViewShadowColor")?.cgColor
        }
    }

다크 / 화이트 모드 변경이 있을 경우 updateBorderColor() 메서드를 호출하여 self.layer.borderColor 를 바꿔 주었다.

왜 layer.borderColor만 그럴까

1. backgroundColor

UIView의 기본 속성:
- backgroundColor는 UIView의 기본 속성입니다. UIKit은 이 속성을 자동으로 업데이트하며, 환경 변화(Light Mode ↔ Dark Mode 등)에 따라 동적으로 변합니다.
- 예를 들어, UIColor(named:)로 색상을 설정하면 backgroundColor는 환경 변화에 따라 적절한 색상을 렌더링합니다.
UIKit의 자동 관리:
- UIKit은 backgroundColor를 관리하고, 시스템 이벤트(예: 다크 모드 전환)를 감지하여 자동으로 새로 그립니다.

2. borderColor

Core Animation 속성:
- borderColor는 CALayer의 속성입니다. Core Animation은 UIView와는 다르게 작동하며, UIKit의 동적 업데이트 체계에 포함되지 않습니다.
- 즉, borderColor는 한 번 설정되면 UIKit에서 이를 자동으로 업데이트하거나 다시 그리지 않습니다.
UIColor에서 CGColor로 변환:
- UIColor(named:)는 다크 모드에 따라 색상이 바뀌는 동적 색상을 지원하지만, 이를 CGColor로 변환하는 순간 해당 동적 특성이 손실됩니다. CGColor는 정적 값으로 렌더링되기 때문입니다.

왜 이런 차이가 발생할까?

UIKit의 UIView 속성은 Apple이 자동 동적 업데이트를 지원하도록 설계했지만, Core Animation의 CALayer는 이런 동작을 기본적으로 지원하지 않습니다. Core Animation은 그래픽 렌더링 성능에 초점을 맞춘 저수준 API이기 때문입니다.