VisionKit의 새로운 기능

♪ ♪

안녕하세요, 저는 애덤입니다 VisionKit 엔지니어죠 오늘 여러분과 함께 올해를 맞아 저희 팀이 작업해 온 새 기능과 API에 대해 이야기하게 되어 기쁩니다 기억을 되살려 보면, 작년에 VisionKit에 라이브 텍스트 지원이 추가되어 앱의 이미지에 대해 텍스트 선택, 번역 QR 지원 등과 같은 상호 작용이 가능해졌습니다 또한 DataScannerViewController도 도입했습니다 데이터 스캐너는 실시간 카메라 피드를 사용하여 간단하고 완전한 기능을 갖춘 방법을 제공하죠 그래서 특정 텍스트 유형과 기계 판독 가능 코드의 다양한 변형을 캡처할 수 있습니다 이런 API에 대한 정보는 아래의 WWDC22 세션에서 찾아보세요 개발자들의 반응은 놀라웠고 올해에는 기쁘게도 VisionKit에 다음과 같은 지원을 추가했습니다 바로 '피사체 분리하기'와 '시각 자료 찾아보기'죠 텍스트 선택을 위한 새로운 라이브 텍스트 API와 Catalyst에 대한 확장된 플랫폼 지원 네이티브 macOS 앱을 위한 콘텍스트 메뉴 통합도 있습니다

