이미지

이미지는 무언가의 모습을 떠서 파일이나 메모리에 담아 둡니다. 이 이름은 두 분야에서 서로 다른 물건을 부릅니다. 그래픽스와 웹에서는 색을 칠한 점을 격자로 모은 그림입니다. 시스템 운영에서는 디스크나 실행 환경을 한 시점에 떠 둔 복제본입니다.

상세

「이미지」가 가리키는 두 물건을 먼저 표로 가릅니다. 그다음에는 그래픽스 쪽 뜻을 따라갑니다. 그림이 파일로 있을 때, 메모리에 풀렸을 때, 그래픽 카드에 올라갔을 때, 웹 페이지가 값으로 다룰 때를 차례로 봅니다.

끝에서 시스템 쪽 뜻을 짧게 봅니다. 마지막 소절에는 두 뜻을 가르는 단서를 모읍니다.

이미지가 가리키는 두 물건

영어 image 는 본래 「본뜬 모습」을 뜻합니다. 그림은 장면을 본뜬 것입니다. 복제본은 디스크를 본뜬 것입니다. 뿌리는 같아도 안에 담긴 것은 전혀 다릅니다.

두 뜻은 셋째 열에서 갈립니다. 그림 쪽 이미지에는 색이 들어 있습니다. 복제본 쪽 이미지에는 파일이나 바이트가 들어 있습니다. 그 내용으로 같은 환경을 다시 띄웁니다.

점을 격자로 모은 그림

타일 벽화를 가까이서 보면 한 가지 색으로 칠한 네모 타일이 줄지어 있을 뿐입니다. 몇 걸음 물러나면 그 타일들이 모여 얼굴이 됩니다.

그래픽스의 이미지도 같은 방식으로 그림을 담습니다. 그림을 가로세로 격자로 자릅니다. 칸마다 색을 하나씩 적습니다. 이 칸 하나가 픽셀입니다.

격자의 가로 칸 수와 세로 칸 수가 해상도입니다. 가로 1920 칸, 세로 1080 칸짜리 이미지는 픽셀 약 207만 개로 되어 있습니다. 칸이 많을수록 그림을 더 잘게 나눠 담습니다.

색은 빨강·초록·파랑 세 빛을 얼마나 섞는지로 적습니다. 이 셋 하나하나가 색 채널입니다. 흔한 방식은 채널마다 1바이트를 씁니다. 1바이트는 0 부터 255 까지의 값을 담습니다.

여기에 투명도를 적는 알파 채널을 더하기도 합니다. 0 은 완전히 투명한 점입니다. 255 는 완전히 불투명한 점입니다. 그러면 픽셀 하나가 4바이트가 됩니다.

block-beta
columns 4
  a1["픽셀"] a2["픽셀"] a3["픽셀"] a4["픽셀"]
  b1["픽셀"] b2["펼칠 칸"] b3["픽셀"] b4["픽셀"]
  c1["픽셀"] c2["픽셀"] c3["픽셀"] c4["픽셀"]
  e["↓ 펼칠 칸 하나를 바이트로 펼치면"]:4
  r["빨강 · 1바이트"] g["초록 · 1바이트"] b["파랑 · 1바이트"] t["투명도 · 1바이트"]

그림 윗부분은 가로 4칸, 세로 3칸짜리 작은 이미지입니다. 아랫부분은 그 가운데 한 칸을 바이트 단위로 펼친 것입니다. 이미지는 이런 칸이 가로 칸 수 곱하기 세로 칸 수만큼 줄지어 있는 덩어리입니다.

파일에 담긴 이미지

이미지를 파일로 저장할 때는 대개 압축합니다. 칸마다 4바이트를 빠짐없이 적으면 파일이 너무 커지기 때문입니다. 압축하는 규칙은 파일 포맷마다 다릅니다.

압축에는 두 갈래가 있습니다. 무손실 압축은 풀었을 때 원래 픽셀 값이 하나도 안 바뀝니다. 손실 압축은 눈에 잘 안 띄는 차이를 버려서 더 작게 만듭니다. 한 번 버린 차이는 되돌릴 수 없습니다.

