앱에 나와 공유된 항목 추가

앱에 나와 공유된 항목 추가

나와 공유된 항목을 사용하면 메시지에서 다른 사람이 공유한 콘텐츠를 사용자가 앱에서 쉽게 찾을 수 있습니다. 앱에서 나와 공유된 항목을 지원하고 콘텐츠에서 곧바로 메시징 경험을 지속할 수 있는 방법을 알아보세요. 핀으로 고정을 통해 나와 공유된 항목 권한을 암시적으로 부여하고 콘텐츠가 자동으로 공유되도록 하는 방법을 보여드리겠습니다. 또한 나와 공유된 항목 선반에 나와 공유된 항목 콘텐츠를 표시하고 나와 공유된 항목 출처 보기를 사용하여 공유 항목을 시각적으로 표현하는 방법에 대해서도 설명합니다.

리소스
- - HD 비디오
  - SD 비디오
관련 비디오

WWDC22
- 메시지를 통합 협업 경험 향상
- 메시지와 맞춤형 협업 앱 통합
WWDC20
- What's new in Universal Links
다운로드

♪ ♪
안녕하세요, Karthik입니다 저는 Messages팀 소속 엔지니어입니다 이번 영상에서는 'Shared with You'를 소개하고 여러분의 앱에 적용하는 법을 알려 드리려 합니다
'Shared with You'는 iOS 15에서 도입됐습니다 친구나 가족이 Messages로 보내는 링크에 보다 쉽게 접근할 수 있도록 고안된 기능입니다 'Shared with You'가 적용되는 시스템 응용 프로그램은 Safari와 뉴스 뮤직, Podcasts TV 앱과 사진입니다 'Shared with You'는 여러분의 콘텐츠 소비를 만족시켜 줍니다 보통 우리는 불시에 대부분의 콘텐츠를 보게 됩니다 예를 들어, 여러분이 마트에 장을 보러 갔을 때 친구들이 TV 프로그램을 추천해 줬다고 가정해 보죠 그럼 그 사실을 잊게 되는 경우가 있죠 'Shared with You'는 여러분이 나중에 TV 앱을 통해서 프로그램을 쉽게 찾을 수 있도록 해 줍니다 'Shared with You'는 Messages 앱 내에서 편하게 다른 앱으로 연결시켜 주며 콘텐츠를 공유한 앱에서 나가지 않고도 콘텐츠를 볼 수 있게 해 줍니다
여러분의 콘텐츠는 Messages에 고정시킬 수 있습니다 'Shared with You'로 콘텐츠를 올리고 검색하면 되죠 그 콘텐츠가 중요하다는 신호를 보내면 자동으로 공유를 허락하게 됩니다 자세한 내용은 뒤에서 더 설명해 드리죠 iOS 16에선 'Shared with You'가 여러분의 앱과 링크 콘텐츠로 확대됐습니다 'Shared with You'의 편리함을 다른 앱에도 적용하는 거죠
'Shared with You'의 디자인을 먼저 얘기한 다음 사용 방법을 보여 드리고 그 후에 기능 적용법을 설명해 드릴게요
디자인부터 시작해 보도록 하죠 'Shared with You'는 두 부분으로 나뉩니다 'Shared with You' 셸프와 어트리뷰션 뷰입니다 'Shared with You' 셸프는 전용 공간으로 여러분이 앱에서 검색할 때 Messages에서 공유된 콘텐츠를 강조해 표시하는 공간입니다 예를 들어, TV 앱의l '지금 시청' 탭을 보면 'Shared with You' 셸프가 있습니다 음악이나 Podcasts 앱의 '지금 듣기' 탭도 마찬가지죠
'Shared with You'로 제공되는 콘텐츠는 순서대로 표시됩니다 이번 영상에서 설명해 드릴 겁니다 'Shared with You' 셸프에 있는 각 아이템은 어트리뷰션 뷰와 함께 알찬 미리 보기를 보여 줍니다 미리 보기에는 섬네일과 제목이 포함되며 자막이 있다면 자막도 표시됩니다 이 예시에서는 미리 보기에 podcast art와 함께 에피소드 제목과 프로그램 제목이 보여집니다 'Shared with You' 셸프로 공유된 각 콘텐츠에도 어트리뷰션 뷰가 제공됩니다 여기에는 맥락을 한 번에 파악할 수 있는 정보가 담겨 있죠
'더 보기' 기능을 이용해서 미리 보기를 확장하거나 'Shared with You'로 공유된 콘텐츠를 볼 수 있습니다 어트리뷰션 뷰는 과정을 보여 주는 게 아니라 공유한 사람의 이름과 아바타를 온전히 표시합니다 게다가 Messages에 고정된 콘텐츠도 표시해 줍니다 어트리뷰션 뷰로는 콘텐츠의 세부 사항을 볼 수 있습니다 이렇게 하면 여러분의 앱에 있는 콘텐츠를 다시 Messages로 공유할 수 있습니다 예를 들어, 제가 TV 프로그램을 검색하고 있었다면 어트리뷰션 뷰에서 친구가 제게 추천한 프로그램을 알려 줍니다 저는 친구에게 그걸 본다고 바로 말해 줄 수 있죠 이 모든 게 앱 내에서 가능합니다 저는 답장을 한 후에 바로 콘텐츠로 돌아갈 수 있죠 어트리뷰션 뷰는 대화 형식입니다 '보기'를 누르면 앱에서 응용 프로그램에서 바로 Messages 창으로 이동합니다 어트리뷰션 뷰에서는 contextual menu도 표시됩니다 '답장'이나 '제거' 같은 기능이죠 context menu에서 '답장' 기능은 '보기'를 누르는 것과 비슷합니다 context menu에서 '제거'는 'Shared with You'에서 콘텐츠가 더 이상 노출되지 않도록 합니다 동일한 contextual menu를 이용해서 콘텐츠에 contextual menu를 추가할 수도 있습니다 context menu의 제거 부분은 사용자가 수정할 수 있습니다 Safari를 예로 들어 살펴보죠 웹 페이지의 contextual menu에 '링크 제거'가 있습니다 여러분이 앱에서 하는 방법은 뒤에서 알려 드리겠습니다
지금까지 'Shared with You' 셸프가 어디에 나타나는지 어트리뷰션 뷰가 어디에 표시되는지 배웠습니다 이제 'Shared with You'의 작동 방식을 알려 드리죠 Messages에서 친구나 가족이 공유하는 링크가 'Shared with You' 화면에 나타납니다
그룹 대화에서 표시되는 링크는 적어도 한 명의 참여자가 있을 경우에 나타납니다
'Shared with You'는 유니버설 링크와 같은 기술을 기반으로 합니다
유니버설 링크는 앱 내 콘텐츠나 웹 사이트의 콘텐츠로 매끄럽게 연결되도록 해 줍니다
사용자는 'Shared with You' 콘텐츠를 세분화시켜 통제할 수 있습니다
Messages 앱 외부에서 공유할 내용을 선택할 수도 있고 대화 내에서 공유할 수도 있고 앱에서 또는 해외로 공유할 수도 있죠 이 권한은 미리 요청할 필요가 없습니다 순차적으로 일어나는 일이죠
'Shared with You'에서 링크를 고정하는 건 콘텐츠를 표시하는 암묵적인 권한입니다
콘텐츠를 고정하는 건 앱의 'Shared with You'로 가능합니다 휴리스틱스를 기반으로 콘텐츠가 Messages에 고정될 때 자동 공유 기능이 활성화됩니다
자동 공유 기능이 켜져 있으면 앱의 'Shared with You' 기능이 추가 콘텐츠에 자동 적용됩니다
'Shared with You'에서 콘텐츠는 순차적으로 정렬됩니다 'Shared with You' 셸프의 첫 번째 콘텐츠는 시리 제안이 바탕이 되는데 시스템의 다양한 신호를 기반으로 합니다
그다음에 고정 콘텐츠가 나옵니다 그리고 나머지 콘텐츠는 시간순으로 정렬됩니다
시리 제안에서 사용하는 신호는 다음과 같습니다 '사용자가 그 콘텐츠를 보거나 반응을 보였는가?' '고정된 콘텐츠인가?' '콘텐츠가 어떤 맥락에서 나타나는가?' 여러분의 앱 사용은 이런 부분에 피드백을 제공합니다 자세한 내용은 잠시 후에 설명해 드리겠습니다 이 기능은 콘텐츠가 휘발되거나 오래가지 않도록 하기 위함이죠 대화 중에 링크를 여러 번 공유하는 경우 'Shared with You'에서는 가장 최근 메시지만 나타냅니다 링크가 여러 Messages 창에서 공유되는 경우 'Shared with You'는 어트리뷰션 뷰를 통해 그 결과를 시각적으로 보여 줍니다 예를 들어 엔리케와 세라가 시카고 재생 목록 Top 25를 공유하는 경우를 말해 보죠 어트리뷰션 뷰에서는 두 사람의 아바타가 표시됩니다
어트리뷰션 뷰를 누르면 이중 메뉴가 나타나고 누구한테 보낼지 선택할 수 있습니다 'Shared with You' 기능에서 보안 및 개인 정보 보호는 주요 고려 사항이었습니다 어트리뷰션 뷰와 이중 뷰는 과정을 진행하다 보면 사라질 겁니다 'Shared with You' 기능은 유니버설 링크와 연결해서 여러분 앱의 콘텐츠를 보호합니다 그래서 여러분의 앱에만 접근할 수 있죠 앱은 Messages 수신자들과 그 대화 창에 접근할 수 없습니다
지금까지 'Shared with You'가 어떻게 작동하는지 배웠습니다 이제 가장 흥미로운 부분으로 넘어가서 'Shared with You'가 앱에서 어떻게 적용되는지 알려 드리죠 우선, 유니버설 링크를 적용합니다
그리고 새로운 'Shared with You' 기능을 Xcode의 Capability 탭에 추가합니다 그다음 앱에서 'Shared with You' 셸프를 열고 콘텐츠에 어트리뷰션 뷰를 추가합니다
유니버설 링크를 적용하는 법을 간단히 설명해 드리죠
유니버설 링크를 통해 사용자가 앱이나 웹 사이트의 콘텐츠로 쉽게 연결할 수 있습니다 다음 단계를 통해 유니버설 링크를 강화합니다 우선 여러분의 앱과 웹 사이트를 양방향으로 연결합니다 그다음 앱에서 처리할 URL을 지정합니다 앱에 'Associated Domains' 권한을 추가한 다음 JSON 파일을 웹 서버에 추가합니다
그다음 앱 델리게이트를 업데이트해서 유니버설 링크가 앱으로 라우팅할 경우 시스템이 제공하는 사용자 활동에 반응하도록 합니다 자세한 내용을 원하시면 '새로운 유니버설 링크' 영상을 참고하세요 iOS 16에선 'Shared with You'라는 새 프레임워크를 도입했습니다 'Shared with You' 프레임워크에는 세 가지 클래스가 있습니다 SWHighlightCenter와 SWHighlight SWAttributionView가 있죠 SWHighlightCenter는 앱에서 'Shared with You' 콘텐츠의 이해를 돕는 클래스입니다 SWHighlight는 앱의 공유 콘텐츠를 포함하는 객체 모델이며 SWAttributionView는 여러분의 콘텐츠를 Messages 대화 창에 다시 연결해서 어트리뷰션 정보를 표시하는 데 도움을 주는 보기 형식입니다
HighlightCenter는 다음으로 구성되는 단순 객체입니다 SWHighlight 객체의 집합인 Highlights와 'Shared with You'로 추가, 제거 또는 업데이트된 콘텐츠가 있는 델리게이트 프로퍼티로 구성됩니다 Highlight는 SWHighlight 클래스로 표시됩니다 이는 Messages에서 공유된 앱의 콘텐츠에 대한 URL을 전달하는 데 사용됩니다 콘텐츠를 참고하고 미리 보기를 생성하고 여러분 앱의 콘텐츠를 찾을 때 사용하죠 앱에서 'Shared with You' 콘텐츠를 나열하는 방법을 보여 드릴게요
우선 SWHighlightCenter의 인스턴스를 생성합니다
그리고 델리게이트 프로퍼티를 설정합니다
SWHighlightCenterDelegate 메서드를 실행합니다
HighlightCenter의 highlight 프로퍼티를 이용해 앱의 'Shared with You' 콘텐츠에 접근합니다 앱들은 이전의 highlights 목록을 유지해 그 목록을 최근 목록과 빠르게 비교할 수 있습니다
각 highlight의 URL 프로퍼티를 사용해서 여러분 앱에서 콘텐츠의 미리 보기를 생성합니다
앱에서 'Shared with You' 콘텐츠를 나열하는 건 쉽습니다
다음으로는 여러분 앱의 'Shared with You' 콘텐츠에 어트리뷰션 뷰를 추가하고 수정하는 법을 알려 드리죠 SWAttributionView에서는 콘텐츠를 공유한 사람의 이름과 아바타를 보여 줍니다 각 highlight는 그에 상응하는 어트리뷰션 뷰가 있습니다
어트리뷰션 뷰에서 highlight 프로퍼티를 설정하면 속성 정보 외 렌더링 과정을 시작합니다
어트리뷰션 뷰에서는 가능한 최대 너비를 지정합니다 어트리뷰션 뷰는 필요에 따라 공간에 맞춰 채워질 겁니다
어트리뷰션 뷰의 구조를 최대로 설정합니다 예를 보여 드릴게요
SWAttributionView의 인스턴스를 생성하고 Highlight 프로퍼티를 설정합니다
레이아웃 너비를 최대로 설정합니다 이 예시에서는 공유된 콘텐츠의 하단에 섬네일이 위치할 겁니다 이 미리 보기의 너비를 제한하거나 프레임 너비를 설정해 콘텐츠의 최대 너비를 제한합니다 필요에 따라 미리 보기의 최대 AX 콘텐츠 크기 카테고리를 설정합니다 UIView에서 프로퍼티 설정을 minimumContentSizeCategory나 maximumContentSizeCategory로 합니다
미리 보기 부분의 세로 공간을 충분히 잡습니다 미리 보기의 높이는 preferredContentSizeCategory와 결과에 나타나는 글씨 크기로 결정됩니다 미리 보기의 높이가 불필요하게 제한되는 경우에는 미리 보기의 일부가 잘릴 수도 있습니다 다음과 같은 경우에는 가로 배열이 선행됩니다 하지만 중앙으로 설정할 수도 있고 끝으로 설정할 수도 있습니다 다음으로는 어트리뷰션 뷰를 수정하는 방법을 보여 드릴게요 디스플레이 컨텍스트 설정은 사용자가 어떤 콘텐츠를 보는지 시스템에 알리는 데 도움이 됩니다 이는 'Shared with You' 콘텐츠 순위에도 영향을 미칩니다 창에 추가하기 전에 설정을 먼저 하세요 어트리뷰션 뷰의 배경 스타일도 설정을 바꿀 수 있는데 사용 중인 콘텐츠의 배경이 기준이 됩니다
예시를 보여 드리죠 displayContext 프로퍼티의 기본값은 summary입니다
이건 사용자들한테 보여지는 콘텐츠라는 뜻이죠
displayContex를 detail로 설정합니다 사용자가 콘텐츠를 적극적으로 소비하면서 영화를 본다거나 팟캐스트를 듣는 경우죠
displayContext 설정은 앱에서 제공하는 피드백으로 시리 제안이 앱에 맞는 콘텐츠의 순위를 매기는 데 도움이 됩니다 어트리뷰션 뷰의 배경 스타일을 color로 설정하면 단색으로 된 배경 위에 어트리뷰션 뷰가 나타납니다 옆에 예시가 보이시죠 material로 설정하면 배경색 위에 어트리뷰션 뷰가 보입니다 이 설정에서는 콘텐츠에 대해 백그라운드 블러 처리가 됩니다 예시를 보면 Safari의 랜딩 페이지가 배경으로 뜹니다 올바른 배경 스타일을 설정함으로써 어트리뷰션 뷰의 콘텐츠가 눈에 더 잘 들어옵니다
다음은 'Shared with You'의 Contextual Menus를 앱의 콘텐츠에 적용하고 이름을 정하는 법을 알려 드리죠 앱의 콘텐츠에 있는 기존 contextual menu는 어트리뷰션 뷰의 메뉴에서 추가할 수 있습니다 이 늘어난 메뉴는 contextual menu와 비슷한 위치나 끝에 위치해야 합니다
'제거' contextual menu의 제목도 지정할 수 있습니다 문자열에는 반드시 올바른 위치에 '제거'라는 단어가 놓여야 합니다 이번 예시는 Safari에서 콘텐츠의 contextual menu 끝에 있는 '제거' 메뉴를 '링크 제거'라고 설정했습니다
예시를 통해서 어떻게 하는지 보여 드리겠습니다 우선, 어트리뷰션 뷰의 인스턴스를 생성하고 highlight 프로퍼티를 설정합니다 '제거' context menu에서 menuTitleForHideAction을 통해 사용자 지정 제목을 설정합니다 콘텐츠의 context menu를 설정할 때 supplementalMenu 프로퍼티를 통해 어트리뷰션 뷰의 메뉴를 엽니다
그다음 콘텐츠의 context menu에 그걸 추가합니다 이런 간단한 단계를 통해서 context menu를 추가해서 콘텐츠에 맞는 context menu를 어트리뷰션 뷰에서 사용할 수 있습니다
지금까지 앱의 'Shared with You' 기능에 대해 알아봤습니다 'Shared with You' 적용 방법을 간단히 세 단계로 요약해 보죠 유니버설 링크를 적용한 다음 새로운 'Shared with You' 기능을 Xcode에 추가하고 'Shared with You' 프레임워크를 불러와 사용합니다 Messages에서 'Shared with You' 기능을 통해 여러분의 콘텐츠를 공유해 주길 기다리고 있겠습니다 시간 내서 시청해 주셔서 감사합니다