이제 피사체 분리하기부터 시작해 보죠 이미지의 피사체를 그냥 길게 누르면 주변과 피사체가 분리되죠 아름다운 발광 애니메이션 효과로 강조 표시된 다음 몇 가지 옵션이 표시됩니다 공유하거나 시각 자료 찾아보기를 호출할 수 있죠 iOS 17의 새로운 기능으로 분리된 피사체를 사용하여 반짝이거나 부풀어 오르는 등 재미있는 효과로 스티커를 만들어 친구 및 가족과 공유할 수 있습니다 좋은 소식은 피사체 분리하기를 매우간단히 통합할 수 있다는 거죠 사실, 벌써 하셨을 수도 있습니다 다음은 작년 영상의 코드 조각인데요 이미지를 분석하고 상호 작용에 설정한 것과 같은 겁니다 하지만 이제는 코드 변경 없이 피사체 분리하기를 지원합니다 더 자세히 살펴보죠 분석기 구성에 특별한 것은 넣지 않는다는 점에 유의하세요 이는 전력과 성능을 보존하기 위해 피사체 분리하기 분석은 상호 작용에서 별도로 처리하기 때문입니다 초기 분석이 완료된 후에요 iOS의 경우, 이 과정은 화면에 몇 초 동안 표시된 후 이뤄지고 macOS의 경우 메뉴가 처음 표시될 때 이뤄집니다 즉, 여러분은 사용자가 사진 여러 장을 쓸어 넘기는 경우는 다룰 필요가 없습니다 상호 작용이 이를 대신 처리하죠 여러분은 적절한 상호 작용 유형을 설정하기만 하면 이 경우는 자동인데요 나머지는 상호 작용이 처리합니다 피사체 분리하기에 맞는 상호 작용 유형을 조금 더 자세히 살펴보겠습니다 .automatic은 기본 환경을 제공합니다 텍스트 상호 작용과 피사체 분리하기 등이 결합돼 있죠 텍스트 선택이나 데이터 감지기가 아닌 피사체 분리하기만 원한다면 .imageSegmentation으로 상호 작용 유형을 설정하거나 다른 유형과 결합할 수 있습니다 마지막으로, 피사체 분리하기가 앱에 적합하지 않지만 iOS 16의 이전 자동 동작을 원하다면 문제없습니다 새 유형인 .automaticTextOnly를 쓰면 되죠 이 유형은 텍스트 선택 및 데이터 감지기는 제공하지만 피사체 분리하기는 제공하지 않습니다 피사체 분리하기를 상세히 다룬 세션이 준비돼 있으니 VisionKit 및 Vision 모두에서 이 놀라운 신기술을 쓰는 고급 주제를 배울 수 있습니다 올해 VisionKit는 시각 자료 찾아보기도 지원합니다 시각 자료 찾아보기로 사용자는 쉽게 식별하고 배울 수 있습니다 반려동물, 자연, 랜드마크 예술 및 미디어에 대해서요 iOS 17에서는 추가 도메인을 지원할 예정입니다 음식, 제품, 표지판 및 기호를 포함해서요 드디어 세탁 라벨의 기호가 무슨 뜻인지 쉽게 찾을 수 있죠 저한테는 아주 잘된 일이랍니다 시각 자료 찾아보기가 가능한지는 언어에 따라 다르며 이러한 언어에서 사용할 수 있습니다 이제 간단히 내부를 살펴보고 시각 자료 찾아보기의 작동 방식을 알아보겠습니다 과정은 두 부분으로 이뤄집니다 첫 과정은 분석 시 전적으로 기기에서 이루어지며 분석기 구성에 .visualLookUp 유형이 있으면 시각 자료 찾아보기는 결과의 바운딩 박스와 함께 결과의 최상위 영역을 찾습니다 예를 들면 고양이, 책 또는 식물 이렇게요 이 단계에서는 특징도 추출합니다 사용자가 대상체 찾아보기를 요청하면 특징 추출을 통해 얻은 영역과 이미지 임베딩이 추가 과정을 위해 서버로 전송됩니다 시각 자료 찾아보기가 어떻게 작동하는지 알았으니 사용법을 알아보고 앱에 추가할 때 취해야 할 조치를 빠르게 살펴보겠습니다 시각 자료 찾아보기는 두 가지 방법으로 호출할 수 있죠 첫 번째는 피사체 분리하기와 함께 사용하는 것으로 현재 분리된 피사체가 하나이며 시각 자료 찾아보기 결과와 관련된 단 하나라면 메뉴에 찾아보기 옵션이 뜨며 이를 선택하면 전체 찾아보기 결과가 표시됩니다 VisionKit는 이 상호 작용을 자동으로 처리하므로 이를 채택하게 되면 분석기 구성에 .visualLookUp을 추가하기만 하면 됩니다 둘째, 모달 상호 작용이 가능해져서 각 시각 자료 찾아보기 결과 위에 배지가 배치됩니다 배지가 뷰포트를 벗어나면 모서리로 이동하는 게 보이죠 사용자는 이러한 배지를 탭하여 찾아보기 결과를 표시할 수 있으며 이는 사진 앱이나 Quick Look에서 정보 버튼을 클릭하는 것과 동일한 상호 작용입니다 이 모드는 상호 작용에서 .visualLookUp을 preferredInteractionType으로 설정하여 호출됩니다 참고해 주세요, 이 유형은 다른 상호 작용 유형보다 우선합니다 예를 들어 텍스트 또는 데이터 감지기를 선택할 수 없죠 시각 자료 찾아보기 모드가 설정된 상태에서는요 이것은 일반적으로 버튼이나 이 모드에 들어가고 나오는 다른 맞춤형 방법과 함께 사용되죠 예를 들어 Quick Look은 정보 버튼을 사용하여 시각 자료 찾아보기 모드로 들어갑니다 내용을 바꿔서 새로운 API를 이야기해 보죠, 데이터 스캐너와 라이브 텍스트에 대한 겁니다 iOS 16에 도입된 DataScannerViewController는 OCR을 가장 쉽게 쓸 수 있도록 설계되었죠 실시간 카메라 뷰파인더를 써서요 iOS 17에서는 광학 흐름 추적과 통화 지원으로 향상되었습니다 광학 흐름 추적은 텍스트 추적을 향상할 수 있습니다 실시간 카메라 경험으로요 이것은 iOS 16에서의 모습입니다 highFrameRateTracking을 활성화한 상태에서 텍스트를 스캔하고 있죠 이것은 광학 흐름 추적을 사용할 때의 모습입니다 이전보다 훨씬 안정적이고 든든해 보이네요 광학 흐름 추적은 DataScannerViewController를 사용할 때 무료로 제공되지만 기계 판독 가능 코드가 아닌 텍스트를 인식할 때만 사용 가능합니다 특정 텍스트 콘텐츠 유형이 설정되지 않은텍스트를 스캔해야죠 마지막으로 높은 프레임률 추적이 활성화돼 있는지 확인하는데 편리하게도 기본값입니다

