4주차 1교시: 반복문과 시각적 리듬

draw.ellipse((80, 220, 150, 290), fill=(42, 104, 124))

같은 크기의 원을 가로로 다섯 개 배치하려면 x좌표만 조금씩 바꾼 명령을 다섯 번 작성할 수 있습니다. 3주차에 배운 도형 명령을 사용해 같은 크기와 색의 원 다섯 개를 그리는 방식입니다.

draw.ellipse((80, 220, 150, 290), fill=(42, 104, 124))
draw.ellipse((190, 220, 260, 290), fill=(42, 104, 124))
draw.ellipse((300, 220, 370, 290), fill=(42, 104, 124))
draw.ellipse((410, 220, 480, 290), fill=(42, 104, 124))
draw.ellipse((520, 220, 590, 290), fill=(42, 104, 124))

이처럼 같은 명령을 여러 줄 작성하는 방식을 수동 반복이라고 합니다. 반복문으로도 같은 출력, 즉 원 다섯 개의 배열을 만들 수 있습니다. 다만 수동 반복에서는 원을 스무 개로 늘리거나 간격을 변경할 때 여러 줄의 좌표를 다시 계산해야 합니다. 이 과정에서 좌표를 잘못 입력하면 일부 원이 배치 규칙에서 벗어납니다. 반복문은 반복되는 구조와 달라지는 값을 분리해 기록하는 방법입니다.

음악의 리듬이 소리와 침묵의 시간적 배열에서 생기듯, 시각적 리듬은 형태와 빈 공간의 배열에서 생깁니다. 간격이 일정하면 안정적이고 예측 가능한 흐름이 만들어집니다. 간격이 점차 좁아지면 시선이 더 빠르게 이동하는 듯한 인상을 줄 수 있습니다. 같은 흐름 안에서 한 요소만 색이나 방향이 달라지면 그 위치가 강조점이 됩니다.

공식 사례의 반복 규칙

아래 구조도는 원작 이미지를 복제한 자료가 아닙니다. 각 작가가 반복 단위와 규칙을 구성하는 방식을 수업용으로 단순화한 개념도입니다. 실제 작품과 정확한 제작 맥락은 각 카드에 연결된 공식 자료에서 확인합니다.

RULE / VARIATION

Vera Molnár, 규칙과 변주의 작업 ↗

몰나르는 단순한 기하학적 요소를 체계적으로 반복하고, 제한된 범위의 이동이나 변형을 더해 질서와 어긋남을 함께 탐구했습니다. 코드는 수작업으로 모두 계산하기 어려운 다양한 변형을 시도하는 도구로 사용되었습니다.

입력

사각형, 위치, 회전과 같은 기본 요소

규칙

격자에 반복 배치하고 일부 매개변수를 제한된 범위에서 변경

출력

질서 안의 미세한 차이가 드러나는 이미지

INTERVAL / PERCEPTION

Bridget Riley, 반복과 지각의 회화 ↗

라일리의 작업은 단순한 형태와 대비, 간격의 정교한 배열을 통해 정지된 화면이 진동하거나 흐르는 듯한 인상을 줍니다. 빈 공간도 반복 단위만큼 중요한 설계 요소입니다.

입력

선, 원, 대비되는 색과 빈 공간

규칙

형태의 간격과 방향을 일정하게 유지하거나 점진적으로 변경

출력

시선의 속도와 움직임을 유도하는 평면

INSTRUCTION / SYSTEM

Sol LeWitt, Untitled from Squares with a Different Line Direction in Each Half Square ↗

이 작품은 1971년에 제작된 열 점의 에칭 포트폴리오 가운데 한 점입니다. 르윗은 단순한 선과 정사각형을 기본 어휘로 삼고, 두 판을 회전하거나 겹쳐 찍는 체계를 통해 여러 구성을 만들었습니다.

입력

두 부분으로 나눈 정사각형과 서로 다른 방향의 선

규칙

두 에칭 판을 회전하고 겹쳐 찍어 구성을 변주

출력

하나의 체계에서 파생된 열 점의 에칭 포트폴리오

for의 필요성

앞에서 살펴본 작품들은 하나의 규칙을 여러 요소에 적용해 구성을 만듭니다. 코드에서도 매번 명령을 새로 작성하는 대신, 공통으로 수행할 작업을 한 번 정의하고 여러 값에 적용할 수 있습니다. 이때 사용하는 Python 문장이 for입니다.

