[SwiftUI] 위젯 도전기

안녕하세요 오랜만입니다!

최근에 스스로에 대한 챌린지? 느낌으로 구글 애드몹과 위젯을 넣은 **PlusLuck** 앱을 3주만에 기획하고 개발해서 출시해보았습니다.

이번에 위젯을 처음 써봤는데요, 어디서부터 시작해야 할지 막막했지만, 하나씩 해보니 생각보다 어렵지 않았습니다.

이 글에서는 SwiftUI 기반의 iOS 앱에 Widget Extension을 추가하는 방법부터, 간단한 시간/이모지 표시 위젯을 구현하는 과정까지 차근차근 정리해보겠습니다.

---

1. 위젯 파일 추가하기

Xcode에서 새로운 타겟을 추가합니다.

 

1. 상단 메뉴에서 File > New > Target을 클릭합니다.  
2. 필터에 widget을 입력한 뒤, 사진처럼 Widget Extension을 선택합니다.  
3. 타겟 이름은 PlusLuckWidget으로 지정해주었습니다.  
4. 기본 설정을 마치고 나면, 프로젝트에 위젯 관련 폴더와 파일들이 자동으로 추가됩니다.

 

 

2. 위젯 구성 파일 구조생성된 위젯 파일 구조는 다음과 같습니다.

- PlusLuckWidget  
  → 실제 UI와 로직을 구현하는 메인 파일입니다.  
- AppIntent
  → 위젯의 동작을 사용자 정의로 설정하고 싶을 때 활용합니다.  
- PlusLuckWidgetBundle  
  → 여러 위젯을 번들로 묶을 수 있도록 해줍니다.  
(그 외 Live Activity, Control 등은 선택적으로 사용됩니다.)

 

3. 위젯 작동 원리 이해하기SwiftUI 위젯은 다음의 구조로 이루어져 있습니다.

1. TimelineProvider
   → 어떤 데이터를 언제 업데이트할지를 관리합니다.  
2. Entry
   → UI에서 사용할 실제 데이터 모델입니다.  
3. Widget
   → 위젯 뷰 자체를 정의합니다.

 

4. 위젯 UI 구성

struct PlusLuckEntry: TimelineEntry {
    let date: Date
    let emoji: String
}

struct PlusLuckWidgetEntryView: View {
    var entry: PlusLuckEntry

    var body: some View {
        VStack {
            Text("Time:")
            Text(entry.date, style: .time)
                .bold()
            Text("Favorite Emoji:")
            Text(entry.emoji)
                .font(.largeTitle)
        }
    }
}

그리고 TimelineProvider에서는 현재 시각과 이모지를 Entry에 넣어주도록 구성합니다.

 

5. 최종 결과

이렇게 구성된 위젯은 홈 화면에서 아래와 같이 표시됩니다

 

 

6. 추가 한 기능들

위에까지가 위젯을 추가하면 자동으로 추가된 파일들입니다!

저는 위젯에 사용자가 좋아하는 문장이나 이모지를 적을 수 있도록 하였고, CoreData와 연계하여 위젯에 행운 점수를 보여주도록 추가로 설정하여 사용하였습니다.