3주차 3교시: 기하학적 이미지 미션 | Contents Programming Practice

좌표와 색상의 적용

형식: 목표 달성형 개인 실습
최대 시간: 50분
완료 판정: 기술 검사 + 변경 기록
제출물: .ipynb + .png

실습 목표

1교시의 기준점·중심·여백을 도형 배치에 적용
사각형의 평행 이동과 타원의 크기 변경 구분
좌표를 유지한 RGB 색상 역할 조정
동일한 좌표·색상에서 그리기 순서에 따른 겹침 비교
변경 값, 실행 결과와 설계 의도의 관계 기록
최종 이미지 선택, PNG 저장과 전체 재실행

1교시에서 정한 위치를 2교시의 도형 명령에 연결하는 실습입니다. 코드는 제공되며, 설계 기준 → 값의 변경 → 재실행 → 결과 비교를 직접 수행합니다. 한 속성씩 변경하되, 평행 이동처럼 한 속성을 조정하기 위해 여러 좌표가 함께 바뀌는 경우도 구분합니다.

실습 과정

STEP 0기준 이미지준비와 기준 결과 확인
STEP 1설계 기준기준점과 표현 의도
STEP 2위치와 크기사각형 이동과 타원 비율
STEP 3색상 조정두 색상 역할의 변경
STEP 4겹침 비교두 순서 비교와 변경 기록
STEP 5PNG 저장최종 선택 이미지 저장

완료 기준

설계 기준선택한 기준점과 위치 조정의 이유를 기록합니다.
위치와 크기사각형은 크기를 유지하며 이동하고, 타원은 가로·세로 경계 차이를 변경합니다.
색상 조정색상 역할을 최소 두 개 변경하고 다섯 역할을 서로 다른 RGB 값으로 지정합니다.
겹침 비교사각형과 타원의 순서 A·B를 비교하고 최종 순서를 선택합니다.
도형 범위세 도형을 안전 영역 안에 배치하고 각 내부색이 보이도록 구성합니다.
변경 기록위치·크기·색상·순서 네 항목의 변경 값과 결과를 노트북에 작성합니다.
파일과 재실행새 세션의 전체 실행으로 기술 검사를 통과하고 최종 PNG를 확인합니다.
두 파일 제출변경 기록과 실행 결과가 포함된 week03_학번_이름.ipynb, 최종 week03_학번_이름.png를 제출합니다.

기술 검사와 학습 확인

자동 검사는 입력 범위, 이동·크기 변경, 도형 가시성, 순서별 결과 차이와 최신 PNG를 확인합니다. 설명 내용의 타당성과 미적 완성도는 자동 판정하지 않습니다. 변경 기록에서 값과 결과의 관계를 확인하는 과정이 별도로 필요합니다.

실습 환경 준비

위의 시작 버튼으로 실습 노트북을 받습니다. Colab에서 파일을 업로드하면 이 페이지와 같은 단계로 구성된 수정본을 사용할 수 있습니다. 웹 안내와 노트북의 STEP 번호는 같습니다.

실습 노트북 받기로 .ipynb 파일을 내려받습니다.
Colab에서 업로드를 열고, 노트북 선택 창의 업로드 탭에서 파일을 선택합니다.
파일 → Drive에 사본 저장 후 파일명을 week03_학번_이름.ipynb로 변경합니다.
코드의 EDIT 영역과 변경 기록 텍스트 셀을 수정합니다. DO NOT EDIT 영역은 그대로 둡니다.

노트북 업로드

Colab에 이미 다른 노트북이 열려 있다면 파일 → 노트북 열기의 업로드 탭에서 내려받은 파일을 선택합니다. 받은 파일이 이미지나 웹페이지가 아니라 .ipynb인지 확인합니다.

STEP 0 · 기준 이미지

노트북의 STEP 0 셀만 수정 없이 실행합니다. 이 셀이 도구와 기준값을 준비하고 2교시의 이미지를 표시합니다. 아직 값을 변경하거나 마지막 검사까지 실행하지 않습니다.

실행STEP 0 준비와 기준 이미지
확인600 × 400, 사각형 → 타원 → 삼각형의 순서

기준 이미지에서 사각형의 위치, 타원의 비율, 색상과 겹침 순서를 구분해 수정합니다. 최종 결과는 설계 기준과 변경 기록으로 설명합니다.

기준 이미지 실행 오류

STEP 0 셀 전체를 실행했는지 확인합니다. 이미지가 표시되지 않으면 마지막 display(image)까지 입력되어 있는지 확인하고, 오류가 있으면 마지막 메시지의 종류와 발생 위치를 살펴봅니다.