종이에 같은 도장을 다섯 번 찍는 작업에 비유할 수 있습니다. “첫 위치에 찍는다, 두 번째 위치에 찍는다”처럼 동작을 모두 나열할 수도 있지만, “정해진 다섯 위치마다 같은 도장을 한 번씩 찍는다”라고 규칙을 정할 수도 있습니다. 도장을 찍는 동작과 적용할 위치를 구분하면 위치가 늘어나도 동작을 매번 새로 설명할 필요가 없습니다. for도 대상에서 값을 하나씩 가져와 같은 코드 블록을 실행합니다.

도형을 그리기 전에 숫자 출력으로 두 방식을 비교합니다. 목표는 0부터 4까지의 숫자를 한 줄에 하나씩 출력하는 것입니다.

print(0)
print(1)
print(2)
print(3)
print(4)

for i in range(5):
    print(i)

두 코드는 같은 결과를 출력합니다. for 코드에서는 i에 0, 1, 2, 3, 4가 차례대로 저장됩니다. 따라서 print(i)를 코드에 한 번 작성했어도 실제로는 다섯 번 실행하며, 출력 결과도 다섯 줄입니다.

0
1
2
3
4

for를 사용하면 출력할 값이 늘어나거나 모든 값에 적용할 계산이 바뀌어도, 반복할 범위와 공통 명령을 각각 한곳에서 수정할 수 있습니다.

이처럼 for는 반복할 명령과 값을 구분해 관리하는 데 유용합니다. 다만 위치나 색의 변화는 코드로 직접 정해야 합니다. 도장 비유에서도 찍을 위치를 지정해야 하는 것처럼, 원을 나란히 그리려면 반복 변수로 매번 다른 x좌표를 계산해야 합니다. 이 과정은 뒤의 반복 변수와 시각 요소에서 연결합니다.

for 문장의 다섯 구성 요소

앞의 for i in range(5):는 “범위의 값을 하나씩 반복 변수에 저장하고, 들여쓴 문장을 실행한다”라고 읽습니다. 같은 문장을 구성 요소별로 나누어 확인합니다.

반복 변수 i에는 매번 새로운 값이 저장됩니다. 이 값을 통해 현재 반복 순서를 확인할 수 있습니다. 이 예제에서는 첫 반복에 0, 다음 반복에 1이 저장됩니다. i는 Python이 정한 필수 이름이 아니므로 step이나 circle_number처럼 바꿀 수 있지만, 정수를 순서대로 사용하는 반복문에서는 관례적으로 i를 자주 사용합니다.

콜론과 들여쓰기

for 줄 끝의 콜론 :은 반복할 코드가 아래에 이어진다는 표시입니다. 다음 줄 앞의 들여쓰기는 실제로 반복되는 문장의 범위를 나타냅니다. 따라서 들여쓰기를 변경하면 반복되는 문장의 범위도 달라집니다.

for i in range(3):
    print("원", i)

for i in range(3):
    print("원", i)
print("완료")

Colab 실습 준비

Colab에서 새 노트북을 생성합니다. 이 노트북에서 반복문의 출력 결과와 변수의 변화를 확인한 뒤, 원을 반복해서 그리는 코드를 실행합니다. 코드 셀은 Shift+Enter 또는 셀 왼쪽 ▶ 버튼으로 실행합니다.

반복 출력 실행

아래 코드를 새 셀에서 실행해 range(5)가 만드는 값을 확인합니다.

for i in range(5):
    print(i)

range(시작값, 끝값, 증가값)처럼 최대 세 값을 사용할 수 있습니다. 값을 하나만 지정하면 시작값은 0, 증가값은 1로 정해집니다. 이번 주 실습에서는 먼저 range(개수)를 사용하고, 간격은 좌표 계산식에서 조정합니다. 한 번에 한 조건씩 변경하면 실행 결과가 달라진 원인을 확인하기 쉽습니다.

반복 상태 추적과 코드 실습

먼저 표에서 반복 변수의 값 → 실행되는 문장 → 출력의 관계를 확인합니다. 출력 예측 문제를 푼 뒤에는 아래의 네 가지 기초 실습에서 코드를 직접 작성하고 수정합니다.

