---
title: "iOS 라이브러리 - KDCircularProgress"
description: "KDCircularProgress로 iOS 앱의 원형 그래프를 구현한 기록. 시작 각도, 그라데이션, 애니메이션을 설정하고 화면 디자인에 맞춘 과정을 담았습니다."
canonical: https://blog.skyline23.com/1
language: ko
published: 2021-02-26T19:40:00+09:00
modified: 2022-05-23T15:22:14+09:00
---

# iOS 라이브러리 - KDCircularProgress

![](/blog-covers/circular-progress-1536.webp)

상벌점 조회 프로젝트를 진행하던 중 그래프를 그려야 할 일이 생겼습니다.

iOS의 가장 대표적인 그래프 라이브러리인 [Charts](https://github.com/danielgindi/Charts)를 써봤지만

내가 하는 프로젝트의 디자인과 잘 맞지 않는 것 같았어요.

아래 사진과 같은 디자인을 맞춰주어야했는데, 마음대로 되는 게 아니더라고요.

![](/blog-assets/cd297ffc2e66544758a7e527.webp)

그래서 제 맘에 맞는 라이브러리를 찾기 시작했고, 몇 번의 검색 끝에 제 마음에 드는 라이브러리를 찾을 수 있었습니다!

Github : [kaandedeoglu/KDCircularProgress](https://github.com/kaandedeoglu/KDCircularProgress)

* * *

**아래는 예시 결과물입니다.**

![결과물](/blog-assets/f6d09944b9a2b14050ca661a.gif)

결과물

* * *

**예제 프로젝트 만들기**

먼저 pod 설치를 하고,

> pod 'KDCircularProgress'

라이브러리 설치가 끝났다면 view를 스토리보드에 생성해줍니다.

![](/blog-assets/5667665477560bab5044c921.webp)

![](/blog-assets/3ab5e09d472290191e096854.webp)

그리고 뷰의 클래스를 KDCircualrProgress로 바꾸면 스토리보드에서 작업할 수도 있습니다!

![](/blog-assets/b3d772682af626185df177b1.webp)

```html
Angle - 화면상으로 보이는 수치
Start Angle - 시작각도
Clockwise - 그래프가 시계방향일지, 반시계방향일지를 지정함
Rounded Corners - 그래프의 모양을 사각으로 처리할것인지 둥글게 처리 할 것인지를 지정함
Lerp Color Mode - 그래프의 컬러를 2개 이상 사용했을때 자연스럽게 처리 할것인지 아닌지 지정함
```

이 외에도 트랙의 두께, progress의 두께, 발광 효과를 적용할 것인지, 안의 색을 채울 것인지를 지정해줄 수 있어 유용했던 것 같아요.

![Rounded Corners를 껐을 때](/blog-assets/2a2418f77dcde79cf4315819.webp)

Rounded Corners를 껐을 때

![Rounded Corners를 켰을 때](/blog-assets/8ba9ec72430f809b9c151d42.webp)

Rounded Corners를 켰을 때

스토리보드를 쓰지 않고, 코드상으로 기능을 구현하고 싶을 때는

```swift
import KDCircularProgress

@IBOutlet weak var chart: KDCircularProgress!
```

라이브러리를 import, IBOulet으로 변수로 지정을 해준 다음

```swift
chart.startAngle = -90 // 시작위치 지정
chart.progressThickness = 0.2 // 채우는 선의 굵기 조정
chart.trackThickness = 0.6 // 트랙의 굵기 조정
chart.clockwise = true // 시계방향 or 반시계방향 설정
chart.gradientRotateSpeed = 2 // 그라데이션의 색 바뀜 속도 조절
chart.roundedCorners = false // 그래프의 모양을 둥글게 할것인지 조정 
chart.glowMode = .forward // 그래프 발광 모드 조절
chart.glowAmount = 0.9 // 그래프 발광 모드의 밝기를 조절
chart.set(colors: UIColor.cyan) // 그래프의 색을 조정
chart.animate(toAngle: 90, duration: 0.5, completion: nil) // 그래프에 애니메이션 효과를 어느각도로, 얼마동안 줄지 결정
```

이런 식으로 조정을 하면 그래프 뷰를 추가할 수 있어요.

아래에 전체 소스코드 남겨 놓겠습니다!

```swift
import UIKit
import KDCircularProgress

class ViewController: UIViewController {

    @IBOutlet weak var chart: KDCircularProgress!
    @IBOutlet weak var point: UILabel!

    var currentCount:Double = 0
    var maxCount:Double = 5

    override func viewDidLoad() {
        super.viewDidLoad()
        chart.angle = 0
        // Do any additional setup after loading the view.
    }

    // 버튼이 클릭되었을때
    @IBAction func btntapped(_ sender: Any) {
        // 현재 카운트가 최고 카운트와 같거나 작을경우
        if currentCount <= maxCount {
            // 현재 카운트 1증가
            currentCount += 1
            // 새로운 각도 값을 받아옴
            let newAngleValue = newAngle()
            
            // 라벨의 텍스트를 바꿈
            point.text = "\(Int(currentCount))점"
            // 차트의 애니메이션 효과를 적용하여 새로운 각도를 적용
            chart.animate(toAngle: newAngleValue, duration: 0.5, completion: nil)
        }

        // 현재 카운트가 최고 카운트 이상일 경우
        if currentCount > maxCount {
            // 현재 카운트를 0으로 초기화
            currentCount = 0
            // 라벨의 텍스트를 0으로 초기화
            point.text = "0점"
            // 차트의 애니메이션 효과를 적용하여 새로운 각도를 적용
            chart.animate(toAngle: 0, duration: 0.5, completion: nil)
        }
    }
    
    // 현재 카운트를 최고 카운트로 나누고 360을 곱하여 각도를 알아냄
    func newAngle() -> Double {
        return Double(360 * (currentCount / maxCount))
    }
}
```