3주차 1교시: 디지털 이미지의 픽셀과 좌표

디지털 이미지의 데이터 구조

핵심 개념

픽셀, 좌표, 튜플

이전 학습

변수, int, 실행 순서

확인 방법

크기와 유효 좌표

다음 학습

RGB와 Pillow 도형

학습 내용

• 이미지의 구조

  픽셀, 래스터 이미지와 해상도의 관계

• 이미지 좌표

  원점, 축 방향과 유효 좌표 범위

• 코드 표현

  변수, 튜플, 대입과 출력의 역할

• 이미지 생성

  Pillow와 Colab을 이용한 빈 이미지 생성·확인

• 좌표 계산

  마지막 픽셀 좌표와 위치 이동의 계산

• 화면 구성

  중심·여백 계산과 설계 기준점의 배치

값에서 이미지로의 확장

이 수업이 마지막에 만드는 것은 생성예술, 데이터 아트, 데이터 시각화처럼 눈에 보이는 콘텐츠입니다. 앞으로 배우는 반복, 조건, 함수는 모두 이미지 위에서 그 효과를 확인하고, 9주차부터 다루는 데이터도 그래프와 지도라는 이미지로 정리합니다. 2주차의 생활 데이터에서 픽셀로 급하게 옮겨 온 것처럼 보일 수 있지만, 이미지는 이 수업의 모든 결과물이 놓이는 바탕이므로 값과 변수 다음에 가장 먼저 익힐 대상입니다. 오늘은 그 첫걸음으로 이미지 안의 모든 위치에는 (x, y)라는 주소가 있다는 규칙을 익힙니다.

2주차에는 score = 10처럼 변수 하나에 값 하나를 담았습니다. 이미지도 같은 종류의 값으로 이루어져 있지만, 값의 개수가 훨씬 많습니다. 래스터 이미지는 픽셀의 격자이며, 격자의 칸마다 색상 값이 하나씩 저장됩니다. 가로 4칸, 세로 3칸 이미지라면 색상 값이 12개입니다.

사람은 사진에서 얼굴이나 풍경을 알아보지만, 파일에 얼굴이나 풍경이 저장되어 있지는 않습니다. 저장된 것은 가로·세로 픽셀 수와 각 위치의 색상 값뿐입니다. 코드가 다루는 대상도 이 숫자들입니다. 이미지를 밝게 만드는 코드도 사진을 통째로 다루지 않고, 모든 위치의 색상 값을 하나씩 바꿉니다.

숫자로 적힌 위치와 크기는 계산할 수 있습니다. “제목을 가운데에 둔다”는 결정은 눈대중이 아니라 가로 크기에서 제목의 폭을 뺀 나머지를 반으로 나누는 계산으로 적을 수 있고, 이미지 크기가 바뀌어도 같은 계산으로 다시 구할 수 있습니다. 프로그래밍으로 이미지를 만든다는 것은 이렇게 시각적 결정을 계산 가능한 규칙으로 적어 두는 일입니다.

이미지의 구조

픽셀, 래스터 이미지, 해상도

픽셀은 래스터 이미지에서 좌표로 식별되는 색상 데이터 단위입니다. 격자의 각 위치에 색상 값이 저장되며, 확대 방식에 따라 개별 픽셀이 사각형 영역으로 표시될 수 있습니다. 픽셀을 이해할 때에는 표시되는 모양보다 위치와 데이터의 관계가 중요합니다.

이미지의 일부를 수정하는 것은 특정 좌표의 색상 값을 갱신하는 작업입니다. 선과 원을 그리는 명령은 해당 형태에 포함되는 픽셀을 계산한 뒤 그 위치에 새로운 색상 값을 기록합니다.

800 × 600 이미지는 가로 800개, 세로 600개의 픽셀로 구성됩니다. 전체 픽셀 수는 800 * 600, 즉 480,000개입니다. 해상도는 기록할 수 있는 세부 정보의 양과 관련되지만, 그 자체가 작품의 완성도를 결정하지는 않습니다.

이번 실습은 픽셀 값을 기록하는 래스터 이미지를 대상으로 합니다. 벡터 그래픽과의 상세 비교, 표시 크기와 파일 용량의 차이는 본문 뒤 보충 설명에서 확인할 수 있습니다.

이미지 좌표

