UIButton Shadow 적용 방법 (iOS / UIKit)

UIButton Shadow 적용 방법 (iOS / UIKit)

iOS 앱에서 버튼을 강조하거나 입체감을 주기 위해 Shadow(그림자)를 적용하는 경우가 많다.

예를 들어 플로팅 버튼, CTA 버튼, 카드 스타일 버튼 등에서는 버튼 아래에 그림자를 넣어 UI를 더 자연스럽게 만들 수 있다.

UIKit에서는 UIButton의 layer 속성을 이용해 간단하게 Shadow를 적용할 수 있다.

Shadow 기본 적용 방법

UIButton에 Shadow를 적용하려면 버튼의 layer 속성을 설정하면 된다.

button.layer.shadowColor = UIColor.black.cgColor
button.layer.shadowOpacity = 0.3
button.layer.shadowOffset = CGSize(width: 0, height: 4)
button.layer.shadowRadius = 6

이 코드를 실행하면 버튼 아래쪽에 그림자가 생긴다.

Shadow 속성 설명

Shadow를 구성하는 주요 속성은 다음과 같다.

• shadowColor : 그림자 색상
• shadowOpacity : 그림자 투명도
• shadowOffset : 그림자 위치
• shadowRadius : 그림자 블러 정도

각 속성을 조합하면 다양한 Shadow 스타일을 만들 수 있다.

Shadow 자연스럽게 만들기

일반적으로 많이 사용하는 Shadow 값은 다음과 같다.

button.layer.shadowColor = UIColor.black.cgColor
button.layer.shadowOpacity = 0.25
button.layer.shadowOffset = CGSize(width: 0, height: 3)
button.layer.shadowRadius = 8

이 값은 iOS UI에서 자연스러운 그림자를 만들 때 자주 사용된다.

버튼 모서리 둥글게 만들기

Shadow와 함께 버튼을 둥글게 만들면 UI 완성도가 높아진다.

button.layer.cornerRadius = 12

단, 이때 masksToBounds 설정에 주의해야 한다.

Shadow가 안 보이는 경우

Shadow가 보이지 않는 가장 흔한 원인은 masksToBounds 또는 clipsToBounds 때문이다.

button.layer.masksToBounds = false

또는 View에서 다음과 같이 설정되어 있으면 Shadow가 잘리지 않는다.

button.clipsToBounds = false

Shadow 성능 최적화

Shadow는 렌더링 비용이 있는 UI 요소이기 때문에 성능 최적화를 위해 shadowPath를 설정하는 것이 좋다.

button.layer.shadowPath = UIBezierPath(
    roundedRect: button.bounds,
    cornerRadius: button.layer.cornerRadius
).cgPath

이 방식은 Core Animation이 Shadow를 더 빠르게 렌더링하도록 도와준다.

Custom UIButton에서 Shadow 적용

커스텀 UIButton을 만들 때는 layoutSubviews에서 shadowPath를 설정하는 방식이 많이 사용된다.

final class ShadowButton: UIButton {

    override func layoutSubviews() {
        super.layoutSubviews()

        layer.cornerRadius = 12
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 0.25
        layer.shadowOffset = CGSize(width: 0, height: 4)
        layer.shadowRadius = 8

        layer.shadowPath = UIBezierPath(
            roundedRect: bounds,
            cornerRadius: 12
        ).cgPath
    }
}

이렇게 하면 버튼 크기가 바뀌어도 Shadow가 항상 올바르게 적용된다.

UIButton.Configuration과 함께 사용하는 경우

iOS 15 이후 UIButton.Configuration을 사용하더라도 Shadow는 동일하게 layer 속성으로 적용하면 된다.

var config = UIButton.Configuration.filled()
config.title = "예약하기"

let button = UIButton(configuration: config)

button.layer.shadowColor = UIColor.black.cgColor
button.layer.shadowOpacity = 0.3
button.layer.shadowOffset = CGSize(width: 0, height: 4)
button.layer.shadowRadius = 8

즉, 버튼 UI 스타일은 Configuration으로 설정하고 Shadow는 layer로 추가하는 방식이 가장 일반적이다.

실제 프로젝트에서 사용하는 경우

UIButton Shadow는 다음과 같은 상황에서 자주 사용된다.

• 플로팅 액션 버튼
• 메인 CTA 버튼
• 카드 스타일 버튼
• 커스텀 탭바 버튼
• 결제 / 예약 버튼

특히 주요 액션 버튼에 Shadow를 적용하면 사용자가 버튼을 더 쉽게 인식할 수 있다.

정리

• UIButton Shadow는 layer 속성으로 설정한다.
• shadowColor, shadowOpacity, shadowOffset, shadowRadius를 조합해 스타일을 만든다.
• Shadow가 보이지 않으면 masksToBounds 설정을 확인해야 한다.
• 성능 최적화를 위해 shadowPath를 설정하는 것이 좋다.
• UIButton.Configuration과 함께 사용할 때도 동일하게 적용할 수 있다.

UIButton 관련 글

• UIButton Configuration 사용 방법 정리 (iOS 15+)
• UIKit UIButton 이미지와 텍스트 간격 설정 방법 (iOS)
• UIButton Badge 카운트 구현 방법 (iOS / UIKit)
• UIButton Shadow 적용 방법 (iOS / UIKit)
• UIButton Gradient Border 구현 방법 (iOS / UIKit)