아래 표는 흔히 쓰는 파일 포맷 넷을 압축 방식과 투명도로 견줍니다.

표의 넷은 모두 점을 격자로 담는 포맷입니다. 점을 격자로 담는 그림이 래스터 그래픽스입니다.

SVG(Scalable Vector Graphics)는 방식이 다릅니다. 점 대신 「이 좌표에 이만한 원」처럼 도형을 글자로 적습니다. 이렇게 도형으로 담는 그림은 벡터 그래픽스입니다.

서버가 받은 이미지 파일의 포맷 확인

백엔드는 이미지를 대개 업로드로 받습니다. 받은 파일이 무슨 포맷인지는 이름 끝의 확장자로 믿을 수 없습니다. 확장자는 사용자가 마음대로 바꿀 수 있기 때문입니다.

대신 파일 맨 앞의 몇 바이트를 봅니다. 포맷마다 파일을 여는 바이트가 정해져 있습니다. 이 바이트를 파일 시그니처 또는 매직 넘버라고 부릅니다.

표의 값은 바이트를 16진수로 적은 것입니다. PNG 의 둘째부터 넷째 바이트를 글자로 읽으면 PNG 입니다. GIF 의 네 바이트는 글자로 GIF8 입니다.

응답에 이미지를 실어 보낼 때는 거꾸로 서버가 포맷을 알려 줍니다. HTTP(HyperText Transfer Protocol) 응답의 Content-Type 헤더에 image/png 처럼 적습니다. 이 image/png 꼴의 이름이 미디어 타입입니다.

메모리에 풀린 이미지

파일에 담긴 이미지는 압축된 바이트일 뿐입니다. 크기를 줄이거나 잘라 내려면 먼저 픽셀 격자로 되돌려야 합니다. 압축을 풀어 격자로 되돌리는 일이 디코딩입니다. 거꾸로 격자를 압축해 파일로 적는 일은 인코딩입니다.

풀린 이미지의 크기는 파일 크기와 상관없습니다. 가로 칸 수, 세로 칸 수, 픽셀 하나의 바이트 수를 곱한 만큼입니다. 가로 4000, 세로 3000 인 사진을 픽셀당 4바이트로 풀어 봅니다.

long px = 4000L * 3000;   // 12000000
long bytes = px * 4;      // 48000000

첫 줄은 픽셀 수, 둘째 줄은 바이트 수입니다. 약 48메가바이트입니다. 파일은 압축 덕에 이보다 훨씬 작을 수 있습니다. 그래도 풀린 크기는 줄지 않습니다.

썸네일을 만드는 서버가 이 계산을 만납니다. 썸네일은 목록에 띄우려고 작게 줄인 그림입니다. 줄이려면 먼저 풀어야 합니다. 그래서 위 사진 열 장을 동시에 줄이면 약 480메가바이트가 듭니다. 파일이 몇 메가바이트씩이어도 마찬가지입니다.

flowchart TD
    A["업로드된 파일 · 수 메가바이트"] -->|디코딩| B["픽셀 격자 · 약 48메가바이트"]
    B -->|줄이기| C["작은 격자 · 가로 200 세로 150 이면 약 120킬로바이트"]
    C -->|인코딩| D["썸네일 파일 · 이보다 더 작다"]

썸네일 한 장을 만드는 동안 크기는 가운데 단계에서 가장 커집니다. 서버 메모리를 재는 기준은 파일 크기가 아니라 이 단계입니다.

그래픽 카드에 올린 이미지

화면에 그림을 그리는 일은 그래픽 카드가 맡습니다. 그래픽 카드는 GPU(Graphics Processing Unit, 그래픽 처리 장치)라고도 부릅니다. 그림을 그릴 때 쓸 이미지는 먼저 그래픽 카드 메모리로 올려 둡니다.

API(Application Programming Interface)는 프로그램이 다른 소프트웨어에 일을 시키는 함수 묶음입니다. 그래픽 카드에 일을 시키는 API 가 그래픽스 API입니다.

