Cocoa Touch에서 UIView의 테두리 색상과 두께를 변경하는 2가지 방법

iOS 개발에서 뷰(View)에 테두리를 추가하면 버튼, 이미지, 컨테이너 등 다양한 UI 요소를 한층 돋보이게 만들 수 있습니다. 이번 글에서는 Cocoa Touch 환경에서 UIView의 테두리 색상과 두께를 변경하는 두 가지 방법을 소개합니다.

방법 1 − 코드로 직접 구현하기

가장 기본적인 방식은 뷰의 layer 속성에 직접 접근하는 것입니다. 예를 들어 backView라는 이름의 뷰가 있다면 아래와 같이 코드를 작성할 수 있습니다.

backView.layer.borderWidth = 5 // 원하는 두께(정수 값)
backView.layer.borderColor = colorLiteral(red: 0.09019608051, green: 0, blue: 0.3019607961, alpha: 1)

위 코드는 두께 5포인트의 진한 남색 테두리를 뷰에 적용합니다. borderWidth에는 원하는 정수 값을, borderColor에는 원하는 색상을 자유롭게 지정할 수 있습니다. 실행 결과는 아래와 같습니다.

방법 2 − UIView 확장(Extension)과 @IBDesignable/@IBInspectable 활용하기

두 번째 방법은 UIView를 확장하여 스토리보드의 Attribute Inspector에서 바로 테두리를 설정할 수 있도록 만드는 것입니다. 이 방식을 사용하면 코드를 일일이 수정하지 않고도 인터페이스 빌더에서 실시간으로 결과를 확인할 수 있습니다.

@IBDesignable
class DesignableView: UIView {
}
extension UIView {
    @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
            }
        }
    }
}

@IBDesignable과 @IBInspectable 어노테이션을 함께 사용하면 해당 속성들이 스토리보드에서 편집 가능한 형태로 나타나며, Attribute Inspector에서 값을 변경할 때마다 스토리보드에 실시간으로 반영됩니다.

아래는 방법 2를 적용했을 때 스토리보드에서 실시간으로 렌더링되는 모습입니다.

마무리

간단한 테스트나 일회성 작업에는 방법 1처럼 코드로 직접 설정하는 것이 빠르고 간편합니다. 반면 여러 뷰에서 테두리를 자주 조정해야 한다면 방법 2처럼 확장을 미리 만들어 두는 것이 코드 재사용성과 유지보수 측면에서 훨씬 효율적입니다. 프로젝트 상황에 맞게 두 가지 방법을 적절히 활용해 보시기 바랍니다.