리스트에서 격자까지

여러 값을 묶고 두 방향의 반복을 설계하기

핵심 질문

한 줄의 반복을 어떻게 격자로 확장하는가?

문법

리스트, 인덱스, 중첩 for

운영

기본 50분 / 확장 60분, + 10 MIN EXTENSION

• 0-5 min한 줄 반복 회상

  1교시의 i와 x좌표 계산을 다시 추적합니다.

• 5-16 min리스트와 인덱스

  여러 RGB 값을 대괄호로 묶고 0부터 주소를 붙입니다.

• 16-26 min리스트를 반복하기

  색을 하나씩 꺼내고 위치와 색이 함께 바뀌는 과정을 읽습니다.

• 26-39 min중첩 반복과 격자

  행과 열의 실행 순서, 좌표, 전체 도형 수를 표로 추적합니다.

• 39-46 min전체 코드와 오류

  Pillow 프로그램을 묶음별로 읽고 대표 오류를 진단합니다.

• 46-50 min3교시 설계 연결

  목표 달성형 리듬 그리드의 필수 조건을 확인합니다.

0-5분 · 한 줄의 반복을 다시 읽기

1교시에는 range(6)이 0부터 5까지의 값을 만들고, 반복 변수 i가 매번 새로운 값을 받았습니다. 그 값을 x좌표 계산에 연결해 같은 크기의 원 여섯 개를 한 줄로 배치했습니다.

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

이 코드는 위치는 바꾸지만 색은 하나로 고정합니다. 3주차처럼 색상마다 color_1, color_2, color_3라는 변수를 따로 만들 수도 있습니다. 그러나 색이 열 개라면 변수 이름도 열 개가 필요하고, “세 번째 색부터 차례대로 사용한다” 같은 순서 규칙을 코드로 표현하기 어렵습니다. 여러 값을 하나의 순서로 관리하기 위해 리스트를 사용합니다.

5-16분 · 여러 색을 리스트와 인덱스로 다루기

리스트는 여러 값을 정해진 순서로 저장하는 Python 자료 구조입니다. 리스트 전체는 대괄호 [ ]로 감싸고, 각 항목은 쉼표로 구분합니다. 아래 리스트에는 3주차에 배운 RGB 튜플 네 개가 들어 있습니다.

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

바깥쪽 [ ]는 네 색을 하나의 리스트로 묶습니다. 안쪽 ( )는 한 색을 만드는 R, G, B 값 세 개를 묶습니다. 따라서 palette는 “숫자 열두 개”가 아니라 “RGB 색상 네 개가 순서대로 들어 있는 리스트”라고 읽는 편이 정확합니다.

첫 번째 항목의 인덱스는 0이다

리스트 안의 각 위치에는 인덱스라는 주소가 붙습니다. Python의 인덱스는 0부터 시작합니다. 항목이 네 개라면 주소는 0, 1, 2, 3이고 마지막 인덱스는 3입니다. 3주차에 가로 4픽셀의 x좌표가 0부터 3까지였던 것과 같은 개수와 주소의 관계입니다.

palette

palette[2]

16-26분 · 리스트의 색을 하나씩 꺼내 반복하기

for는 range()의 숫자뿐 아니라 리스트의 항목도 앞에서부터 하나씩 꺼낼 수 있습니다. 아래 코드에서 반복 변수 color는 첫 반복에 첫 번째 RGB 튜플, 다음 반복에 두 번째 RGB 튜플을 받습니다.

x = 120

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

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

숫자를 반복할 때와 값을 반복할 때

두 방식 가운데 하나가 항상 더 좋은 것은 아닙니다. 현재 위치 번호와 색을 함께 사용하려면 인덱스가 편리하고, 값 자체만 필요하면 리스트 항목을 직접 꺼내는 방식이 읽기 쉽습니다. 오늘의 격자에서는 행 번호로 y좌표와 색을 함께 정해야 하므로 row를 인덱스로 사용합니다.

26-39분 · 두 겹의 반복으로 행과 열 만들기

한 줄을 여러 줄로 확장하려면 가로 방향과 세로 방향의 반복이 모두 필요합니다. 중첩 반복은 한 반복문 안에 다른 반복문이 들어 있는 구조입니다. 바깥 반복은 현재 행을 선택하고, 안쪽 반복은 그 행의 열을 왼쪽에서 오른쪽으로 채웁니다.

rows = 4
columns = 6

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

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

바깥 반복의 row가 0일 때 안쪽의 column은 0부터 5까지 모두 실행됩니다. 첫 번째 행의 여섯 원을 다 그린 뒤에야 row가 1이 됩니다. 그러면 color = palette[1]로 색이 바뀌고, y좌표도 한 행 아래로 이동합니다.

행 × 열로 전체 실행 횟수 계산하기

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

x = 120 + column * 140

y = 110 + row * 170

들여쓰기 깊이가 실행 관계를 보여 준다

color = palette[row]는 열이 바뀌어도 같은 행에서는 색이 같으므로 바깥 반복 안, 안쪽 반복 밖에 둡니다. 이 줄을 안쪽 반복 안에 넣어도 같은 결과는 만들 수 있지만 같은 색을 열마다 다시 찾게 됩니다. 값이 변하는 가장 가까운 반복 수준에 코드를 두면 구조와 의도가 더 잘 드러납니다.

39-46분 · 전체 Pillow 프로그램과 오류 읽기

아래 코드는 3주차의 이미지 생성, 도형 그리기, 미리보기, 저장 흐름에 오늘 배운 리스트와 중첩 반복을 넣은 완전한 예입니다. 처음부터 한 글자씩 외우지 않고 여섯 묶음으로 나누어 읽습니다.

from PIL import Image, ImageDraw

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

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

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

# 3. 격자 설정
rows = 4
columns = 6
start_x = 120
start_y = 110
gap_x = 140
gap_y = 170

# 4. 행과 열 반복
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 = 40 + column * 9

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

# 5. 결과 저장
output_filename = "week04_rhythm_grid.png"
image.save(output_filename)

# 6. 미리보기
image

46-50분 · 3교시 연결: 나만의 리듬 그리드

3교시는 정해진 시간을 모두 채우는 방식이 아니라, 필수 목표를 완성하고 파일 검사를 통과하면 종료하는 목표 달성형 개인 실습으로 이어집니다. 자동 검사를 예측 가능하게 통과할 수 있도록 아래 조건을 3교시 고정 미션 계약으로 사용합니다. 2교시가 끝날 때에는 코드를 완성하지 않고, 바꿀 팔레트 두 색과 크기 변화량만 미리 결정합니다.

50-60분 · 같은 구조에서 다른 리듬 찾기

아래 세 이미지는 모두 행과 열의 중첩 반복으로 만들 수 있습니다. 코드의 뼈대는 같고 팔레트, 크기, 간격의 관계만 다릅니다. 화면을 보고 먼저 변화 규칙을 추론한 뒤, 어떤 매개변수를 바꾸어야 하는지 연결합니다.

수업 후 개별 복습

아래 내용은 기본 50분과 확장 10분의 현장 설명에 포함하지 않는 이론 복습입니다. 각 매개변수가 일반적인 격자에서 맡는 역할을 읽되, 3교시 미션에서는 표의 3교시 처리 열에 EDIT라고 표시된 값만 수정합니다. 오류가 발생하면 보호된 코드를 새로 고치지 않고 원래 템플릿과 비교해 복구합니다.

매개변수와 예상 결과 연결하기

오류 메시지를 구조와 연결하기

참고 자료

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