Core Graphics로 사용자 지정 그리기
draw(_:)에서 경로와 도형을 그립니다.
Core Graphics로 사용자 지정 그리기은(는) CoddyKit의 무료 Swift Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Swift Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
사용자 지정 콘텐츠를 그릴 때
레이어와 이미지로 도형을 표현할 수 없을 때—차트, 서명, 사용자 지정 컨트롤 등—Core Graphics(Quartz 2D)를 사용해 직접 그립니다.
draw(_:) 재정의
UIView를 서브클래스로 만들고 draw(_:)를 재정의합니다. UIKit이 구성된 컨텍스트와 함께 이 메서드를 호출하면 그 안에서 그리기 명령을 실행합니다.
import UIKit
final class ChartView: UIView {
override func draw(_ rect: CGRect) {
// drawing commands go here
}
}그래픽 컨텍스트
draw(_:) 안에서 현재 CGContext를 가져옵니다. 이는 상태를 유지하는 캔버스이므로 색상과 선 너비를 설정한 다음 선을 그리거나 채웁니다.
override func draw(_ rect: CGRect) {
guard let ctx = UIGraphicsGetCurrentContext() else { return }
ctx.setFillColor(UIColor.systemTeal.cgColor)
ctx.fill(rect)
}경로 만들기
CGPath(또는 UIBezierPath)는 선, 곡선, 도형을 표현합니다. 시작점으로 이동한 다음 선과 곡선을 추가합니다.
let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 100, y: 50))
path.addLine(to: CGPoint(x: 0, y: 100))
path.close()선 그리기와 채우기
선 그리기는 경로의 윤곽을 그리고, 채우기는 내부를 색칠합니다. 색상과 너비를 설정한 다음 stroke() 또는 fill()을 호출합니다.
UIColor.systemRed.setStroke()
let line = UIBezierPath()
line.lineWidth = 3
line.move(to: CGPoint(x: 10, y: 10))
line.addLine(to: CGPoint(x: 90, y: 90))
line.stroke()곡선
제어점을 지정하고 2차(addQuadCurve) 또는 3차(addCurve) 베지어 선분을 사용해 매끄러운 곡선을 추가합니다.
let p = UIBezierPath()
p.move(to: CGPoint(x: 0, y: 100))
p.addCurve(to: CGPoint(x: 200, y: 100),
controlPoint1: CGPoint(x: 50, y: 0),
controlPoint2: CGPoint(x: 150, y: 200))컨텍스트 상태: 저장과 복원
컨텍스트는 상태를 유지합니다. saveGState()/restoreGState()로 변환과 클리핑을 감싸면 변경 사항이 이후 그리기에 영향을 주지 않습니다.
ctx.saveGState()
ctx.translateBy(x: 50, y: 50)
ctx.rotate(by: .pi / 4)
// draw rotated content
ctx.restoreGState()그라데이션과 그림자
Core Graphics는 그라데이션(CGGradient 및 drawLinearGradient)과 그림자(setShadow(offset:blur:color:))를 컨텍스트에 직접 그립니다.
ctx.setShadow(offset: CGSize(width: 0, height: 2),
blur: 4,
color: UIColor.black.cgColor)클리핑
경로를 추가하고 clip()을 호출하면 이후의 그리기를 해당 영역으로 제한할 수 있어, 모서리가 둥근 이미지나 마스크된 채우기에 유용합니다.
let clipPath = UIBezierPath(ovalIn: rect)
clipPath.addClip()
// drawing now constrained to the oval성능과 setNeedsDisplay
draw(_:)는 CPU에서 실행되며 비교적 비용이 큽니다. setNeedsDisplay()를 통해 필요한 경우에만 다시 그리도록 요청하고, 그리기 코드는 간결하게 유지하세요.
func updateData() {
self.data = newData
setNeedsDisplay() // schedule one redraw
}오프스크린 렌더링
재사용할 비트맵은 매 프레임 다시 그리는 대신 UIGraphicsImageRenderer를 사용해 이미지로 렌더링하세요.
let renderer = UIGraphicsImageRenderer(size: CGSize(width: 100, height: 100))
let image = renderer.image { ctx in
UIColor.systemBlue.setFill()
ctx.fill(CGRect(x: 0, y: 0, width: 100, height: 100))
}빠른 확인: Core Graphics
사용자 지정 그리기에 대한 이해도를 확인해 보세요.
복습: Core Graphics를 사용한 사용자 지정 그리기
draw(_:)를 재정의하고 CGContext에 명령을 실행합니다. 선과 베지어 곡선으로 경로를 만든 다음 선을 그리거나 채웁니다. saveGState()/restoreGState()로 변환과 클리핑을 격리하고, 그라데이션, 그림자, 클립을 직접 추가합니다.
그리기는 CPU 작업이므로 setNeedsDisplay()를 통해 필요한 경우에만 다시 그리고, UIGraphicsImageRenderer로 재사용할 비트맵을 캐시하세요.
AI 튜터와 함께 Swift을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 122
- 레슨
- 409
자주 묻는 질문
“Core Graphics로 사용자 지정 그리기” 강의는 무료인가요?
네 — “Core Graphics로 사용자 지정 그리기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Swift Academy 강의 전체를 잠금 해제할 수 있습니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Core Graphics로 사용자 지정 그리기”에서 뭘 배우나요?
draw(_:)에서 경로와 도형을 그립니다. 브라우저에서 직접 실행하는 실습 코드로 Swift Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Swift Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Swift Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“Core Graphics로 사용자 지정 그리기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Swift Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Swift Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- CALayer 기초
- 암시적 및 명시적 애니메이션
- 변환과 3D 효과
- Core Graphics로 사용자 지정 그리기