for step in range(1, 6):
    print(step * 10)

다음 실습은 앞에서 만든 Colab 노트북에서 수행합니다. 실습마다 새 코드 셀을 추가하고, 빈칸 ____은 알맞은 값으로 바꾼 뒤 실행합니다. 각 셀에서 출력 예측 → 코드 작성 → 실행 → 결과 비교를 수행한 뒤 정답을 펼쳐 확인합니다. 그림을 그리기 전 단계이므로 아래 코드는 Pillow 준비 없이 실행할 수 있습니다.

기초 실습 1. 반복 횟수 조정

for i in range(____):
    print(i)

for i in range(6):
    print(i)

기초 실습 2. 시작값과 증가값 조정

for step in range(2, 12, ____):
    print(step)

for step in range(2, 12, 2):
    print(step)

기초 실습 3. 반복 변수와 계산 결과 출력

for i in range(5):
    value = 20 + i * ____
    print(i, value)

for i in range(5):
    value = 20 + i * 15
    print(i, value)

기초 실습 4. 들여쓰기와 출력 순서 수정

for i in range(3):
    print("처리", i)
    print("완료")

for i in range(3):
    print("처리", i)
print("완료")

좌표의 배치 규칙 도출

1. 시작 위치 확인: 첫 원의 왼쪽 x좌표는 80입니다.
2. 차이 계산: 190 - 80, 300 - 190, 410 - 300, 520 - 410은 모두 110입니다.
3. 이동 횟수 확인: 첫 위치에서는 아직 이동하지 않았으므로 0번, 두 번째 위치에서는 1번, 다섯 번째 위치에서는 4번 이동한 것으로 볼 수 있습니다.
4. 식으로 정리: 현재 위치 = 시작 위치 + 이동 횟수 × 배치 간격입니다. range(5)의 i가 0부터 4까지 변하므로 이동 횟수로 사용할 수 있습니다.

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

반복할 때마다 새로운 x좌표를 계산하고, 그 위치에 원을 하나씩 새로 그립니다. 첫 반복에서 i = 0이므로 x는 80입니다. 다음 반복에서 i = 1이므로 x는 190입니다. 다섯 번의 반복은 수동 반복과 같은 출력을 만듭니다.

개수, 시작 위치, 배치 간격

개수는 반복 횟수, 시작 위치는 배열 전체의 위치, 배치 간격은 이웃한 원 사이의 거리를 결정합니다. 한 번에 한 값만 바꾸면 어떤 수정이 어떤 결과를 만드는지 구분할 수 있습니다.

원의 반복 배치

같은 노트북에 새 셀을 추가해 반복문으로 원을 그립니다. Image.new()로 이미지를 만들고 ImageDraw.Draw()로 그리기를 준비한 다음, 반복문 안에서 원을 그립니다. 셀의 마지막 image는 완성된 이미지를 표시합니다.

from PIL import Image, ImageDraw

canvas_width = 800
canvas_height = 400
background_color = (244, 239, 229)
fill_color = (42, 104, 124)

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

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

image

반복 실행과 도형 누적

코드는 이미지 생성 → i에 값 저장 → x 계산 → 원 그리기 순서로 실행됩니다. 원을 그린 뒤에는 i에 다음 값을 저장하고 좌표 계산과 그리기를 반복합니다. 이미지 생성은 반복문 밖에 있으므로 한 번만 실행됩니다.

기준 코드 셀을 복제하고 for 줄부터 도형을 그리는 줄까지를 아래 코드로 교체합니다. 셀을 처음부터 실행하면 이미지가 새로 생성되므로 이전 그림과 겹치지 않습니다. 간격이 점차 넓어지는 계산은 뒤의 선택 확장에서 다룹니다.

왼쪽 위 위치 고정과 크기 변경

for i in range(6):
    x = 100 + i * 110
    size = 30 + i * 10
    draw.ellipse((x, 220, x + size, 220 + size), fill=fill_color)

왼쪽 위 위치는 기준과 같고, 지름은 30, 40, 50, 60, 70, 80으로 커집니다. 크기 계산에 사용한 size를 오른쪽 x좌표와 아래쪽 y좌표에 모두 적용합니다.

배치 간격, 빈 공간, 중심의 차이

