Dynamic Island(다이내믹 아일랜드)란? iPhone의 인터랙티브 알림

iPhone에서 Dynamic Island란?

Dynamic Island(다이내믹 아일랜드)는 iPhone 14 Pro, 15 Pro 및 이후 모델의 인터페이스 요소로, 전면 카메라와 Face ID 센서 주변 영역을 사용하여 알림 및 Live Activity를 표시합니다. 정적 검은색 요소였던 기존 노치와 달리 Dynamic Island는 동적으로 모양과 크기를 변경합니다. 타이머를 표시하기 위해 확장되고, 연결된 AirPods 아이콘을 위해 축소되며, 스포츠 점수를 위해 직사각형으로 변합니다.

기술적 구현 Dynamic Island는 OLED 디스플레이의 하드웨어 필 모양 컷아웃과 그 주변의 소프트웨어 픽셀 처리를 기반으로 합니다. 시스템은 Island 영역의 픽셀 새로 고침 빈도를 120Hz로 높이고 콘텐츠와 카메라의 검은 영역 사이의 부드러운 전환을 위해 안티앨리어싱을 사용합니다. 개발자는 Island를 직접 프로그래밍하지 않고 ActivityKit을 통해 콘텐츠를 생성하면 시스템이 컷아웃 주위에 자동으로 배치합니다.

사용자 인식 — Dynamic Island는 하드웨어 결함을 기능적 요소로 전환합니다. Apple의 연구에 따르면 사용자는 며칠 사용 후 Island를 화면의 자연스러운 일부로 인식합니다. 하이라이트 및 주의 전환 애니메이션 — 예를 들어, 수신 알림이 Island를 이동시키고 120프레임/초로 확장 효과와 함께 콘텐츠를 표시합니다.

Dynamic Island 표시 모드

Dynamic Island는 활동 유형 및 수에 따라 시스템이 자동으로 선택하는 세 가지 콘텐츠 표시 모드를 지원합니다. 개발자는 WidgetBundle에서 각 모드의 UI를 정의하지만 현재 활성 모드를 제어하지는 않습니다. 시스템은 두 가지 활동을 동시에 표시할 수도 있습니다. 하나는 컷아웃 왼쪽에, 다른 하나는 오른쪽에 있습니다.

모드 간 전환은 ease-in-out 곡선으로 0.4~0.6초의 시스템 애니메이션으로 수행됩니다. 새 Activity가 나타나면 Island가 컴팩트에서 확장 모드로 확장됩니다. 종료되면 다시 축소됩니다. 사용자는 왼쪽으로 스와이프하여 확장 모드를 강제로 접을 수 있으며 Island는 컴팩트 또는 미니멀 모드로 전환됩니다. 시스템은 업데이트가 예상되지 않는 경우 5초 동안 비활성 상태이면 확장 모드를 접습니다.

두 가지 활동 — 두 앱에 활성 Live Activities가 있는 경우 Dynamic Island가 컷아웃 양쪽에 표시합니다. 왼쪽은 먼저 시작된 Activity, 오른쪽은 두 번째 Activity입니다. 활동이 하나만 있는 경우 왼쪽을 차지하고 오른쪽은 비어 있습니다. 양쪽을 탭하면 Island가 확장되어 해당 Activity의 콘텐츠를 표시합니다. 충돌 시 시스템이 어떤 Activity에 우선순위를 둘지 결정합니다.

Dynamic Island 콘텐츠 만들기

Dynamic Island 콘텐츠는 ActivityKit 프레임워크를 사용한 Live Activity를 통해서만 생성됩니다. 개발자는 코드에서 네 가지 영역을 정의합니다: 컴팩트 리딩(compactLeading), 컴팩트 트레일링(compactTrailing), 미니멀(minimal), 확장(expanded)입니다. 각 영역은 context를 통해 Activity의 현재 상태를 받는 SwiftUI View입니다. 영역이 정의되지 않은 경우 Island는 해당 모드에서 해당 Activity를 표시하지 않습니다.

struct DeliveryIsland: DynamicIsland {
    var body: some DynamicIslandContent {
        DynamicIslandExpandedContent {
            VStack(alignment: .leading) {
                Text(context.state.status)
                    .font(.headline)
                ProgressView(
                    value: context.state.progress
                )
                Text("ETA: \(context.state.minutes) min")
                    .font(.caption)
            }
        } compactLeading: {
            Image(systemName: "box.truck")
        } compactTrailing: {
            Text("\(context.state.minutes) min")
                .monospacedDigit()
        } minimal: {
            Image(systemName: "box.truck")
        }
    }
}

Dynamic Island의 SwiftUI 제한 사항 — 사용 가능한 구성 요소: Text, Image, HStack, VStack, ZStack, Spacer, ProgressView, Button(Link를 통해서만), Gauge. 금지: ScrollView, List, TabView, 애니메이션, 제스처 인식기. 색상 팔레트 — System Colors만(label, secondaryLabel, tint). 글꼴 — .caption에서 .title3까지 시스템 크기. 사용자 정의 글꼴 및 SF Symbols가 올바르게 작동합니다.

