SharePlay로 파일 공유하기

♪ ♪

안녕하세요, 제 이름은 Adam입니다 SharePlay 팀의 엔지니어죠 오늘은 많은 분이 물어봤던 새로운 기능에 관해 얘기할게요 세션의 제목에서 추측하셨겠지만 SharePlay로 파일을 공유하는 법을 다룰 예정이죠 먼저 첨부물 전송의 의미를 얘기할게요 공유하고 싶은 파일이나 용량이 큰 데이터를 '첨부물'이라고 지칭하도록 하죠 그리고 GroupActivities의 새 API GroupSessionJournal을 다루죠 그다음에 후반 참여자를 얘기하고 끝으로 DrawTogether 앱에서 GroupSessionJournal을 채택하는 게 얼마나 쉬운지 함께 살펴보도록 해요 먼저 첨부물 전송의 의미부터 살펴볼게요 그림 그리기 앱을 통해 얘기하죠 두 기기의 그림이 동기화되도록 GroupSessionMessenger를 사용하고 있어요 만약 캔버스에 이미지를 끌어놓으면 어떻게 될까요? GroupSessionMessenger의 크기 제한으로 인해 이런 기능을 SharePlay로 이용할 수 없었죠 지금은 기능을 개선하여 메시지를 빠르게 전송했던 Apple의 인프라를 이용하여 첨부물도 전송할 수 있도록 했어요 이제는 캔버스에 귀여운 개 사진을 놓으면 클라우드 인프라를 통해 어느 때보다 빨리 전송되죠 다양한 Apple 기술을 활용하여 전송 데이터를 최소화하고 유휴 대기 시간을 최소화하여 최대한 빠른 경험을 선사하며 모든 걸 시스템 단계에서 처리하죠 그게 전부가 아니죠 SharePlay는 사용자 개인정보를 고려하여 만들었기 때문에 여러분이 전송하는 데이터가 기기 사이에서 암호화되도록 해요 Apple은 전송되는 데이터의 내용을 모르죠 귀여운 개 모치의 사진뿐 아니라 어떤 것도 가능하죠 PDF 같은 파일도 문제없죠 음성 녹음과 주석은 어떨까요? 협업 중인 모든 사용자 콘텐츠는 새로운 API의 적용으로 어느 때보다 빠르게 전송되죠 API는 어떤 모습일까요? 바로 확인해 보죠 익숙해져야 할 주요 오브젝트는 GroupSessionJournal인데 iOS 17에 새로 추가된 오브젝트예요 GroupSessionMessenger가 그런 것처럼 GroupSession을 통해 초기화돼요 하지만 이 오브젝트의 목적을 이해하는 게 중요하죠 GroupSession의 모든 사람에게 일관되게 유지되는 오브젝트예요 이는 Journal에 수행하는 행동이 모두에게 영향을 주고 Journal의 프로퍼티가 모두에게 비슷하게 동기화된다는 거죠 사례를 통해 알아볼게요 Journal을 설정했으면 첨부물 AsyncSequence로 첨부물 변화를 관찰한 다음 add 함수로 커스텀 첨부물을 업로드할 수 있어요 타입을 Transferable 프로토콜에 맞추기만 하면 되죠 이제 한 기기에서 add를 호출하면 그쪽의 첨부물 AsyncSequence가 새로운 첨부물을 주지만 GroupSession의 모든 사람이 같은 이벤트가 벌어지는 걸 보고 여러분이 업로드하는 첨부물을 로딩할 수 있게 되죠 같은 원리로 여러분이 remove 함수로 첨부물을 삭제하면 모든 사람 첨부물의 AsyncSequence가 해당 이벤트를 업데이트해요 그게 전부예요 새로운 API로 쉽게 첨부물을 업로드하고 받을 수 있죠 이걸 DrawTogether 앱에 적용하기 전에 새로운 API를 활용할 때 고려해야 하는 점을 살펴볼게요 일단 첨부물의 크기가 무한으로 설정되지 않았고 100MB로 제한되죠 이는 사용자 경험을 세심하게 고려했기 때문이죠 공유 경험이 빨라야 하는데 기기의 업로드, 다운로드 속도에 한계가 있어요 따라서 첨부물을 보낼 때 크기를 최소화해야 하죠 만약 그림 그리기 앱을 사용한다면 캔버스에 올리는 사진들의 용량을 100MB 이하로 제한해야 해요 사용자가 만든 콘텐츠와 관련된 데이터는 상관없지만 영화처럼 사용자가 만들지 않은 대용량 첨부물은 사용자의 기기가 아닌 여러분의 서버로 배포해야 하죠 수명 주기도 있어요 Journal에 올린 것들이 남아 있으려면 GroupSession에 누군가 연결돼 있어야 하죠 이는 Journal에 첨부물을 추가한 사람이 GroupSession의 연결을 끊어도 첨부물이 남아 있다는 거예요 대신 모두 GroupSession을 나가면 첨부물도 함께 사라지죠 GroupSessionMessenger로 통합하는 것에 익숙하다면 이 주제를 기억할 거예요 후반 참여자죠 새로운 사람이 GroupSession에 합류하면 여러분의 앱이 현재 상태를 새로운 사람에게 재전송하여 그룹의 다른 사람과 같은 정보를 공유하게 해요 앱에 GroupSessionMessenger를 채택하여 관리하며 각 기기가 새로 합류한 사람에게 메시지를 전달하기 때문에 비용이 많이 들 수 있죠 다음 예를 살펴볼게요 GroupSession에 2명이 있다고 가정하죠 Adam과 Brian이 있어요 Clara는 아직 합류하지 않았죠 Clara가 합류하기 전에 Adam과 Brian이 그림을 그려요 Adam이 개뼈다귀를 그리면 Brian 쪽에도 업데이트되죠 이제 Clara가 합류하는데 이 시점에 캔버스가 비어 있어요 Adam과 Brian의 활동을 Clara 기기에서 받아야 Clara도 다른 사람과 함께할 수 있죠 이 시점에 Adam과 Brian 모두 Clara에게 현재 상태라고 생각하는 걸 전송해야 Clara의 기기가 수렴하여 같은 지점에 있을 수 있어요 이제 그림 대신 첨부물을 추가하면 Adam과 Brian이 전송하는 메시지가 꽤 커질 수 있죠 상상할 수 있는 것처럼 문제가 될 수 있습니다 각자 100MB를 다시 업로드하여 하나의 기기에 이미지를 전달하죠 이제 후반 참여자를 GroupSessionJournal이 관리해요 후반 참여자가 Journal에 업로드된 첨부물을 받는 동안 다시 업로드하는 사람이 없어서 더 빠르고 적은 대역폭을 사용하는 경험을 선사하죠 많은 정보를 알려드렸는데 재미있는 부분으로 넘어가서 마법을 확인해 볼게요 GroupSessionJournal을 채택하는 방법을 DrawTogether 앱으로 알아보죠 우리가 수정할 DrawTogether 앱이에요 보는 것처럼 아래쪽에 버튼이 있어서 SharePlay 세션을 시작하고 휴지통 버튼으로 세션을 리셋하죠 아래쪽에 버튼을 추가해서 캔버스에 올리는 사진을 선택할 수 있으면 좋을 것 같군요 SwiftUI로 쉽게 적용할 수 있으니 바로 시작할게요 우리가 수정해야 하는 4개의 주요 요소가 있죠 첫 번째는 Canvas 모델이에요 전체 앱의 주요 모델 오브젝트죠 로컬 및 원격 참가자가 그리는 모든 선을 전부 추적하고 GroupActivities의 인터페이스예요 그리고 3개의 뷰가 있는데 ContentView는 다른 2개의 뷰의 모든 서브뷰를 가지고 있고 ControlBar 뷰는 앞에서 봤던 아래쪽의 버튼을 관리하며 CanvasView는 모델의 모든 오브젝트와 선을 그리며 곧 이미지도 추가되죠 모델부터 시작하죠 모델이 두 가지를 추적해야 해요 첫 번째는 Journal에서 받는 모든 이미지를 새로운 구조체 CanvasImage로 추적할 거죠 두 번째는 우리가 배치하려고 하는 로컬에서 선택한 이미지와 모든 이미지예요 이제 Canvas를 통해 GroupSessionJournal을 만들고 그곳의 모든 첨부물을 관리하는 건 configureGroupSession 함수에서 처리할 거죠 그리고 함수를 만들어서 로컬 선택 이미지를 Journal에 추가하여 모든 뷰에서 호출하게 해요 UI가 아닌 요소들을 완성했으니 이제 뷰를 수정해 보죠 먼저 사진을 선택하는 버튼부터 시작할게요 앞 내용을 기억하면 ControlBar에 이 버튼을 추가하려고 했죠 PhotosUI를 임포트하고 새 버튼을 PhotosPicker 뷰로 추가할게요 그리고 selectedImageData로 모델에 바로 넣는 거죠 PhotoPlacementView라는 간단한 뷰를 만들어서 선택된 사진을 시각화하고 캔버스 어느 지점에 놓을지 움직이게 해 줘요 이제 그 뷰를 ContentView에 추가해 보죠 진행 상황을 확인해 볼게요 세션을 시작하면 사진 버튼이 나타나죠 사진을 선택하면, 짠! 움직일 수 있는 이미지가 나오죠 마지막 단계는 Canvas 뷰를 수정하여 모델의 모든 이미지를 시각화하는 거예요 이제 시도해 보면 이미지의 최종 위치를 선택할 때 이미지가 양쪽에 모두 나타나죠 휴 이제 작업이 끝났고 멋진 경험을 만들었죠 시청해 주셔서 감사합니다 이제 이 세션을 시청했으니 GroupActivities로 여러분이 구축할 수 있는 멋진 경험을 확인해 보세요 아직 GroupActivities를 채택하지 않았다면 'SharePlay를 앱에 추가하기'를 먼저 시청하여 SharePlay가 앱에 어떤 의미인지 살펴보세요 DrawTogether 앱으로 어떻게 시작했는지 궁금하거나 GroupActivities를 채택하는 예시를 보고 싶으면 'GroupActivities로 커스텀 경험 구축하기'를 확인해 보세요 다시 한번 감사드립니다 여러분의 작품을 기대하겠습니다 ♪ ♪