원점과 축 방향

래스터 이미지를 다루는 도구 대부분은 왼쪽 위 픽셀을 원점 (0, 0)으로 사용합니다. 첫 번째 숫자 x는 오른쪽으로 갈수록 커지고, 두 번째 숫자 y는 아래로 갈수록 커집니다.

표의 첫 행에는 y가 모두 0인 픽셀이 놓입니다. 같은 행에서 오른쪽으로 이동하면 x만 바뀝니다. 첫 열에는 x가 모두 0인 픽셀이 놓이며, 아래로 이동하면 y만 바뀝니다. 따라서 (3, 1)은 “오른쪽으로 3, 아래로 1 이동한 위치”라고 읽을 수 있습니다.

크기와 마지막 좌표

프로그래밍에서는 첫 번째 항목을 0부터 세는 경우가 많습니다. 따라서 가로가 width픽셀인 이미지의 x좌표는 0부터 width - 1까지입니다. 세로 좌표도 같은 원리로 0부터 height - 1까지입니다.

가로 4픽셀 이미지에는 픽셀이 네 개 있습니다. 첫 픽셀에 0이라는 주소를 부여하면 주소는 0, 1, 2, 3이 됩니다. 마지막 주소가 3이라고 해서 픽셀이 세 개라는 뜻은 아닙니다. 개수는 4이고 마지막 주소는 3입니다. 개수와 주소를 같은 값으로 생각하는 순간 이미지 오른쪽이나 아래쪽에서 한 칸씩 벗어나는 오류가 생깁니다.

크기와 좌표의 코드 표현

이미지 크기와 개별 픽셀의 위치는 2주차에 학습한 정수 자료형(int)으로 표현할 수 있습니다. 값의 역할을 나타내는 변수명을 사용하면 크기와 위치를 구분해 관리할 수 있습니다.

2주차에서 print("이름:", name)처럼 함수 이름 뒤에 괄호를 붙여 실행한 것을 함수 호출이라고 하고, 괄호 안에 넣은 값을 인자라고 합니다. 이번 절의 코드는 대입 몇 줄과 함수 호출 한 줄로만 이루어집니다.

크기와 위치의 변수

2주차에서 학습한 대입은 오른쪽 값을 구한 뒤 왼쪽 변수와 연결하는 순서로 처리됩니다. 이 원리를 이용해 이미지의 크기와 점의 위치를 각각 변수로 표현합니다.

canvas_width = 400
canvas_height = 300

point_x = 120
point_y = 80

canvas_width와 canvas_height는 이미지의 가로·세로 픽셀 수이고, point_x와 point_y는 이미지 안에 있는 한 점의 좌표입니다. 크기는 전체 영역을, 좌표는 그 안의 위치를 지정합니다. 변수명에 역할을 드러내면 같은 정수 값이라도 용도를 구분할 수 있습니다.

값을 묶는 튜플

이미지의 크기는 가로와 세로를, 점의 위치는 x와 y를 함께 지정해야 합니다. 이처럼 여러 값을 정해진 순서로 묶어 표현할 때 튜플을 사용합니다. 이번 코드에서는 괄호 안의 값을 쉼표로 구분해 작성합니다.

size = (canvas_width, canvas_height)
position = (point_x, point_y)
color = (40, 110, 230)

앞서 대입한 변수의 값을 사용하므로 size는 (400, 300), position은 (120, 80)입니다. color는 같은 묶음 규칙이 색상에도 쓰인다는 점을 미리 보여 주는 예이며, 세 값이 색상에 미치는 영향은 2교시에서 살펴봅니다.

튜플은 값의 개수와 순서가 중요합니다. 예를 들어 위치를 (80, 120)으로 바꾸면 x와 y가 서로 바뀌어 다른 점을 가리킵니다. 같은 두 값의 묶음이라도 크기로 쓰일 때는 가로·세로, 위치로 쓰일 때는 x·y로 해석하므로 사용 맥락을 함께 확인합니다.

두 좌표 값의 출력

2주차에 학습한 변수 출력을 이용해 이번에는 x와 y 두 값을 한 줄에서 확인합니다. 두 변수를 쉼표로 구분하면 작성한 순서대로 함께 출력됩니다. 앞에서 대입한 point_x = 120, point_y = 80을 사용합니다.

print(point_x, point_y)

