Apple Pencil 최대한 활용하기

안녕하세요, 저는 드로잉 기능 담당 소프트웨어 엔지니어 Sam입니다 이번 동영상에서는 표현력 풍부한 드로잉 환경을 만드는 데 도움이 되는 PencilKit 도구 선택기와 Apple Pencil API의 개선 사항을 살펴보겠습니다 PencilKit은 풍부한 드로잉 경험을 시작할 수 있는 가장 쉬운 방법입니다 또한 PencilKit 도구 선택기는 모든 최신 플랫폼 기능과 통합이 가능합니다 iPad에서 뛰어난 성능을 발휘하며 다양한 드로잉 및 작성 작업 흐름에 맞게 조정 가능한 반응형 선택기를 제공합니다 iPhone에서는 화면 하단에 나타나 사용 가능한 공간에서 모든 도구 및 컨트롤 기능을 제공합니다

그리고 Apple Vision Pro에서는 작업 창 바로 아래에 떠 있는 도구 상자로 표시됩니다 Apple Pencil Pro는 손에 꾹 눌러 쥐기만 하면 됩니다 손이 닿는 곳 어디에서든 PencilKit 도구 선택기를 사용할 수 있거든요 먼저 도구 선택기의 새로운 기능에 대해 설명하겠습니다 도구 선택기는 앱에 적합한 도구 세트로 구성할 수 있는데요 그 다음에는 도구 선택기에서 직접 맞춤형 도구를 만드는 방법을 보여 드리고 마지막으로 드로잉 환경을 Apple Pencil Pro와 통합할 수 있는 몇 가지 새로운 API를 소개하겠습니다 도구 선택기의 새로운 기능에 대한 데모부터 시작해 볼게요 제가 만들고 있는 앱에서 고양이 그림을 그리기 시작했습니다 PencilKit으로 그린 그림 옆에 동물 모양을 스탬프로 찍을 수 있습니다 이 프로젝트의 소스 코드는 이 동영상의 리소스에서 확인할 수 있습니다 이 앱에는 펜과 지우개 같은 도구뿐만 아니라 동물 도구도 있죠 동물 도구를 탭하면 색상, 크기 및 맞춤형 도형 선택기를 작동시키는 컨트롤이 나타납니다 이 도구의 여러 가지 속성을 변경하면 선택기의 항목이 선택한 것을 나타내도록 업데이트됩니다

그리고 추가 코드 없이도 Apple Pencil Pro의 스퀴즈와 같은 기능을 심도 있게 지원합니다 펜을 꾹 눌러 쥐면 맞춤형 도구들이 PencilKit 도구와 함께 이렇게 화면에 나타납니다 스탬프의 속성을 조정하면 두 고양이의 발자국을 완벽하게 찍을 수 있습니다

스탬프 도구는 Apple Pencil Pro에서 배럴 롤 각도 조절이 가능해 정밀하게 회전해서 고양이 발자국을 완벽하게 찍을 수 있죠 멋지죠! 이제 이 버튼을 눌러 도구 선택기에서 바로 그림에 서명할 수 있습니다

iOS 13부터 PKToolPicker는 PencilKit 도구의 전체 세트를 사용해 쉽게 초기화할 수 있습니다 앱에 PKToolPicker를 추가하는 기본 사항에 대해 자세히 알아보려면 ‘PencilKit 소개’ 동영상을 확인하세요 이제 iPadOS 18 및 visionOS 2에서 새로운 기능인 도구 선택기를 통해 사용 가능한 도구를 정의할 수 있습니다 도구 선택기는 PKCanvasView나 자신만의 드로잉 캔버스 또는 둘 모두와 함께 사용 가능합니다

잉크 도구를 사용해 PKCanvasView에 획을 그리는 도구를 선택할 때 같은 유형의 도구를 여러 개 포함시킬 수도 있습니다 예를 들어 문서에 주석을 달 때 두 가지 펜 색깔 또는 마커를 두 가지 색상으로 골라 사용하면 굉장히 좋겠죠 PKToolPickerItems 유형에는 여러 가지가 있습니다 선택기에 필요한 모든 것을 제공할 수 있죠 새로운 toolItems 이니셜라이저를 사용하여 앱에 맞게 순서와 도구 세트를 커스터마이징 해보세요 잉크, 지우개, 올가미 도구 항목에는 각각 해당하는 PKTool이 있습니다 캔버스에 무언가를 그릴 때 PencilKit이 사용하는 도구입니다 캔버스에서 도구 선택기를 볼 수 있도록 설정되어 있다면 PKCanvasView의 도구 속성으로 자동 설정됩니다 눈금자는 다른 항목과는 다릅니다 탭하면 선택되는 것이 아니라 켜지거나 꺼집니다 눈금자 항목은 캔버스에 무엇을 그리는 기능이 아니기에 매치되는 PKTool이 없습니다 PKCanvasViews에서 이 항목을 탭하면 isRulerActive 속성이 자동으로 꺼졌다 켜졌다 합니다