왼쪽 x좌표 사이 거리가 같아도 원 사이의 빈 공간은 달라질 수 있습니다. 크기 변화 코드의 첫 원은 x = 100에서 시작해 130에서 끝납니다. 다음 원은 210에서 시작하므로 경계 사이 거리는 210 - 130 = 80입니다. 두 번째 원은 지름이 40이므로 다음 원까지의 거리가 70으로 줄어듭니다.

중심은 (x + size / 2, 220 + size / 2)입니다. 왼쪽 위 위치를 유지한 채 크기를 키우면 중심은 오른쪽 아래로 이동하고, 원 사이의 빈 공간은 줄어듭니다. 여기서 빈 공간의 수치는 이웃한 경계 상자 사이의 가로 거리입니다. 원 둘레 사이의 최단 거리를 계산한 값은 아닙니다.

for i in range(6):
    center_x = 135 + i * 110
    center_y = 255
    size = 30 + i * 10
    radius = size / 2
    draw.ellipse((center_x - radius, center_y - radius,
                  center_x + radius, center_y + radius), fill=fill_color)

시각적 인상과 코드 규칙의 관계

시각적 인상을 설명할 때에는 관찰한 위치와 그 차이를 만든 수치를 함께 기록합니다. 시선의 이동은 사람마다 다를 수 있으므로, 자신의 해석을 뒷받침할 근거를 화면과 코드에서 찾아 제시합니다.

각 예제는 별도의 기준 코드 복제본에서 실행합니다. image = Image.new(...)부터 셀 끝의 image까지를 해당 코드로 교체합니다. 위쪽의 import와 색·캔버스 변수는 유지합니다.

A. 고정 좌표의 반복

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

for i in range(6):
    x = 100
    draw.ellipse((x, 220, x + 70, 290), fill=fill_color)

image

B. 반복문 밖의 도형 명령

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

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

image

C. 반복문 안의 이미지 재생성

for i in range(6):
    image = Image.new("RGB", (canvas_width, canvas_height), background_color)
    draw = ImageDraw.Draw(image)
    x = 100 + i * 110
    draw.ellipse((x, 220, x + 70, 290), fill=fill_color)

image

수업 후 개별 복습

수업 중 풀지 못한 문항은 표시해 두었다가 수업 후 복습합니다. 먼저 답을 작성한 뒤 정답을 펼쳐 확인합니다. 각 답에는 결과만 쓰지 말고 range()의 실제 값이나 좌표 계산을 함께 기록합니다.

원 여섯 개의 기준 코드 셀을 복제하고 반복문을 아래 코드로 교체합니다. 먼저 표에서 x좌표의 차이가 어떻게 변하는지 확인한 뒤 전체 셀을 실행합니다.

for i in range(6):
    x = 100 + i * 80 + i * i * 5
    draw.ellipse((x, 220, x + 70, 290), fill=fill_color)

i * i * 5의 값은 0, 5, 20, 45, 80, 125입니다. 추가 이동량의 차이가 5, 15, 25, 35, 45로 커지므로 기본 간격 80에 더해지는 값도 커집니다. 그 결과 배치 간격이 85, 95, 105, 115, 125로 증가합니다. 원의 지름은 70으로 유지하므로 빈 공간도 오른쪽으로 갈수록 넓어집니다.

2교시에서는 원 반복 그리기의 기준 코드를 복습한 뒤, 색상 리스트의 항목을 순서대로 사용하는 반복문을 작성합니다.

• Python 공식 튜토리얼: for Statements와 range()시퀀스의 항목을 순서대로 반복하는 for 문장과 끝값을 포함하지 않는 range의 공식 설명
• Pillow 공식 문서: ImageDraw좌표, 채우기 색상, 타원 등 도형 명령의 공식 사용법
• La Biennale di Venezia: Vera Molnár기하학적 형태와 컴퓨터 기반 체계를 탐구한 작가의 공식 기관 소개
• Bridget Riley Art Foundation: Catalogue Raisonné초기 흑백 작업과 반복 구조를 확인할 수 있는 공식 디지털 카탈로그
• MoMA: Sol LeWitt, Untitled from Squares with a Different Line Direction in Each Half Square두 에칭 판의 회전과 겹침을 체계적으로 변주한 1971년 작품의 공식 소장품 기록