<div id="readability-page-1" class="page"><div id="main-wrapper"><header id="topbar-wrapper" aria-label="Top Bar"><div id="topbar"><nav id="breadcrumb" aria-label="Breadcrumb"> <a href="/">홈</a> HierarchicalShapeStyle로 색상 계층 구조 활용하기</nav> 포스트<search id="search"> </search> </div></header><div><main aria-label="Main Content"><article data-toc="false"><header>SwiftUI에서 계층적 색상 스타일 활용하기</header><div>SwiftUI에서 아주 간단하게 계층적으로 색상을 표현할 수 있다. <code>HierarchicalShapeStyle</code>을 사용하면 다섯 단계의 색상 계층 구조를 쉽게 구현할 수 있다.<div><code><table><tbody><tr><td><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td><pre>VStack {
 RoundedRectangle(cornerRadius: 16)
 .fill()
 RoundedRectangle(cornerRadius: 16)
 .fill(.secondary)
 RoundedRectangle(cornerRadius: 16)
 .fill(.tertiary)
 RoundedRectangle(cornerRadius: 16)
 .fill(.quaternary)
 RoundedRectangle(cornerRadius: 16)
 .fill(.quinary) // iOS 16.0 이상에서 사용할 수 있다.
}
.foregroundStyle(.blue)
.padding()
</pre></td></tr></tbody></table></code></div><a href="/assets/img/2025/05/05/image1.png"><img src="https://imjhk03.github.io/assets/img/2025/05/05/image1.png" alt="다섯 단계의 색상 계층 구조" loading="lazy"></a><code>HierarchicalShapeStyle</code>은 다음과 같은 다섯 단계의 계층 구조를 제공한다:<ol><li><code>.primary</code> - 가장 강한 강도 (기본값)</li><li><code>.secondary</code> - 두 번째 강도</li><li><code>.tertiary</code> - 세 번째 강도</li><li><code>.quaternary</code> - 네 번째 강도</li><li><code>.quinary</code> - 가장 약한 강도</li></ol>이 속성들은 자동으로 색상의 다양한 강도를 생성하여 디자인에 깊이를 더해준다. 특히:<ul><li>다크 모드와 테마 변경에 자동으로 적응</li><li>커스텀 색상에도 동일하게 적용 가능</li><li>일관된 디자인 시스템 구축 가능</li></ul> 참고 <a href="https://developer.apple.com/documentation/swiftui/hierarchicalshapestyle" target="_blank">HierarchicalShapeStyle | Apple Developer Documentation</a></div></article></main></div><section id="search-result-wrapper"><h2>인기 태그</h2></section></div></div>

HierarchicalShapeStyle로 색상 계층 구조 활용하기

댓글