4주차 2교시: List와 중첩 반복 기반의 격자 구성

아래는 1교시 코드에서 반복 부분만 발췌한 설명용 코드입니다. 새 노트북에서 실행할 전체 코드는 아래 「Colab 실습 준비」부터 순서대로 안내합니다.

for i in range(6):
    x = 100 + i * 110
    draw.ellipse((x, 220, x + 70, 290), fill=(42, 104, 124))

이 코드는 원의 위치만 변경하고 색은 한 가지로 유지합니다. 원마다 다른 색을 사용하려면 여러 색을 저장하고, 사용할 순서도 정해야 합니다. 이를 위해 여러 값을 하나의 이름 아래 순서대로 관리하는 List를 사용합니다.

List의 필요성

색이 하나라면 color라는 변수 하나로 충분합니다. 색이 네 개라면 color_1부터 color_4까지 변수를 따로 만들 수도 있습니다. 그러나 변수 이름에 번호를 붙여도 하나의 묶음이 되지는 않습니다. Python은 이 이름들만으로 네 변수가 한 팔레트에 속한다는 사실이나 사용할 순서를 알 수 없습니다.

색상 카드를 따로 보관하면서 카드마다 이름표를 붙이는 상황을 생각해 봅니다. 매번 이름표를 지정하는 대신, 하나의 보관함에 카드를 사용할 순서대로 넣으면 “카드를 앞에서부터 차례대로 사용한다”라는 공통 규칙을 적용할 수 있습니다. List는 이처럼 여러 값을 하나로 묶고 순서를 유지하는 역할을 합니다.

음악 재생 목록도 같은 원리로 이해할 수 있습니다. 곡마다 별도로 재생 명령을 내리는 대신, 여러 곡을 한 목록에 담고 정해진 순서로 재생합니다. 목록에 곡을 추가하거나 곡의 순서를 바꾸어도 “목록의 곡을 차례대로 재생한다”라는 규칙은 같습니다. 색상 List도 사용할 색과 순서를 정해 두면, 하나의 반복문으로 각 색에 같은 작업을 수행할 수 있습니다.

개별 변수와 List의 구조 비교

List는 여러 값을 순서대로 저장하는 Python 자료 구조입니다. List 전체는 대괄호 [ ]로 감싸고, 각 항목은 쉼표로 구분합니다. 다음 두 코드는 같은 색 네 개를 저장합니다. List를 사용한 코드에서는 네 색을 palette라는 하나의 이름으로 관리합니다.

color_1 = (37, 62, 78)
color_2 = (218, 100, 74)
color_3 = (222, 169, 73)
color_4 = (72, 126, 116)

palette = [
    (37, 62, 78),
    (218, 100, 74),
    (222, 169, 73),
    (72, 126, 116),
]

바깥쪽 [ ]는 네 색을 하나의 List로 묶습니다. 안쪽 ( )는 한 색을 구성하는 R, G, B 값 세 개를 묶습니다. 따라서 palette는 “숫자 열두 개”가 아니라 “RGB 색상 네 개가 순서대로 들어 있는 List”를 뜻합니다.

다음 두 줄은 위의 palette 선언에 이어지는 설명용 코드입니다. color에 각 항목을 순서대로 대입하고, print(color)를 실행하므로 RGB 튜플 네 개가 한 줄씩 출력됩니다.

for color in palette:
    print(color)

이 반복문에서는 색을 사용할 때마다 변수 이름을 나열하거나 항목 수를 직접 적을 필요가 없습니다. List에 색을 추가해도 같은 반복문으로 모든 색을 출력할 수 있습니다. 이후 실습에서는 각 색을 출력하는 대신, 해당 색으로 원을 그립니다.

Index의 시작값과 항목 위치

List에서 각 항목의 위치를 나타내는 번호를 Index라고 합니다. Python의 Index는 0부터 시작합니다. 항목이 네 개라면 Index는 0, 1, 2, 3이고 마지막 Index는 3입니다. 3주차에서 너비가 4픽셀인 이미지의 x좌표가 0부터 3까지였던 것과 같은 관계입니다.