어떻게 구성하든 데이터 스캐너는 뛰어난 텍스트 추적 기능을 제공하지만 사용 예에서 이런 구성을 허용하는 경우 새로운 광학 흐름 추적을 통해 기능을 더욱 향상할 수 있습니다 다음으로, 데이터 스캐너의 새로운 옵션인데요 이것으로 사용자는 화폐 가치를 알아보고 상호 작용 할 수 있죠 활성화하는 방법은 매우 간단합니다 데이터 스캐너의 이니셜라이저에서 텍스트 인식을 지정할 때 텍스트 콘텐츠 유형을 통화로 설정하면 됩니다 이메일 주소나 전화번호와 같은 다른 콘텐츠 유형과 마찬가지로요 이제 간단한 예제로 이 새로운 유형을 더 자세히 살펴보죠 데이터 스캐너가 텍스트에서 통화를 인식할 때 여기에는 경계와 문자가 모두 포함되며 문자에는 통화 기호와 금액이 모두 포함됩니다 이것은 모든 값의 합계를 찾는 예제입니다 영수증과 같은 것에서요 먼저, 현재 로케일을 사용하여 통화 기호를 가져옵니다

recognizedItems 스트림에서 데이터 스캐너의 결과를 기다리며 인식된 각 항목을 반복해서 살펴보고 그 문자를 가져올 수 있습니다 만약 그 안에 제가 관심 있는 통화 기호가 포함되어 있다면 전체 값을 업데이트할 것입니다 이렇게 해서 모든 값의 합계를 알 수 있죠 이것은 간단한 예일 뿐이지만 매우 강력할 수 있습니다 여러분이 이 기능으로 무엇을 만들 수 있을지 기대됩니다 이제 라이브 텍스트의 개선 사항에 대해 말씀드리죠