아니면 도구 선택기 보기로 맞춤형 캔버스의 눈금자를 토글할 수 있습니다

손글씨 입력 기능은 Apple Pencil로 손글씨를 쓰면 이것을 자동으로 텍스트로 변환하는 기능입니다

선택기에 손글씨 입력 항목을 추가하면 손글씨 입력과 드로잉 기능을 한 곳에 통합하여 펜슬 모드를 전환할 수 있습니다 손글씨 입력 도구를 선택하면 색상 저장소가 키보드 단축키 바의 컨트롤로 교체됩니다 Apple Pencil 설정에서 손글씨 입력 활성화 설정에 따라 손글씨 입력 도구가 자동으로 숨겨집니다 앱에서 손글씨 입력을 설정하는 방법에 대해 더 알아보려면 ‘iPad의 손글씨 입력 기능 소개’ 동영상을 확인해 보세요 맞춤형 항목은 PencilKit이 아닌 모든 도구를 PKToolPicker에서 열 수 있어요 예를 들어 앞서 스탬프 도구를 보여드렸죠 이 도구는 앱에서 제공하는 무엇이든 될 수 있습니다 맞춤형 항목에 대해서는 잠시 후에 자세히 살펴볼게요 iPadOS 18 및 visionOS 2에 새로 추가된 기능인 PKToolPicker는 한쪽 구석에 액세서리 UIBarButtonItem을 설정할 수 있습니다 이 버튼을 사용하여 텍스트 상자 삽입이나 배경 설정과 같은 드로잉 도구가 아닌 캔버스 작업을 표시할 수 있습니다 선택기가 최소화되면 이 버튼이 숨겨지므로 여기에서 제공하는 동작은 앱 UI의 다른 곳에서도 사용할 수 있어야 합니다 다음으로 드로잉 캔버스에서 도구 선택기로 도구를 빌드하는 방법을 설명하겠습니다 PKToolPicker는 항상 PKCanvasView에 사용할 도구를 선택하는 최고의 방법이었죠 이제 맞춤형 도구를 통해 드로잉 도구를 도구 선택기에 넣어 사용할 수 있습니다

PKToolPicker는 PKCanvasView에도 사용할 수 있지만 나만의 드로잉 캔버스에서도 아니면 두 가지를 조합해서도 사용 가능합니다

맞춤형 도구는 시스템 펜슬 도구를 나만의 도구로 만들기에 아주 좋은 방법이죠 앞서 보여드린 동물 스탬프 또는 펜으로 실행하는 사진 보정 작업처럼 여러분의 캔버스를 독특하게 만들 수 있거든요

맞춤형 도구 항목이 선택되면 보고 있던 PKCanvasView에서 드로잉 기능이 꺼집니다 맞춤형 도구를 사용하면 앱이 렌더링하고 PencilKit가 도구 선택을 담당합니다

PKToolPickerCustomItem과 그 Configuration을 사용하여 여러분 도구의 기능에 딱 맞는 나만의 항목을 만들 수 있습니다 Configuration 구조체를 사용해 도구가 지원하는 속성을 정의하세요 PencilKit으로 도구의 동작에 맞는 색깔과 폭을 지정할 수 있습니다 추가 속성의 경우 보기 컨트롤러를 전달해 더 많은 컨트롤이 표시됩니다 PencilKit은 클로저에서 제공한 사전에 렌더링된 이미지를 사용하여 맞춤형 도구 항목을 선택기에 표시합니다

너비, 색상, 투명도가 변경될 때마다 PencilKit은 새 이미지를 위해 클로저를 호출합니다 reloadImage 메서드도 있습니다 이것은 맞춤형 속성이 변경될 때 호출해야 합니다 도구 이미지에서 도구의 속성을 표현할 방법을 생각해보세요 UILabel.drawText(in:)는 투명도 값을 나타내는 등 도구에 그 도구의 속성을 표시할 수 있는 좋은 방법입니다 마지막으로 앱에서 Apple Pencil Pro의 강력한 기능을 사용하는 방법을 보여드리겠습니다 Apple Pencil Pro는 다양한 새 기능을 제공합니다 앱의 드로잉 경험을 한 단계 더 발전시킬 수 있는 기능이죠 저는 ‘메모’ 앱에서 살사 소스용 텃밭에 대한 계획을 세우고 있고 재빨리 몇 가지를 변경하고 싶습니다 고수 라벨에 밑줄을 긋기 위한 완벽한 도구를 선택합니다 바로 Apple Pencil Pro죠 펜을 꾹 눌러 쥐면 도구 선택기가 화면에 표시됩니다 펜 도구의 색상을 변경하겠습니다 밑줄을 그어볼게요