// Enumerate Shared with You shelf

class SharedWithYouViewController: UIViewController, SWHighlightCenterDelegate {
    let highlightCenter = SWHighlightCenter()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        highlightCenter.delegate = self
    }
    
    func highlightCenterHighlightsDidChange(_ highlightCenter: SWHighlightCenter) {
        for highlight in highlightCenter.highlights {
            let highlightURL = highlight.url
            // Generate a rich preview for the Highlight
        }
    }
}

13:42 - Setting appearance of Attribution View

// Setting appearance of Attribution View

let attributionView = SWAttributionView()
attributionView.highlight = self.highlightCenter.highlights[index]
attributionView.preferredMaxLayoutWidth = maximumWidthForView

14:36 - Horizontal Alignment for Attribution View

// Horizontal Alignment for Attribution View

let attributionView = SWAttributionView()
attributionView.highlight = self.highlightCenter.highlights[index]
attributionView.preferredMaxLayoutWidth = maximumWidthForView
attributionView.horizontalAlignment = .leading

15:19 - Display Context for Attribution View

// Display Context for Attribution View

let attributionView = SWAttributionView()
attributionView.highlight = self.highlightCenter.highlights[index]
attributionView.preferredMaxLayoutWidth = maximumWidthForView
attributionView.horizontalAlignment = .center
attributionView.displayContext = .summary

17:12 - Add Shared with You Content Menu to your app’s content

// Add Shared with You Content Menu to your app’s content

let attributionView = SWAttributionView()
attributionView.highlight = self.highlightCenter.highlights[index]
attributionView.menuTitleForHideAction = "Remove Item"

let contextMenuConfig = UIContextMenuConfiguration(identifier: nil,previewProvider: nil) { [weak self] _ in
        let additionalMenu = attributionView.supplementalMenu
        // Append additionalMenu items to your content’s menu items
}

찾고 계신 콘텐츠가 있나요? 위에 주제를 입력하고 원하는 내용을 바로 검색해 보세요.

쿼리를 제출하는 중에 오류가 발생했습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.

리소스

관련 비디오

WWDC22

WWDC20