먼저, 라이브 텍스트는 더 많은 지역에 제공되도록 지원 언어를 확장하여 태국어와 베트남어를 포함합니다 올해 라이브 텍스트는 문서 구조 감지 기능도 개선되었는데요 문서 구조 감지가 도대체 뭐죠? 예를 들어, iOS 16에서는 라이브 텍스트가 목록 감지를 지원하여 목록을 이해하는 앱에 목록을 쉽게 복사하고 붙여 넣을 수 있으며 메모와 같은 목록 서식은 유지됩니다 라이브 텍스트는 숫자나 글머리 기호 등 여러 목록 스타일을 처리하죠 이제 라이브 텍스트는 표에도 동일한 지원을 제공하므로 이미지에서 구조화된 표 데이터를 메모나 Numbers와 같은 앱으로 훨씬 더 쉽게 가져올 수 있습니다 이제 이 표를 선택하고 복사하여 Numbers에 붙여 넣을 수 있으며 구조는 유지됩니다 필요한 경우 셀을 자동으로 병합하는 방법을 확인하세요 이제 클릭 몇 번으로 이 정보를 그래프로 시각화할 수 있습니다 멋지죠 그게 다가 아닙니다 라이브 텍스트에 콘텍스트 인식 데이터 감지기도 추가했는데요 이 기능은 데이터 감지기와 시각적 관계를 사용하여 연락처를 추가합니다 이메일 주소에서 연락처를 추가할 때 주변 데이터 감지기의 추가 정보가 포함되어 이 모든 정보를 한 번에 쉽게 추가할 수 있습니다 명함이나 전단에서 연락처를 추가하는 것이 그 어느 때보다 쉬워졌죠 무료로 제공되는 이러한 훌륭한 기능 외에도 VisionKit에는 텍스트 전용 새로운 API도 있습니다 작년에는 전체 텍스트 내용을 얻으려면 이미지 분석의 transcript 프로퍼티에 액세스해야 했는데요 여러분의 피드백을 바탕으로 모두 액세스가 가능합니다 일반 텍스트 및 속성 텍스트 선택된 범위는 물론 선택한 텍스트에 쉽게 액세스할 수 있죠 또한 새로운 대리자 메서드가 있어 텍스트 선택이 변경될 때 적절하게 UI를 업데이트할 수 있습니다 이제 사용자가 선택한 내용에 맞게 기능을 쉽게 추가할 수 있습니다 예를 들면 메뉴를 만드는 API를 사용하여 현재 텍스트 선택에 따라 알림을 생성하는 메뉴 항목을 삽입합니다 이미지 분석 상호 작용을 하는 뷰 컨트롤러에서 시작하죠 먼저 선택한 텍스트를 잡고 비어 있지 않은지 확인합니다 그런 다음 선택 시 핸들러를 호출하는 명령을 만들고 이제 명령을 포함하는 메뉴 개체를 만듭니다 마지막으로 해당 메뉴를 공유 메뉴 옵션 뒤에 형제로 삽입합니다 이제 사용자 지정 메뉴가 복사 및 공유처럼 시스템 항목 옆에 생겼습니다 이어서 확장된 플랫폼 지원에 대해 이야기하겠습니다 올해에는 Mac이 제일 중요하죠 Catalyst 지원을 출시하여 iOS 앱의 라이브 텍스트를 Mac으로 쉽게 가져올 수 있게 됐습니다 네이티브 macOS API와 ImageAnalysisOverlayView를 처음 사용하신다면 기대해 주세요 몇 가지 구체적인 사항과 이를 채택하는 몇 가지 팁을 소개할 예정입니다 마지막으로, 메뉴를 위한 새로운 시스템을 소개할 텐데요 이 시스템은 VisionKit를 간단하고 매끄럽게 콘텍스트 메뉴에 통합할 수 있습니다 Catalyst 채택은 매우 간단합니다 간단히 재컴파일만 하면 되죠 이미지 분석 상호 작용이 Catalyst에서 작동하도록 하려면요 라이브 텍스트, 피사체 분리하기 시각 자료 찾아보기를 지원하지만 아쉽게도 QR 코드 지원은 불가능합니다 Catalyst 환경이든 VisionKit용 네이티브 macOS API에서든요 하지만 알려드리고 싶은 것은 공유 구현이 있는 경우라면 .machineReadableCodes를 Catalyst 분석기 구성에 남겨두면 완벽하게 안전하며 아무런 문제가 발생하지 않습니다 또한, QR 감지 지원은 Vision 프레임워크에서 사용 가능합니다 Mac에서 이 기능이 필요하다면요