이 작업을 취소하고 대신 강조 표시된 스타일을 적용하겠습니다 Apple Pencil Pro를 꾹 눌러 쥐고 실행 취소 버튼을 길게 누르면 슬라이더가 나타납니다 이제 슬라이더를 사용해 여러 작업을 실행 취소할 수 있습니다

다시 펜을 꾹 눌러 쥐고 마커 도구로 전환하겠습니다 Apple Pencil은 높이, 방위각, 압력을 다르게 적용하는 등 다양한 방법으로 잡으면 획의 스타일을 다양하게 변경할 수 있습니다

이제 Apple Pencil Pro의 배럴을 다양한 각도로 돌려 잡아가면서 더 멋진 창작 활동을 해 보세요

앱에서 PKCanvasView를 사용하는 경우 마커와 만년필로 이 기능을 사용할 수 있습니다 Apple Pencil Pro를 사용할 때 펜슬의 배럴을 이리저리 돌리면 획의 각도가 달라집니다 그리고 모든 PencilKit 도구에서 Apple Pencil Pro로 화면을 터치하면 펜 아래에 특정 도구를 나타내는 아름다운 그림자가 표시됩니다 마커 도구를 사용하여 고수 라벨에 강조 표시해 볼게요 그리고 획을 긋고 끝에서 잠시 멈춰 도형 인식을 트리거합니다 이 기능이 활성화되면 도형 인식이 완료되었을 때 손으로 햅틱 피드백을 느낄 수 있습니다 이제 스냅이 생생하게 느껴집니다 메모 앱은 PencilKit을 사용하여 이러한 심층 통합 기능을 제공합니다 그러나 이것이 끝이 아니며 맞춤형 드로잉 캔버스와 통합되는 풍부한 API 세트도 있습니다 먼저 새로운 실행 취소 슬라이더를 살펴보죠 Apple Pencil Pro에 새롭게 추가된 기능으로 손으로 펜을 꾹 눌러 쥐면 슬라이더에 액세스할 수 있습니다 실행 취소 및 다시 실행 기록을 빠르게 탐색하는 슬라이더에 접근할 수 있죠 이는 모든 앱에서 사용할 수 있습니다 PKToolPicker를 사용하지 않을 때도요 이 동작을 비활성화하려면 스퀴즈 동작에 응답하는 메서드를 구현하는 델리게이트와 함께 UIPencilInteraction을 설치하면 됩니다 드로잉 기능이 있는 앱의 경우 스퀴즈는 펜을 놓지 않고도 앱과 상호 작용할 수 있는 새로운 가능성을 열어줍니다

개별 동작을 수행하는 하나의 제스처로 스퀴즈를 사용해 보세요 그러면 앱 사용이 더 편리해질 것입니다 Apple Pencil Pro를 꾹 눌러 쥐었을 때 앱이 수행해야 할 작업에 대한 장치 전체의 설정이 있습니다 여기에는 상황에 맞는 도구 팔레트 표시 또는 시스템 단축키 실행이라는 새로운 옵션이 포함됩니다

환경 설정이 단축키를 실행하도록 설정되어 있으면 앱에 스퀴즈 이벤트가 전송되지 않습니다 이제 지원되는 기기에서 앱에 두 번 탭 또는 스퀴즈 이벤트를 보낼 때 UIPencilInteraction이 펜슬 호버 지점 정보도 전송합니다 이 지점은 펜이 디스플레이 위의 어느 위치에 있는지 설명합니다 여기에는 화면 위 위치와 화면에서의 Z 오프셋 방위각, 고도, 롤 각도가 포함됩니다 PencilKit은 이 지점 정보를 사용해 스퀴즈로부터 PKToolPicker의 위치를 지정합니다 자체 도구 선택기에서도 이 정보를 사용할 수 있습니다 여기에 이를 수행하는 코드가 있습니다 스퀴즈 이벤트를 수신하는 델리게이트 메서드를 구현하여 사용자가 스퀴즈에서 팔레트를 표시하길 원하는지 확인하고 스퀴즈를 끝내면 가능한 경우에는 펜이 터치하고 있는 위치를 팔레트 프리젠테이션으로 전송합니다 UIPencilInteraction에 대한 업데이트 외에도 Apple Pencil과 상호작용하는 새로운 SwiftUI API도 있습니다 다음은 SwiftUI에서 onPencilSqueeze 한정자를 사용하는 동일한 예제입니다 환경 설정과 위상을 확인하고 가능한 경우 호버 지점을 가져옵니다 이런 API를 도구 선택기에 적용하여 설정에서 선택된 것과 일치하도록 합니다 또는 PKToolPicker를 사용하여 추가 코드 없이 이 모든 동작을 사용할 수 있습니다 Apple Pencil Pro는 기존 SwiftUI 및 UIKit 피드백 API를 사용해 햅틱 피드백을 제공합니다 이러한 API는 이미 컨트롤의 상태 변경 시 피드백을 제공하는 위치에서 사용되고 있습니다