그래픽스 API 에서 이미지는 그래픽 카드 메모리에 올려 둔 격자 데이터를 가리킵니다. 이 격자의 칸은 화면의 픽셀과 구분해 텍셀이라고 부릅니다. 이미지는 화면에 늘어나거나 줄어서 그려집니다. 그래서 텍셀 하나가 화면의 픽셀 하나와 맞아떨어지지 않습니다.

텍셀 하나에 무엇을 몇 바이트로 담을지를 텍셀 형식이라 합니다. 텍셀 형식은 이미지를 만들 때 정합니다. 「빨강·초록·파랑·투명도를 1바이트씩」이 흔한 텍셀 형식 하나입니다.

같은 격자를 API 마다 다른 이름으로 부릅니다.

이름은 갈려도 가리키는 것은 그래픽 카드 메모리의 텍셀 격자 하나입니다. 이 문서는 다른 API 가 텍스처라 부르는 격자도 Vulkan 처럼 이미지라고 부릅니다.

그래픽 카드 이미지의 세 가지 쓰임

셰이더는 그래픽 카드에서 도는 작은 프로그램입니다. 화면의 점마다 무슨 색을 칠할지 셈합니다. 그래픽 카드의 이미지는 이 셈 곁에서 세 가지로 쓰입니다. 셈에 쓸 값을 내주는 쓰임, 셈한 색을 받는 쓰임, 무엇이 앞에 있는지 따지는 쓰임입니다.

한 이미지가 두 쓰임을 오가기도 합니다. 화면 속 거울이나 그림자가 이렇게 만들어집니다.

flowchart TD
    subgraph P1["첫 번째 그리기"]
        S1["셰이더"] -->|셈한 색을 적음| X1["이미지 X · 그려 넣는 대상"]
    end
    subgraph P2["두 번째 그리기"]
        X2["이미지 X · 무늬로 읽음"] --> S2["셰이더"]
        S2 -->|셈한 색을 적음| D["화면"]
    end
    X1 -.->|같은 이미지| X2

위 흐름도의 이미지 X 는 하나입니다. 첫 번째 그리기에서 그려 넣는 대상이던 것을 두 번째 그리기에서 셰이더가 무늬로 읽습니다.

이미지가 파일에서 화면까지 가는 길을 한 번에 보면 아래와 같습니다.

flowchart TD
    F["이미지 파일 · 압축된 바이트"] -->|디코딩| M["메모리의 픽셀 격자"]
    M -->|그래픽 카드로 올림| G["그래픽 카드의 이미지 · 텍셀 격자"]
    G -->|무늬로 읽음| S["셰이더"]
    S -->|셈한 색을 적음| R["렌더 타깃"]
    R --> D["화면"]

같은 그림이 머무는 곳마다 모양을 바꿉니다.

버퍼와 다른 점

그래픽 카드 메모리에는 이미지 말고 버퍼도 있습니다. 버퍼는 바이트를 한 줄로 늘어놓은 덩어리입니다. 이미지는 가로세로 모양과 텍셀 형식을 함께 갖습니다.

모양과 형식을 알기 때문에 그래픽 카드가 대신 해 주는 일이 있습니다. 텍셀과 텍셀 사이 좌표를 읽으면 둘레 텍셀의 색을 섞어 돌려줍니다. 어떻게 섞을지는 샘플러가 정합니다.

텍셀을 메모리에 놓는 배치도 그래픽 카드가 고릅니다. 그림을 읽을 때는 옆 텍셀만큼 위아래 텍셀도 함께 읽힙니다. 한 줄씩 늘어놓으면 바로 위 텍셀이 가로 칸 수만큼 떨어진 곳에 놓입니다. 그래서 작은 네모 덩어리 단위로 모아 두는 배치를 씁니다.

block-beta
columns 4
  h1["한 줄씩 늘어놓는 배치"]:4
  a0["0"] a1["1"] a2["2"] a3["3"]
  a4["4"] a5["5"] a6["6"] a7["7"]
  a8["8"] a9["9"] a10["10"] a11["11"]
  a12["12"] a13["13"] a14["14"] a15["15"]
  h2["2×2 덩어리로 모으는 배치"]:4
  b0["0"] b1["1"] b4["4"] b5["5"]
  b2["2"] b3["3"] b6["6"] b7["7"]
  b8["8"] b9["9"] b12["12"] b13["13"]
  b10["10"] b11["11"] b14["14"] b15["15"]

