3주차 2교시: RGB 색상과 도형 그리기

RGB 데이터와 도형 생성

핵심 개념

RGB, 색상 튜플, 도형

이전 학습

픽셀, 좌표, 유효 범위

도구

Pillow Image, ImageDraw

연결 실습

기하학적 이미지 제작

학습 내용

• RGB와 색상 변화

  세 채널의 의미와 단일 채널 변화 비교

• 색상 데이터

  RGB 튜플·변수와 배경색 변경

• 이미지와 도구

  이미지 생성과 그리기 도구 연결의 구분

• 사각형 생성과 수정

  경계 상자 해석, 최초 실행과 재실행

• 도형과 화면 구성

  타원·다각형, 겹침 순서와 팔레트 역할

• 결과 확인과 저장

  전체 코드 실행, PNG 저장과 팔레트 비교

이미지 좌표 복습

1교시에서는 픽셀 격자의 구조와 왼쪽 위 원점 (0, 0)을 기준으로 한 좌표를 학습했습니다. RGB 색상 값을 해석하기 전에 원점, 유효 범위와 이동 규칙을 확인합니다.

좌표가 같아도 색상 값에 따라 픽셀의 표현은 달라집니다. 예를 들어 (120, 80) 위치에 검정, 빨강, 흰색을 지정하면 서로 다른 결과가 나타납니다. 좌표는 위치를, RGB 값은 해당 위치의 색상을 나타냅니다.

RGB 원리

세 색상 채널

RGB는 빨강(Red), 초록(Green), 파랑(Blue)의 세 성분으로 색을 표현하는 방식입니다. 각 성분을 채널이라고 합니다. Pillow의 RGB 모드에서는 각 채널을 0부터 255까지의 정수로 나타냅니다.

세 채널의 값은 독립적으로 조절할 수 있습니다. R만 변경하면 빨강 성분이, G만 변경하면 초록 성분이 달라집니다. 색상은 한 채널의 값만으로 결정되지 않으므로 세 값의 상대적인 크기와 차이를 함께 확인합니다.

• 0: 해당 색의 빛을 켜지 않은 상태
• 255: 해당 색의 빛을 가장 강하게 켠 상태
• (R, G, B): 항상 빨강, 초록, 파랑 순서로 세 값을 작성

RGB 값의 해석

1. 첫 번째는 R, 두 번째는 G, 세 번째는 B입니다.
2. 가장 큰 값과 작은 값을 비교해 색상 계열을 예측합니다.
3. 세 값이 같으면 검정부터 흰색까지의 무채색이 됩니다. 값의 차이가 생기면 색상 성분이 나타납니다.

RGB 숫자는 색을 설명하는 정확한 데이터이지만, 숫자의 차이가 사람이 느끼는 밝기 차이와 언제나 같은 비율로 대응하는 것은 아닙니다. 또한 같은 값도 화면의 밝기와 색상 설정에 따라 조금 다르게 보일 수 있습니다. 이번 수업에서는 먼저 채널의 상대적 크기로 색의 방향을 예측하고 실제 결과를 확인하는 습관을 기릅니다.

단일 채널 변화 비교

색을 탐색할 때 세 값을 동시에 바꾸면 어떤 변화가 결과를 만들었는지 알기 어렵습니다. 먼저 기준색을 정하고 한 채널만 일정한 간격으로 바꾸면 숫자와 시각적 변화의 관계를 읽을 수 있습니다.

채널 값을 비교해 색상의 변화를 예상한 뒤, 다음 단원의 배경색 변경 실습에서 실제 결과를 확인합니다.

색상 데이터와 변수

RGB 튜플과 변수

RGB 튜플은 빨강, 초록, 파랑 채널 값을 정해진 순서로 저장합니다. (235, 86, 75)에서 R은 235, G는 86, B는 75입니다.

코드에서는 세 정수를 쉼표로 구분한 튜플을 변수에 대입합니다. 각 값의 순서는 R, G, B이며, 위치를 바꾸면 다른 색상이 됩니다.

color_a = (230, 70, 50)

color_b = (50, 70, 230)