STEP 1 · 설계 기준

1교시의 화면 구성 설계에서 정한 기준점을 사각형의 왼쪽 위 위치로 사용합니다. 그 점의 x와 y를 anchor_x, anchor_y에 입력하고, 배치 의도를 변경 기록에 남깁니다.

기본값 (50, 60)은 기준 이미지의 위치입니다. 자신의 기준점으로 바꾼 뒤 도형 전체가 들어갈 범위를 확인합니다. 학번·이름·표현 의도·파일명은 따옴표 안에 작성합니다.

# STEP 1 / EDIT: 제출 정보와 설계 기준점
student_id = "학번"
student_name = "이름 또는 별명"
design_intent = "표현 의도"
output_filename = "week03_학번_이름.png"
anchor_x = 50
anchor_y = 60

기준점과 도형의 안전 영역

1교시의 중심은 (300, 200)이며, 여백 40을 기준으로 사용할 안전 영역은 x=40~560, y=40~360입니다. 기준 사각형은 가로 경계 차이 280, 세로 경계 차이 180을 유지합니다.

기준점에서 사각형의 범위까지
항목	계산	확인 기준
왼쪽 위	`(anchor_x, anchor_y)`	선택한 기준점과 위치 의도
오른쪽 아래	`(anchor_x + 280, anchor_y + 180)`	오른쪽 560, 아래쪽 360 이내
가능한 기준점	x는 40~280, y는 40~180	현재 크기의 사각형 전체가 안전 영역에 포함

예를 들어 (150, 200)을 사용하면 아래쪽 경계가 200 + 180 = 380이 됩니다. 점은 안전 영역 안에 있지만 도형 전체는 벗어납니다. 이 경우 y를 180 이하로 조정하고, 원래 의도와 조정 이유를 기록합니다.

점의 위치와 도형의 범위

기준점 하나가 범위 안에 있다는 사실만으로 도형 전체의 배치를 판단할 수는 없습니다. 사각형의 두 모서리까지 확인합니다. 이 단계에서는 크기를 줄이지 않고 기준점의 위치를 조정합니다.

STEP 2 · 위치와 크기

같은 셀에서 두 작업을 순서대로 수행합니다. 먼저 타원은 기준값으로 두고 사각형의 이동 결과를 확인합니다. 다음으로 기준점을 유지한 채 타원의 크기 또는 비율을 변경합니다.

# STEP 2 / EDIT: 기준점 연결과 타원의 크기
rectangle_box = (anchor_x, anchor_y, anchor_x + 280, anchor_y + 180)
ellipse_box = (230, 100, 510, 360)
triangle_points = (
    (390, 55),
    (560, 220),
    (340, 220)
)

이동과 크기 변경의 구분
작업	변경 기준	유지할 조건
사각형 이동	STEP 1의 기준점 변경 후 STEP 1 → 2 실행	가로·세로 경계 차이 280·180
타원 크기 변경	`ellipse_box`의 경계값 하나 변경 후 STEP 2 실행	다른 도형의 위치와 색상
결과 비교	이동 방향과 가로·세로 차이 확인	사각형·타원의 내부색이 모두 보이는 배치

사각형은 오른쪽 경계를 anchor_x + 280, 아래쪽 경계를 anchor_y + 180으로 계산하므로 크기를 유지하면서 이동합니다. 이 두 상수는 변경하지 않습니다. 타원의 아래쪽 경계 360을 320으로 바꾸면 가로 차이 280은 유지되고 세로 차이는 260에서 220으로 줄어듭니다.

두 작업으로 도형 좌표 묶음을 최소 두 개 변경합니다. 삼각형은 기준 좌표를 유지해도 됩니다. 사각형과 타원의 가로·세로 경계 차이는 각각 60 이상, 세 도형의 모든 경계와 점은 안전 영역 안에 유지합니다.

한 속성씩 변경

평행 이동은 여러 좌표를 함께 바꾸지만 위치라는 한 속성을 조정하는 작업입니다. 위치 → 크기 → 색상 → 순서를 한 단계씩 바꾸고, 매번 이미지를 다시 생성해 비교합니다. 이전 출력은 자동으로 갱신되지 않습니다.

사각형·타원의 경계 오류

(left, top, right, bottom)에서 왼쪽 < 오른쪽, 위 < 아래인지 확인합니다. 안전 영역 x=40~560, y=40~360과 가로·세로 경계 차이 60 이상을 함께 확인합니다. 기준점 수정은 STEP 1을 실행한 뒤 STEP 2에 반영합니다.

