[SwiftUI] Claymorphism CardView 구현

Claymorphism

기본 카드뷰와 Claymorphism스타일의 카드의 차이는 이러하다. 마치 점토의 형상을 띄고 있고, 좀 더 둥글둥글하게 표현된다.
 

SwiftUI로 Claymorphism구현

우선 Claymorphism 을 구현하기 위해서는 기본 Shadow, inner Shadow 가 필요하고, 이 Shadow 들을 자연스럽게 나타내기 위해 Blur 처리하는 것도 중요하다. SwiftUI 에는 모든 기능이 다 있다! Blur 기능은 radius 로 어느 정도 조절이 가능했다. 우선 내가 코드로 구현한 Claymorphism 스타일의 카드뷰이다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {           
            VStack {
                Text("Claymorphism CardView")
                    .frame(width: 300, height: 200)
                    .background(
                        /// continuous 스타일로 둥근모서리 만들기
                        RoundedRectangle(cornerRadius: 60, style: .continuous)
                            .fill(
                                /// inner Shadow
                                .shadow(.inner(color: Color(.systemGray5), radius: 5, x:2, y: 2))
                                .shadow(.inner(color: Color(.systemGray), radius: 10, x: -5, y: -5))
                            )
                            /// 카드뷰 배경
                            .foregroundColor(Color(.systemGray6))
                            /// 전체 shadow 걸어주기
                            .shadow(color: Color(.systemGray4), radius: 10, x: 10, y: 10))
            }
        }
    }
}

우선은 기본적으로 제공되는 .systemGray 를 사용하여 구현해 보았다. 색에 따라 gradiation 을 적용해도 좋고, shadow 와 radius 를 조정하여 입체감을 조절해도 좋을 듯하다.