[Swift] D-Day 위젯 만들기 (2)

 

 

앱에서 입력한 설정값을 위젯에 반영하기

 

지난 글에서는 기본적인 D-Day 위젯 UI 구성과 SwiftUI 기반의 WidgetKit 동작 구조를 정리해봤다.
이번 글에서는 메인 앱에서 사용자가 입력한 D-Day 정보를 위젯에 반영하는 전체 흐름을 구현해보려고 한다.

핵심은 다음 세 가지다.

① App Group을 이용한 데이터 공유 (지난 블로그 글에 있음)
- App Group 기반의 SharedStore 설계
- D-Day 설정값 모델 정의

② 메인 앱 ViewController에서 설정값 저장

③ Widget TimelineProvider에서 해당 값을 불러와 표시

 

 

---

 

App Group 기반의 SharedStore 설계

위젯과 메인 앱은 기본적으로 서로 독립된 프로세스에서 동작한다.
따라서 동일한 데이터를 공유하기 위해서는 App Group 기반의 UserDefaults 또는 파일 저장이 필요하다.

이번 예제에서는 구조가 단순하고 안정적인 UserDefaults + Codable 조합을 사용했다.

import Foundation

enum SharedStore {
    // Signing & Capabilites에서 설정한 App Group
    static let suiteName = "group.com.yegrcompany.ddaywidget"

    static var defaults: UserDefaults? {
        UserDefaults(suiteName: suiteName)
    }
}

extension SharedStore {
    private static let key = "dday_config"

    static func save(config: DDayConfig) {
        guard let data = try? JSONEncoder().encode(config) else { return }
        defaults?.set(data, forKey: key)
    }

    static func loadConfig() -> DDayConfig? {
        guard
            let data = defaults?.data(forKey: key),
            let config = try? JSONDecoder().decode(DDayConfig.self, from: data)
        else { return nil }

        return config
    }
}

여기서 중요한 점은 App Group ID가 앱 타겟과 위젯 타겟 모두에 연결되어 있어야 한다는 것이다.

▷ Target → Signing & Capabilities → App Groups
▷ group.com.yegrcompany.ddaywidget 추가 (App + Widget Extension 동일하게)

 

 

---

 

D-Day 설정값 모델 정의

앱과 위젯 모두에서 공통으로 사용하기 위해 간단한 모델을 정의한다.

struct DDayConfig: Codable {
    let title: String
    let targetDate: Date
}

이 파일은 반드시 App Target + Widget Extension Target 모두에서 Target Membership이 활성화되어야 한다.

 

---

 

ViewController 구성 및 UI 배치

앱에서는 사용자가 D-Day 제목과 날짜를 입력하고 "저장" 버튼을 누르면 된다.

아래 예시는 SanpKit 레이아웃을 기반으로 구성한 ViewController 이며,
저장 시점에 SharedStore를 통해 값을 저장하고 위젯 갱신까지 요청한다.

import UIKit
import SnapKit
import WidgetKit

final class ViewController: UIViewController {
    private let titleTextField: UITextField = {
        let textField = UITextField()
        textField.placeholder = "기념일 제목을 입력하세요"
        textField.borderStyle = .roundedRect
        return textField
    }()

    private let datePicker: UIDatePicker = {
        let picker = UIDatePicker()
        picker.datePickerMode = .date
        picker.locale = Locale(identifier: "ko_KR")
        return picker
    }()

    private let saveButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("저장", for: .normal)
        button.titleLabel?.font = .systemFont(ofSize: 17, weight: .semibold)
        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
        setupConstraints()
    }

    private func setupViews() {
        view.addSubview(titleTextField)
        view.addSubview(datePicker)
        view.addSubview(saveButton)

        saveButton.addTarget(self, action: #selector(saveButtonTapped), for: .touchUpInside)
    }

    private func setupConstraints() {
        titleTextField.snp.makeConstraints {
            $0.top.equalTo(view.safeAreaLayoutGuide).offset(24)
            $0.leading.trailing.equalToSuperview().inset(24)
            $0.height.equalTo(44)
        }

        datePicker.snp.makeConstraints {
            $0.top.equalTo(titleTextField.snp.bottom).offset(24)
            $0.leading.trailing.equalToSuperview().inset(24)
        }

        saveButton.snp.makeConstraints {
            $0.top.equalTo(datePicker.snp.bottom).offset(32)
            $0.centerX.equalToSuperview()
            $0.width.equalTo(120)
            $0.height.equalTo(44)
        }
    }

    @objc
    private func saveButtonTapped() {
        let title = (titleTextField.text?.isEmpty == false)
            ? titleTextField.text!
            : "기념일"

        let date = datePicker.date

        let config = DDayConfig(title: title, targetDate: date)
        SharedStore.save(config: config)

        WidgetCenter.shared.reloadAllTimelines()
    }
}

이 시점에서 메인 앱은 사용자가 입력한 값을 App Group 저장소에 정상적으로 기록한다.

 

---

 

위젯 타임라인에서 설정값 불러오기

이제 WidgetKit이 주기적으로 호출하는 TimelineProvider 에서
SharedStore.loadConfig()를 호출하여 위젯 데이터를 구성한다.

import WidgetKit

struct DDayEntry: TimelineEntry {
    let date: Date
    let config: DDayConfig?
    let dayDiff: Int
}

struct DDayProvider: TimelineProvider {
    func placeholder(in context: Context) -> DDayEntry {
        DDayEntry(date: Date(), config: nil, dayDiff: 0)
    }

    func getSnapshot(in context: Context, completion: @escaping (DDayEntry) -> Void) {
        completion(makeEntry())
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<DDayEntry>) -> Void) {
        let entry = makeEntry()
        let nextUpdate = Date().addingTimeInterval(3600)
        completion(Timeline(entries: [entry], policy: .after(nextUpdate)))
    }

    private func makeEntry() -> DDayEntry {
        let config = SharedStore.loadConfig()

        let today = Calendar.current.startOfDay(for: Date())
        let target = Calendar.current.startOfDay(for: config?.targetDate ?? Date())
        let diff = Calendar.current.dateComponents([.day], from: today, to: target).day ?? 0

        return DDayEntry(
            date: Date(),
            config: config,
            dayDiff: diff
        )
    }
}

 

---

 

위젯 View에서 설정 내용 표시

앞에서 구성한 Entry를 그대로 UI에 반영한다.

struct DDayWidgetView: View {
    var entry: DDayEntry

    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text(entry.config?.title ?? "D-Day 미설정")
                .font(.headline)
                .foregroundColor(.white)

            Text("D-\(entry.dayDiff)")
                .font(.system(size: 32, weight: .bold))
                .foregroundColor(.white)

            if let targetDate = entry.config?.targetDate {
                Text(targetDate, style: .date)
                    .font(.caption)
                    .foregroundColor(.white.opacity(0.9))
            }
        }
        .padding()
        .containerBackground(for: .widget) {
            LinearGradient(
                gradient: Gradient(colors: [.blue.opacity(0.8), .purple]),
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
        }
    }
}

결과적으로 위젯은 다음 규칙으로 UI를 표시한다.

▷ 사용자가 입력한 제목 → 위젯의 헤드라인
▷ D-Day 계산 값 → 중앙 텍스트
▷ 목표 날짜 표시 → 하단 작은 글씨

---

결과물

0

 

---