색상 튜플을 변수에 대입하면 여러 도형에서 같은 값을 재사용할 수 있습니다. 반복되는 RGB 숫자 대신 변수를 참조하면 색상 정의를 한곳에 모아 관리할 수 있습니다. 변경된 색상을 이미지에 반영하려면 해당 변수를 사용하는 그리기 코드도 다시 실행해야 합니다.

paper = (244, 239, 229)
coral = (235, 86, 75)
blue = (48, 95, 180)
ink = (28, 31, 38)

배경색 변경과 결과 확인

1교시의 빈 이미지 생성 코드를 이용해 RGB 값과 화면의 색상을 연결합니다. 기존 노트북을 계속 사용하며, 새 노트북을 사용하는 경우에도 아래 코드를 한 셀에 입력하면 실행할 수 있습니다.

from PIL import Image

background_color = (220, 80, 60)
image = Image.new("RGB", (400, 300), background_color)
image

이미지와 그리기 도구

배경색 변경에는 Image.new()만 사용했습니다. 이제 이미지의 일부 영역에 도형을 그리기 위해 ImageDraw를 추가합니다. 이미지를 생성하는 기능과 그 이미지의 픽셀을 수정하는 기능을 구분합니다.

from PIL import Image, ImageDraw는 이미지 모듈과 그리기 모듈을 불러옵니다. 1교시의 Image에 ImageDraw가 추가된 구문입니다.

from PIL import Image, ImageDraw

image와 draw의 역할

Image.new()는 지정한 크기와 배경색으로 이미지를 생성합니다. 이어서 ImageDraw.Draw(image)를 호출하면 그 이미지에 연결된 그리기 도구가 생성됩니다. 두 함수는 서로 다른 결과를 반환합니다.

두 대입문은 오른쪽 함수 호출 → 반환값 확인 → 왼쪽 변수에 대입의 순서로 처리됩니다. image는 이미지를, draw는 해당 이미지에 연결된 그리기 도구를 참조합니다.

준비 코드는 이미지와 그리기 도구를 생성하지만, 도형을 그리거나 결과를 표시하지는 않습니다. 코드 실행과 화면 출력은 별개의 단계이므로 출력이 없다는 사실만으로 오류를 판단할 수 없습니다.

도형 실습부터는 600 × 400 캔버스를 사용합니다. 아래 준비 코드처럼 새 셀에서 Image.new()를 다시 실행하면 image는 새 이미지를 가리키고, 이전 셀의 출력은 그대로 남습니다.

from PIL import Image, ImageDraw

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

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

draw = ImageDraw.Draw(image)

사각형의 생성과 수정

경계 상자

사각형과 타원은 네 숫자로 이루어진 경계 상자를 사용합니다. (left, top, right, bottom)은 왼쪽 경계의 x, 위쪽 경계의 y, 오른쪽 경계의 x, 아래쪽 경계의 y를 순서대로 기록합니다.

draw.rectangle() 해석

draw.rectangle()는 그리기 도구 draw의 사각형 그리기 메서드를 호출합니다. 괄호 안에는 좌표와 색상을 인자로 전달합니다.

draw.rectangle((40, 40, 260, 180), fill=coral)

이 명령은 (40, 40, 260, 180) 영역의 픽셀을 coral 값으로 채웁니다. 점 .은 대상의 속성이나 메서드에 접근하는 표기이며, rectangle()는 연결된 이미지를 직접 수정합니다. 수정된 결과는 image로 확인합니다.

사각형 생성 실습

먼저 제공된 좌표와 색상으로 사각형 하나를 생성합니다. 이 단계에서는 값을 변경하지 않고, 빈 이미지에 도형이 추가되는 결과를 확인합니다.

from PIL import Image, ImageDraw

canvas_width = 600
canvas_height = 400
background_color = (244, 239, 229)
coral = (235, 86, 75)

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

draw.rectangle((40, 40, 260, 180), fill=coral)
image

이미지 재생성과 상태 변화

Image.new()를 다시 실행하면 같은 변수명 image에 새로운 빈 이미지가 대입됩니다. 이전 이미지에 그려 두었던 도형이 새 이미지로 자동 이동하지는 않습니다. 이어서 ImageDraw.Draw(image)도 다시 실행해 새 이미지에 그리기 도구를 연결해야 합니다.

