> For the complete documentation index, see [llms.txt](https://nsl-solution.gitbook.io/livesolution/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nsl-solution.gitbook.io/livesolution/viewer/sdk-ios/installation.md).

# 뷰어 설치하기

## 1. 프로젝트 설정

### 1.1 라이브 솔루션 뷰어 SDK 모듈 추가

샘플앱의 Frameworks 폴더를 사용하고자 하는 프로젝트 내부로 가져옵니다.

가져온 Frameworks 폴더 내부의 xcframework를 **General > Targets > Frameworks, Libraries, and Embedded Content** 항목으로 추가합니다.

<figure><img src="/files/Nn0ZBMUjUbkKRkGgJdXd" alt=""><figcaption></figcaption></figure>

### 1.2 필수 라이브러리 준비

쇼핑라이브 솔루션 뷰어는 Lottie 기능을 제공하기 위해 Lottie 라이브러리가 필요합니다.  다음 라이브러리를 Pod / Carthage / SPM 등을 이용하여 프로젝트에서 사용할 수 있도록 준비해주세요.

* [https://github.com/airbnb/lottie-ios](<https://github.com/airbnb/lottie-ios&#xD;&#xA;>)[
  ](<https://github.com/onevcat/APNGKit&#xD;&#xA;>)[
  ](<https://github.com/airbnb/lottie-ios&#xD;&#xA;>)

## 2. 뷰어 초기화 설정&#x20;

뷰어 SDK를 사용하기 전, 뷰어 모듈을 설정이 필요합니다.

`AppDelegate`의 `didFinishLaunchingWithOptions` (또는 뷰어 실행 전 다른곳 에서)에서 다음을 설정해 주세요.

### &#x20;2.1 버전 정보 설정

사용하는 앱의 버전정보 전달을 위해 다음 프로토콜을 만족하는 객체 세팅이 필요합니다.

```swift
ShoppingLive.setInfo(SomeInfoClass())

class SomeInfoClass: ViewerSDKInfoProtocol {
    var version: String = "1.0"
}
```

### &#x20;2.2 Lottie 프로토콜

쇼핑 라이브 솔루션을 이용하기 위해서는 Lottie View Protocol을 만족하는 View가 필요합니다. 샘플앱 `LottieViewProtocol.swift` 파일을 참고하여 `LottieViewProtocol`을 만족하는 뷰를 연결시켜주세요.

그 후 해당 클래스를 `ShoppingLive.shared.lottieClass`에 연결해 줍니다.

```swift
ShoppingLive.setLottieClass(SomethingLottieView.self)
```

### 2.3 초기화 코드 실행

2.1과 2.2의 세팅을 마친 뒤, 초기화 코드를 실행합니다.

```swift
ShoppingLive.initialize()
```

### 2.4 PIP 사용

#### navigation delegate 구현

PIP 및 가로모드 기능을 원활하게 사용하기 위해, 쇼핑라이브 SDK를 push 하는 navigation controller는 다음과 같이 `UINavigationControllerDelegate`를 만족해야 합니다.

navigationController의 delegate를 설정한 후, 아래 코드를 추가해 주세요. 샘플앱 `LiveViewerSDKTransitionable.swift` 을 참고해 주세요.

```swift
extension ViewController: UINavigationControllerDelegate {
    // MARK: - Transition
    public func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationController.Operation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        
        switch operation {
        case .push:
            let transitionable = toVC as? LiveViewerSDKTransitionable
            return transitionable?.transitioning(animationControllerFor: operation, from: fromVC, to: toVC)
        case .pop:
            let transitionable = fromVC as? LiveViewerSDKTransitionable
            return transitionable?.transitioning(animationControllerFor: operation, from: fromVC, to: toVC)
        default:
            return nil
        }
    }
    
    func navigationControllerSupportedInterfaceOrientations(_ navigationController: UINavigationController) -> UIInterfaceOrientationMask {
        guard let viewerVC = navigationController.viewControllers.first(where: {
            return $0 is LiveViewerSDKTransitionable
        }) as? LiveViewerSDKTransitionable else {
            return .all
        }
        
        return viewerVC.navigationControllerSupportedInterfaceOrientations(navigationController)
    }
}

```

{% hint style="warning" %}
해당 externalServiceId에 설정된 PIP 노출 여부가 false인 경우, PIP 모드가 제공되지 않습니다. 설정 변경을 위해서는 네이버 담당자에게 문의해주세요.
{% endhint %}

### 2.5 공유하기 URL 설정

**뷰어>더보기>공유하기** 시에 공유할 URL을 설정합니다.

온에어 뷰어와 다시보기 뷰어의 URL을 각각 설정할 수 있습니다. 해당 방송ID를 뷰어 내부에서 %d로 설정합니다.

```swift
ShoppingLive.shareUrlForLive = "https://www.yourservice.com/lives/%d"

ShoppingLive.shareUrlForReplay = "https://www.youreservice.com/replays/%d"
ShoppingLive.shareUrlForShortclip = "https://www.youreservice.com/shortclips/%d"
```

{% hint style="info" %}
**동작 예시**&#x20;

위 예제코드와 같이 설정한 뒤 방송ID가 12345인 라이브의 온에어 뷰어에서 공유한 경우, `https://www.yourservice.com/lives/12345` 로 공유됩니다.
{% endhint %}

### 2.6 서드파티 장바구니 URL 설정&#x20;

서드파티 상품이 설정된 라이브의 경우, 장바구니 버튼 클릭시 설정된 URL로 랜딩합니다.&#x20;

```swift
ShoppingLive.cartUrl = "https://www.yourservice.com/cart"
```

{% hint style="warning" %}
계약하신 솔루션 패키지에 따라 서드파티 상품 첨부가 불가할 수 있으며, 이 경우 본 설정값과 무관하게 동작합니다.
{% endhint %}

## 3. 뷰어 실행하기

다음 메소드를 통해 뷰어를 실행합니다.

단, 이 때 URL은 직접 구성하지 않고, [broadcast API의 응답값](#user-content-fn-1)[^1]으로 제공합니다. 뷰어 파라미터는 상태 등에 따라 동적으로 변경되기 때문에 자체적으로 URL패턴으로 구현하시는 경우, 유저 혜택, 통계 집계 등에 오류가 발생할 수 있습니다.

```swift
ShoppingLive.start(url: URL, navigationController: UINavigationController?)
```

<table><thead><tr><th width="220">변수명</th><th>설명</th></tr></thead><tbody><tr><td>url</td><td>실행가능한 뷰어 URL // 방송조회 API 응답값으로 구성</td></tr><tr><td>navigationController</td><td>뷰어를 Push할 navigationController</td></tr></tbody></table>

이 네비게이션 컨트롤러는 2.3의 delegate 설정이 되어야 합니다.

```swift
extension ViewController {

    ...
    
    func someFuction() {
        navigationController?.delegate = self
        ShoppingLive.start(url: someURL, navigationController: navigationController)
    }
    
    ...

}

// 2.3의 코드
extension ViewController: UINavigationControllerDelegate {
    public func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationController.Operation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        ...
    }
    
    func navigationControllerSupportedInterfaceOrientations(_ navigationController: UINavigationController) -> UIInterfaceOrientationMask {
        ...
    }
}
```

[^1]: 방송 조회 API 응답 필드 중 activeLinkUrl로 적용하시면, 별도의 방송 상태에 따른 분기처리 없이도 라이브/다시보기 뷰어로 랜딩하도록 구현이 가능합니다.