[swift] NumberMorphView를 사용한 학습 시간 트래커 애플리케이션 개발하기

29 Nov 2023

swift

이번에는 Swift의 NumberMorphView를 사용하여 학습 시간을 트래킹하는 애플리케이션을 개발하는 방법에 대해 알아보겠습니다.

NumberMorphView란?

NumberMorphView는 Swift에서 숫자를 부드럽게 애니메이션화하여 보여주는 뷰입니다. 이 뷰를 사용하면 숫자를 부드럽게 변화시킬 수 있어 사용자에게 시각적으로 나타나는 효과를 높일 수 있습니다.

프로젝트 설정

먼저 Xcode에서 새로운 프로젝트를 생성한 후, 필요한 라이브러리를 추가합니다. NumberMorphView 라이브러리는 CocoaPods를 통해 설치할 수 있습니다.

// Podfile
platform :ios, '11.0'
use_frameworks!

target 'YourProjectName' do
    pod 'NumberMorphView'
end

프로젝트 폴더에서 터미널을 열고 pod install 명령어를 실행하여 라이브러리를 설치합니다.

NumberMorphView 사용하기

storyboard에서 ViewController에 NumberMorphView를 추가합니다.
ViewController 클래스에 NumberMorphView를 IBOutlet으로 연결합니다.

import NumberMorphView

class ViewController: UIViewController {
    @IBOutlet weak var numberMorphView: NumberMorphView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 초기 숫자 설정
        numberMorphView.countFrom(0, to: 100, withDuration: 1.0)
    }
}

위 코드에서는 viewDidLoad 메소드에서 NumberMorphView에게 0부터 100까지 1초 동안의 애니메이션 효과를 주도록 설정했습니다.

이렇게 설정하면 애플리케이션을 실행하면서 NumberMorphView가 0에서 100까지 부드럽게 변화하는 애니메이션을 보여줄 것입니다.

학습 시간 트래커 만들기

이제 NumberMorphView를 사용하여 학습 시간을 트래킹하는 애플리케이션을 만들어 봅시다.

storyboard에서 애플리케이션에 필요한 UI를 구성합니다. 예를 들어, 시작 버튼, 정지 버튼, 학습 시간 라벨 등을 추가합니다.
ViewController 클래스에 애플리케이션 로직을 작성합니다.

import NumberMorphView

class ViewController: UIViewController {
    @IBOutlet weak var numberMorphView: NumberMorphView!
    @IBOutlet weak var timeLabel: UILabel!
    
    var isTracking: Bool = false
    var elapsedTime: TimeInterval = 0.0
    var timer: Timer?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        numberMorphView.countFrom(0, to: 0, withDuration: 0)
    }
    
    @IBAction func startButtonTapped(_ sender: UIButton) {
        guard !isTracking else { return }
        
        isTracking = true
        
        timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { [weak self] _ in
            guard let self = self else { return }
            
            self.elapsedTime += 1.0
            self.updateTimeLabel()
        }
        
        timer?.fire()
    }
    
    @IBAction func stopButtonTapped(_ sender: UIButton) {
        guard isTracking else { return }
        
        isTracking = false
        timer?.invalidate()
        timer = nil
    }
    
    private func updateTimeLabel() {
        let hours = Int(elapsedTime) / 3600
        let minutes = Int(elapsedTime) / 60 % 60
        let seconds = Int(elapsedTime) % 60
        
        let timeString = String(format: "%02d:%02d:%02d", hours, minutes, seconds)
        timeLabel.text = timeString
        
        numberMorphView.countFrom(0, to: Int(elapsedTime), withDuration: 0.5)
    }
}

위 코드에서는 startButtonTapped 메소드에서 타이머를 시작하고, stopButtonTapped 메소드에서 타이머를 정지시킵니다. 타이머는 1초마다 elapsedTime 값을 증가시키고, updateTimeLabel 메소드를 호출하여 라벨과 NumberMorphView를 업데이트합니다.

마무리

이제 NumberMorphView를 사용하여 학습 시간을 트래킹하는 애플리케이션을 개발하는 방법을 알아보았습니다. NumberMorphView를 사용하면 숫자 애니메이션을 부드럽게 구현할 수 있으며, 사용자에게 더 나은 시각적 효과를 제공할 수 있습니다.