Swift Academy · 강의

Core Graphics로 사용자 지정 그리기

draw(_:)에서 경로와 도형을 그립니다.

레슨 4/413개 단계

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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. CALayer 기초
  2. 암시적 및 명시적 애니메이션
  3. 변환과 3D 효과
  4. Core Graphics로 사용자 지정 그리기
← Swift Academy(으)로 돌아가기