120 80

이 호출은 두 값을 각각 인자로 전달합니다. 기본적으로 두 값 사이에는 공백이 들어가며 쉼표 자체는 출력되지 않습니다. 좌표를 확인할 때는 x, y 순서로 작성해 가로 위치와 세로 위치를 함께 읽습니다.

빈 화면에 점 하나를 놓으려면 어디에(위치 튜플)와 어떤 모습으로(색상 튜플)라는 두 정보가 필요하고, 이미지 처리 함수는 이 둘을 숫자로 받습니다. 여기까지 크기, 위치, 색상을 모두 값과 튜플로 적었으므로, 다음 절에서는 이 값들을 Image.new()에 전달해 실제 이미지를 만듭니다.

Pillow 이미지 생성

Pillow는 Python에서 이미지를 생성·편집·저장하는 라이브러리입니다. 코드에서는 PIL이라는 패키지명으로 기능을 불러옵니다. 먼저 Image 모듈을 사용해 크기와 배경색이 지정된 이미지를 만듭니다. 앞의 이미지 좌표 절에서 본 규칙과 같이 Pillow도 왼쪽 위를 원점 (0, 0)으로 사용합니다.

Colab 실습 준비

Colab에서 새 노트북을 엽니다. 이 노트북에서 빈 이미지 생성, 속성 확인, 좌표 계산을 순서대로 실행합니다. 코드 셀은 Shift+Enter 또는 셀 왼쪽 ▶ 버튼으로 실행합니다.

이미지 생성 코드 작성

Image.new()로 400 × 300 크기의 이미지를 생성합니다. 먼저 크기와 배경색을 변수로 지정한 뒤, 이 값을 이미지 생성 함수에 전달합니다. 아래 코드부터는 대입과 함수 호출이 함께 나오므로, 코드를 읽는 순서를 먼저 정리합니다.

from PIL import Image

canvas_width = 400
canvas_height = 300
background_color = (244, 239, 229)

image = Image.new(
    "RGB",
    (canvas_width, canvas_height),
    background_color
)

image

Image.new() 해석

이미지 생성 코드는 모듈 불러오기 → 값의 대입 → 이미지 생성 → 결과 표시로 구성됩니다. from PIL import Image는 이미지 모듈을 불러오고, Image.new()는 지정한 모드·크기·배경색으로 새 이미지를 생성합니다. Colab 코드 셀의 마지막 줄에 image를 작성하면 해당 이미지가 출력 영역에 표시됩니다.

빈 이미지 생성

아래 코드를 새 셀에서 실행해 400 × 300 크기의 빈 이미지를 확인합니다. 배경색은 제공된 값을 사용하며, 세 채널의 의미와 색상 변경은 2교시에서 다룹니다.

from PIL import Image

canvas_width = 400
canvas_height = 300
background_color = (244, 239, 229)

image = Image.new(
    "RGB",
    (canvas_width, canvas_height),
    background_color
)

image

이미지 구조 확인

생성한 이미지의 속성은 코드로 확인할 수 있습니다. size는 가로·세로 픽셀 수, mode는 픽셀 데이터의 저장 방식이며, getbands()는 채널 이름을 반환합니다.

점 .은 대상의 속성이나 기능에 접근하는 표기입니다. image.size는 이미지의 크기 속성을 참조하고, image.getbands()는 채널 이름을 반환하는 메서드를 호출합니다. 메서드는 객체에 연결된 기능이며, 호출할 때 이름 뒤에 괄호를 사용합니다.

print("크기:", image.size)
print("모드:", image.mode)
print("채널:", image.getbands())

크기: (400, 300)
모드: RGB
채널: ('R', 'G', 'B')

이 확인 과정은 오류를 찾을 때도 유용합니다. 예상한 크기와 실제 image.size가 다르면 이미지 생성 셀의 값을 확인해야 합니다. 색상 튜플을 세 값으로 작성했는데 이미지 모드가 RGB가 아니라면, 어떤 모드로 이미지를 만들었는지 다시 살펴볼 수 있습니다. 추측보다 현재 상태를 출력해 확인하는 습관이 안정적인 작업 흐름을 만듭니다.

print("크기:", image.size)
print("모드:", image.mode)
print("채널:", image.getbands())

좌표 계산

