UIButton Gradient Border 구현 방법 (iOS / UIKit)

UIButton Gradient Border 구현 방법 (iOS / UIKit)

iOS 앱에서 버튼을 강조하기 위해 단색 테두리 대신 Gradient Border를 사용하는 경우가 많다.

예를 들어 프리미엄 버튼, 강조 버튼, 브랜드 컬러 버튼 등에서는 그라데이션 테두리를 적용하면 시각적으로 더 눈에 띄는 UI를 만들 수 있다.

UIKit에서는 CAGradientLayer와 CAShapeLayer를 이용해 UIButton에 Gradient Border를 구현할 수 있다.

Gradient Border 구현 원리

Gradient Border는 다음 구조로 구현된다.

• CAGradientLayer → 그라데이션 색상
• CAShapeLayer → 테두리 모양
• Mask → 테두리 영역만 표시

즉, GradientLayer 위에 ShapeLayer를 Mask로 적용해 테두리 부분만 보이도록 만드는 방식이다.

Gradient Border 기본 구현

다음은 UIButton에 Gradient Border를 적용하는 기본 코드이다.

import UIKit

final class GradientBorderButton: UIButton {

    private let gradientLayer = CAGradientLayer()
    private let shapeLayer = CAShapeLayer()

    private let borderWidth: CGFloat = 2

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupGradientBorder()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupGradientBorder()
    }

    private func setupGradientBorder() {

        gradientLayer.colors = [
            UIColor.systemPink.cgColor,
            UIColor.systemPurple.cgColor,
            UIColor.systemBlue.cgColor
        ]

        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)

        layer.addSublayer(gradientLayer)
        gradientLayer.mask = shapeLayer
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        gradientLayer.frame = bounds

        let path = UIBezierPath(
            roundedRect: bounds,
            cornerRadius: layer.cornerRadius
        )

        shapeLayer.path = path.cgPath
        shapeLayer.lineWidth = borderWidth
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.black.cgColor
    }
}

이 코드를 사용하면 버튼 테두리에 그라데이션 색상이 적용된다.

버튼 모서리 둥글게 만들기

Gradient Border 버튼에서는 모서리를 둥글게 만드는 경우가 많다.

button.layer.cornerRadius = 12
button.clipsToBounds = false

cornerRadius 값에 따라 테두리 모양도 함께 변경된다.

그라데이션 방향 설정

Gradient 방향은 startPoint와 endPoint로 설정할 수 있다.

gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)

자주 사용하는 방향은 다음과 같다.

• 좌 → 우 : (0, 0.5) → (1, 0.5)
• 상 → 하 : (0.5, 0) → (0.5, 1)
• 대각선 : (0, 0) → (1, 1)

Gradient 색상 변경

colors 배열을 사용해 다양한 Gradient 스타일을 만들 수 있다.

gradientLayer.colors = [
    UIColor.systemPink.cgColor,
    UIColor.systemPurple.cgColor,
    UIColor.systemBlue.cgColor
]

브랜드 컬러를 사용할 때도 동일한 방식으로 적용하면 된다.

Gradient Border 두께 조절

테두리 두께는 lineWidth로 조절한다.

shapeLayer.lineWidth = 3

보통 2~4 사이 값을 많이 사용한다.

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

iOS 15 이후 UIButton.Configuration을 사용하는 경우에도 Gradient Border는 동일하게 layer로 추가할 수 있다.

var config = UIButton.Configuration.plain()
config.title = "프리미엄"

let button = GradientBorderButton(configuration: config)

버튼 스타일은 Configuration으로 설정하고, Gradient Border는 Layer로 적용하는 방식이 가장 많이 사용된다.

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

Gradient Border 버튼은 다음과 같은 상황에서 자주 사용된다.

• 프리미엄 버튼
• 구독 버튼
• 강조 CTA 버튼
• 프로모션 버튼
• 브랜드 강조 UI

특히 다크 모드 UI에서 Gradient Border는 버튼을 더 강조하는 효과가 있다.

주의할 점

1. layoutSubviews에서 레이아웃 업데이트

버튼 크기가 바뀔 수 있기 때문에 gradientLayer.frame과 shapeLayer.path는 layoutSubviews에서 업데이트하는 것이 좋다.

2. maskLayer 사용 여부 확인

Gradient Border는 maskLayer를 사용하기 때문에 레이어 순서가 바뀌면 정상적으로 표시되지 않을 수 있다.

3. 너무 많은 Gradient Layer 사용 주의

GradientLayer는 렌더링 비용이 있기 때문에 많은 버튼에 동시에 사용하면 성능에 영향을 줄 수 있다.

정리

• Gradient Border는 CAGradientLayer와 CAShapeLayer로 구현한다.
• GradientLayer를 만들고 ShapeLayer를 Mask로 사용한다.
• lineWidth로 테두리 두께를 조절할 수 있다.
• layoutSubviews에서 Layer 프레임을 업데이트하는 것이 좋다.
• UIButton.Configuration과 함께 사용할 수도 있다.

UIButton 관련 글

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