이 동작은 오류가 아니라 대입의 결과입니다. 2주차에 score = 10 다음 score = 20을 실행하면 새 값이 남았던 것과 같습니다. 이미지 역시 변수에 저장된 값이므로 새 이미지를 대입하면 현재 image가 가리키는 대상이 바뀝니다.

사각형의 좌표 수정

사각형의 크기를 유지하면서 이동하려면 왼쪽 위와 오른쪽 아래의 두 모서리에 같은 이동량을 적용합니다. 한쪽 모서리만 변경하면 위치뿐 아니라 크기도 달라집니다.

타원과 다각형

경계 상자와 타원의 비율

draw.ellipse()는 지정한 경계 상자에 맞는 타원을 그립니다. 사각형과 좌표 형식은 같지만, 영역 전체를 채우는 대신 타원 내부의 픽셀을 채웁니다. 예제의 blue는 앞에서 정의한 파란색 튜플입니다.

앞에서 살펴본 (180, 120, 380, 320) 경계 상자의 가로 차이는 380 - 180 = 200, 세로 차이는 320 - 120 = 200입니다. 가로와 세로가 같으므로 draw.ellipse()를 사용하면 원이 됩니다. 두 차이가 다르면 타원이 됩니다. 예를 들어 (180, 120, 480, 320)은 가로 차이 300, 세로 차이 200이므로 가로로 긴 타원을 만듭니다.

두 예제는 각각 빈 이미지에서 실행해 비교합니다. 앞의 이미지와 그리기 도구 준비 코드를 다시 실행한 뒤, 아래 명령 중 하나를 새 셀에 입력하고 마지막 줄에 image를 추가해 결과를 확인합니다.

draw.ellipse((180, 120, 380, 320), fill=blue)

draw.ellipse((180, 120, 480, 320), fill=blue)

다각형의 꼭짓점

draw.polygon()은 경계 상자 대신 여러 점의 좌표를 받습니다. 첫 점에서 둘째 점, 둘째 점에서 셋째 점으로 선을 잇고, 마지막 점에서 첫 점으로 돌아와 형태를 닫습니다. 삼각형에는 세 점, 사각형에는 네 점이 필요합니다.

먼저 다각형 내부에 사용할 노란색을 yellow에 대입합니다. 테두리에는 앞에서 정의한 짙은 색상 ink를 사용합니다.

yellow = (244, 190, 55)

triangle_points = (
    (420, 70),
    (560, 260),
    (350, 260)
)

draw.polygon(
    triangle_points,
    fill=yellow,
    outline=ink
)

코드를 실행하면 현재 이미지에 삼각형이 추가됩니다. 마지막 줄에 image를 추가해 내부 색상과 테두리를 확인합니다.

안쪽 튜플은 한 꼭짓점의 x·y 좌표를 나타내고, 바깥쪽 튜플은 꼭짓점들을 순서대로 저장합니다. 이 구조를 통해 점의 좌표와 도형의 연결 순서를 함께 지정합니다.

단순 다각형의 꼭짓점은 윤곽을 따라 연결되는 순서로 작성합니다. 순서가 달라지면 선분이 교차해 의도와 다른 형태가 생길 수 있으므로, 코드 작성 전에 각 점과 연결 순서를 확인합니다.

도형의 색상과 윤곽

세 도형의 결합

다음은 사각형·타원·다각형을 함께 그리는 코드입니다. 앞의 사각형 생성 셀에서 좌표를 기준값 (40, 40, 260, 180)으로 되돌린 뒤 셀 전체를 다시 실행하고, 새 셀에 아래 코드를 입력합니다. 같은 이미지 위에 세 도형이 순서대로 추가됩니다.

coral = (235, 86, 75)
blue = (48, 95, 180)
yellow = (244, 190, 55)
ink = (28, 31, 38)

draw.rectangle(
    (40, 40, 260, 180),
    fill=coral,
    outline=ink,
    width=4
)

draw.ellipse(
    (180, 120, 380, 320),
    fill=blue
)