이미지의 크기와 좌표 범위를 확인했으므로, 변수와 산술 연산으로 위치를 계산합니다. 이 단원의 코드는 계산 결과를 출력하며, 이미지를 직접 수정하지는 않습니다.

계산식의 해석

가로 400픽셀 이미지의 마지막 x좌표를 변수에 저장한다면 다음처럼 작성할 수 있습니다. 한 줄을 세 단계로 나누면 계산과 대입을 혼동하지 않게 됩니다.

canvas_width = 400
last_x = canvas_width - 1
print(last_x)

좌표 이동 코드

좌표는 가로 위치와 세로 위치를 독립적으로 조정하는 기준입니다. 도형을 왼쪽으로 이동하려면 x값을 줄이고, 아래로 이동하려면 y값을 늘립니다. 두 축의 변화와 결과를 연결하면 위치를 의도에 맞게 수정할 수 있습니다.

다음 코드는 점의 위치를 나타내는 두 정수 값을 변경합니다. (120, 80)에서 오른쪽으로 30픽셀, 위로 20픽셀 이동할 때의 좌표를 계산하며, 이미지에 점을 그리지는 않습니다.

point_x = 120
point_y = 80

point_x = point_x + 30
point_y = point_y - 20

print(point_x, point_y)

point_x = point_x + 30은 수학의 등식이 아니라 실행 순서가 있는 명령입니다. 오른쪽의 기존 값을 먼저 찾아 계산하고, 계산이 끝난 뒤 왼쪽 변수의 값을 바꿉니다. 반면 point_y는 위로 이동해야 하므로 값을 더하지 않고 뺍니다.

점의 이동

같은 노트북에 새 셀을 추가해 좌표 이동 코드를 실행합니다.

point_x = 120
point_y = 80

point_x = point_x + 30
point_y = point_y - 20

print(point_x, point_y)

좌표와 화면 구성

정렬, 여백, 중심, 반복 간격과 같은 화면 구성 요소도 좌표의 관계로 표현할 수 있습니다. 왼쪽 배치는 상대적으로 작은 x값으로, 아래쪽 여백은 도형의 아래 경계와 캔버스의 아래 경계 사이 거리로 나타냅니다.

마지막 행의 비대칭 균형은 좌표만으로 자동 판정할 수 없습니다. 좌표는 위치를 정확히 기록하지만, 어떤 구성이 더 안정적이거나 긴장감 있게 느껴지는지는 사람이 결과를 보고 판단해야 합니다. 프로그래밍은 미적 판단을 없애는 것이 아니라, 판단한 내용을 다시 실행할 수 있는 값으로 옮깁니다.

중심과 여백

좌표를 직접 정하는 첫 단계에서는 모든 값을 숫자로 적어도 됩니다. 그러나 캔버스 크기가 바뀔 때마다 중심과 여백을 다시 계산해야 한다면 변수를 사용하는 편이 안전합니다. 캔버스의 가로 중심은 canvas_width // 2, 세로 중심은 canvas_height // 2로 구할 수 있습니다.

canvas_width = 600
canvas_height = 400

center_x = canvas_width // 2
center_y = canvas_height // 2

print(center_x, center_y)

300 200

여백도 같은 방식으로 관계를 만들 수 있습니다. margin = 40이라고 정하면 왼쪽 위 안전 영역은 (40, 40)에서 시작합니다. 오른쪽 여백을 40만큼 남긴 위치는 canvas_width - margin, 아래쪽 여백을 40만큼 남긴 위치는 canvas_height - margin입니다.

margin = 40

left = margin
top = margin
right = canvas_width - margin
bottom = canvas_height - margin

print(left, top, right, bottom)

40 40 560 360

이 코드는 캔버스 크기와 여백 사이의 관계를 표현합니다. 가로·세로 값을 변경한 뒤 계산 코드를 다시 실행하면 같은 여백 기준에 맞춰 오른쪽과 아래쪽 경계가 계산됩니다. 변수의 값만 수정해도 기존 계산 결과가 자동으로 갱신되는 것은 아닙니다.

화면 구성 설계

앞에서 계산한 중심과 여백을 기준으로 600 × 400 캔버스에 기준점 하나를 정합니다. 기준점은 도형을 그리기 전에 정해 두는 자리이며, 2교시부터는 이 좌표가 도형의 왼쪽 위 모서리가 됩니다. 정렬, 중심, 여백 같은 시각적 의도를 계산 가능한 좌표로 옮기는 적용 단계이며, 조건은 다음과 같습니다.

