[Swift UIKit] 점선 스타일 보더 적용하기(Dashed Border Style)

 

 

이번에 다룰 커스텀 UI는 위와 같은 스타일입니다.

단순한 버튼처럼 보이지만, 자세히 보면 테두리가 점선으로 되어 있는 걸 알 수 있습니다.

UIKit에서 기본 제공하는 borderStyle 옵션은 다음과 같습니다:

• .none
• .line
• .bezel
• .roundedRect

하지만 이 중 어떤 것도 점선 테두리는 지원하지 않죠.(제가 모르는걸 수도..?ㅎㅎ..)

물론 UIView를 하나 덧씌워서 해결할 수 있을까도 고민했지만,
문제는 단순한 overlay가 아니라 ‘점선’ 그 자체였습니다.

결국 선택지는 하나.
CAShapeLayer와 UIBezierPath를 이용해 직접 그리는 방식으로 가야 했습니다.

이번 포스팅에서는 실전 예제와 함께,
점선 테두리를 가진 UIButton을 만드는 방법을 정리해 보겠습니다.

🧱 기본 버튼 스타일

먼저, 점선을 적용할 버튼을 하나 만들어봅시다.

private let setRandomNicknameButton: UIButton = {
    let button = UIButton(type: .system)
    
    button.setTitle("랜덤 설정하기", for: .normal)
    button.backgroundColor = .et_lineGray20
    button.titleLabel?.font = .et_pretendard(style: .bold, size: 16)
    button.layer.cornerRadius = 10
    button.layer.masksToBounds = true
    button.tintColor = .et_textColorBlack30
    
    return button
}()

 

기본적인 버튼 디자인은 위와 같습니다.
색상 및 폰트는 프로젝트에 맞게 확장한 값들을 사용하고 있습니다.

 

✍️ 커스텀 점선 테두리 추가하기

이제 버튼에 점선 테두리를 추가해 볼 차례입니다.
CAShapeLayer를 사용하여 테두리를 직접 그리는 방식을 채택했습니다.

private func addDashedBorder(to button: UIButton) {
    let dashedBorder = CAShapeLayer()
    dashedBorder.strokeColor = UIColor.et_textColorBlack30.cgColor
    dashedBorder.fillColor = nil
    dashedBorder.lineDashPattern = [4, 2] // 4pt 그려지고, 2pt 비워짐
    dashedBorder.lineWidth = 1
    dashedBorder.frame = button.bounds
    dashedBorder.path = UIBezierPath(
        roundedRect: button.bounds,
        cornerRadius: button.layer.cornerRadius
    ).cgPath

    button.layer.addSublayer(dashedBorder)
}

 

 

🧠 이 코드 속 주요 개념들

🔹 CAShapeLayer란?

CAShapeLayer는 Core Animation에서 제공하는 벡터 기반의 레이어 클래스입니다.
직접 선, 도형, 곡선 등을 그릴 수 있는 레이어로, 일반적인 CALayer보다 표현력이 훨씬 높습니다.

• GPU 렌더링 기반이라 가볍고 성능이 좋음
• 일반적인 뷰의 border보다 더 정밀한 커스터마이징 가능
• strokeColor, fillColor, lineDashPattern 등을 활용해 다양한 스타일 구현 가능

👉 한 줄 요약:
CAShapeLayer는 뷰에 원하는 도형을 "직접 그려주는" 레이어입니다.

🔹 UIBezierPath란?

UIBezierPath는 iOS에서 제공하는 2D 드로잉 API로,
직선 또는 곡선(베지어 곡선)으로 구성된 경로(path)를 정의할 수 있는 클래스입니다.

• 라운드 사각형, 원, 곡선 등을 path로 정의 가능
• 이 경로를 기반으로 CAShapeLayer나 Core Graphics에서 그림을 그릴 수 있음

👉 쉽게 말해:
UIBezierPath는 도형의 "길"을 정해주는 지도 같은 것.
그리고 CAShapeLayer는 그 지도를 따라 선을 긋는 화가라고 생각하면 됩니다.

1년 전 부트캠프에서 말풍선 모양을 그리던 게 기억나네요...

🎯 lineDashPattern이란?

dashedBorder.lineDashPattern = [4, 2]

 

이 한 줄이 바로 점선 스타일을 결정짓는 설정입니다.
배열의 값은 "그려지는 길이"와 "비워지는 길이"의 반복 패턴을 의미합니다.

• 4 → 선이 4pt 만큼 그려짐
• 2 → 이어서 2pt 만큼 비워짐 

📍 이런 식으로 동작합니다.

• UIBezierPath로 버튼 테두리 모양(라운드 된 사각형)을 정의
• 이 path를 CAShapeLayer.path에 할당
• 점선 설정(lineDashPattern)과 색상, 굵기 등을 조정
• 최종적으로 버튼의 layer에 추가

 

✨ 마무리

 

보더 컬러는 조금 더 눈에 띄도록 짙은 색상으로 수정해 보았습니다.
처음 디자인을 봤을 땐 "음... 이건 직접 그려야겠는데?" 싶어서 살짝 부담스러웠지만,
다행히도 lineDashPattern을 찾아서 생각보다 쉽게 처리할 수 있었어요.