Dynamic Island 테스트 — Xcode는 Dynamic Island를 지원하는 시뮬레이터를 제공합니다. 대상 장치로 iPhone 14 Pro 또는 15 Pro를 선택합니다. ActivityKit은 다양한 Island 모드를 시뮬레이션합니다. Xcode Debug 메뉴의 Dynamic Island Mode 버튼이 컴팩트, 미니멀, 확장 간을 전환합니다. 여러 Activity를 동시에 테스트하려면 다른 ActivityID를 가진 스킴을 사용하거나 앱의 두 인스턴스를 실행합니다.

Dynamic Island의 시스템 이벤트

시스템 이벤트 — 통화, AirPods, Face ID, 충전 등 — 는 맞춤 Live Activities보다 우선순위가 높습니다. 시스템 이벤트가 발생하면 Island가 맞춤 콘텐츠 표시를 일시 중지하고 시스템 콘텐츠를 표시합니다. 시스템 이벤트가 종료되면 Island가 애니메이션과 함께 맞춤 콘텐츠로 돌아갑니다. 개발자는 시스템 이벤트를 취소하거나 수정할 수 없으며 iOS 운영 체제 수준에서 관리됩니다.

수신 전화 — 가장 중요한 시스템 이벤트입니다. Dynamic Island는 컷아웃 왼쪽에 발신자 이름, 오른쪽에 통화 시간/상태를 표시합니다. 활성 통화 중에는 Island가 맞춤 Live Activities를 표시하지 않습니다. 사용자는 Island를 확장하여 통화 화면을 열거나 백그라운드에서 활성 통화를 유지한 채 앱에서 작업을 계속하기 위해 접을 수 있습니다.

AirPods 연결 — iPhone 근처에서 케이스를 열면 Dynamic Island가 연결을 애니메이션으로 표시하고 각 이어버드와 케이스의 충전 상태를 보여줍니다. 애니메이션은 2~3초간 지속되며, 이후 Island는 이전 상태로 돌아갑니다. 사용자에게 활성 Live Activities가 없는 경우 Island는 비어 있습니다. AirPods Pro 2는 스템을 누르면 볼륨 및 노이즈 캔슬레이션 모드도 표시합니다.

Dynamic Island 개발 모범 사례

Dynamic Island 모범 사례는 Apple이 제공하며, 양질의 사용자 경험을 보장하기 위해 따르는 것이 좋습니다. 컴팩트 모드는 가장 중요한 정보(아이콘과 하나의 숫자 또는 짧은 레이블)만 표시해야 합니다. 확장 모드는 중복 요소 없이 핵심 정보만 표시합니다. 컴팩트 모드에서 20자를 초과하는 텍스트를 배치하지 마십시오. 시스템이 텍스트를 줄임표로 자릅니다.

Dynamic Island 푸시 업데이트 — 드문 업데이트(주문 상태, 스포츠 결과)에는 ActivityKit 푸시를, 빈번한 타이머나 스톱워치에는 로컬 업데이트를 사용합니다. 푸시 알림은 APNs를 통과하며 Island에 표시되는 데 0.5~2초가 걸립니다. StaleDate — 콘텐츠 만료 날짜를 설정합니다. 업데이트가 제시간에 도착하지 않으면 시스템이 콘텐츠 대신 회색 배경을 표시하여 사용자에게 오래된 데이터임을 알립니다.

func updateDelivery(activity: Activity<DeliveryAttributes>) {
    Task {
        let newContent = ActivityContent(
            state: DeliveryAttributes.ContentState(
                status: .delivered,
                estimatedMinutes: 0
            ),
            staleDate: Date().addingTimeInterval(300)
        )
        await activity.update(newContent)
        // 2초 후 Activity 종료
        try? await Task.sleep(nanoseconds: 2_000_000_000)
        await activity.end(newContent)
    }
}

에너지 소비 — Dynamic Island 및 Live Activities는 OLED 디스플레이 하드웨어 최적화 덕분에 배터리에 미치는 영향이 최소화됩니다. 컷아웃 주변의 검은 픽셀은 꺼져 있으며 콘텐츠는 전용 코프로세서에서 렌더링됩니다. 5분마다 업데이트할 경우 평균 Live Activity 소비량은 사용 시간당 배터리의 1% 미만입니다. 배터리가 부족하거나(20% 미만) 절전 모드에서는 시스템이 자동으로 Island를 일시 중지합니다.

Dynamic Island 디자인은 메인 앱 UI의 적응이 필요하지 않습니다. Island는 활성 화면과 독립적으로 작동합니다. Live Activity 색상은 시스템 Color Assets을 통해 시스템 테마(밝음/어두움)와 일치해야 합니다. SF Symbols는 맞춤 아이콘보다 선호됩니다. 모든 Island 모드에서 올바르게 표시되며 Dynamic Type이 내장되어 있습니다.