피드백 API는 플랫폼의 특성 및 설정 등에 따라 다양한 컨텍스트에서 다양한 유형의 피드백을 제공하도록 조정됩니다 예를 들어 피드백은 햅틱, 오디오, 둘 다 또는 아예 없는 경우도 있을 수 있습니다

alignment 스냅 및 경로 완성을 위한 새로운 피드백 API는 SwiftUI와 UIKit 모두에서 사용 가능합니다

이제 API는 위치를 사용하여 주어진 이벤트에 가장 적합한 피드백을 결정하기 위해 더 많은 컨텍스트를 제공합니다 다음은 새로운 UICanvasFeedbackGenerator 클래스를 사용한 예입니다 맞춤형 캔버스가 레이아웃 가이드에 스냅 될 때 정렬이 발생했음을 피드백 생성기에 알립니다 그리고 맞춤형 도형 인식 로직이 트리거되어 그려진 획을 깔끔한 도형에 맞추면 경로가 완성되었음을 피드백 생성기에 알립니다 UIFeedbackGenerator와 모든 그 하위 클래스는 피드백을 생성할 때 초기화 및 해당 뷰의 지점을 고려하도록 업데이트되었습니다 뷰의 경우 캔버스 뷰와 같이 생성할 피드백에 가까운 것을 선택하세요 UIFeedbackGenerator의 모든 사용을 업데이트해야 합니다 이렇게 하면 UIKit이 앱에 대한 최상의 피드백을 제공할 수 있습니다 UICanvasFeedbackGenerator 외에도 SwiftUI에서는 SensoryFeedback 구조체에서 alignment와 pathComplete도 제공합니다 여기에는 가이드에 맞출 때와 그린 획이 도형에 스냅 될 때 각각 증가하는 두 개의 State 정수를 사용합니다 이런 작업을 위해 캔버스에서 가장 구체적인 뷰에 sensoryFeedback 한정자를 추가했습니다 이렇게 하면 트리거 값이 변경될 때마다 피드백을 요청합니다 SwiftUI의 SensoryFeedback 또는 UIKit의 UICanvasFeedbackGenerator를 채택해 맞춤형 캔버스를 Apple Pencil Pro로 생생하게 연출해 보세요 자세한 내용은 ‘앱에서 햅틱 피드백 재생하기’ Apple Developer 문서를 참고하세요 배럴 롤 각도를 사용하면 획의 표현이 더욱 풍부해집니다 사용자 인터페이스 요소를 제어하는 대신 획을 그릴 때 입력을 제공하는 Apple Pencil을 잡는 각도를 다양화하세요 펜을 굴려서 맞춤형 획이 더 좋은 반응성을 내도록 만들어 보세요

손으로 굴릴 때 각도가 변하는 각진 팁을 가진 실제 도구를 모방하는 획이 이상적인 후보자가 됩니다

다양한 모션에 더 잘 반응하도록 롤 각도와 방위각을 함께 추가하세요 롤을 지원하지 않는 기기에서는 대체 옵션을 제공합니다 rollAngle은 UITouch와 UIHoverGestureRecognizer에서 모두 사용할 수 있습니다 이를 통해 앞서 동물 스탬프 미리 보기에서 보여드린 것처럼 맞춤형 도구의 터치 감도를 향상시킬 수 있습니다 손가락 터치로 조작할 때 방향과 속도는 획을 다양하게 변형할 수 있는 좋은 대체 옵션입니다 롤은 처음 전송되었을 때는 추정되었다가 나중에 Bluetooth를 통해 업데이트됩니다 획에 대한 가장 정확한 최종 값을 얻으려면 touchesEstimatedPropertiesUpdated를 구현해야 합니다 그리고 업데이트된 Human Interface Guidelines 안에서 이 모든 Apple Pencil 기능 구현에 대한 모범 사례를 확인해 보세요 지금까지 Apple Pencil의 새로운 기능을 살펴보았습니다 다음으로 무엇을 해야 할까요? 더 적은 코드와 긴밀한 시스템 통합으로 더 나은 도구 선택의 경험을 제공하는 PKToolPicker를 도입하고 PKToolPicker에 맞춤형 도구를 추가하여 PencilKit 도구와 함께 제공해 보세요 거기에 더해 Apple Pencil Pro와 통합할 수 있는 다양한 API 세트를 사용해서 맞춤형 드로잉 경험을 향상시켜보세요 지금까지 Apple Pencil을 최대한 활용하여 원활하게 시작하는 방법을 설명해 드렸습니다 시청해 주셔서 감사합니다!