✏️ PencilKit

⭐ Difficulty: ⭐⭐ ⏱️ Est. Time: 1-2h 📂 Graphics & Media

손글씨와 드로잉을 위한 강력한 캔버스

iOS 13+Apple Pencil 최적화

✨ PencilKit is?

PencilKit is Apple's drawing framework, perfectly integrated with Apple Pencil to deliver a low-latency handwriting and sketching experience. It provides pen, marker, pencil tools, eraser, and ruler out of the box, with support for handwriting recognition and data persistence.

💡 Key Features: Low-Latency Drawing · Apple Pencil Support · Various Tools · Handwriting Recognition · Undo/Redo · Data Save/Share · Finger/Touch Support · Dark Mode

🎯 1. 기본 캔버스 설정

Create a drawing canvas using PKCanvasView.

DrawingView.swift — 기본 캔버스

import SwiftUI
import PencilKit

struct DrawingView: View {
    @State private var canvasView = PKCanvasView()
    @State private var toolPicker = PKToolPicker()

    var body: some View {
        CanvasView(canvasView: $canvasView, toolPicker: toolPicker)
            .onAppear {
                // 툴 피커 표시
                toolPicker.setVisible(true, forFirstResponder: canvasView)
                toolPicker.addObserver(canvasView)
                canvasView.becomeFirstResponder()
            }
    }
}

struct CanvasView: UIViewRepresentable {
    @Binding var canvasView: PKCanvasView
    let toolPicker: PKToolPicker

    func makeUIView(context: Context) -> PKCanvasView {
        canvasView.drawingPolicy = .anyInput // Apple Pencil + 손가락
        canvasView.delegate = context.coordinator
        return canvasView
    }

    func updateUIView(_ uiView: PKCanvasView, context: Context) {}

    func makeCoordinator() -> Coordinator {
        Coordinator(canvasView: $canvasView)
    }

    class Coordinator: NSObject, PKCanvasViewDelegate {
        @Binding var canvasView: PKCanvasView

        init(canvasView: Binding<PKCanvasView>) {
            _canvasView = canvasView
        }

        // 드로잉 변경 시 호출
        func canvasViewDrawingDidChange(_ canvasView: PKCanvasView) {
            print("드로잉 변경됨")
        }
    }
}

🖊️ 2. 도구 설정

Configure various drawing tools like pen, marker, pencil.

DrawingTools.swift — 도구 설정

import PencilKit

class DrawingToolManager {
    // 1. 펜 도구
    func createPenTool(color: UIColor = .black, width: CGFloat = 5) -> PKInkingTool {
        let ink = PKInkingTool(.pen, color: color, width: width)
        return ink
    }

    // 2. 마커 도구
    func createMarkerTool(color: UIColor = .yellow, width: CGFloat = 20) -> PKInkingTool {
        let ink = PKInkingTool(.marker, color: color, width: width)
        return ink
    }

    // 3. 연필 도구
    func createPencilTool(color: UIColor = .darkGray, width: CGFloat = 3) -> PKInkingTool {
        let ink = PKInkingTool(.pencil, color: color, width: width)
        return ink
    }

    // 4. 지우개 도구
    func createEraserTool(eraserType: PKEraserTool.EraserType = .vector) -> PKEraserTool {
        // .vector = 획 단위 지우기
        // .bitmap = 픽셀 단위 지우기
        return PKEraserTool(eraserType)
    }

    // 5. 눈금자 도구
    func setupRuler(for canvasView: PKCanvasView) {
        canvasView.isRulerActive = true
    }

    // 도구 적용
    func applyTool(_ tool: PKTool, to canvasView: PKCanvasView) {
        canvasView.tool = tool
    }
}

💾 3. 드로잉 저장 및 불러오기

드로잉 데이터를 저장하고 불러옵.

DrawingStorage.swift — Save/Load

import PencilKit

class DrawingStorageManager {
    // 드로잉 저장
    func saveDrawing(_ drawing: PKDrawing, to url: URL) throws {
        // PKDrawing을 Data로 변환
        let data = drawing.dataRepresentation()

        // 파일로 저장
        try data.write(to: url)
    }

    // 드로잉 불러오기
    func loadDrawing(from url: URL) throws -> PKDrawing {
        // 파일에서 Data 읽기
        let data = try Data(contentsOf: url)

        // Data를 PKDrawing으로 변환
        let drawing = try PKDrawing(data: data)
        return drawing
    }

    // 이미지로 변환
    func convertToImage(_ drawing: PKDrawing, size: CGSize) -> UIImage {
        let image = drawing.image(from: drawing.bounds, scale: UIScreen.main.scale)
        return image
    }

    // UserDefaults에 저장
    func saveToUserDefaults(_ drawing: PKDrawing, key: String) {
        let data = drawing.dataRepresentation()
        UserDefaults.standard.set(data, forKey: key)
    }

    // UserDefaults에서 불러오기
    func loadFromUserDefaults(key: String) -> PKDrawing? {
        guard let data = UserDefaults.standard.data(forKey: key) else { return nil }
        return try? PKDrawing(data: data)
    }
}

✍️ 4. 손글씨 인식

손으로 쓴 텍스트를 인식.

HandwritingRecognition.swift — Handwriting Recognition

import PencilKit
import Vision

@Observable
class HandwritingRecognizer {
    var recognizedText: String = ""