삼각형의 범위와 가시성

세 점은 안전 영역 안에 두고 한 직선 위에 놓지 않습니다. 기본 삼각형을 유지해도 됩니다. 도형이 가려지면 위치와 크기를 확인하고, STEP 4에서 그리기 순서에 따른 차이도 비교합니다.

STEP 3 · 색상 조정

좌표를 유지한 채 배경·주조·보조·강조·윤곽 가운데 색상 역할을 최소 두 개 변경합니다. 먼저 한 RGB 채널을 조정하고 셀 전체를 실행해 결과를 확인한 뒤 다음 색상을 조정합니다.

# STEP 3 / EDIT: 다섯 역할 중 최소 두 색상 조정
background_color = (244, 239, 229)
primary_color = (235, 86, 75)
secondary_color = (48, 95, 180)
accent_color = (244, 190, 55)
outline_color = (28, 31, 38)

각 채널은 따옴표 없는 0~255 정수이며, 다섯 역할에는 서로 다른 튜플을 사용합니다. 팔레트와 전체 이미지가 함께 표시되므로 같은 좌표에서 색상만 달라졌는지 확인합니다. 변경한 두 역할의 원래 RGB와 새 RGB를 기록합니다.

색상 변경과 이미지 재생성

이 셀은 Image.new()와 ImageDraw.Draw()를 다시 실행한 뒤 같은 좌표로 도형을 그립니다. 색상 변수의 수정과 이미지의 재생성은 별개의 처리입니다. 숫자만 수정하고 셀을 실행하지 않으면 출력에 반영되지 않습니다.

RGB 범위와 역할 구분

튜플의 세 채널이 0~255 정수인지 확인합니다. 다섯 역할에 같은 색을 중복 사용하면 가시성 검사를 구분할 수 없으므로 서로 다른 값을 지정합니다. 색상 역할 두 개 이상을 변경한 뒤 STEP 3부터 다시 실행합니다.

STEP 4 · 겹침 비교

좌표와 색상을 고정하고 사각형·타원의 순서만 바꾼 두 이미지를 비교합니다. 2교시의 그리기 순서를 최종 구성에 적용하는 단계입니다. 노트북에 두 코드가 제공되며, 각 결과는 별도의 빈 이미지에서 시작합니다.

동일한 좌표·색상에서의 두 순서
구분	그리기 순서	겹친 부분의 결과
순서 A	사각형 → 타원 → 삼각형 → 선	사각형·타원의 겹침에서 타원의 색
순서 B	타원 → 사각형 → 삼각형 → 선	사각형·타원의 겹침에서 사각형의 색

삼각형이나 선이 덮지 않은 겹침 부분을 비교합니다. 두 결과가 같다면 사각형과 타원이 겹치지 않거나, 겹친 부분을 다른 도형이 가린 상태일 수 있습니다. STEP 2에서 일부가 겹치도록 조정한 뒤 STEP 2 → 3 → 4를 실행합니다.

두 도형 명령의 순서와 결과를 확인한 뒤 저장할 이미지를 선택합니다. 아래 대입문의 오른쪽을 order_a_image 또는 order_b_image로 지정하고 STEP 4 셀 전체를 다시 실행합니다. 비교용 그리기 코드는 수정하지 않습니다.

image = order_a_image

실행 순서와 최종 선택

A와 B는 같은 좌표·색상을 사용하지만 서로 다른 이미지입니다. image에 어느 결과를 대입하는지가 저장할 결과를 결정합니다. 최종 선택의 이유를 겹침 부분의 색과 연결해 기록합니다.

겹침 비교 오류

사각형과 타원의 일부가 겹치는지, 삼각형이 겹친 영역 전체를 가리지 않는지 확인합니다. 각각의 내부색이 남도록 구성하고 STEP 2부터 다시 실행합니다. 수정 없이 STEP 4만 반복해도 두 이미지는 새로 생성됩니다.

변경 기록

노트북의 변경 기록 텍스트 셀을 더블클릭해 다음 네 항목을 채웁니다. 변경 전 → 변경 후 → 결과 → 설계 의도와의 관계를 간단히 작성합니다. 별도의 보고서나 추가 파일은 필요하지 않습니다.

변경 기록의 네 항목
항목	기록할 값	설명할 관계
기준점·위치	1교시 기준점, 조정한 기준점	이동 방향, 크기 유지, 기준점 조정의 이유
타원 크기	기존·새 경계와 가로·세로 차이	크기 또는 비율의 변화
색상	변경한 두 역할의 기존·새 RGB	색상의 변화와 강조 대상
순서	A·B에서 보이는 색과 최종 선택	겹침 차이와 선택 이유

