공간 컴퓨팅을 위한 Quick Look 살펴보기

공간 컴퓨팅을 위한 Quick Look 살펴보기

visionOS에서 Quick Look을 사용하여 3D 콘텐츠, 공간 이미지 및 비디오 등에 효과적인 프리뷰를 추가하는 방법을 알아보세요. 시스템에서 이러한 경험을 제공하는 다양한 방식과, 앱이나 웹 사이트에서 Quick Look 콘텐츠를 드래그 앤드 드롭하여 해당 콘텐츠가 담긴 별도의 윈도우를 생성하는 방법을 알려 드립니다. 또한 앱에서 바로 Quick Look을 표시하는 방법도 살펴봅니다.

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

WWDC23
- 향상된 RoomPlan 살펴보기
- Quick Look 공간형 경험을 위한 3D 모델 만들기
WWDC20
- Shop online with AR Quick Look
다운로드

♪ 감미로운 인스트루멘탈 힙합 ♪ ♪ '공간 컴퓨팅을 위한 Quick Look 살펴보기' 세션을 시작합니다 저는 유세프입니다 AR Quick Look 팀 엔지니어죠 오늘 알려 드릴 것은 xrOS에서 Quick Look의 모든 기능과 이를 사용하여 플랫폼 내 앱과 웹 사이트에 새로운 경험을 제공하는 법입니다 시작하기 전에 Quick Look이 뭔지부터 알아보죠 Quick Look은 iOS, macOS, xrOS에서 쉽게 파일을 프리뷰 및 편집하는 시스템 프레임워크입니다 Quick Look을 통해 동영상 자르기나 PDF 및 이미지 마크업 등 유용한 편집 기능을 바로 사용할 수 있죠 또한 파일의 안전한 액세스를 보장하여 신뢰할 수 없는 파일을 앱에서 열게 될 염려가 없습니다 Quick Look은 Apple 플랫폼 내 여러 곳에서 나타납니다 iOS에서는 메시지 스레드에서 첨부 파일을 열 때마다 표시되죠 macOS의 경우 Finder나 데스크톱에서 파일을 선택하고 스페이스 바를 누를 때마다 Quick Look으로 들어갑니다 xrOS의 Quick Look은 파일로 저장된 콘텐츠용 시스템 뷰어인데 iOS 및 macOS와 마찬가지로 xrOS 앱도 Quick Look을 활용해 다양한 기능의 파일을 쉽게 보고 편집할 수 있습니다 한번 살펴봅시다 저는 최근에 아파트를 리모델링하면서 앱을 사용하여 프로젝트 진행 상황을 확인하고 팀원들과 협업하고 있습니다 함께 일하는 인테리어 디자이너가 집 관련 아이디어가 담긴 폴더를 제게 보냈는데요 그 폴더를 열어서 무슨 내용인지 보겠습니다 디자이너가 구상한 거실의 USDZ 모델 같네요 한번 열어 보죠 파일을 핀치 및 드래그하여 앱 외부에 드롭합니다
USDZ 파일을 드롭하면 바로 그 자리에 3D Quick Look 프리뷰가 나타나죠 곧바로 파일과 상호 작용이 가능합니다 핀치 및 드래그 제스처로 모델을 회전하면 멋진 벽돌 벽면을 더 잘 볼 수 있죠 거실을 자세히 보려면 줌 제스처로 확대하면 됩니다 디자이너가 집 주변의 동네 사진도 보내 준 것 같군요 마지막으로 집에 계획 중인 내용을 나열한 문서도 있습니다 대부분 괜찮지만 마지막 항목은 별로 마음에 안 드네요 나중에 다시 볼 수 있게 메모를 남겨 두죠 윈도우 상단의 메뉴를 열고 마크업을 선택하면 마크업 팔레트가 나타납니다 다시 볼 항목에 빠르게 동그라미를 치겠습니다
앱에서 파일을 드래그하여 앱 외부에서 프리뷰했는데요 이런 방식으로 여러 파일을 소스 앱과 함께 볼 수 있습니다 Quick Look에 파일을 표시하는 이러한 새 방식을 윈도우형 Quick Look이라고 합니다 이번 세션에서는 이러한 표현 방식을 자세히 살펴보고 앱과 웹 사이트에 적용하는 방법을 알아보겠습니다 그런 다음 Quick Look 프리뷰를 앱에서 바로 표시하는 방법을 알아보죠 우선 윈도우형 Quick Look을 자세히 살펴보겠습니다 윈도우형 Quick Look을 쓰면 앱 외부에서 Quick Look 프리뷰를 표시할 수 있습니다 앱과 함께 파일 콘텐츠를 봐야 하는 비차단형 경험에 완벽한 기능이죠 윈도우형 Quick Look 프리뷰는 별도의 앱에서 호스팅되므로 앱을 닫아도 프리뷰가 유지됩니다 또한 윈도우형 Quick Look은 USDZ 및 Reality File의 3D 모델에 훨씬 풍부한 시각적 경험을 제공합니다 앱과 상관없이 3D 콘텐츠 크기를 조정하고 배치할 수 있죠 또한 3D 모델의 크기를 조정하면 환경이 흐려지고 다른 씬이 모두 숨겨져 3D 콘텐츠에만 집중할 수 있습니다 Quick Look 윈도우에 나타나는 특정 파일 유형은 SharePlay 경험을 지원하므로 FaceTime에서 파일을 공유하고 볼 수 있습니다 SharePlay로 3D 콘텐츠를 공유하면 Quick Look이 3D 모델의 방향과 크기 애니메이션을 동기화합니다 SharePlay로 이미지를 공유할 때는 해당 이미지에 다른 사람과 함께 마크업 할 수 있습니다 Quick Look으로 파일을 SharePlay 하면 쉽고 간단하게 여러 사람과 공동 작업을 할 수 있죠 앱과 웹 사이트 모두 Quick Look 윈도우에 콘텐츠를 표시할 수 있으며 이를 통해 수많은 이점을 활용할 수 있습니다 우선 윈도우형 Quick Look이 앱에서 어떻게 나타나는지 살펴보죠 앱은 URL이 포함된 드래그 소스를 제공하여 Quick Look 윈도우에 파일을 표시할 수 있습니다 드래그 앤드 드롭 상호 작용 중에 드롭 대상이 앱 외부에 있는 경우 시스템이 주어진 URL을 복사하여 Quick Look 윈도우에 표시합니다 제공한 URL에서 가리키는 파일이 iCloud 등 원격 대상에 호스팅된 경우 시스템이 이를 먼저 다운로드하죠 주의할 점이 있습니다 제공한 파일의 복사본이 표시되므로 표시된 파일에 적용한 이미지 마크업 등의 편집 내용은 제공한 URL에 다시 기록되지 않습니다 Xcode로 이동해서 실제로 적용해 보죠
드래그 기능을 앱에 추가하기 전에 앱을 간단히 설명해 드리죠 앱에서 프로젝트의 진행 상황을 확인하고 팀원들이 공유한 파일 목록을 볼 수 있습니다 여기 FileView를 표시하는 목록 뷰가 있네요 각 파일을 드래그할 수 있으려면 각 FileView를 드래그 소스로 전환해야 합니다 따라서 onDarg 수정자를 FileView에 추가하겠습니다 onDrag 수정자는 NSItemProvider를 기대하므로 해당 FileView에 나타나는 파일의 URL을 포함하는 item provider를 반환하겠습니다
시뮬레이터에서 앱을 빌드하고 실행했으니 이제 파일 뷰에서 드래그한 파일을 새 Quick Look 윈도우에 표시할 수 있습니다 또한 앱을 닫아도 해당 파일의 프리뷰가 계속 나타나죠 코드 몇 줄만으로 앱에서 드래그 앤드 드롭을 활성화하고 별도의 윈도우에서 콘텐츠를 볼 수 있게 하여 앱을 자유롭게 사용할 수 있게 됐습니다 이번에는 웹 사이트에 이 기능을 써 보겠습니다 iOS 12부터 iPhone 및 iPad의 웹 사이트에서 AR Quick Look의 3D 콘텐츠를 연결하고 볼 수 있습니다 AR 속성으로 링크를 마크업해서요 xrOS에서 마크업된 3D 콘텐츠 링크를 열면 Safari가 3D 콘텐츠를 새 Quick Look 윈도우에 나타냅니다 이미 iOS 및 iPadOS에서 AR 콘텐츠 연결을 지원하는 웹 사이트는 추가 작업 없이 이 동작을 xrOS에 그대로 적용할 수 있죠 또한 xrOS는 콘텐츠 스케일링 비활성화 등 사용자 지정 옵션도 유지합니다 사용자 지정 옵션에 대한 자세한 정보는 '개선된 AR Quick Look' WWDC19 세션을 참조하세요 Safari에서 3D 콘텐츠를 나타내도록 웹 사이트를 설정하지 않았다면 이렇게 링크를 마크업만 하면 되죠 링크나 앵커 요소에 rel="ar"을 추가하면 Safari가 탭으로 이동하지 않습니다 대신 Quick Look 윈도우에서 웹 사이트와 나란히 3D 파일이 나타나죠 Safari에서 확인해 보겠습니다 AR Quick Look 갤러리 페이지를 Safari로 열었습니다 이 페이지에 연결된 3D 모델이 많으니 몇 가지를 열어 보죠 주전자의 링크를 탭하면 해당 3D 모델을 다운로드해 Quick Look 윈도우에 표시합니다 다운로드가 끝나면 모델이 나타나죠 머그잔의 링크를 탭하면 주전자와 Safari 근처에 머그잔이 나타납니다 이 커머스 사이트에 아주 유용하죠 제품을 보고 공유 공간에 배치하며 내가 원하는 상품인지 확인할 수 있으니까요 Quick Look 윈도우에 파일을 표시해 앱 외부에서 프리뷰하는 법을 알아봤습니다 앱 내부에서 바로 파일을 프리뷰해야 하는 사용 예도 있는데요 앱 내 Quick Look 콘텐츠 표시는 간단합니다 SwiftUI에서 quickLookPreview 함수에 몇 가지 URL을 전달하면 되죠 quickLookPreview로 표시하면 프리뷰가 뷰의 콘텐츠 위에 시트로 표시됩니다 표시된 프리뷰에 더 많은 사용자 지정 옵션을 원하는 경우 QLPreviewController를 대신 사용하면 되죠 iOS 앱을 xrOS로 가져오는 경우 기존에 쓰던 quickLookPreview나 QLPreviewController API가 그대로 이전됩니다 시뮬레이터로 이동하여 Project Tracker 앱에서 이 기능을 어떻게 활용할지 알아봅시다 집주인에게 보내 승인을 받기 전에 팀에서 만든 새 디자인을 검토하는 뷰가 있습니다 현재 파일 목록이 보이지만 어떤 파일도 프리뷰는 안 되는데요 Xcode에서 이 문제를 해결해 봅시다 현재 뷰는 다음과 같습니다 앱에서 바로 파일을 프리뷰하기 위해 우선 QuickLook을 가져오겠습니다 이제 SwiftUI quickLookPreview 함수를 추가해 프리뷰하려는 파일과 처음 선택하려는 특정 파일을 모두 전달하겠습니다
이제 실행하여 결과를 보겠습니다
앱으로 돌아가서 뷰를 선택하면 프리뷰를 포함하는 시트가 앱에 바로 나타납니다 도구 막대의 내비게이션 컨트롤로 파일을 둘러보고 집주인에게 보내기 전에 문제가 없는지 확인할 수 있죠 앱에서 바로 파일 프리뷰를 표시하려면 quickLookPreview 함수에 몇몇 URL을 전달하기만 하면 됩니다 플랫폼에서 Quick Look의 두 가지 유형을 알아봤으니 이제 프리뷰를 지원하는 파일 유형을 알아보겠습니다 Quick Look은 일반적인 파일 유형을 지원합니다 이미지와 비디오 PDF, USDZ 파일 등이죠 Quick Look에 표시되는 공간 이미지 및 비디오는 사진 앱에서 보는 것과 똑같이 근사합니다 이렇게 xrOS의 Quick Look을 간략히 살펴봤습니다 오늘 다룬 내용을 요약해 보죠 Quick Look이 앱에 제공하는 풍부한 프리뷰 및 편집 기능을 알아봤습니다 윈도우형 Quick Look은 앱에서 Quick Look으로 콘텐츠를 프리뷰하는 새로운 방법이죠 윈도우형 Quick Look의 기능도 다뤘는데요 앱과 나란히 콘텐츠를 볼 수 있는 다중 프리뷰 기능이나 입체적이고 몰입감 있는 3D 콘텐츠 뷰 SharePlay 지원 등이죠 또한 드래그 앤드 드롭을 지원하여 앱의 워크플로를 간소화하고 Quick Look 윈도우를 활용하는 방법과 웹 사이트에서 Quick Look 윈도우를 활용해 3D 콘텐츠를 Safari와 나란히 표시하는 방법도 알아봤습니다 앱이 SwiftUI의 자체 씬에서 Quick Look 콘텐츠를 표시하는 게 얼마나 쉬운지도 알아봤죠 이미 Quick Look을 사용하는 앱을 가져오는 경우 작업을 거의 거치지 않고 훌륭한 Quick Look 경험을 플랫폼에 구현할 수 있습니다 마찬가지로 이미 AR 콘텐츠와 연결된 웹 사이트도 해당 동작을 그대로 이어받게 되죠 Quick Look은 앱에 간단하고 강력하며 안전한 파일 뷰 경험을 선사합니다 여러분이 xrOS에서 Quick Look으로 빌드할 작품이 기대됩니다 ♪

5:15 - drag support for quick look from apps

import Foundation
import SwiftUI
import UniformTypeIdentifiers

struct FileList: View {
    
    @State var files: [File]
    @State var previewedURL: URL? = nil
    @State var selectedFile: File? {
        didSet {
            self.previewedURL = selectedFile?.url
        }
    }
    
    var body: some View {
        List(files, selection: $selectedFile) { file in
            Button(file.name) {
                selectedFile = file
            }
            .onDrag {
                return NSItemProvider(contentsOf: file.url) ?? NSItemProvider()
            }
        }
    }
}

8:45 - swiftUI quick look preview function

import Foundation import SwiftUI
struct FileList: View {
  
@State var files: [File]
@State var previewedURL: URL? = nil
@State var selectedFile: File? {
	didSet {
		self.previewedURL = selectedFile?.url
		}
  }
  
var body: some View {
	List(files, selection: $selectedFile) { file in
			Button(file.name) {
				selectedFile = file
			}
		}
		.quickLookPreview($previewedURL, in: files.map { $0.url })
  	}
}

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

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

리소스

관련 비디오

WWDC23

WWDC20