위아래 두 격자는 같은 4×4 격자입니다. 칸의 숫자는 메모리에 놓이는 순서입니다. 위쪽에서 0번 바로 아래 칸은 4번이라 네 칸 떨어져 있습니다. 아래쪽에서는 2번이라 가까이 붙어 있습니다.

알맞은 배치는 쓰임마다 다릅니다. 그래서 Vulkan 은 이미지를 쓰기 전에 지금 어떤 배치로 둘지 알려 달라고 합니다. 이미지 레이아웃은 이미지가 지금 어떤 배치인지를 적은 값입니다.

이미지 하나에 담기는 여러 장의 그림

이미지 하나에는 같은 크기의 그림을 여러 장 담을 수 있습니다. 그 한 장 한 장을 레이어라고 부릅니다. 레이어를 쓰면 여러 그림을 이미지 하나로 묶어 다룹니다.

레이어마다 절반씩 줄인 그림을 딸려 두기도 합니다. 물체가 멀리 있어 화면에 작게 그려질 때 쓰려고 둡니다. 그러면 큰 원본 대신 크기가 알맞은 그림에서 읽습니다. 이렇게 줄인 그림들의 묶음이 밉맵입니다.

flowchart TD
    subgraph IMG["이미지 하나"]
        subgraph L0["레이어 0"]
            A0["256×256 원본"] --> A1["128×128"] --> A2["64×64"] --> A3["… 1×1 까지"]
        end
        subgraph L1["레이어 1"]
            B0["256×256 원본"] --> B1["128×128"] --> B2["64×64"] --> B3["… 1×1 까지"]
        end
        A3 ~~~ B0
    end
    V["이미지 뷰"] -.->|읽을 범위| B1
    V -.->|읽을 범위| B2

이 가운데 어느 장, 어느 크기를 무슨 텍셀 형식으로 읽을지는 이미지 뷰가 정합니다. 위 흐름도에서 이미지 뷰는 레이어 1 의 작은 두 크기만 가리킵니다. 이미지 뷰는 그림을 복사하지 않고 읽을 범위만 적어 둡니다.

웹 페이지가 값으로 다루는 이미지

웹 페이지의 모양은 CSS(Cascading Style Sheets)가 정합니다. CSS 에서 이미지는 속성에 넣는 값의 한 종류입니다. 그림 파일만 이미지 값이 되는 것이 아닙니다.

.banner { background-image: url(sky.png); }
.fade { background-image: linear-gradient(white, navy); }

두 줄 모두 상자의 배경에 이미지를 칠합니다. 첫 줄은 url() 로 그림 파일을 부릅니다. 둘째 줄의 linear-gradient() 는 흰색에서 남색으로 서서히 바뀌는 그림을 만듭니다. 이렇게 색이 서서히 바뀌는 그림이 그라디언트입니다.

그림 파일은 제 크기를 갖습니다. 가로 몇 픽셀, 세로 몇 픽셀로 정해져 있습니다. 그라디언트는 제 크기가 없습니다. 칠할 상자의 크기에 맞춰 그때그때 그려집니다.

HTML(HyperText Markup Language) 문서에 그림을 넣는 img 요소는 페이지에서 상자 하나를 차지합니다. 그림과 상자의 가로세로 비율이 다르면 그림을 어떻게 맞출지 정해야 합니다. object-fit 속성이 이것을 정합니다.

프로필 사진처럼 상자를 빈틈없이 채워야 하는 곳에는 cover 를 흔히 씁니다. 그림이 찌그러지지 않는 대신 가장자리가 조금 잘립니다.

디스크나 실행 환경을 떠 둔 복제본

시스템 운영에서 이미지는 그림과 상관이 없습니다. 디스크나 실행 환경의 내용을 한 시점에 떠서 파일로 담은 것을 이미지라고 부릅니다. 이 파일 하나로 같은 환경을 몇 벌이든 다시 띄울 수 있습니다.