draw.polygon(
    ((420, 70), (560, 260), (350, 260)),
    fill=yellow
)

도형 명령만으로는 새 출력이 표시되지 않습니다. 위 코드의 마지막에 image를 별도의 줄로 추가하고 셀을 실행해 현재 결과를 확인합니다. 이미 표시된 이전 셀의 이미지는 자동으로 갱신되지 않습니다.

그리기 순서

현재 수업의 불투명 RGB 도형은 기존 픽셀 위에 새 색상 값을 기록합니다. 두 도형이 겹치면 코드에서 나중에 실행한 도형이 겹친 부분에서 앞 도형을 가립니다.

이 방식은 종이에 물감을 올리는 순서와 비슷해 페인터스 알고리즘이라고 설명할 수 있습니다. 먼저 그린 형태는 아래에 놓이고, 나중에 그린 형태는 그 위에 놓입니다. 별도의 레이어 패널이 없어도 코드의 실행 순서가 시각적 앞뒤 관계를 만듭니다.

draw.rectangle((40, 40, 260, 180), fill=coral)
draw.ellipse((180, 120, 380, 320), fill=blue)

draw.ellipse((180, 120, 380, 320), fill=blue)
draw.rectangle((40, 40, 260, 180), fill=coral)

화면 구성과 팔레트

팔레트의 역할

팔레트는 화면에 사용할 색상의 집합입니다. 이 실습에서는 색상을 배경색, 주조색, 보조색, 강조색, 윤곽색으로 구분합니다. 각 역할에 변수를 연결하면 색상이 달라져도 화면의 구성 체계를 유지할 수 있습니다.

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)

coral이나 blue처럼 색 자체를 이름으로 사용할 수도 있지만, primary_color와 accent_color처럼 역할로 이름을 정하면 팔레트 전체를 다른 색조로 바꾸기 쉽습니다. 강조색을 노랑에서 연두로 바꾸어도 도형 코드에서는 계속 accent_color라는 같은 의미를 유지할 수 있습니다.

권장 그리기 순서

모든 도형을 임의의 순서로 나열하기보다 화면의 구조에 따라 순서를 정하면 코드를 읽기 쉽습니다. 일반적인 출발 순서는 배경 → 큰 면 → 보조 형태 → 작은 강조 → 윤곽과 선입니다. 반드시 지켜야 하는 규칙은 아니지만, 나중에 무엇이 무엇을 가리는지 예측하기 쉬운 기준이 됩니다.

형태가 앞에 있다는 사실과 시선이 먼저 간다는 사실은 완전히 같지 않습니다. 작은 노란 삼각형은 가장 나중에 그려져 앞에 놓이더라도, 면적이 큰 파란 원보다 반드시 강하게 보인다고 단정할 수 없습니다. 색 대비, 크기, 위치, 주변 여백이 함께 시각적 위계를 만듭니다. 코드는 순서를 정하고, 최종 위계는 결과를 보며 조정합니다.

전체 코드와 실행 결과

아래 코드는 기하학적 이미지 제작의 기준 예제입니다. 크기와 팔레트 설정 → 이미지 생성 → 도형 배치 → 결과 확인 → 파일 저장의 흐름을 확인합니다. 먼저 제공된 값 그대로 실행해 예상 이미지와 PNG 파일이 만들어지는지 확인하고, 그 뒤에 수정할 속성을 구분합니다. 기준 결과가 있어야 입력 오류와 구성 변경의 영향을 구분할 수 있습니다.

전체 코드의 단계별 구성

전체 코드는 주석으로 구분한 일곱 개의 작업 단계로 구성됩니다. 각 단계에서 생성하거나 수정하는 값과 이미지를 확인하면서 위에서 아래로 실행 순서를 추적합니다.

from PIL import Image, ImageDraw

# 1. 크기와 팔레트
canvas_width = 600
canvas_height = 400
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)

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

# 3. 큰 사각형으로 기본 구조 만들기
draw.rectangle(
    (50, 60, 330, 240),
    fill=primary_color,
    outline=outline_color,
    width=4
)