보관함의 번호는 카드의 색이 아니라 현재 위치를 가리킵니다. 따라서 Index 2가 머스타드색 자체를 뜻하는 것은 아닙니다. 세 번째 칸의 카드를 다른 색으로 교체하면 palette[2]로 선택되는 색도 달라집니다. 음악 재생 목록의 세 번째 곡이 바뀌어도 “세 번째”라는 위치는 그대로인 것과 같습니다.

palette

palette[2]

Colab 실습 준비

Colab에서 새 노트북을 생성합니다. 이 노트북에서 List 항목을 출력한 뒤, 여러 색의 원을 한 줄로 배치하고 격자로 확장하는 코드를 실행합니다. 코드 셀은 Shift+Enter 또는 셀 왼쪽 ▶ 버튼으로 실행합니다.

palette = [
    (37, 62, 78),
    (218, 100, 74),
    (222, 169, 73),
    (72, 126, 116),
]

print(palette[0])
print(palette[1])
print(len(palette))

같은 노트북의 두 번째 셀에 아래 전체 코드를 붙여 넣고 실행합니다. 이미지 생성에 필요한 코드를 포함하므로 이 셀만 실행해도 결과를 확인할 수 있습니다. Image.new()로 빈 이미지를 만들고, ImageDraw.Draw(image)로 draw를 준비한 뒤 원을 그립니다.

from PIL import Image, ImageDraw

canvas_width = 800
canvas_height = 400
background_color = (238, 233, 222)
palette = [
    (37, 62, 78),
    (218, 100, 74),
    (222, 169, 73),
    (72, 126, 116),
]

image = Image.new("RGB", (canvas_width, canvas_height), background_color)
draw = ImageDraw.Draw(image)
x = 120

for color in palette:
    draw.ellipse((x, 220, x + 80, 300), fill=color)
    x = x + 130

image

반복 전에 x = 120으로 시작 위치를 정합니다. 원을 하나 그린 뒤 x = x + 130을 실행해 다음 위치를 준비합니다. 2주차에 배운 재대입을 반복문 안에서 사용하는 예입니다. 첫 번째 원을 그린 뒤 x는 250, 두 번째 원을 그린 뒤 380이 됩니다.

숫자 반복과 값 반복

반복 방식은 필요한 값에 따라 선택합니다. 위치 번호와 색을 함께 사용하려면 Index를 사용하고, 색상 값만 필요하면 List 항목을 직접 가져옵니다. 이번 격자에서는 행 번호로 y좌표와 색을 함께 정해야 하므로 row를 Index로 사용합니다.

이제 행과 열 번호로 위치를 계산합니다. 앞의 x = x + 130 대신 x = 120 + column * 140을 사용하면, 새 행에서 column이 0일 때 x도 다시 120이 됩니다. 여러 행을 배치할 수 있도록 캔버스 크기를 1000 × 820으로 확장하고 시작점과 간격을 설정합니다.

동일한 크기·색상의 격자 구성

세 번째 셀에 아래 전체 코드를 붙여 넣습니다. 코드를 실행해 첫 번째 색과 지름 40을 사용한 원이 네 행으로 배치되는지 확인합니다.

from PIL import Image, ImageDraw

canvas_width = 1000
canvas_height = 820
background_color = (238, 233, 222)
palette = [
    (37, 62, 78),
    (218, 100, 74),
    (222, 169, 73),
    (72, 126, 116),
]

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

rows = 4
columns = 6

for row in range(rows):
    color = palette[0]

    for column in range(columns):
        x = 120 + column * 140
        y = 110 + row * 170
        size = 40
        draw.ellipse((x, y, x + size, y + size), fill=color)

image

행별 색상 변경

세 번째 셀에서 color = palette[0] 한 줄을 아래처럼 바꿉니다. 앞의 들여쓰기 네 칸은 유지합니다. 이제 행 번호를 색상 List의 Index로 사용합니다.

    color = palette[row]

세 번째 셀 전체를 다시 실행합니다. 원의 위치·개수·크기가 유지되는지, 첫 번째 행에는 첫 번째 색이, 두 번째 행에는 두 번째 색이 적용되는지 확인합니다. 같은 행에서는 row 값이 같으므로 원 여섯 개에 같은 색이 적용됩니다.

열별 크기 변경

