[ iOS ] Link Presentation 알아보기

 

Link Presentation | Apple Developer Documentation

 
 

🎬 글을 시작하며

Link Presentation은 <야기> 앱을 개발할 때 사용했던 Framework로, Share Sheet를 임의로 구성하기 위해 사용했다. 하지만 title과 content만으로 구성했기 때문에 이 framework를 잘 사용했다고 하긴 어렵다. 이번에 <WanF> 프로젝트에서 모임 정보를 공유할 때 링크를 첨부하기 위해 Link Presentation를 사용할 예정이다. 그 전에 공식 문서와 WWDC 영상을 통해 Link Presentation을 꼼꼼하게 정리하려 한다.
 
 
 
 

✉️ Link Presentationd이란?

내용이 풍부한 URL 링크를 이미지 또는 동영상과 함께 일관된 방식으로 앱에 가져오고 제공하고 보여주는 것이다. 이 프레임워크는 URL로부터 메타데이터를 검색하고 앱에 링크의 내용을 표시한다. 그리고 Share Sheet 환경에 링크 메타데이터를 제공한다.

메타 데이터: 데이터에 대한 구조화된 데이터. 영화를 보기 위해 DVD 타이틀을 구매했을 때 포장에 붙어있는 제목, 상영시간, 감독 등이 메타데이터이다.

 
AppStore에서 앱을 공유하는 등 다른 사용자에게 무언가를 공유할 때 위와 같은 모양을 많이 보았을 것이다. 이것을 Rich Link Message라 부르며 Link Presentation을 통해 만들 수 있다. 이 메세지는 아래와 같이 3가지 모양이 있다.

 
 
 
 

👩🏻‍💻 Embedding and Sharing Visually Rich Links

Link Presentation은 WWDC 2019에서 소개되었다. 기존 Apple은 iOS 10과 macOS Sierra에서 URL을 아름답고 더 유용하게 만드는 메세지로 Rich Links를 소개했다. 이후 Apple은 iOS 13과 macOS 10.15에서 최소한의 작업만으로도 같은 이점을 제공하는 Link Presentation framework를 소개했다.

Embedding and Sharing Visually Rich Links - WWDC19 - Videos - Apple Developer

 
위 공식 영상에서는 3가지 주제로 나누어 Link Presentation 프레임워크를 사용한 예시를 보여주었다. 이 예시를 정리하며 Link Presentation을 알아보고자 한다.
1. How to present metadata given a URL (주어진 URL의 메타데이터를 표시하는 방법)
2. How to easily present that metadata to the users (메타데이터를 사용자에게 쉽게 표시하는 방법)
3. How to use fetched metadata to accelerate the presentation of the new Share Sheet experience in iOS 13 (iOS 13에서 새로운 Share Sheet 환경의 presentation을 가속화하기 위해 가져온 메타데이터를 사용하는 방법)
 
 
 

1️⃣ Retrieving metadata

문자열로 URL을 간단히 보여줄 수도 있지만, URL은 사용자 친화적이지 않아 여러 URL이 있을 경우 구분하기 어렵다. 사용자에게 URL의 title을 요구할 수도 있지만 Link Presentation을 사용하면 더 쉽게 사용자 친화적인 URL을 구성할 수 있다.
새로운 Link Presentation 프레임워크를 사용하면 LP metadata provider 클래스를 사용하여 웹사이트로부터 풍부한 메타데이터를 쉽게 얻을 수 있다. 이 클래스에 URL을 전달하면 사용 가능한 모든 미디어에서 대표 title과 함께 LPLinkMetadata 객체를 반환한다. 

 
먼저 LPMetadataProvider 를 생성한 후 startFetchingMetadata를 URL과 함께 호출하라. completion handler가 호출될 때 에러를 확인할 수 있는데, 만약 서버가 응답하지 않거나 또는 너무 느리거나 사용자의 네트워크가 연결되지 않았다면 메타데이터를 가져오는 것은 실패할 수도 있다. 마지막으로 우리가 원하는 대로 메타데이터를 사용하면 된다.

// Fetch metadata from a given URL

let metadataProvider = LPMetadataProvider()
let url = URL(string: "https://www.apple.com/ipad")!


metadataProvider.startFetchingMetadata(for: url) { metadata, error in
    if error != nil {
        // The fetch failed; handle the error.
        return
    }


    // Make use of fetched metadata.
}

 
metadataProvider와 LinkMetadata를 사용할 때 몇 가지 주의해야 한다. 만약 사이트가 어떤 것도 지정하지 않았자면 결과로 나온 메타데이터 객체가 title, icon, image나 video 또는 그 무언가도 포함하지 않을 수 있다. 그리고 그 메타데이터 객체는 secure coding 속에서 직렬화(serializable)될 수 있다. 이는 LPMetadataProvider가 그 작업을 수행하기 위해 인터넷에 도달하고, 사용자가 그 작업을 수행하고 매번 우리에게 같은 link를 보여줄 때마다 데이터와 수행 비용을 지불하게 하고 싶지 않기 때문에 중요하다. 따라서 얻어낸 메타데이터를 가능한 로컬로 cache 해야한다.

직렬화: 데이터 구조나 객체의 상태를 추후 저장할 수 있거나 전송될 수 있는, 또는 재구성할 수 있는 형식으로 변환하는 과정이다.
 

