[Swift UIKit] CornerRadius 적용시 의문점 정리

📢 cornerRadius란?

cornerRadius는 iOS의 모든 UIView가 갖고 있는 CALayer의 속성 중 하나로, 뷰의 모서리를 둥글게 만들어줍니다.

숫자로 지정한 반지름(radius)만큼 모서리가 잘려 둥근 사각형 형태로 렌더링되죠.

예를 들어, 버튼이나 카드 뷰에 부드러운 곡선을 주고 싶을 때 유용합니다.

let roundedImageView: UIImageView = {
	let imageView = UIImageView()
    imageView.backgroundColor = .systemBlue
    imageView.layer.cornerRadius = 12  // 모서리를 12pt 만큼 둥글게
    imageView.clipsToBounds = true    // 내부 콘텐츠가 넘어가지 않도록 마스킹
    
    return imageView
}

위 코드는 UIView를 생성한 뒤,

cornerRadius를 설정하고 clipsToBounds = true를 추가하여 뷰 안의 자식 뷰나 이미지가 경계를 넘어 그려지지 않도록 처리합니다.

 

🧐 그런데 가끔 왜 clipsToBounds를 true로 하지 않아도 됐는가?

CornerRadius를 사용하고, `clipToBounds` 속성을 수정하지않았는데도 테두리가 둥글어진 경험이 있지않나요?(저는 있..)

UIView는 자체적으로 CALayer를 가지고 있습니다.

따라서 layer.cornerRadius만 설정해도 뷰의 배경색(backgroundColor)과 테두리(border)는 해당 레이어 형태 그대로 둥글게 그려집니다.

이때 자식 뷰나 이미지 콘텐츠가 뷰 경계 밖으로 그려지지 않는 한, 마스크 없이도 외형상 둥근 모서리가 적용된 것처럼 보이기 때문에 clipsToBounds를 생략해도 기능상 큰 문제가 없다고 느껴질 때가 있습니다.

즉, cornerRadius는 레이어의 "모양(shape)"을 변경하는 것이고, clipsToBounds는 하위 콘텐츠를 잘라낼지 여부만 제어할 뿐이어서, 콘텐츠가 경계를 침범하지 않는 경우라면 생략해도 시각적으로는 둥근 모서리가 유지됩니다.

 

☝️ layer.masksToBounds 속성으로도 가능하던데?

clipsToBounds는 UIView 레벨에서 동작하는 반면, masksToBounds는 CALayer 속성입니다.

두 속성은 내부적으로 동일한 역할(layer.masksToBounds = true)을 수행하지만, 적용 대상이 다릅니다.

• view.clipsToBounds = true
  • 뷰의 하위 뷰(subviews)와 콘텐츠만 잘라냅니다.
• view.layer.masksToBounds = true
  • 레이어 단위로, 그림자(shadow), 그라디언트, 서브레이어까지 모두 마스킹합니다.

특히 그림자 효과를 동시에 쓰고 싶다면, masksToBounds = true로 설정하면 그림자가 잘려 나갈 수 있으므로, 뷰 레벨에서 clipsToBounds만 사용하는 것이 좋습니다.

용도에 따라 두 속성을 정확히 구분해 사용여부를 결정하면 UI 품질과 성능을 모두 만족시키는 결과를 얻을 수 있습니다.

 

✅ clipsToBounds vs masksToBounds 정리

 

속성	정의	대상	용도
clipsToBounds	UIView의 속성	뷰(View) 자체의 서브뷰(하위 뷰) 잘라내기	일반적으로 iOS에서 사용
masksToBounds	CALayer의 속성	레이어(Layer)의 하위 레이어나 그림자/모서리 처리	Core Animation 관련 처리 시 사용