• 캔버스 크기는 600 × 400픽셀이고, 사방에 최소 40픽셀의 여백을 남깁니다.
• 기준점은 화면의 주된 형태가 놓일 자리이며, 왼쪽·오른쪽·중심 가운데 어느 영역에 둘지 의도를 먼저 정합니다.

먼저 사용할 수 있는 안전 영역을 계산합니다. 왼쪽과 위쪽은 40에서 시작하고, 오른쪽은 600 - 40 = 560, 아래쪽은 400 - 40 = 360입니다. 기준점은 x가 40~560, y가 40~360 사이에 있어야 합니다.

이 좌표들은 예시일 뿐입니다. 값은 안전 영역 안에 있다는 기술적 조건과 구성 의도에 맞는다는 표현적 조건을 함께 만족해야 합니다. 예를 들어 “오른쪽 위”를 의도하면서 y값을 330으로 두면 범위 안에는 있지만 의도에는 맞지 않습니다.

보충 설명

이하 내용은 이미지의 저장 방식과 표시 방식을 구분하기 위한 참고 자료입니다. 좌표 계산과 빈 이미지 생성의 기본 절차를 마친 뒤 필요한 항목을 확인합니다.

래스터와 벡터

오늘 다루는 Pillow는 래스터 이미지를 처리합니다. 래스터는 각 위치의 픽셀 값을 기록합니다. 반면 벡터 그래픽은 선, 곡선, 도형의 수학적 관계를 기록합니다. 두 방식 가운데 하나가 항상 우수한 것은 아닙니다. 사진처럼 미세한 색 변화가 많은 장면은 래스터가 자연스럽고, 로고처럼 크기를 자주 바꾸는 단순한 형태는 벡터가 유리합니다.

해상도, 표시 크기, 파일 용량

해상도는 가로·세로 픽셀 수, 표시 크기는 화면이나 문서에 표시되는 크기, 파일 용량은 저장에 필요한 바이트 수입니다. 세 값은 서로 다른 기준을 나타냅니다.

예를 들어 800 × 600 이미지를 웹페이지에서 가로 400픽셀로 표시해도 원본이 가진 픽셀 수는 그대로입니다. 반대로 작은 원본을 크게 표시하면 화면에서 차지하는 공간은 커지지만 새로운 세부 정보가 저절로 생기지는 않습니다. 따라서 “크게 보인다”와 “많은 픽셀을 가진다”를 같은 뜻으로 사용해서는 안 됩니다.

픽셀 수와 채널 값의 개수

800 × 600 이미지는 480,000개의 픽셀로 구성됩니다. RGB 이미지에서는 픽셀마다 빨강, 초록, 파랑의 세 채널 값을 사용하므로 전체 채널 값의 개수는 480000 * 3, 즉 1,440,000개입니다.

학습 내용 점검

하나의 이미지에 대해 픽셀 수, 좌표 범위, 이동 결과를 함께 확인합니다.

수업 후 개별 복습

유효 좌표 범위와 축 방향을 점검하는 복습 문제입니다. 각 항목을 해결한 뒤 해설과 비교합니다.

2교시 학습 내용

2교시에서는 RGB 색상 튜플을 해석하고, ImageDraw로 사각형·타원·다각형을 생성합니다. 좌표와 색상 값을 도형 명령의 인자로 연결하는 과정이 핵심입니다.

참고 자료

• Google Colab, Welcome to Colaboratory코드 셀 실행과 노트북 사용법을 소개하는 공식 노트북
• Pillow 공식 문서: Concepts이미지 모드, 크기, 왼쪽 위 원점과 픽셀 좌표 체계에 관한 공식 설명
• Pillow 공식 문서: Image.new()모드, 가로·세로 크기, 배경색으로 새 이미지를 만드는 함수의 공식 설명
• Pillow 공식 문서: ImageDraw 좌표왼쪽 위 (0, 0) 원점과 이미지 경계 밖 그리기의 처리 방식
• W3C SVG 2: Introduction점, 선, 곡선 같은 벡터 그래픽 객체를 기술하는 SVG의 공식 개요