또한 메타데이터를 로컬 file URL에서 가져올 수 있다. 이런 경우에는 만약 가능하다면 파일에 대한 대표 썸네일을 얻기 위해 새로운 QuickLook thumbnailing API가 사용되어질 것이다.
 
 
 
 
 

2️⃣ Presenting links

우리가 얻은 메타데이터를 앱에 present하는 방법은 간단하다. 바로 앞에서 만든 객체로 LPLinkView를 만들 수 있다.

// Present LPLinkMetadata in a LPLinkView

let linkView = LPLinkView(metadata: metadata)
cell.contentView.addSubview(linkView)
linkView.sizeToFit()

LPLinkView는 고유의 size를 가지고 있지만, 그것은 또한 제한된 size가 주어지면 이를 사용하기 위해 이상적인 크기에 맞는 size를 사용할 수 있다. 그리고 어떤 size로 크기가 배치되더라도 합리적인 무언가를 표시하도록 노력할 것이다.
 
 
 

3️⃣  Accelerating the share sheet

URL을 공유할 앱에 대해 Share Sheet는 자동으로 link의 미리보기를 sheet의 header에 표시한다. 그러나 이 미리보기는 Share Sheet가 present되자마자 메타데이터를 얻기 위해 서버와 연결해야하기 때문에 title과 icon은 비동기적으로 보여진다. 따라서 미리보기가 header에 바로 반영되어 나타나지 않을 수도 있다. 만약 URL에 대한 LPLinkMetadata 객체를 Share Sheet에 전달하기만 하면 네크워크 로딩없이 즉각적으로 미리보기가 나타난다. 이를 구현하기 위해서 UIActivityItemSource의 구현에 새로운 activityViewControllerLink Metadata 메서드를 사용할 수 있으며 단순히 메타데이터 객체를 반환하면 된다. 만약 사용자가 메세지를 공유한다면, 같은 메타데이터는 불필요한 로딩 없이 부드럽고 아주 매끄러운 경험을 제공하며 바로 전달될 것이다.

// Provider prefetched metadata to UIActivityViewController via UIActivityItemSource

func activityViewControllerLinkMetadata(_: UIActivityViewController) -> LPLinkMetadata? {
    return self.metadata
}

 
만약 title과 image가 들어 있는 데이터베이스를 이미 가지고 있다면, Share Sheet를 빠르게 띄우기 위해 또는 rich link를 표시하기 위해  메타데이터를 인터넷에서 다시 가져올 필요는 없다. 대신 LPLinkMetadata의 field들을 우리가 가지고 있는 데이터로 채워라. 그러면 LPLinkMetadata 객체를 만들고 최소한 원래 URL 및 URL field들을 우리가 가지고 있는 추가적인 정보를 더해라.

// Provide custim metadata to UIActivityViewController via UIActivityItemSource.

func activityViewControllerLinkMetadata(_: UIActivityViewController) -> LPLinkMetadata? {
    let metadata = LPLinkMetadata()
    metadata.originalURL = URL(string: "https://www.example.com/apple-pie")
    metadata.url = metadata.originalURL
    metadata.title = "The Greatest Apple Pie In The World"
    metadata.imageProvider = NSItemProvider.init(contentsOf:
        Bundle.main.url(forResource: "apple-pie", withExtension: "jpg"))
    return metadata
}

 
 
 
 

✨ 핵심 키워드 3

 1. 임의의 URLs에 대한 더 많은 내용을 제공하기 위해  LP metadata provider를 사용하여 URL에 대한 풍부한 메타데이터를 가져올 수 있다.
2. LP link view를 사용하여 아름답고 시스템과 일관성있는 방식으로 앱에 links를 표시할 수 있다(present).
3. prefetch하거나 기존의 LPLinkMetadata를 사용하여 앱에 Share Sheet 미리보기를 빠르게 띄울 수 있다(accelerate).
 
 
 

🧚🏻‍♀️ 글을 마무리하며

SNS를 많이 사용하는 사람들은 Link Presentation을 정말 많이 보았을 것이다. 나 또한 카톡으로 여러 미디어를 전송하면서 Link Presentation 형태를 많이 보아왔다. 하지만 그 형태가 이 프레임워크를 사용한 것이라고는 <야기>를 구현할 때 사용했음에도 알지 못했다. 이렇게 Link Presentation을 정리해보니 확실하게 이 프레임워크의 용도를 알 수 있었다. 또 iOS를 시작한지 꽤 되었음에도 WWDC가 아직 어렵고 멀게만 느껴졌는데 이번에 이렇게 경험하고 나니 다음부터는 공식문서처럼 편하게 보고 매년 WWDC가 열릴 때마다 관심을 가지고 볼 수 있을 것 같다.
 

 

🔥 한 줄 정리

Link Presentation는 URL을 사용자 친화적이고 일관된 모습으로 보여줄 수 있도록 도와주는 프레임워크이다. metadata 객체는 selializable하므로 URL의 메타데이터를 매번 네트워크와 작업하기 보다는 로컬에 cache하여 사용하는 편이 좋다. 또 metadata는 Share Sheet의 미리보기를 임의로 구성할 수 있게 해주며 네트워크 로딩 없이 미리보기를 빠르게 만들 수 있다.