iOS UIView에 그림자 효과 적용하는 2가지 방법
iOS 개발에서 매력적인 UI를 완성하려면 다양한 속성들을 자유롭게 다룰 수 있어야 합니다. 특정 뷰(View) 주변이나 하단에 그림자를 그리려면 레이어(CALayer)와 뷰(UIView)의 동작 원리를 이해하고 있어야 합니다.
이번 글에서는 UIView에 그림자를 추가하는 두 가지 대표적인 방법을 살펴보겠습니다.
방법 1: 필요한 위치에서 직접 코드 작성하기
가장 간단한 방법은 그림자가 필요한 뷰에 layer 속성을 직접 설정하는 것입니다.
self.layer.masksToBounds = NO;
self.layer.cornerRadius = 2;
self.layer.shadowOffset = CGSizeMake(-5, 10);
self.layer.shadowRadius = 3;
self.layer.shadowOpacity = 0.3;
각 속성의 역할은 다음과 같습니다.
- masksToBounds: NO로 설정해야 레이어 경계 밖으로 그림자가 렌더링됩니다. YES로 설정하면 그림자가 잘려서 보이지 않습니다.
- cornerRadius: 뷰의 모서리를 둥글게 만듭니다.
- shadowOffset: 그림자의 위치를 조절합니다. 위 예시에서는 x축으로 -5, y축으로 10만큼 이동시켜 그림자가 좌측 하단에 생기도록 했습니다.
- shadowRadius: 그림자의 번짐(blur) 정도를 결정합니다. 값이 클수록 부드럽고 퍼진 그림자가 됩니다.
- shadowOpacity: 그림자의 불투명도를 설정합니다. 0.0(투명) ~ 1.0(불투명) 범위의 값을 가집니다.
방법 2: IBDesignable & IBInspectable을 활용한 스토리보드 연동
여러 화면에서 일관된 그림자 스타일을 사용해야 한다면, UIView 확장(Extension)에 @IBInspectable 속성을 추가하는 것이 효율적입니다. 이렇게 하면 인터페이스 빌더의 Attributes Inspector에서 그림자 속성을 직접 수정할 수 있습니다.
@IBDesignable
class DesignableView: UIView { }
extension UIView {
@IBInspectable
var shadowRadius: CGFloat {
get {
return layer.shadowRadius
}
set {
layer.shadowRadius = newValue
}
}
@IBInspectable
var shadowOpacity: Float {
get {
return layer.shadowOpacity
}
set {
layer.shadowOpacity = newValue
}
}
@IBInspectable
var shadowOffset: CGSize {
get {
return layer.shadowOffset
}
set {
layer.shadowOffset = newValue
}
}
@IBInspectable
var shadowColor: UIColor? {
get {
if let color = layer.shadowColor {
return UIColor(cgColor: color)
}
return nil
}
set {
if let color = newValue {
layer.shadowColor = color.cgColor
} else {
layer.shadowColor = nil
}
}
}
}
위 확장을 프로젝트에 추가하면 모든 스토리보드에서 그림자 관련 속성을 자유롭게 조작할 수 있습니다. 특히 @IBDesignable 클래스와 함께 사용하면 앱을 기기나 시뮬레이터로 빌드하지 않고도 스토리보드 캔버스에서 변경 결과가 실시간으로 반영되므로, 디자인 작업 속도가 크게 향상됩니다.
마무리
단순히 한두 곳에만 그림자가 필요하다면 방법 1처럼 코드로 직접 설정하는 것이 빠르고 간편합니다. 반면 여러 뷰에서 재사용해야 하거나 디자이너와 협업하며 시각적으로 값을 조정해야 하는 상황이라면 방법 2의 IBDesignable/IBInspectable 방식이 훨씬 생산적입니다. 프로젝트 상황에 맞는 방식을 선택해 활용해 보세요.
