[Programming Language]/[SwiftUI]

[SwiftUI] Deprecated 되어버린 cornerRadius를 대체할 방법

Semincolon 2024. 10. 13. 08:35

[머릿말]

테두리를 부드럽게 설정할 수 있는 메서드, cornerRadius는 iOS 18.1부터 deprecated 되었다... 왜 deprecated 되었을까

관련해서 StackOverflow를 보면 아쉬워하는 사람이 꽤나 존재한다.

그렇지만, 이제는 deprecated 되버렸으니 다른 방법을 사용해야 한다!


⦿ cornerRadius 란?

공식 문서에서의 내용은 다음과 같다.

"명시된 corner radius값으로 뷰의 경계를 자른다."

iOS 13.0부터 오랫동안 사용된 메서드인데 곳곳에서 deprecated 되었다고 알려주고 있다...🤣

 

그래도 어떻게 사용하는 것인지는 한번 살펴보도록 하자!

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack {
            
            Text("모두들")
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding()
                .background(Color.green)
                .cornerRadius(30)
            
            Text("화이팅입니다!")
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding()
                .background(Color.blue)
                .cornerRadius(50)
            
        }
    }
}

#Preview {
    ContentView()
}

네 모서리에 곡률이 적용된 모습

그저 적용할 수치만 입력하면 되는 아주 간단한 형태로 사용할 수 있는 메서드'였던' 것이다...

 

⦿ cornerRadius 를 대체하는, clipShape(_:style:)

공식 문서에서 권장하고 있는 것 중 clipShape를 사용하여 cornerRadius를 대체하여 보겠다. clipShape에 대한 공식 문서의 내용은 다음과 같다.

"뷰에 잘린 모양을 설정한다."

모양? 맞다. 이 메서드는 뷰에 사각형, 원 등의 모양을 설정할 수 있다. 포토샵으로 치면 마스크(mask) 기능인 것이다. 매개변수로 사용할 도형을 전달하면 된다.

 

이제 이 메서드를 사용하여 cornerRadius를 구현해보도록 하겠다.

 

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack {
            
            Text("모두들")
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding()
                .background(Color.green)
                .clipShape(RoundedRectangle(cornerRadius: 50))
            
            Text("화이팅입니다!")
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding()
                .background(Color.blue)
                .clipShape(RoundedRectangle(cornerRadius: 20))
            
        }
    }
}

#Preview {
    ContentView()
}


대체 방법도 그렇게 번거롭진 않지만 그래도 한번에 적용할 수 있는 cornerRadius는 왜 사라진 것일까...

그렇다면 RoundedRectangle에는 왜 cornerRadius가 그대로 남아있는 것이고..?