아래 표에는 ISO(International Organization for Standardization, 국제표준화기구) 이미지가 나옵니다. 광학 디스크는 빛으로 읽는 원반 모양 저장 매체입니다. 그 디스크 한 장의 내용을 파일 하나로 담은 것이 ISO 이미지입니다.

이미지는 뜬 때에 멈춰 있습니다. 원본을 고쳐도 이미지는 따라 바뀌지 않습니다. 바뀐 내용을 담으려면 이미지를 새로 떠야 합니다.

이미지를 실행해 띄운 한 벌은 따로 부릅니다. 흔히 인스턴스라고 부릅니다. 컨테이너 이미지로 띄운 것은 컨테이너라고 부릅니다. 한 이미지에서 여러 벌을 띄워도 이미지 자체는 바뀌지 않습니다.

백엔드 개발자가 배포 이야기에서 듣는 이미지는 대개 컨테이너 이미지입니다. 「이미지를 빌드한다」·「이미지를 푸시한다」가 이 뜻입니다. 푸시는 만든 이미지를 컨테이너 레지스트리라는 저장소에 올리는 일입니다.

flowchart TD
    O["원본 환경"] -->|한 시점에 뜬다| I["이미지 · 원본을 고쳐도 따라 바뀌지 않음"]
    I -->|푸시| R["컨테이너 레지스트리"]
    I -->|띄운다| N1["인스턴스 1"]
    I -->|띄운다| N2["인스턴스 2"]
    I -->|띄운다| N3["인스턴스 3"]

위 흐름도에서 이미지는 한가운데 하나뿐입니다. 레지스트리로 나르든 여러 벌을 띄우든 이미지 자체는 그대로 남습니다.

어느 뜻인지 가르는 단서

문서나 대화에서 「이미지」가 나오면 함께 붙은 낱말을 봅니다. 대개 그것만으로 뜻이 갈립니다.

양쪽에 다 나오는 낱말도 있습니다. 이런 낱말은 뜻까지 함께 갈립니다.

두 뜻은 뿌리만 같습니다. 그림 쪽 이미지는 보여 주려고 담습니다. 복제본 쪽 이미지는 다시 띄우려고 담습니다.

관련 항목

그림 이미지를 이루는 단위

픽셀 · 텍셀 · 해상도 · 색 채널 · 알파 채널 · 색 깊이 · 색 공간

그림 이미지를 담는 파일 포맷

PNG · JPEG · WebP · GIF · AVIF · BMP · TIFF

그림 이미지가 파일에서 화면까지 거치는 처리 단계

디코딩 · 인코딩 · 무손실 압축 · 손실 압축 · 이미지 압축 · 래스터화 · 프레임버퍼

그림 이미지를 담는 두 방식과 그 이름

래스터 그래픽스 · 벡터 그래픽스 · 비트맵 · SVG · 캔버스

그래픽 카드의 이미지를 다루는 그래픽스 API 자원

텍스처 · 이미지 뷰 · 이미지 레이아웃 · 밉맵 · 배열 레이어 · 배열 텍스처 · 샘플러 · 렌더 타깃 · 깊이 버퍼 · 버퍼 · 셰이더

그래픽 카드에 이미지를 올리는 그래픽스 API

그래픽스 API · Vulkan · WebGPU · Direct3D · OpenGL · GPU · 그래픽스

웹 페이지에 이미지를 싣고 맞추는 수단

CSS · HTML · img 요소 · object-fit · 그라디언트 · background-image · 반응형 이미지

서버가 이미지 파일을 주고받을 때 쓰는 수단

미디어 타입 · Content-Type · HTTP · 파일 시그니처 · 썸네일 · 파일 업로드 · CDN

복제본 뜻으로 쓰는 이미지의 종류

디스크 이미지 · ISO 이미지 · 가상 머신 이미지 · 컨테이너 이미지 · 스냅샷 · 코어 덤프

복제본 이미지를 띄우고 나르는 도구

컨테이너 · 컨테이너 레지스트리 · 컨테이너 런타임 · Docker · 가상 머신 · 인스턴스