이제 네이티브 macOS API를 알아보겠습니다 iOS와 마찬가지로 VisionKit를 채택할 때 알아야 할 두 가지 주요 클래스가 있습니다 ImageAnalyzer와 ImageAnalysisOverlayView입니다 먼저 쉬운 부분입니다 Mac용 이미지 분석기 및 분석 과정은 iOS와 동일합니다 기계 판독 가능 코드가 없다는 점을 제외하고는요 앞서 말씀드렸듯이 모든 것이 동일하며 동일한 방식으로 사용됩니다 iOS ImageAnalysisInteraction과 macOS ImageAnalysisOverlayView의 주요 차이점은 상호 작용이 응용 프로그램에 추가되는 방식입니다 iOS의 경우 ImageAnalysisInteraction은 UIInteraction으로서 뷰에 추가됩니다 이 뷰는 앱 뷰 계층 구조에 이미 존재하죠 하지만 Mac에는 UIInteraction이 존재하지 않죠 그렇다면 어떻게 해야 할까요? 이 경우 이름에서 알 수 있듯이 ImageAnalysisOverlayView는 NSView의 하위 클래스이며 오버레이 뷰를 추가하기만 하면 됩니다 이미지 콘텐츠 위에 있는 뷰 계층 구조에요 예를 들어 여기에 추가할 수 있죠 아니면 여기에도요 하지만 가장 간단한 방법은 콘텐츠 뷰의 하위 뷰로 추가하는 것입니다 어떤 방법을 선택하든 상관없지만 하위 뷰로 추가하는 것이 일반적으로 더 간단하고 관리하기 쉽습니다 오버레이 뷰의 위치를 조정할 필요가 없죠 콘텐츠 뷰 위치가 변경되더라도요 이제 앱에 어떻게, 어디에 추가하는지 알았으니 Content rect 얘기를 해 보죠 오버레이 뷰는 콘텐츠를 호스팅하거나 렌더링하지 않아서 콘텐츠의 경계에 대한 위치를 정확히 알아야 합니다 이 경계는 Contents rect로 설명됩니다 원점이 왼쪽 상단에 있는 단위 좌표 공간에 위치하죠 세상에, 정말 할 말이 많네요 간단한 예제를 통해 이를 명확히 해 보죠 오버레이 뷰는 이미지 뷰 바로 위에 배치되므로 동일한 경계를 갖습니다 이 직사각형으로 경계를 표시하고 그에 맞는 Contents rect도 추가하겠습니다 콘텐츠와 경계가 일치하면 가장 쉬운데 여기서는 단순한 단위 직사각형이며 이것이 비율 맞춤입니다 이미지 뷰의 이 부분 아래에는 콘텐츠가 없으며 Contents rect에 반영되죠 이것은 비율 채우기로 이미지의 이 부분은 더 이상 사용자에게 표시되지 않습니다 여기서 contents rect가 어떻게 변경되는지 확인하세요 좋은 소식이 있습니다 iOS의 UIImageView와 마찬가지로 NSImageView를 사용하는 경우 overlayView에서 간단하게 trackingImageView 프로퍼티를 설정할 수 있고 이 모든 것을 자동으로 계산할 수 있습니다 NSImageView를 사용하지 않아도 걱정하지 마세요 대리자 메서드 contentsRect(for overlayView:)를 구현하여 Contents rect를 제공할 수 있습니다 overlayView는 레이아웃 중에 경계가 변경되면 이를 요청하는데 수동으로 업데이트를 요청할 수도 있습니다 setContentsRectNeedsUpdate를 overlayView에 호출해서요 이제 콘텍스트 메뉴로 넘어가 보겠습니다 모두 아시다시피 콘텍스트 메뉴는 Mac 경험에서 큰 비중을 차지하는데요 이제 VisionKit가 제공하는 기능을 쉽게 직접 메뉴에 넣을 수 있습니다 예를 들면, 라이브 텍스트 찾아보기, 피사체 분리하기 등이죠 여기서 '왜?'라는 의문이 들 수 있습니다 macOS 사진 앱을 살펴보죠 이 상징적인 도로 표지판의 텍스트를 우 클릭하면 VisionKit 텍스트 메뉴만 표시되고 텍스트 위에 있지 않으면 앱 메뉴가 제공되죠 텍스트 항목 없이요 이는 이상적이지 않습니다 이제 macOS Sonoma에서는 항목을 동일한 메뉴로 합칠 수 있으며 텍스트 및 이미지 기능을 모두 쉽게 사용할 수 있습니다 메뉴 이벤트가 시작된 위치에 관계없이요 이는 사용자에게 훨씬 더 나은 경험이며 구현도 간단합니다 이것을 앱에서 어떻게 할 수 있는지 알아보겠습니다 이제 새로운 대리자 메서드인 overlayView:updatedmenu:forevent :atpoint를 사용할 수 있죠 인수는 메뉴를 나오게 한 이벤트를 포함하고 overlayView의 포인트는 좌표 공간 안에 있으므로 필요한 모든 메뉴를 만들 수 있습니다 여기에서 표시하려는 메뉴를 반환하기만 하면 됩니다 기본 구현은 VisionKit 메뉴를 반환하지만 해당 메뉴에 여러분의 항목을 추가하거나 해당 메뉴에서 항목을 가져와 여러분의 메뉴에 추가할 수 있죠

