iOS 앱 개발에서 UI를 돋보이게 만드는 핵심 요소 중 하나가 바로 테두리(Border), 코너 반경(CornerRadius), 그리고 그림자(Shadow)입니다. 이번 글에서는 UIView에 이러한 효과를 적용하는 두 가지 방법을 알아보겠습니다.
첫 번째는 코드로 직접 구현하는 방식이고, 두 번째는 @IBDesignable과 @IBInspectable을 활용해 스토리보드의 Attribute Inspector에서 바로 편집할 수 있도록 확장하는 방식입니다.
방법 1 – 코드로 간단하게 테두리 만들기
테두리는 View가 그려지는 기반이 되는 layer의 속성입니다. 테두리에는 크게 두 가지 속성이 있습니다. 바로 테두리 색상(borderColor)과 테두리 두께(borderWidth)입니다.
self.view.layer.borderColor = colorLiteral(red: 0.4392156899, green: 0.01176470611, blue: 0.1921568662, alpha: 1)
self.view.layer.borderWidth = 5.0
뷰의 모서리를 둥글게 처리하고 싶다면 cornerRadius 속성을 사용하면 됩니다.
self.view.layer.cornerRadius = 5
위 코드를 시뮬레이터에서 실행하면 아래와 같은 결과를 확인할 수 있습니다.
그림자 효과를 추가하려면 shadowPath, shadowColor, shadowOffset, shadowOpacity, shadowRadius 같은 다양한 속성을 함께 조합해 사용하면 됩니다. 예를 들어 부드러운 그림자를 원한다면 shadowRadius 값을 늘리고, 진한 그림자를 원한다면 shadowOpacity 값을 높이는 식으로 조절할 수 있습니다.
방법 2 – Designable을 활용해 스토리보드에서 편집하기
매번 코드로 테두리 속성을 설정하는 것이 번거롭다면, @IBInspectable을 사용해 이러한 속성들을 스토리보드에서 직접 수정할 수 있도록 만들 수 있습니다. UIView를 확장(Extension)하여 구현하는 예시를 살펴보겠습니다.
extension UIView {
@IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
@IBInspectable
var borderWidth: CGFloat {
get {
return layer.borderWidth
}
set {
layer.borderWidth = newValue
}
}
@IBInspectable
var borderColor: UIColor? {
get {
if let color = layer.borderColor {
return UIColor(cgColor: color)
}
return nil
}
set {
if let color = newValue {
layer.borderColor = color.cgColor
} else {
layer.borderColor = nil
}
}
}
}이렇게 Extension을 작성하면 스토리보드의 Attribute Inspector에 해당 속성들이 자동으로 추가됩니다. 덕분에 앱을 실행하지 않고도 스토리보드 화면에서 즉시 값을 조정하고 결과를 확인할 수 있어 개발 생산성이 크게 향상됩니다.
실제로 적용하면 Attribute Inspector가 아래 이미지처럼 표시됩니다.
마무리
코드로 직접 작성하는 방법은 세부적인 제어에 유리하고, IBInspectable 확장 방식은 반복 작업을 줄이고 시각적으로 빠르게 확인할 수 있다는 장점이 있습니다. 프로젝트 상황에 맞게 두 방식을 적절히 활용하면 더욱 깔끔하고 효율적인 iOS UI 개발이 가능합니다.