# 4. 곡선 형태를 겹쳐 대비 만들기
draw.ellipse(
    (230, 100, 510, 360),
    fill=secondary_color,
    outline=outline_color,
    width=4
)

# 5. 작은 삼각형으로 강조점 만들기
triangle_points = (
    (390, 55),
    (560, 220),
    (340, 220)
)
draw.polygon(
    triangle_points,
    fill=accent_color,
    outline=outline_color,
    width=4
)

# 6. 아래쪽 기준선 추가하기
draw.line(
    ((40, 340), (560, 340)),
    fill=outline_color,
    width=6
)

# 7. 결과 확인과 PNG 파일 저장
display(image)
image.save("week03_학번_이름.png")

실행 상태 추적

미리보기와 저장

display(image)는 현재 런타임 메모리에 있는 이미지를 노트북 화면에 보여줍니다. 이 출력만으로는 제출할 PNG 파일이 만들어지지 않습니다. image.save("week03_학번_이름.png")를 실행해야 현재 이미지가 파일로 기록됩니다.

Pillow의 save()는 별도의 형식을 지정하지 않으면 파일명의 확장자를 보고 저장 형식을 결정합니다. 이번 주에는 면 색과 윤곽선이 분명한 기하학 이미지이므로 .png를 사용합니다. 파일명을 .jpg로 바꾸는 것은 단순히 글자만 바꾸는 일이 아니라 다른 저장 형식을 선택하는 일입니다.

코드 수정 범위

2교시의 기준 코드에서는 색상·좌표·두께·파일명을 수정 대상으로 구분합니다. 라이브러리와 메서드의 이름, 괄호·쉼표 등의 구문은 유지합니다. 수정 대상과 문법 요소를 구분하면 의도한 변화의 원인을 추적하기 쉽습니다.

수정 지점과 변화

아래는 2교시 기준 코드의 속성을 비교하기 위한 실험 예시입니다. 캔버스 크기를 변경하면 기존 도형이 새 이미지 범위를 벗어날 수 있으므로 좌표 범위도 함께 확인합니다. 3교시 제출 실습의 수정 범위는 별도로 지정됩니다.

수정 전 결과를 저장하고 위치·크기·색상 가운데 한 속성씩 변경합니다. 여기서 하나는 숫자의 개수가 아니라 비교할 시각적 속성을 뜻합니다. 사각형의 위치만 바꾸려면 두 모서리의 좌표를 함께 수정해야 하며, 크기와 색상은 유지합니다. 앞의 RGB 연습은 색상 변화 중에서도 한 채널의 영향만 분리해 확인하는 예입니다.

팔레트 비교

같은 형태에 두 팔레트를 적용합니다. 도형의 좌표와 실행 순서는 그대로 두고 색상 변수만 바꾸면, 형태 변화와 색상 변화의 영향을 분리해서 관찰할 수 있습니다. 위치·크기·색상을 한꺼번에 수정하면 각 속성의 영향을 구분하기 어렵지만, 기하 구조를 고정하면 두 이미지의 차이가 팔레트에서 비롯되었다고 설명할 수 있습니다. 이것이 프로그래밍에서 변인을 통제하며 비교하는 기본 태도입니다.

팔레트 예측

각 RGB 튜플의 채널 값을 비교해 배경의 밝기, 도형의 색상 계열과 윤곽의 대비를 예상합니다. 색 이름을 특정하기보다 수치와 시각적 특성의 관계에 근거해 기록합니다.

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)

background_color = (24, 31, 44)
primary_color = (79, 130, 190)
secondary_color = (205, 92, 122)
accent_color = (238, 210, 120)
outline_color = (236, 239, 244)

팔레트 실행

1. 전체 기준 코드에 팔레트 A를 넣고 위에서 아래로 실행합니다.
2. 마지막 저장 이름을 week03_학번_이름_palette_a.png로 바꾸어 저장합니다.
3. 다섯 색상 변수의 값만 팔레트 B로 교체합니다. 좌표와 도형 순서는 수정하지 않습니다.
4. 변경한 색상 변수의 대입부터 이미지 생성, 도형 그리기, 표시를 다시 실행한 뒤 week03_학번_이름_palette_b.png로 저장합니다.

비교와 기록

