watchOS 위젯의 Tint(Accented) 모드에서 색상 구분하기

watchOS 위젯을 만들다 보면 한 가지 함정에 빠지기 쉽다. 시뮬레이터나 fullColor 워치페이스에서는 멀쩡하던 위젯이, 사용자가 tint 모드 워치페이스를 쓰는 순간 색상 구분이 사라져 버리는 것이다.

이 글에서는 watchOS 위젯의 렌더링 모드를 이해하고, tint 모드에서도 시각적 구분을 유지하는 방법을 정리한다.

문제: Tint 모드에서 색상이 전부 똑같아진다

Eisenhower Matrix 앱의 도넛 차트 위젯을 예로 들어보자. 4개 사분면을 각각 다른 색으로 표시하고, opacity로 우선순위를 나타냈다.

fullColor 모드에서는 빨강, 노랑, 파랑, 초록이 잘 구분된다. 하지만 tint 모드에서는? 전부 같은 색으로 렌더링되면서 opacity 차이만 남는데, 0.4~1.0 범위의 opacity만으로는 구분이 쉽지 않다.

watchOS 위젯은 워치페이스에 따라 세 가지 모드 중 하나로 렌더링된다.

fullColor — 개발자가 지정한 색상이 그대로 표시된다. 시뮬레이터에서 주로 보는 모드.
accented (= tint 모드) — 시스템이 뷰를 accent 그룹(사용자 tint 색)과 default 그룹(흰색)으로 나눈다. 원래 색상은 완전히 무시되고 opacity만 보존된다.
vibrant — iOS 잠금화면용. 그레이스케일로 변환 후 배경에 맞게 블렌딩된다.

렌더링 모드는 @Environment(\.widgetRenderingMode)로 확인하고, switch로 모드별 분기할 수 있다.

.widgetAccentable() 수정자는 해당 뷰를 accent 그룹에 넣는다. 이걸 활용하면 색상 + opacity 이중 구분이 가능하다.

도넛 차트의 4개 세그먼트를 의미적으로 나눈다:

각 그룹 내에서는 opacity로 추가 구분한다. 핵심은 .widgetAccentable()의 Boolean 파라미터다:

.widgetAccentable(item.0.rawValue <= 1)  // Q1, Q2만 accent 그룹

fullColor에서는 4색으로, tint에서는 2색 x 2단계 opacity로 4개 세그먼트가 모두 구분된다.

tint 색은 개발자가 제어할 수 없다. 사용자가 워치페이스 설정에서 선택한 색이므로, 특정 색상에 의존하는 디자인은 피해야 한다.
렌더링 모드는 워치페이스에 따라 결정된다. 같은 위젯이라도 워치페이스에 따라 fullColor 또는 accented로 렌더링되고, 개발자가 강제할 수 없다.
텍스트에도 적용 가능하다. Text("Do").widgetAccentable()으로 텍스트를 tint 색으로 강조할 수 있다.
iOS 18부터 홈 화면 위젯도 tinted 모드를 지원한다. 동일한 .widgetAccentable() API가 적용된다.

하고 싶은 것	방법
특정 뷰를 tint 색으로 강조	`.widgetAccentable()`
현재 렌더링 모드 확인	`@Environment(\.widgetRenderingMode)`
tint 모드에서 다단계 구분	accent/default 그룹 분리 + opacity 조합
모드별 완전히 다른 레이아웃	`switch renderingMode`로 분기

watchOS 위젯을 만들 때는 항상 tint 모드에서의 모습을 먼저 확인하자. fullColor에서 예쁜 위젯이 tint에서 뭉개지는 건 흔한 실수다. .widgetAccentable()만 잘 써도 대부분의 경우 충분한 시각적 구분을 만들 수 있다.