[iOS / UIKit] @IBDesignable과 @IBInspectable

 

 

 

Q. iOS Application 개발 과정에서 @IBDesignable과 @IBInspectable에 대해서 설명해 줘

 

A. @IBDesignable과 @IBInspectable은 Interface Builder에서 뷰를 디자인하고 구성할 때 사용되는 어노테이션입니다.

 

@IBDesignable은 커스텀 뷰 클래스에 적용되며, Interface Builder에서 해당 클래스를 선택하면 해당 뷰의 레이아웃과 디자인을 실시간으로 미리 볼 수 있게 해줍니다. 이를 위해 해서는 해당 뷰 클래스에 '@IBDesignable' 어노테이션을 추가하고, Interface Builder에서 해당 뷰를 사용할 때 미리보기를 위해 사용될 코드를 'prepareForInterfaceBuilder()' 메서드에 작성해야 합니다.

 

@IBInspectable은 뷰 클래스의 프로퍼티에 적용되며, Interface Builder에서 해당 뷰를 선택하고 Attribute Inspector를 열면 해당 프로퍼티를 바로 설정할 수 있게 해줍니다. 이를 위해서는 해당 뷰 프로퍼티에 '@IBInspectable' 어노테이션을 추가하고, Interface Builder에서 해당 뷰를 사용할 때 설정할 수 있는 속성들을 어노테이션과 함께 지정해야 합니다.

 

아래는 간단한 예시 코드입니다.

@IBDesignable
class MyCustomView: UIView {

    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        layer.borderWidth = 1.0
        layer.borderColor = UIColor.black.cgColor
    }

}

위 코드에서 '@IBDesignable' 어노테이션을 이용하여 MyCustomView 클래스가 디자인 가능한 뷰임을 명시했습니다.

cornerRadius 프로퍼티에 @IBInspectable 어노테이션을 추가하여 Interface Builder에서 해당 뷰를 선택하고 Attribute Inspector를 열면 바로 조정할 수 있게 해주었습니다. 

 

didSet 블록에서는 cornerRadius 값이 변경될 때마다 해당 뷰의 layer의 cornerRadius 프로퍼티도 업데이트합니다. 또한 'prepareForInterfaceBuilder()' 메서드를 구현하여, Interface Builder에서 미리보기를 할 때 borderWidth와 borderColor를 설정하도록 하였습니다.

 

이렇게 @IBDesignable과 @IBInspectable을 사용하면, 뷰 클래스와 해당 뷰의 속성을 디자인 타임에 손쉽게 설정할 수 있으며, 이를 통해 뷰를 구성하고 레이아웃을 조정할 때 빠르고 쉽게 결과물을 확인할 수 있습니다.

 

 

직접 눈으로 확인해 보면 더 좋겠죠?

프로젝트를 하나 생성해서 뷰를 하나 추가했습니다.

 

아직까지 설정된 Custom Class는 없고, 다만 저처럼 눈이 침침하신 분들을 위해 배경색을 노란색으로 바꾼 UIVIew를 하나 넣어봤습니다.

가로, 세로 중앙에 두고, 높이와 넓이 모두 200으로 설정하였습니다.

* 자 이거 잘 봐주세여

다섯 번째 항목인 Show the Attributes inspector을 확인해 보면,

우측 상단에 View와 기본적 속성들(Content Mode, Semantic, Tag)가 있는 게 보이실 겁니다.

 

그럼 이제 MyCustomView를 생성해보겠습니다.

 

클래스 이름 위에 @IBDesignable 어노테이션 보이시나요?

그리고 cornerRadius 프로퍼티 앞에는 @IBInspectable 어노테이션이 있습니다.

 

이 코드는 아까 ChatGPT 답변에 있던 코드들입니다.

 

그럼 이제 스토리보드에 가서 노란색 UIView의 Custom Class를 MyCustomView로 설정해봅시다.

우측 상단 Class항목에 MyCustomView가 들어간 게 보이시죠?

 

그럼 이제 다섯 번째 항목인 Show the Attributes inspector 항목을 선택해 봅시다.

우측 상단 보시면 My Custom View 항목과 아래 Corner Radius가 있죠?

 

'이거 원래 있는 거 아니여?' 라는 생각 드시는 분이 있을 수 있으니 아까 My Custom View 설정 전 Show the Attributes inspector 항목 사진을 다시 보시겠습니다.

 

 

자 그럼 이제 Corner Radius 값을 한 번 넣어보겠습니다.

오... 값 100 넣었는데 안 바뀌네요...?

 

내가 하는 게 다 그렇지 뭐...

 

괘씸하니까 커맨드 + R 눌러서 빌드 한 번 해봅시다

적용 잘 됐는데 왜 이러는 거냐고....

 

이번엔 Xcode 껐다 켜보겠습니다,,,

ㅋㅋㅋㅋㅋ 그럼 그렇지....

내 잘못이 아니라 제 맥북 잘못이었습니다...

 

다시 한 번 껐다 켜보기

우측 상단에 Designables 하고 Up to date 보이시나요?

 

Corner Radius 값 한 번 바꿔봅시다.

이렇게 바로 반영 됩니다!

 

다시 MyCustomView 파일로 가봅시다.

 

prepareForInterfaceBuilder 함수를 지워봅시다.

이렇게요

 

다시 스토리보드 가 봅시다

 

그래도 아무 문제 없지요?

 

 

 

@IBDesignable과 @IBInspectable은 혼자 개발할 때도 편하게 쓸 수 있겠지만,

디자이너 분들이나 다른 분들과 함께 일할 때 결과물을 실시간으로

바로바로 보여줄 수 있을 것 같습니다!

 

 

아래 글들 보시면 훨씬 더 이해하기 쉽습니다!

https://zeddios.tistory.com/270

iOS ) 왕초보를 위한 IBInspectable / IBDesignable 사용해보기

https://babbab2.tistory.com/39

iOS) @IBInspectable, @IBDesignable