자동 검사는 변경 개수와 기술적 조건을 확인합니다. 기록은 어떤 값을 왜 변경했는지 설명하는 자료이며, 자동 검사 PASS가 이 설명의 타당성을 보장하지는 않습니다.

STEP 5 · PNG 저장

변경 기록과 최종 순서를 확인한 뒤 저장 셀을 실행합니다. image에 선택한 결과를 파일로 저장하고 다시 열어 표시합니다.

image.save(output_filename)

파일명은 STEP 1에서 작성한 week03_학번_이름.png입니다. 저장된 이미지가 선택한 A 또는 B와 같은지 확인합니다.

수정 항목별 재실행 범위
수정 항목	재실행 순서
기준점·제출 정보	STEP 1 → 2 → 3 → 4 → 5
도형 경계·꼭짓점	STEP 2 → 3 → 4 → 5
색상	STEP 3 → 4 → 5
최종 순서 선택	STEP 4 → 5

화면 출력과 파일 저장

새 이미지를 표시하는 것과 PNG를 갱신하는 것은 별개의 단계입니다. 변경 기록의 텍스트만 수정한 경우에는 이미지를 다시 만들 필요가 없지만, 수정한 노트북을 저장하고 다시 내려받아야 합니다.

FINAL CHECK · 검사와 제출

값과 변경 기록을 모두 수정한 뒤 런타임 → 세션 다시 시작을 선택합니다.
런타임 → 모두 실행으로 STEP 0부터 마지막 검사까지 실행합니다.
아래 완료 문구를 확인하고 변경 기록 네 항목을 검토합니다.

PASS OUTPUT

✅ 제출 정보와 RGB 범위 검사 통과
✅ 기준점 적용·사각형 이동·타원 크기 변경 검사 통과
✅ 겹침 비교·도형 가시성·최신 PNG 검사 통과
✅ 새 런타임 전체 실행 검사 통과
🎉 WEEK 03 IMAGE MISSION COMPLETE

자동 검사 코드의 범위

조건문, 반복문과 파일 검사 구문은 제공된 도구이며 이번 실습에서 직접 작성하거나 해석할 대상은 아닙니다. 마지막 한글 오류 메시지에 따라 EDIT 영역을 수정합니다. 오류 종류가 NameError이면 앞 단계의 셀을 아직 실행하지 않은 것이므로 STEP 0부터 순서대로 실행합니다. 검사 코드를 삭제하거나 수정해 얻은 PASS는 완료로 인정하지 않습니다.

이동·크기 변경 검사

사각형은 STEP 1의 기준점을 변경해 위치를 옮기고 가로·세로 경계 차이 280·180을 유지합니다. 타원은 단순히 옮기기만 하지 않고 가로 또는 세로 경계 차이를 변경합니다. 같은 크기로 이동한 타원은 크기 변경을 수행한 것이 아닙니다.

저장 파일과 실행 순서 검사

현재 이미지와 PNG가 다르면 수정한 STEP부터 STEP 5까지 다시 실행합니다. 최종 검사 전에는 직접 추가한 코드 셀을 지우고, 세션을 다시 시작한 뒤 모두 실행합니다. 이때 중간 셀을 개별적으로 실행하지 않습니다.

파일 → 다운로드 → .ipynb 다운로드로 변경 기록과 실행 결과가 포함된 노트북을 받습니다.
Colab 파일 목록에서 week03_학번_이름.png를 내려받습니다.
제출함에 .ipynb와 .png 두 파일을 업로드하고 제출 완료 상태를 확인합니다.

완료 판정

기술 검사 통과 + 변경 기록 + 두 파일 제출 확인

세 조건을 확인하면 남은 시간과 관계없이 바로 귀가합니다. 작업 속도와 남은 수업 시간은 평가에 반영하지 않습니다.

선택 확장 활동

필수 미션과 변경 기록을 마친 뒤 원하는 경우에만 진행합니다. 추가 점수는 없습니다. 제출용 노트북을 보존하고 사본에서 실험합니다.

좌표와 순서를 고정하고 두 번째 팔레트를 적용해 다른 파일명으로 저장합니다.
삼각형 꼭짓점을 변경하고 형태의 차이를 비교합니다.

참고 자료

1교시 · 화면 구성 설계기준점, 중심과 안전 영역
2교시 · 사각형의 좌표 수정두 모서리의 평행 이동
2교시 · 그리기 순서동일한 좌표·색상의 겹침 비교