VisionKit 메뉴 항목은 태그로 식별되며 이러한 태그를 포함하는 구조체가 있습니다 이미지와 피사체를 복사 및 공유하는 데 사용할 수 있는 여러 항목과 더불어 찾아보기에 사용할 수 있는 항목이 있죠 또한 특별한 항목도 있어서 권장 인덱스를 찾아 VisionKit 제공 메뉴에 항목을 추가하는 데 쓸 수 있죠 나중에 자세히 설명하겠습니다 다음은 이것을 쓰는 방법에 대한 몇 가지 예입니다 기존 메뉴가 있는데요 저는 copySubject 항목을 추가하려고 합니다 이렇게 쉽게 추가할 수 있죠 먼저 앱 메뉴를 가져옵니다 그런 다음 관심 있는 항목을 가져옵니다 이 경우에는 copySubject죠 그리고 메뉴에 삽입합니다 항목이 실제로 유효해야 사용할 수 있다는 것을 잊지 마세요 예를 들어 피사체 상호 작용이 가능한 유형이 없으면 copySubject 항목은 메뉴에 없을 겁니다 또한 시스템 제공 텍스트 항목은 해당이 된다면 포함되지만 모두 태그로 식별할 수 있는 것은 아닙니다 이러한 항목은 원하는 대로 사용자화할 수 있는데 여기서 저는 '이미지 복사' 항목을 '사진 복사'로 변경했어요 이런 프로퍼티를 변경한다고 걱정하지 마세요 이러한 항목은 매번 다시 생성되므로 원하는 대로 변경할 수 있습니다 기존 메뉴에 항목을 추가하는 방법을 살펴봤으니 VisionKit 메뉴에 항목을 추가하는 방법을 살펴보겠습니다 앞서 언급했듯이 오버레이 뷰가 제공하는 항목은 권장 인덱스에 태그가 있는 항목입니다 이 권장 인덱스는 항목을 recommendedAppItems에 삽입하죠 이 항목의 인덱스를 요청하고 그 인덱스에 항목을 삽입하기만 하면 되죠 이 인덱스 사용은 선택 사항이며 필수 사항은 아니지만 사용자를 위해 일관성을 유지하는 좋은 방법입니다

몇몇 메뉴 항목에는 특수한 프로퍼티가 있습니다 예를 들어, 피사체 관련 메뉴 항목이 강조 표시되면 제 고양이 키키를 둘러싼 영역이 어두워지고 발광 효과 애니메이션이 시작되어 복사 혹은 공유하기 전의 피사체를 사용자에게 표시합니다 VisionKit는 피사체 분석을 시작하게 하는 메뉴를 사용합니다 아직 피사체 분석이 시작되지 않았다면요 이 모든 것이 자동으로 처리됩니다 이러한 기능을 제공하기 위해 VisionKit는 자신을 대리자로 설정하게 되죠 업데이트 메뉴 메서드에서 반환하는 모든 메뉴에 대해서요 이전에 이러한 NSMenuDelegate 콜백을 쓰셨다면 이제 VisionKit에서 자체 대리자 콜백을 제공하므로 이전에 사용하던 메뉴 항목의 기능을 유지할 수 있습니다 간단한 팁을 알려드리죠 여러분이 이런 상황이라면 메뉴가 시작된 위치에 따라 메뉴가 VisionKit에서 나오지 않을 수 있습니다 따라서 기존 구현을 그대로 유지하는 것이 좋습니다 보통 이 모든 것을 동기화하는 가장 간단한 방법은 OverlayViewDelegate 구현이 그에 맞는 NSMenuDelegate 구현을 호출하도록 하고 필요에 따라 조정하는 것입니다 물론 이 방법이 앱에 적합한지 확인해야 하지만 일반적으로는 이 방법으로도 충분합니다 VisionKit의 새 기능을 간략히 살펴봤습니다 오늘 여러분과 함께 피사체 분리하기와 시각 자료 찾아보기 새로운 macOS API 및 관련 정보를 논의하게 되어 기뻤습니다 이 새로운 기능을 사용하여 어떻게 여러분의 고객을 만족시키고 놀라게 할지 궁금하네요 그리고 언제나처럼 즐거운 시간 보내시길 바랍니다 감사합니다