비교 기록에는 시각적 인상과 그 근거를 함께 작성합니다. 예를 들어 팔레트 B의 경계가 더 뚜렷하다고 판단했다면 어두운 배경과 밝은 윤곽색의 대비를 근거로 제시할 수 있습니다. 표의 설명은 유일한 정답이 아니라 관찰 결과를 RGB 데이터와 연결하는 예시입니다.

보충 설명

기본 도형 생성과 저장을 마친 뒤 필요한 항목을 선택해 확인합니다. 튜플의 인덱스 접근, 모듈 이름의 구분과 오류 메시지 해석을 위한 참고 자료입니다.

튜플의 기호와 인덱스

RGB 튜플은 쉼표로 구분한 세 값을 둥근괄호 안에 작성합니다. 개별 채널을 참조할 때에는 변수명 뒤의 대괄호에 인덱스를 작성합니다. 튜플 구성과 요소 참조에 사용하는 표기를 구분해야 합니다.

튜플의 개별 값은 인덱스로 참조합니다. 인덱스는 0부터 시작하는 위치 번호입니다. 아래 코드의 coral[0], coral[1], coral[2]는 각각 R, G, B 값을 반환합니다.

채널 값 확인

1교시 노트북에 새 코드 셀을 추가해 채널 값 확인 코드를 실행합니다. 이 보충 실습은 RGB 튜플의 각 값을 인덱스로 참조하는 방법을 확인하는 용도입니다.

coral = (235, 86, 75)

print(type(coral))
print("R:", coral[0])
print("G:", coral[1])
print("B:", coral[2])

라이브러리와 import

Pillow는 이미지의 생성·편집·저장을 지원하는 Python 라이브러리입니다. 이번 실습은 모듈 불러오기, 이미지 생성, 도형 그리기, 결과 표시와 저장의 순서로 구성됩니다.

이 구문은 PIL 패키지의 Image와 ImageDraw 모듈을 현재 코드에서 사용할 수 있도록 불러옵니다. from과 import는 Python 예약어이며, 패키지명과 모듈명은 정해진 철자와 대소문자를 유지해야 합니다.

주요 오류와 점검 항목

오류 확인 순서

오류 메시지의 마지막 줄에서 종류를 확인한 뒤, 발생 위치와 선행 코드의 실행 여부를 점검합니다.

1. 오류 메시지의 마지막 줄에 표시된 이름과 설명을 확인합니다.
2. SyntaxError는 문법 요소, NameError는 이름의 철자와 정의 여부를 먼저 점검합니다.
3. 오류가 발생한 줄과 최근 수정한 부분을 기준 코드와 비교합니다.
4. 필요한 모듈과 변수를 먼저 준비한 뒤 이미지 생성부터 순서대로 다시 실행합니다.

NameError: name 'draw' is not defined

draw = ImageDraw.Draw(image)

학습 내용 점검

draw.rectangle(
    (60, 80, 260, 220),
    fill=(240, 90, 70),
    outline=(30, 30, 35),
    width=5
)

수업 후 개별 복습

3교시 실습 개요

3교시에서는 제공된 600 × 400 이미지와 도형 코드를 기준으로 실습합니다. 1교시에서 정한 기준점을 사각형의 위치에 적용하고, 타원의 크기 변경, 팔레트 비교, 그리기 순서의 비교·선택을 차례로 수행합니다.

2교시의 실험 예시와 달리 캔버스 크기와 윤곽선 두께는 유지하며, 노트북의 EDIT 표시 영역에서 단계별로 지정한 항목만 수정합니다. 한 속성씩 변경 → 재실행 → 결과 비교 → 변경 이유 기록의 순서로 진행합니다.

참고 자료

• Pillow 공식 문서: Modes, coordinates and colorsRGB 이미지의 세 채널, 8비트 픽셀, 크기와 좌표, 색상 튜플에 관한 공식 설명
• Pillow 공식 문서: ImageDraw사각형, 타원, 다각형, 내부색, 테두리와 좌표 인자의 공식 사용법
• Pillow 공식 문서: Image file formatsPNG와 JPEG를 포함한 지원 형식과 파일 저장 방식