iOS 위젯 타이머: 기술적 도전과 구현 과정🪙

iOS 환경에서 위젯을 이용한 서비스 제공을 원활하게 한다는 것은 결코 쉬운 작업이 아니었습니다. 특히, iOS 위젯은 제한된 생명주기와 데이터 갱신 방식 때문에 이 기능이 가능할지 처음부터 확신이 없었습니다.

 

개발 과정에서 겪었던 시행착오와, 팀원과의 긴밀한 협력 및 소통을 통해 어떻게 위젯 타이머를 구현할 수 있었는지 공유하려고 합니다.

 

개발자와 디자이너 간의 기술적 교류

 

위젯 타이머는 저희 앱의 핵심 기능이었고, 디자이너인 엔제이는 이를 기획 단계에서부터 고수했습니다. 그러나 iOS 위젯은 단순히 스냅샷을 제공하는 구조이기 때문에, 실시간 타이머와 같은 형태의 인터렉션을 구현하기에는 어려움이 많았습니다. 특히, 위젯은 최소 15분 간격으로 데이터 갱신이 가능하나, 그마저도 OS의 판단에 따라 보장되지 않는 점이 문제였습니다.

제가 이러한 기술적 한계를 설명했을 때, 디자이너는 UX를 타협하지 않으면서도 위젯의 한계를 해결할 수 있는 디자인 아이디어들을 제시했습니다. 디자이너가 직접 레퍼런스를 찾아서 가져온 다른 서비스의 위젯들을 분석하고, 저와 함께 어떻게 하면 실시간성은 아니더라도 사용자가 만족할 만한 경험을 제공할 수 있을지 고민했습니다. 이를 통해 기존의 아이디어를 재구성하여, 위젯 타이머가 앱과 유기적으로 연동되도록 다시 설계하였습니다.

 

위젯에서 애니메이션이나 인터렉션을 구현하는 것은 매우 제한적이지만, 저희는 다음과 같은 해결 방안을 찾아냈습니다:

1. 정기적인 데이터 갱신을 활용한 타이머 업데이트: 사용자가 앱을 사용할 때마다 위젯이 데이터가 갱신되도록 하여, 매번 최신 정보를 받을 수 있도록 했습니다. 또한, 위젯 타이머는 SwiftUI의 Text 스타일을 사용하여 숫자가 실시간으로 줄어드는 모습을 구현함으로써, 사용자에게 더 직관적이고 생동감 있는 경험을 제공할 수 있었습니다.
2. 위젯의 특성에 맞춘 UX 변경: 위젯 타이머의 정확도를 높이기 위해, 사용자가 마지막으로 확인했던 지하철역의 정보를 유지하고, 앱에서 설정한 값을 위젯에 반영하여 최소한의 상호작용으로 원하는 정보를 확인할 수 있도록 했습니다. 이 과정에서 엔제이가 마지막 확인된 정보를 어떻게 유지하고 업데이트 할지에 대해 아이디어를 제안해주었고, 위젯 내부에 리프레시 버튼을 추가하여 사용자가 직접 위젯을 갱신할 수 있도록 했습니다. 이 리프레시 기능은 사용자가 정보를 직접 컨트롤할 수 있는 요소를 추가해 위젯의 실시간성을 더욱 강화하는 데 중요한 역할을 했습니다.

 

위젯 관련 코드 및 설명

 

아래는 타이머와 AppIntent를 활용한 위젯 갱신 기능에 대한 코드와 설명입니다.

1. 위젯에서 숫자가 줄어드는 모습을 구현하기 위해 Text의 스타일 타이머 활용

위젯에서 실시간 타이머 기능을 구현하는 것은 제한된 위젯 생명주기와 갱신 주기 때문에 어려운 도전이었습니다. 하지만 Text의 스타일 옵션 중 하나인 style: .timer를 활용하여, 위젯 상에서 남은 시간이 줄어드는 시각적인 효과를 구현할 수 있었습니다. 이를 통해 사용자가 위젯에서 직접적으로 타이머가 작동하고 있는 것처럼 느낄 수 있도록 했습니다.

struct TimerWidgetEntryView: View {
    var entry: TimerWidgetProvider.Entry

    var body: some View {
        VStack {
            Text("타이머 종료까지 남은 시간:")
            Text(entry.timerEndDate, style: .timer)
        }
    }
}

이처럼 제한적인 데이터 갱신 주기 내에서도 Text의 style: .timer를 사용하여 남은 시간이 실시간으로 줄어드는 시각적 효과를 구현할 수 있었습니다.

 

2. AppIntent를 활용한 리프레시 기능

AppIntent를 활용하여 사용자가 위젯을 직접 리프레시할 수 있는 기능을 추가했습니다. AppIntent는 iOS 16부터 추가된 기능으로, 사용자 상호작용을 통해 앱의 특정 작업을 트리거할 수 있습니다.

import WidgetKit
import AppIntents

struct RefreshWidgetIntent: AppIntent {
    static var title: LocalizedStringResource = "Refresh Widget"

    @Parameter(title: "Station Name")
    var stationName: String

    func perform() async throws -> some IntentResult {
        WidgetCenter.shared.reloadAllTimelines()
        return .result()
    }
}

이 코드를 통해 사용자는 직접 위젯을 새로고침할 수 있었고, 이를 통해 사용자는 더 최신의 데이터를 위젯에서 확인할 수 있었습니다.

 

참고 링크

• Apple Developer Documentation - WidgetKit
• Apple Developer Documentation - AppIntents
• Developing a Widget for iOS

 

이번 위젯 타이머 구현 과정에서 깨달은 것은, iOS 위젯의 한계는 명확하지만 이를 극복할 수 있는 다양한 접근 방식이 있다는 점과 기술적인 한계를 명확히 이해하고, 이를 바탕으로 팀원들과의 소통하면 적절한 방안를 찾아낼 수 있다는 것이었습니다. 팀원의 지속적인 피드백과 협력이 없었다면 이번 위젯 타이머는 훨씬 덜 완성도 있는 결과물이 되었을 것이라 생각합니다.