> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# iOS: 이미지 캐러셀 푸시 알림

> Swift를 사용하여 OneSignal iOS 푸시 알림에서 이미지 캐러셀을 구현하는 방법.

iOS는 알림 콘텐츠 앱 확장의 진입점으로 [UNNotificationContentExtension](https://developer.apple.com/documentation/usernotificationsui/unnotificationcontentextension?language=objc) 프로토콜을 제공합니다. 이를 사용하여 앱 알림에 대한 맞춤형 인터페이스를 표시할 수 있습니다. 이 예제 가이드는 iOS 알림 내에서 캐러셀을 생성하는 데 이를 사용하는 방법을 설명합니다.

<Frame caption="푸시 알림의 캐러셀을 보여주는 이미지">
  <img src="https://files.readme.io/8ba64c7-RPReplay_Final1606950566.gif" />
</Frame>

## 1. 알림 콘텐츠 확장 추가

<Card img="https://mintcdn.com/onesignal/ciRrThfP6xMpI7GY/images/docs/00355f9-Screen_Shot_2020-11-30_at_9.32.26_PM.png?fit=max&auto=format&n=ciRrThfP6xMpI7GY&q=85&s=80e43cac5c764bd0538169f9de8b6743" horizontal="true" width="600" height="315" data-path="images/docs/00355f9-Screen_Shot_2020-11-30_at_9.32.26_PM.png">
  Xcode에서 File > New > Target...를 선택합니다.
</Card>

<Card img="https://mintcdn.com/onesignal/Xl2NHJvxakrK4JbL/images/docs/efd0fde-Screen_Shot_2020-11-30_at_3.10.58_PM.png?fit=max&auto=format&n=Xl2NHJvxakrK4JbL&q=85&s=1050faa9adf15303846a0cdee4cb0bab" horizontal="true" width="600" height="431" data-path="images/docs/efd0fde-Screen_Shot_2020-11-30_at_3.10.58_PM.png">
  "Notification Content Extension"을 선택합니다.
</Card>

<Card img="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/0a0fa6a-Screen_Shot_2020-11-30_at_6.44.46_PM.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=9779778bc953998e3e0ec96642d33e50" horizontal="true" width="600" height="429" data-path="images/docs/0a0fa6a-Screen_Shot_2020-11-30_at_6.44.46_PM.png">
  팝업 창에서 선택을 확인합니다.
</Card>

<Card img="https://mintcdn.com/onesignal/6tscVAtiSqz353kV/images/docs/ActivateContentExtension.png?fit=max&auto=format&n=6tscVAtiSqz353kV&q=85&s=8e0cf29704f3e01163074be168c3a597" horizontal="true" width="567" height="409" data-path="images/docs/ActivateContentExtension.png">
  디버그하려면 activate를 선택합니다.
</Card>

## 2. 앱에 코드 추가

Github에서 [OSNotificationContentExtension을 다운로드](https://github.com/jfishman1/OSNotificationContentExtension)하고 Xcode 프로젝트의 `OSNotificationContentExtension`을 Github의 동일한 파일로 교체합니다.

다음 파일이 추가된 것을 볼 수 있습니다:

<Frame caption="Content Extension 아래 파일들">
  <img src="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/0de83b8-Screen_Shot_2020-11-30_at_8.58.01_PM.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=ab382c7011a4481ab5cc91ce6d1a09cd" width="261" height="125" data-path="images/docs/0de83b8-Screen_Shot_2020-11-30_at_8.58.01_PM.png" />
</Frame>

## 3. 알림 카테고리 설정

이 예제는 AppDelegate.swift `didFinishLaunchingWithOptions` 내에서 [실행 가능한 알림 유형을 선언](https://developer.apple.com/documentation/usernotifications/declaring_your_actionable_notification_types)합니다.

<CodeGroup>
  ```swift Swift theme={null}
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

      //START Authorize OS Notification Carousel Category
      if #available(iOS 10.0, *) {
          let options: UNAuthorizationOptions = [.alert]
          UNUserNotificationCenter.current().requestAuthorization(options: options) { (authorized, error) in
              if authorized {
                  let categoryIdentifier = "OSNotificationCarousel"
                  let carouselNext = UNNotificationAction(identifier: "OSNotificationCarousel.next", title: "👉", options: [])
                  let carouselPrevious = UNNotificationAction(identifier: "OSNotificationCarousel.previous", title: "👈", options: [])
                  let carouselCategory = UNNotificationCategory(identifier: categoryIdentifier, actions: [carouselNext, carouselPrevious], intentIdentifiers: [], options: [])
                  UNUserNotificationCenter.current().setNotificationCategories([carouselCategory])
              }
          }
      }
      //END Authorize OS Notification Carousel Category

      return true
  }
  ```
</CodeGroup>

## 4. 푸시 알림 보내기

[푸시 메시지 보내기](./push)를 할 때 iOS 카테고리와 커스텀 데이터를 설정할 수 있습니다.

### iOS 카테고리

iOS 카테고리로 `OSNotificationCarousel`을 사용합니다:

<Tabs>
  <Tab title="Dashboard">
    "Platform Settings" > **Send to Apple iOS** > "Category"에서 설정

    <Frame caption="OneSignal 대시보드의 iOS 플랫폼 옵션">
      <img src="https://mintcdn.com/onesignal/6tscVAtiSqz353kV/images/docs/OSNotificationCarousel.png?fit=max&auto=format&n=6tscVAtiSqz353kV&q=85&s=2e0ff19d9f383aae03d510a34fc2c7fe" width="1101" height="848" data-path="images/docs/OSNotificationCarousel.png" />
    </Frame>
  </Tab>

  <Tab title="API">
    `ios_category` [API 매개변수](/reference/push-notification)로 설정합니다.
  </Tab>
</Tabs>

### 커스텀 데이터

OneSignal에는 알림당 여러 이미지를 업로드하는 옵션이 없습니다.

대신 쉼표 `,`로 구분된 이미지 URL 목록을 작성해야 합니다.

<Tabs>
  <Tab title="Dashboard">
    "Advanced Settings" > "Additional Data"에서 설정

    "Key"에는 `images`를, "Value"에는 따옴표 없이 쉼표로 구분된 URL 목록을 설정합니다.

    <Frame>
      <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/d07200a-Screen_Shot_2020-11-30_at_9.19.59_PM.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=1f4911116d4c3a944d1aa282d6566359" width="635" height="307" data-path="images/docs/d07200a-Screen_Shot_2020-11-30_at_9.19.59_PM.png" />
    </Frame>

    예시, 복사 붙여넣기:

    <CodeGroup>
      ```text text theme={null}
      https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg,https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058_960_720.jpg,https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067_960_720.png,https://cdn.pixabay.com/photo/2015/01/28/23/35/landscape-615429_960_720.jpg,https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg
      ```
    </CodeGroup>
  </Tab>

  <Tab title="API">
    다음과 같이 `data` [API 매개변수](/reference/push-notification)를 사용합니다:

    <CodeGroup>
      ```json json theme={null}
      data: {
        "images" : "https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg,https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058_960_720.jpg,https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067_960_720.png,https://cdn.pixabay.com/photo/2015/01/28/23/35/landscape-615429_960_720.jpg,https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg"
      }
      ```
    </CodeGroup>
  </Tab>
</Tabs>

### 푸시 보내기

푸시를 받으면 iOS 버전에 따라 길게 누르거나 왼쪽으로 스와이프하고 "View"를 클릭하여 알림을 확장해야 합니다.

### 추가 자료

* [실행 가능한 알림 유형을 선언하는 Apple 문서](https://developer.apple.com/documentation/usernotifications/declaring_your_actionable_notification_types)
* [Ahmet Keskin의 유용한 Medium 포스트](https://medium.com/nsistanbul/carousel-notification-in-ios-5a1e8239d786)

***