iOS Swift UILabel 둥근 모서리를 적용 해보자

iOS 앱 개발에서 UILabel 둥근 모서리 뷰의 시각적 요소를 조정하는 것은 사용자 경험을 향상시키는 중요한 부분입니다. 특히, 뷰의 모서리를 둥글게 처리하는 것은 앱의 미적 감각을 크게 향상시킬 수 있습니다. UILabel에 둥근 모서리를 적용하려면 몇 가지 주의해야 할 사항이 있습니다.

UILabel 둥근 모서리 적용 프로세스

UILabel의 layer.cornerRadius 속성을 사용하면 모서리를 쉽게 둥글게 할 수 있습니다. 그러나 이 속성만으로는 완벽하게 둥근 모서리를 적용하기 충분하지 않습니다. 왜냐하면, cornerRadius를 설정해도 뷰의 경계를 벗어나는 내용은 여전히 보일 수 있기 때문입니다. 이를 해결하기 위해 clipsToBounds 속성을 true로 설정해야 합니다.

@IBOutlet weak var currentLabel: UILabel!

override func viewDidLoad() {
    super.viewDidLoad()
    currentLabel.layer.cornerRadius = 7
    currentLabel.clipsToBounds = true // 뷰의 경계 내에서만 내용을 보이도록 함
}

clipsToBounds와 layer.masksToBounds

UILabel 둥근 모서리 적용과 관련하여 clipsToBounds 이외에도 layer.masksToBounds 속성에 대해 알아볼 필요가 있습니다. layer.masksToBounds 속성도 clipsToBounds와 유사하게 뷰의 콘텐츠가 뷰의 경계를 넘어서지 않도록 합니다.

실제로 clipsToBounds는 내부적으로 layer.masksToBounds를 설정하는 것과 같은 효과를 갖습니다. 뷰의 레이어에서 masksToBounds가 true로 설정되면, 레이어의 콘텐츠가 레이어의 경계를 벗어나지 않도록 잘라냅니다.

UILabel 둥근 모서리 생성시 차이점

다음은 clipsToBounds와 layer.masksToBounds 속성의 차이점을 요약한 표입니다:

이 표를 통해 각 속성의 사용 목적과 컨텍스트에 따른 선택 가이드를 제공하며, 이는 개발자가 상황에 따라 적절한 속성을 선택하는 데 도움이 될 수 있습니다.

그 외에

따라서 둥근 모서리를 적용할 때는 cornerRadius와 함께 clipsToBounds 또는 layer.masksToBounds를 적절히 사용해야 합니다. 이렇게 함으로써, 뷰의 시각적 요소를 개선하고, 더욱 깔끔하고 전문적인 UI를 설계할 수 있습니다.

함께보면 좋은 글