[Swift] @IBInspectable, @IBDesignable 에 대해

이번 글에서는 storyboard, .xib 개발을 진행하면서 디자인을 작업할 때

인터페이스 빌더에서 실시간으로 디자인을 렌더링 할 때 사용하는

@IBInspectable, @IBDesignable 에 대해 알아보겠습니다.

---

1. @IBInspectable이란?

첫 번째로 @IBInspectable 입니다.

IB는 (Interface Builder) 이고 Inspectable은 (Inspector) 탭 부분을 의미합니다.

프로젝트를 생성하면 각 아이템에 대한 속성들의 집합이죠 (0_0)

 

2. 커스텀 뷰 생성

자 이제 @IBInspectable 를 한 번 사용해 봅시다. 우선 가볍게 프로젝트를 생성하고, 적당히 뷰를 생성하겠습니다.

저는 잘 보이게 중앙에 빨간 뷰를 하나 넣어 주었습니다.

그러고 나서 @IBInspectable 를 사용할 하나의 커스텀 뷰를 만들어 주겠습니다.

(저는 테스트 용으로 간단히 CustomView 라고 명명했습니다!!!)

자 이제 한번 코드를 작성해 보겠습니다.

코드의 주석에 어떤 것들을 추가하였는지 간단히 작성하였습니다. 

set-get 을 사용하여 기존의 속성들을 설정해 주면 됩니다!!

class CustomView: UIView {
    /// 보더 컬러
    @IBInspectable var borderColor: UIColor? {
        set {
            /// 신규 입력 값을 설정
            if let color = newValue {
                layer.borderColor = color.cgColor
            } else {
                layer.borderColor = nil
            }
        }
        get {
            /// 보더 색상을 반환
            if let color = layer.borderColor {
                return UIColor(cgColor:color)
            }
            else {
                return nil
            }
        }
    }
    
    /// 보더 너비
    @IBInspectable var borderWidth: CGFloat {
        set {
            /// 신규 너비 설정
            layer.borderWidth = newValue
        }
        get {
            /// 너비 반환
            return layer.borderWidth
        }
    }
    
    /// 굴곡 처리
    @IBInspectable var cornerRadius: CGFloat {
        set {
            /// 굴곡 처리 설정
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            /// 굴곡 처리 반환
            return layer.cornerRadius
        }
    }
}

자 위와 같이 코드를 작성한 뒤 생성한 뷰에 CustomView 를 설정해주시고 다시 한번 Inspector 탭을 확인해 보시면!!!

Custom View 의 영역이 추가가 된 것을 확인하실 수 있습니다.

이제 일일이 코드로 작성하지 않고 Inspector 탭에서 바로 설정하실 수 있게 됩니다 (+0+)

 

3. @IBDesignable이란?

자, 위의 @IBInspectable 만 사용해도 디자인 작성 및 빌드 후 실행해도 문제없이 적용된 것을 확인하실 수 있습니다.

하지만!! 이번 글에서는 실시간으로 렌더링을 목표로 하고 있기 때문에 해당 기능을 제공하는 @IBDesignable 까지 알아보겠습니다.

어렵지 않습니다. 위의 코드에 한 줄만 추가해주시면 됩니다 (^-^)/

@IBDesignable
class CustomView: UIView {
   /* 생략 */
}

위와 같이 설정이 완료가 되었으면 다시 한번 설정한 디자인을 확인해 봅시다!

해당 @IBInspectable 속성들을 조정을 해보시면 바로 디자인이 갱신되는 것을 확인하실 수 있습니다.

4. 활용

아 나는 특정 커스텀이 아닌 전체적인 뷰에 다 적용을 하고 싶으신 분도 있으실 겁니다. 

그런 경우 UIView 의 확장 (Extension) 을 활용하여 작성해 주시면 사용 가능합니다! (^^)

@IBDesignable extension UIView {
   /* 각각의 설정 */
}

 

마무리

이번 글에서는 @IBInspectable, @IBInspectable 에 대해 알아보았습니다.

preview의 기능을 가진 SwiftUI 이가 나온 시점에선 별로 놀랍지 않은 기능일 수 있지만

처음에 iOS 개발을 진행했을 때는 '우와' 했었던 기능이었던 것 같습니다.

혹시 Interface Builder 를 사용하면서 개발을 진행 중이시라면 한 번 사용해 보는 것도 좋을 것 같습니다.

긴 글 읽어 주셔서 감사합니다. (_ _)

 

---

환경 

Xcode 13.2.1

Swift 5