    // 드로잉에서 텍스트 인식
    func recognizeText(from drawing: PKDrawing) async {
        // 드로잉을 이미지로 변환
        let image = drawing.image(from: drawing.bounds, scale: 2.0)

        guard let cgImage = image.cgImage else { return }

        // Vision 텍스트 인식
        let request = VNRecognizeTextRequest { [weak self] request, error in
            guard let observations = request.results as? [VNRecognizedTextObservation] else {
                return
            }

            let recognizedStrings = observations.compactMap { observation in
                observation.topCandidates(1).first?.string
            }

            Task { @MainActor in
                self?.recognizedText = recognizedStrings.joined(separator: "\n")
            }
        }

        // 손글씨 인식 활성화
        request.recognitionLevel = .accurate
        request.recognitionLanguages = ["en-US", "ko-KR"]

        let handler = VNImageRequestHandler(cgImage: cgImage, options: [:])
        try? handler.perform([request])
    }
}

📝 5. 서명 캡처

전자 서명을 캡처하는 기능 implementation.

SignatureView.swift — 서명 캡처

import SwiftUI
import PencilKit

struct SignatureView: View {
    @State private var canvasView = PKCanvasView()
    @State private var signatureImage: UIImage?
    @State private var showSignaturePad = false

    var body: some View {
        VStack {
            if let image = signatureImage {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
                    .frame(height: 150)
                    .border(Color.gray)
                    .padding()
            } else {
                Text("서명 없음")
                    .foregroundStyle(.secondary)
            }

            Button("서명하기") {
                showSignaturePad = true
            }
            .buttonStyle(.borderedProminent)
        }
        .sheet(isPresented: $showSignaturePad) {
            SignaturePadView(
                canvasView: $canvasView,
                onSave: { drawing in
                    signatureImage = drawing.image(
                        from: drawing.bounds,
                        scale: UIScreen.main.scale
                    )
                    showSignaturePad = false
                }
            )
        }
    }
}

struct SignaturePadView: View {
    @Binding var canvasView: PKCanvasView
    let onSave: (PKDrawing) -> Void
    @Environment(\.dismiss) var dismiss

    var body: some View {
        NavigationStack {
            VStack {
                Text("아래에 서명해주세요")
                    .font(.headline)
                    .padding()

                CanvasView(canvasView: $canvasView, toolPicker: PKToolPicker())
                    .frame(height: 300)
                    .border(Color.gray)
                    .padding()
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("취소") {
                        dismiss()
                    }
                }

                ToolbarItem(placement: .confirmationAction) {
                    Button("저장") {
                        onSave(canvasView.drawing)
                    }
                }

                ToolbarItem(placement: .bottomBar) {
                    Button("지우기") {
                        canvasView.drawing = PKDrawing()
                    }
                }
            }
        }
    }
}

📱 Complete Example

DrawingAppView.swift — App

import SwiftUI
import PencilKit

struct DrawingAppView: View {
    @State private var canvasView = PKCanvasView()
    @State private var toolPicker = PKToolPicker()
    @State private var showSaveAlert = false

    let storageManager = DrawingStorageManager()

    var body: some View {
        NavigationStack {
            CanvasView(canvasView: $canvasView, toolPicker: toolPicker)
                .navigationTitle("드로잉")
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItemGroup(placement: .topBarTrailing) {
                        Button {
                            // 이미지로 저장
                            let image = canvasView.drawing.image(
                                from: canvasView.drawing.bounds,
                                scale: UIScreen.main.scale
                            )
                            UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
                            showSaveAlert = true
                        } label: {
                            Image(systemName: "square.and.arrow.down")
                        }

                        Button {
                            canvasView.drawing = PKDrawing()
                        } label: {
                            Image(systemName: "trash")
                        }
                    }

                    ToolbarItemGroup(placement: .bottomBar) {
                        Button {
                            canvasView.undoManager?.undo()
                        } label: {
                            Image(systemName: "arrow.uturn.backward")
                        }
                        .disabled(canvasView.undoManager?.canUndo == false)

                        Spacer()

                        Button {
                            canvasView.undoManager?.redo()
                        } label: {
                            Image(systemName: "arrow.uturn.forward")
                        }
                        .disabled(canvasView.undoManager?.canRedo == false)
                    }
                }
                .alert("저장 완료", isPresented: $showSaveAlert) {
                    Button("확인", role: .cancel) {}
                } message: {
                    Text("드로잉이 사진첩에 저장되었습니다")
                }
                .onAppear {
                    toolPicker.setVisible(true, forFirstResponder: canvasView)
                    toolPicker.addObserver(canvasView)
                    canvasView.becomeFirstResponder()
                }
        }
    }
}

💡 HIG Guidelines

Apple Pencil: Apple Pencil 사용 시 최적화된 경험 제공
도구 선택: 명확한 도구 선택 UI 제공
실행 취소: 쉬운 실행 취소/재실행 버튼
저장: 자동 저장 또는 명확한 저장 버튼
권한: In Info.plist, NSPhotoLibraryAddUsageDescription 추가 (사진 저장 시)

🎯 Practical Usage

노트 앱: 손글씨 필기 및 스케치
화이트보드: 협업 드로잉
그림 앱: 디지털 드로잉
서명: 전자 서명 캡처
주석: 문서/이미지 주석

📚 Learn More

⚡️ Performance Tips: drawingPolicy를 .pencilOnly to ignore finger touch and recognize only Apple Pencil. Useful for precise drawing.

📎 Apple Official Resources

📘 Documentation 💻 Sample Code 🎬 WWDC Sessions