같은 셀에서 size = 40 한 줄을 아래처럼 바꿉니다. 앞의 들여쓰기 여덟 칸은 유지합니다. 1교시에 살펴본 크기 변화 규칙을 열 번호에 연결하는 단계입니다.

        size = 40 + column * 9

실행 전에 column이 0, 1, 5일 때 크기를 계산합니다. 각각 40, 49, 85입니다. 세 번째 셀 전체를 다시 실행하면 행별 색은 그대로이고, 각 행의 원이 오른쪽으로 갈수록 커집니다. 새 행의 첫 원은 column이 0이므로 지름이 다시 40이 됩니다.

행과 열의 개수

바깥 반복이 네 번 실행되고, 각 행마다 안쪽 반복이 여섯 번 실행됩니다. 따라서 도형 명령의 전체 실행 횟수는 rows * columns, 즉 4 * 6 = 24입니다. 안쪽 반복이 전체에서 한 번만 실행되는 것이 아니라 각 행마다 처음부터 다시 실행된다는 점이 핵심입니다.

x = 120 + column * 140

y = 110 + row * 170

들여쓰기와 실행 관계

color = palette[row]는 열이 바뀌어도 같은 행에서는 색이 같으므로 바깥 반복 안, 안쪽 반복 밖에 둡니다. 이 문장을 안쪽 반복문에 작성해도 결과는 같지만, 열이 바뀔 때마다 같은 색을 다시 선택합니다. 행마다 달라지는 값은 행 반복문에서 계산하면 코드의 역할을 명확히 구분할 수 있습니다.

계산식의 설정 변수 정의

size = 40 + column * 9에서 40은 첫 열에 있는 원의 지름, 9는 열 번호가 1 증가할 때 지름에 더하는 값입니다. 각각 base_size와 size_step이라는 이름을 붙이면, 3교시에서 수정할 값을 쉽게 찾을 수 있습니다. 아래 표는 기존 계산식과 새 변수의 대응을 보여 줍니다.

설정 변수 아래의 계산식은 size = base_size + column * size_step이 됩니다. 숫자를 같은 값의 변수로 바꾸어도 실행 결과는 같습니다. len(palette)는 팔레트의 항목 수에 맞춰 행 수를 계산하지만 캔버스 크기까지 바꾸지는 않으므로, 이번 예제에서는 색 네 개를 유지하고, 다음 절에서 도형이 캔버스 범위에 포함되는지 확인합니다.

# 1. 도구 준비
from PIL import Image, ImageDraw

# 2. 캔버스와 팔레트
canvas_width = 1000
canvas_height = 820
background_color = (238, 233, 222)

palette = [
    (37, 62, 78),
    (218, 100, 74),
    (222, 169, 73),
    (72, 126, 116),
]

# 3. 이미지와 그리기 도구
image = Image.new(
    "RGB",
    (canvas_width, canvas_height),
    background_color,
)
draw = ImageDraw.Draw(image)

# 4. 격자 설정
rows = len(palette)
columns = 6
start_x = 120
start_y = 110
gap_x = 140
gap_y = 170
base_size = 40
size_step = 9

# 5. 행과 열 반복
for row in range(rows):
    color = palette[row]

    for column in range(columns):
        x = start_x + column * gap_x
        y = start_y + row * gap_y
        size = base_size + column * size_step

        draw.ellipse(
            (x, y, x + size, y + size),
            fill=color,
        )

# 6. 저장과 미리보기
output_filename = "week04_rhythm_grid.png"
image.save(output_filename)
image

마지막 원의 캔버스 범위 확인

도형 명령의 실행 횟수와 모든 도형이 이미지 범위에 포함되는지는 별도로 확인해야 합니다. 이 예제에서는 열 번호가 증가할수록 x좌표와 원의 크기가 커지고, 행 번호가 증가할수록 y좌표가 커집니다. 따라서 마지막 행의 마지막 원이 오른쪽과 아래쪽으로 가장 멀리 배치됩니다. 마지막 Index는 row = rows - 1, column = columns - 1입니다.

왼쪽과 위쪽 시작점도 0 이상이므로 현재 격자의 모든 원은 캔버스 범위에 포함됩니다. 색을 추가해 행이 늘어날 때는 이 계산을 다시 해야 합니다. len(palette)로 유효한 색을 선택하더라도 일부 도형이 캔버스 범위를 벗어날 수 있습니다.

