본문 바로가기

[Tkinter] 52강 Canvas 위젯 기본 개념 이해하기

@도마22026. 2. 15. 21:00
728x90


이 강의는 Tkinter GUI 강의 52강입니다

51강에서는
파일 저장 다이얼로그를 통해
GUI의 기본 입출력 흐름을 완성했습니다.

이번 강의부터는
Tkinter의 또 다른 핵심 위젯인
Canvas를 다룹니다.

이번 강의의 목표는 분명합니다.
Canvas가 무엇인지,
왜 필요한지, 어떤 역할을 하는지를 이해하는 것입니다.


Canvas는 무엇인가

Canvas는
버튼이나 입력창처럼
정해진 모양의 위젯이 아닙니다.

Canvas는
그릴 수 있는 공간입니다.

  • 사각형
  • 텍스트
  • 이미지

이 모든 것을
직접 좌표로 그릴 수 있습니다.


Canvas가 필요한 이유

지금까지 배운 위젯들은
대부분 이런 특징이 있었습니다.

  • 정해진 형태
  • 정해진 용도
  • 배치 중심

하지만 다음과 같은 화면은
기존 위젯만으로 만들기 어렵습니다.

  • 그림판
  • 차트
  • 미니 게임 화면
  • 커스텀 UI

이때 사용하는 것이
Canvas입니다.


Canvas는 좌표 기반 위젯이다

Canvas의 가장 큰 특징은
좌표 기반이라는 점입니다.

  • 왼쪽 위가 (0, 0)
  • x → 오른쪽
  • y → 아래쪽

모든 도형과 객체는
좌표로 위치를 결정합니다.


Canvas 기본 생성 방법

Canvas 역시
일반 위젯처럼 생성합니다.

canvas = tk.Canvas(window, width=300, height=200)
canvas.pack()
  • width, height → 그릴 영역 크기
  • pack/grid/place 모두 사용 가능

가장 기본적인 Canvas 예제

import tkinter as tk

window = tk.Tk()
window.geometry("320x240")

canvas = tk.Canvas(window, width=300, height=200, bg="white")
canvas.pack(pady=20)

window.mainloop()

아직은
아무것도 그려지지 않은
빈 도화지 상태입니다.


Canvas는 컨테이너가 아니다

중요한 개념 하나입니다.

Canvas는 위젯을 담는 용도가 아니다.

Canvas 안에는
Button, Entry 같은 위젯을
직접 배치하지 않습니다.

Canvas는
그리기 전용 공간입니다.

(위젯을 올리는 고급 기법은 나중에 다룹니다.)


Canvas와 Frame의 차이

자주 헷갈리는 비교입니다.

  • Frame → 위젯 배치용
  • Canvas → 그래픽 표현용

Frame은 구조를 만들고
Canvas는 표현을 담당합니다.


Canvas에서 할 수 있는 것들

Canvas로 할 수 있는 대표적인 작업은 다음과 같습니다.

  • 도형 그리기
  • 좌표 기반 이동
  • 마우스 이벤트 처리
  • 애니메이션 구현

이 때문에
Canvas는
GUI + 게임 + 시각화의 교차점입니다.


Canvas를 사용하는 사고 방식

Canvas를 사용할 때는
이렇게 생각해야 합니다.

  • “여기에 버튼을 놓자” X
  • “이 좌표에 무엇을 그릴까” O

사고 방식이
완전히 바뀝니다.


Canvas는 다른 GUI에서도 핵심이다

Canvas 개념은
Tkinter에만 존재하지 않습니다.

  • HTML Canvas
  • Unity Scene 좌표
  • 게임 엔진 렌더링

지금 배우는 것은
그래픽 기반 GUI 공통 사고입니다.


지금 단계에서 꼭 기억할 것

이번 강의에서는
아직 아무것도 그리지 않아도 됩니다.

중요한 것은
이 한 문장입니다.

Canvas는 그리는 공간이다

이 개념만
정확히 잡고 가면
다음 강의들이
훨씬 쉬워집니다.


이번 강의 핵심 정리

이번 강의에서 꼭 기억해야 할 내용입니다.

  • Canvas는 그래픽 표현용 위젯이다
  • 좌표 기반으로 동작한다
  • 도형, 텍스트, 이미지를 직접 그린다
  • 기존 위젯과 사고 방식이 다르다

다음 강의 예고

다음 강의에서는
Canvas에 선과 도형 그리기를 다룹니다.

이제
빈 도화지에
처음으로 그림을 그립니다.


728x90
도마2
@도마2 :: 도마의 코드노트

초보자를 위한 코딩 강의를 정리합니다. 파이썬부터 C#, Unity 게임 제작까지 차근차근 기록합니다. — 도마

목차