iOS에서 점선·파선 그리는 방법, CAShapeLayer로 쉽게 구현하기

iOS에서 점선·파선(Dotted/Dashed Line)을 그려야 하는 이유

점선이나 파선을 그리는 방법을 아는 것은 iOS 개발에서 매우 유용한 스킬입니다. 사용자에게 입력 필드를 요구하는 화면을 만들 때 점선으로 영역을 표시할 수 있고, 앱 내에서 특정 요소를 강조하는 용도로도 활용할 수 있습니다.

특히 네비게이션 앱에서는 그 활용도가 더욱 높습니다. 지도 위에 경로를 그릴 때 실선 대신 점선을 사용하면 시각적으로 깔끔하고 직관적인 UI를 구성할 수 있습니다.

그럼 지금부터 iOS에서 점선을 구현하는 방법을 단계별로 살펴보겠습니다.

1단계: 프로젝트 생성

Xcode를 실행한 뒤 New Project → Single View Application을 선택하고, 프로젝트 이름을 "DottedLine"으로 지정합니다.

2단계: UIView 추가 및 IBOutlet 연결

Main.storyboard에 UIView를 하나 추가하고, 해당 뷰의 @IBOutlet을 생성한 뒤 dottedView라고 이름을 붙입니다.

3단계: UIView 확장(Extension) 코드 작성

ViewController.swift 파일에 아래의 extension 코드를 추가합니다. 이 확장은 CAShapeLayer를 활용해 원하는 두께와 색상의 점선을 그려주는 기능을 담당합니다.

extension UIView {
    func createDottedLine(width: CGFloat, color: CGColor) {
        let caShapeLayer = CAShapeLayer()
        caShapeLayer.strokeColor = color
        caShapeLayer.lineWidth = width
        caShapeLayer.lineDashPattern = [2,3]
        let cgPath = CGMutablePath()
        let cgPoint = [CGPoint(x: 0, y: 0), CGPoint(x: self.frame.width, y: 0)]
        cgPath.addLines(between: cgPoint)
        caShapeLayer.path = cgPath
        layer.addSublayer(caShapeLayer)
    }
}

여기서 핵심은 lineDashPattern입니다. 배열 값 [2,3]은 각각 "2pt 그리고 3pt 건너뛰기"를 의미하므로, 이 값을 조절하면 점의 길이와 간격을 자유롭게 변경할 수 있습니다.

4단계: viewDidLoad에서 함수 호출

viewDidLoad 메서드에서 dottedView 객체에 대해 위에서 만든 함수를 호출합니다.

override func viewDidLoad() {
    super.viewDidLoad()
    self.dottedView.createDottedLine(width: 5.0, color: UIColor.cyan.cgColor)
}

위 코드에서 볼 수 있듯이 점선의 두께(width)와 색상(color)을 파라미터로 전달하고 있으므로, 원하는 스타일에 맞게 자유롭게 커스터마이징할 수 있습니다.

5단계: 실행 및 결과 확인

앱을 빌드하고 실행하면 화면에 시안(cyan) 색상의 점선이 그려지는 것을 확인할 수 있습니다.

마무리 및 응용 팁

CAShapeLayer의 lineDashPattern만 잘 활용해도 점선, 파선, 일정한 간격의 대시 라인 등 다양한 스타일을 손쉽게 구현할 수 있습니다. 예를 들어 [10,5]처럼 값을 크게 설정하면 대시(dash) 형태가 되고, [1,3]처럼 작게 설정하면 촘촘한 점선이 됩니다. 또한 path의 좌표를 세로 방향으로 변경하면 세로 점선도 간단하게 만들 수 있으니, 입력 폼 디자인이나 경로 표시 등 다양한 상황에 응용해 보시기 바랍니다.