앞서 작성한 네 개의 기준 셀은 유지하고, 노트북 아래에 연습 셀을 추가합니다. 전체 코드의 복제본을 사용하는 실습은 이미지 생성부터 셀 전체를 실행합니다. 빈칸 ____이 있는 코드는 빈칸을 모두 완성한 뒤 실행합니다.

실습 1. Index 기반 색상 수정

palette = [
    (37, 62, 78),
    (218, 100, 74),
    (222, 169, 73),
    (72, 126, 116),
]

palette[____] = (64, 120, 180)
print(palette[____])
print(len(palette))

palette[1] = (64, 120, 180)
print(palette[1])
print(len(palette))

실습 2. Index 반복과 원 배열 재현

for i in range(len(____)):
    x = 120 + i * ____
    color = palette[____]
    draw.ellipse((x, 220, x + 80, 300), fill=color)

for i in range(len(palette)):
    x = 120 + i * 130
    color = palette[i]
    draw.ellipse((x, 220, x + 80, 300), fill=color)

실습 3. 행과 열의 실행 순서 출력

for row in range(2):
    for column in range(3):
        print(____, ____)

for row in range(2):
    for column in range(3):
        print(row, column)

실습 4. 색상·크기의 변화 방향 변경

for row in range(rows):
    for column in range(columns):
        x = start_x + column * gap_x
        y = start_y + row * gap_y
        color = palette[column]
        size = base_size + row * size_step
        draw.ellipse((x, y, x + size, y + size), fill=color)

선택 실습. Index 오류 재현과 수정

palette = [
    (37, 62, 78),
    (218, 100, 74),
    (222, 169, 73),
    (72, 126, 116),
]

for i in range(6):
    print(palette[i])

for i in range(len(palette)):
    print(palette[i])

수업 후 개별 복습

각 매개변수가 격자의 어떤 속성을 결정하는지 확인합니다. 3교시 실습에서는 표의 3교시 수정 범위 열에 EDIT로 표시된 항목만 수정합니다. 수정 금지 영역에서 오류가 발생하면 원래 템플릿과 비교해 해당 코드를 복원합니다.

매개변수와 예상 결과

오류 메시지와 코드 구조

3교시 연결: 나만의 리듬 그리드

3교시는 제출 정보와 검사 셀이 포함된 실습 템플릿의 사본에서 시작합니다. 템플릿이 5열·크기 증가량 0인 이유는 한 열 추가와 크기 변화의 효과를 직접 비교하기 위해서입니다. 2교시에서 학습한 반복 구조를 바탕으로, 템플릿의 시작 설정을 목표 조건에 맞게 수정합니다.

3교시 템플릿은 세로 간격을 110으로 설정해 최대 여섯 행을 배치할 수 있도록 구성했습니다. 가장 큰 설정인 6행·6열·size_step = 10에서도 마지막 원의 크기는 44 + 5 * 10 = 94, 오른쪽 경계는 70 + 5 * 150 + 94 = 914, 아래쪽 경계는 60 + 5 * 110 + 94 = 704입니다. 모든 원이 너비 1000, 높이 760인 캔버스 범위에 포함되므로 제공된 배치값은 유지합니다.

색상 변경 여부는 다음에 제시한 3교시 템플릿의 시작 팔레트를 기준으로 판단합니다. 변경할 색상 두 개의 Index와 새 RGB 값을 기록합니다. 실제 변경은 다음 교시의 템플릿 EDIT 셀에서 수행합니다.

palette = [
    (36, 63, 80),
    (111, 143, 126),
    (211, 155, 42),
    (201, 111, 93),
]

3교시 실습 노트북 준비로 이동 → 템플릿의 기준 코드를 실행해 격자를 확인한 뒤, 이번 교시에서 정한 두 색과 크기 증가량을 적용합니다.

• Python 공식 튜토리얼: Lists대괄호로 만드는 List, 0부터 시작하는 Index, 항목 접근에 관한 공식 설명
• Python 공식 튜토리얼: for Statements와 range()List와 정수 범위를 순서대로 반복하는 문장의 공식 설명
• Pillow 공식 문서: ImageDraw좌표 경계 상자, fill 색상, 타원을 포함한 도형 명령의 공식 사용법