macOS 그림판 만들기 + @Swift UI 상태 관리, redo & undo

가끔 디스코드나 화상회의를 할 때 완전 간단한 그림판이 필요한데, 맥북에선 기본 그림판 프로그램이 안보여 만들었다.

 

1. 주요 기능

• 기본 색상 팔레트 8개 + 최근 사용 색상 8개
• 자유롭게 선 그리기
• Undo / Redo (⌘Z / ⇧⌘Z)
• ColorPicker로 사용자 지정 색상 추가
• Clear 버튼으로 전체 초기화

그림판

2. 구조

Paint/

├── PaintApp.swift                     # 앱 시작점

├── ContentView.swift               # 메인 뷰

├── CanvasView.swift                # 그림 그리는 로직이 들어있는 하위 뷰

├── DrawingPath.swift               # 선을 구성하는 모델

├── DrawingViewModel.swift    # 전체 선 목록 및 undo/redo 관리하는 ViewModel

 

SwiftUI 상태 어노테이션

어노테이션	용도	위치	사용 예시
@State	단순한 값	View 내부	선택된 색상, 최근 색상
@StateObject	ViewModel을 직접 생성할 때	최상위 View	DrawingViewModel
@ObservedObject	상위에서 만든 ViewModel을 하위에서 관찰할 때	자식 View	CanvasView에서 ContentView에서 선언된 DrawingViewModel을 전달받음

 

 

 

1. @State: 단순한 값 관리

사용자가 클릭한 색상이나 최근 색상 목록은 단순한 값으로 뷰 내부에서 관리

@State private var selectedColor: Color = .black
@State private var recentColors: [Color] = []

 

 

2. @StateObject: 상태 객체(ViewModel) 생성 및 소유

경로(그려진 선) , redo stack, clear, undo/redo 로직 등 상태 관리

@StateObject private var viewModel = DrawingViewModel()

 

 

3. @ObservedObject: 자식 뷰에서 ViewModel 참조

상위 View에서 생성한 ViewModel을 CanvasView가 관찰하며 렌더링

# ContentView - 상위 뷰

struct ContentView: View {
    @Environment(\.undoManager) private var undoManager
    @StateObject private var viewModel = DrawingViewModel()
    @State private var selectedColor: Color = .black
    @State private var recentColors: [Color] = []
    
    ...
    
    CanvasView(
            paths: $viewModel.paths,
            viewModel: viewModel,
            selectedColor: selectedColor,
            lineWidth: 2,
            onDrawingEnded: { newPath in
                viewModel.addPath(newPath, using: undoManager)
                updateRecentColors(selectedColor)
            }
        )

}

# CanvasView - 하위 뷰

struct CanvasView: View {
    @Binding var paths: [DrawingPath]
    @ObservedObject var viewModel: DrawingViewModel
    let selectedColor: Color
    let lineWidth: CGFloat
    let onDrawingEnded: (DrawingPath) -> Void
	
    ...
    
    }

 

 

 

 

 

UndoManager 연동(⌘Z, ⇧⌘Z)

@Environment(\.undoManager) private var undoManager # 전역 변수 선언

# ContentView.swift - 커맨드 등록

        .onCommand(#selector(UndoManager.undo)) {
            viewModel.undo(using: undoManager)
        }
        .onCommand(#selector(UndoManager.redo)) {
            viewModel.redo(using: undoManager)
        }


# DrawingViewModel.swift - 실제 동작 함수

    func undo(using undoManager: UndoManager?) {
        guard let last = paths.popLast() else { return }
        redoStack.append(last)
        undoManager?.registerUndo(withTarget: self) { target in
            target.redo(using: undoManager)
        }
    }

    func redo(using undoManager: UndoManager?) {
        guard let last = redoStack.popLast() else { return }
        paths.append(last)
        undoManager?.registerUndo(withTarget: self) { target in
            target.undo(using: undoManager)
        }
    }

 

 

https://github.com/sungchan1/swift-paint

GitHub - sungchan1/swift-paint: swift-paint