디지털 이미지 101 : 디자이너가 알아야 할 모든 것

디지털 이미지(Digital Images) 101은 실무 디자이너, 예비 디자이너, 디자인 학부생이라면 꼭 알아 두어야 할 기본사항이며, 일반인도 상식 차원에서 알아두면 매우 유용한 디지털 이미지의 모든 것을 다루고 있다.

이미지도 텍스트처럼 바이너리로 인코딩되지만 문자 대신 이미지가 픽셀로 구성된다. 픽셀은 그림에서 가장 작은 요소다. 기본적으로 이미지에서 특정 색상을 나타내는 정사각형이다.

이해를 돕기 위해 : 그림(picture) + 요소(element) = 픽셀(pixel)

몇 가지 디자인 이미지 일반적인 용어 :

• 픽셀 (Pixel) : 사진에서 가장 작은 요소(그림 + 요소 = 픽셀)
• 해상도 (Resolution) : 수직 및 수평 픽셀 수(일명. 픽셀 수)
• 메가 픽셀 (Megapixel) : 총 픽셀 수를 백만으로 나눈 값
• 픽셀 밀도 (Pixel Density) : 1 인치 정사각형의 총 픽셀 수
• 색상 심도 (Color Depth) : 이미지의 각 픽셀이 표시할 수 있는 색상 수
• 밴딩 (Banding) : 색조 값이 낮아 부드러운 색상 전환을 생성할 수 없을 때 발생한다
• 포스터 화 (Posterization) : 이미지의 비트 심도가 시각적 품질에 영향을 미치는 수준으로 감소하는 경우

각 디지털 이미지 용어를 자세히 살펴 보도록 하자.

픽셀(Pixel)

픽셀은 그림에서 가장 작은 요소다. 만약 해상도 1920 x 1080 의 이미지가 있는 경우 총 픽셀 수는 약 "200만"이다. 각 픽셀에는 할당된 "RGB"값이 있으며 이러한 RGB 값의 혼합은 이미지가 화면에 렌더링 될 때 픽셀이 가질 색상을 정의한다.

픽셀은 기본적으로 이미지의 개별 색상을 나타내는 정사각형이다.

이미지의 원래 크기

확대된 이미지(3200%)

픽셀의 RGB 값

해상도(Resolution)

해상도는 디지털 화면의 총 픽셀 수 또는 이미지의 픽셀 밀도다. 해상도가 1920 x 1080 이면 이 두 값을 곱하여 총 픽셀 수를 얻을 수 있다.

1920 x 1080 = 2,073,600 픽셀(pixel)

메가 픽셀(Megapixel)

메가 픽셀은 디지털 카메라의 해상도이고 1 메가 픽셀은 100 만 픽셀을 의미한다. 따라서 총 픽셀 수를 백만으로 나누어 메가 픽셀 값을 얻는다.

1,200만 화소 카메라가 있다면 1,200만 화소의 이미지를 생성할 수 있다. 이것은 4000 x 3000 해상도의 이미지를 갖는 것과 같다.

1920 x 1080 = 2,073,600 = 2,073,600 / 1000000 = ~ 2MP 메가 픽셀(Megapixel).

카메라 센서의 메가 픽셀 수가 많을수록 이미지에서 더 자세하게 캡처된다. 즉, 800만 화소 카메라는 400만 화소(4-megapixel) 카메라보다 50% 더 세밀하게 캡처할 수 있다.

픽셀 밀도(Pixel Density)

픽셀 밀도는 PPI(pixels-per-inch : 인치당 픽셀 수) 또는 DPI(dots per inch : 인치당 도트 수)로 측정된다. PPI 또는 DPI는 1 제곱 인치로 압축된 픽셀 수를 나타낸다.(1 inch x 1 inch = 1 in 2)

그리고 이미 언급하지 않았다면 1인치는 96픽셀과 같습니다.

화면의 해상도가 1920 x 1080 이면 이 공식을 사용하여 화면의 PPI / DPI를 찾을 수 있다.

• 1920 x 1080 = 19202 + 10802
• = 3,686,400 + 1,166,400
• = √4,852,800
• = 2,202.90
• = 2,202.90 / 13.3 (화면 크기)
• = 165 ppi

동일한 공식을 사용하여 이미지 내의 픽셀 밀도를 찾을 수 있다.

또한 화면 크기는 대각선으로 측정된다(24 인치, 27 인치 등).

화면 크기를 대각선으로 인치 단위로 측정하십시오.

해상도가 (1920 x 1080)으로 유지되고 PPI가 감소하는 것보다 화면 크기가 증가하고 PPI가 증가하는 것보다 화면 크기가 감소한다.

따라서 화면 크기와 해상도의 조합이 PPI를 결정한다.

내가 왜 신경을 써야하는지 궁금 할 것이다. 디지털 화면의 모든 것이 픽셀(이미지 포함)로 구성되기 때문이다.

픽셀로 구성된 이미지

우리 사용하는 스마트폰은 해상도가 높고 화면 크기가 매우 작기 때문에 픽셀 밀도가 매우 높다. 이것은 스마트폰이 대부분의 시간 동안 얼굴에 매우 가깝게 유지되도록 만들어 졌기 때문에 의도적으로 설계된 것이므로 개별 픽셀을 보지 않으려면 높은 픽셀 밀도가 필요하다.

영화관은 해상도가 높지만 화면 크기가 매우 커서 소형 스마트폰에 비해 픽셀 밀도가 매우 낮으며 다른 평균적인 디스플레이는 개별 픽셀을 보지 않고 더 선명한 보기를 즐기기 위해 화면에서 조금 더 멀리 떨어져 있어야 하는 이유다.

사람들이 앞이나 뒤쪽이 아닌 영화관 중앙에 좌석을 선호하는 이유가 있다.

화면 크기가 클수록 선명한 이미지를 위해 더 높은 해상도가 필요하다.

색상 깊이(Color Depth)

색상 심도 또는 비트 심도는 이미지의 각 픽셀이 표시할 수 있는 색상 수다. 각 색상에는 RGB(빨간색, 녹색, 파란색) 값이 할당되어 있다. 이러한 RGB 값의 조합을 사용하면 이미지가 화면에 렌더링 될 때 각 픽셀이 다양한 색상을 표시할 수 있다.

참고 : 비트가 많을수록 색상 다양성과 이미지 품질이 높아진다.

1 bit (21 = 2 색) - 단색(Momochrome) 디스플레이

2 bit (22 = 4 색) - CGA 디스플레이

4 bit (24 = 16 색) - EGA 디스플레이

8 bit (28 = 256 색) - VGA 디스플레이

16 bit (216 = 65,536 색) - XGA 디스플레이

24 bit (224 = 16,777,216 색) - SVGA 디스플레이

32 bit (232 24-bit + 8-bit for alpha(opacity) channel= 4,294,967,296 색) - 최신 LCD 화면, 카메라 화면 및 플라즈마 화면

위 목록은 이 웹 사이트 (computerhope.com) 에서 가져온 것이다.

8 비트 vs 16 비트 — 사용해야 하는 색 농도와 중요한 이유 — DIY 사진

이미지 크기(Image Size)는 어떻게 결정됩니까?

24 비트 색 농도가 있다면 채널당 8 비트가 있음을 의미한다. 즉, 모든 색상 채널에 대해 8 비트가 있다. 우리의 경우에는 RGB 채널이고 8 + 8 + 8을 결합하면 24 비트가 된다.

따라서 모든 채널에는 8비트의 색 농도가 있다. 즉, "빨강, 녹색, 파랑" 각 채널에 대해 256 가지 색상 변형이 있다. 단일 색상을 메모리에 저장하려면 "24 비트"가 필요하다.

이 경우 해상도가 1920 x 1080 이면 총 1920 x 1080 = 2,073,600 pixel x 24(color depth) = 총 49,766,400 비트(bites)다.

그리고 이미지 크기는 ... (압축하지 않음)

• 49,766,400 / 8 = 6,220,800‬ bytes
• 6,220,800 / 1024 = 6,075 kilobyte(KB)
• 6,075 / 1024 = 5.93 megabyte(MB)

RGB 채널 비트 깊이

그레이 채널 비트 깊이

밴딩(Banding) 이란 무엇입니까?

밴딩(Banding)은 한 색상에서 다른 색상으로 그라디언트가 부드럽게 전환되는 것을 보여주기 위해 색상의 변형이 충분하지 않을 때 발생한다. 그 이유는 낮은 비트 심도, 일반적으로 8비트 색상 심도 이하이다.

색상의 미묘한 변화를 나타내는 색상 음영이 적기 때문에 밴딩이 발생한다. 색상의 부드러운 전환을 보지 않고 이미지에서 색상의 변화가 발생하는 위치를 볼 수 있다.

이미지 밴딩 예시

포스터 화(Posterization) 란 무엇입니까?

포스터 화(Posterization)는 컬러 밴딩과 동일하다. 부드러운 색상 전환 대신 색조 값이 갑자기 변경된다. 포스터를 만드는 데 사용되는 사진 프로세스에서 비롯된 것이므로 포스터 화로 이름지어 졌다. 그러나 이제는 Photoshop과 같은 소프트웨어를 사용하여 디지털 처리로 디지털 이미지에 대해서도 수행할 수 있다.

포스터 화(Posterized) : 적은 수의 서로 다른 색조만 사용하여 인쇄 또는 사진, 기타 이미지를 표시 한다. ~“Google의 정의”

포스터화 포스터 예시

일반 이미지와 포스터 이미지의 차이점

이미지 파일 형식(Image file formats)

몇 가지 일반적인 디지털 이미지 파일 형식은 다음과 같다.

• BMP
• GIF
• JPEG
• PNG
• TIFF
• RAW
• SVG
• PDF
• EPS
• AI
• PSD

GIF vs PNG vs JPEG

다음은 이러한 디지털 이미지 형식의 몇 가지 주요 특징이다.

■ BMP (Bitmap image file)

• 압축 또는 압축 해제 가능(무손실 압축 사용)
• 오래된 이미지 파일 형식
• 이미지 픽셀은 픽셀 당 (1, 4, 8, 16, 24, 32) 비트의 색 농도로 저장된다

■ GIF (Graphic Interchange Format)

• 무손실 압축 사용
• 로고 등과 같은 그래픽 요소에 사용된다
• 압축시 JPEG와 같은 아티팩트를 도입하지 않는다
• 부분 투명도를 지원하지 않는다. 각 픽셀은 완전히 불투명하거나 투명 할 수 있다
• 픽셀 당(28 = 256) 색상만 지원
• 각 픽셀은 1 바이트(byte)이며 256 가지 음영의 빨강, 녹색 또는 파랑의 단일 색상이다

■ JPEG (Joint Photographic Expert Group)

• Joint Photographic Expert Group이라는 그룹에서 개발
• 손실 압축 사용
• 압축 중에 눈에 띄지 않는 작은 디테일을 제거한다
• 원본 파일 크기의 약 10%를 압축할 수 있다.
• 아티팩트를 유발할 수 있으므로 날카로운 모서리가 있는 모양에는 적합하지 않다.
• 이미지 픽셀은 픽셀 당 24 비트(채널당 8비트)의 색 농도로 저장된다
• 3 개의 채널이 있다(RGB = 빨간색, 녹색, 파란색)
• 1600만 가지 이상의 색상 표시 가능

■ PNG (Portable Network Graphic)

• 무손실 압축 사용 (JPEG보다 파일 크기가 큼)
• 'GIF'와 달리 부분 투명도, 투명도 지원
• '웹(we)'에는 적합하지만 '인쇄(print)에는 적합하지 않음(인쇄에는 JPEG 또는 TIFF 사용)
• 이미지 픽셀은 픽셀 당 8 비트 또는 16 비트의 색 농도로 저장된다
• JPEG 및 GIF보다 더 높은 색 농도

■ TIFF (Tagged Image File Format)

• 무손실 압축 사용
• '웹(web)'이 아닌 '인쇄(print)'에 최적화
• 이미지 품질이 중요하고 파일 크기가 문제가 되지 않을 때 사용
• 전문 사진 촬영에 사용
• 압축 및 비 압축 이미지 지원
• 다양한 색상 공간 지원
• 사진 작가와 프린터 사이에서 인기
• 이미지 픽셀은 픽셀 당 8, 16 및 32 비트의 색 농도로 저장된다

■ SVG (Scalable Vector Graphics)

• 수학 방정식이 있는 이미지
• XML을 기반으로하며 그래픽 요소에만 사용됨
• 단순한 일반 텍스트, 선, 곡선, 모양 및 색상으로 제작
• 래스터 이미지(JPEG, PNG, GIF, TIFF 등)와 달리 SVG는 해상도에 독립적이다
• 품질 저하없이 크기 조정 가능
• 로고, 조판, 일러스트레이션 등에 사용된다

■ RAW (aka. Digital Negatives)

• 실제 사진이 아니며 파일 형식이 아니다
• 이미지를 만드는 데 사용할 수 있는 정보를 포함한다
• 매우 가볍게 처리된 파일에는 카메라로 캡처한 원본 정보가 많이 포함되어 있다
• 컴퓨터에서 열려면 특수 코덱이 필요하다
• 더 많은 편집 옵션을 제공한다
• 이미지 캡처 후 화이트 밸런스 및 노출 보정 가능
• 전문 사진 작가는 RAW로 촬영하므로 편집할 때 더 많은 데이터를 사용할 수 있다
• 나중에 JPEG, PNG 등과 같은 다른 손실 또는 무손실 형식으로 변환할 수 있다

■ PDF (Portable Document Format)

• 문서와 그래픽을 올바르게 표시하기 위한 이미지 형식
• 거의 모든 브라우저, OS, 장치에서 지원
• 매우 강력한 벡터 기반
• 래스터 그래픽, 양식, 스프레드 시트도 표시할 수 있다
• 많은 프린터가 기본 제공 형식으로 선호하는 유비쿼터스 파일
• Illustrator 및 Photoshop은 PDF 형식으로 내보낼 수 있다

■ EPS (Encapsulated Postscript)

• 주로 벡터에 사용되지만, 래스터 및 벡터 이미지 데이터를 모두 포함한다
• 일반적으로 더 큰 디자인에 사용할 수 있는 단일 디자인 요소를 포함한다
• 텍스트도 포함할 수 있다

■ AI (Adobe Illustrator Artwork)

• Adobe 에서 개발 한 독점 파일 형식
• EPS 또는 PDF 형식으로 단일 페이지 벡터 기반 도면을 나타내는 데 사용된다
• 포함되거나 링크된 래스터 이미지(raster images)를 가질 수 있다
• JPG, PNG 등과 같은 다른 파일 형식으로 내보낼 수 있다

■ PSD (Photoshop Document)

• Adobe 에서 개발한 독점 파일 형식
• Photoshop 에서 데이터 저장에 사용하는 기본 형식
• 사용자가 이미지의 개별 레이어로 작업할 수 있다
• JPG, PNG 등과 같은 다른 파일 형식으로 내보낼 수 있다

이제 이미지에 투명도를 사용하지 않는 경우, 이미지에 PNG를 사용하면 안 되는 이유를 알 수 있다. 이는 일부 큰 사이트에서 PNG 형식으로 업로드된 이미지의 화질을 충분히 압축할 수 없기 때문에 이미지 풀질을 저하시키는 이유이기도 하다.

추가로 아래 링크에서 이미지 파일 형식에 대해 자세히 알아볼 수 있다.

• 디자인로그 - 15가지 최고의 이미지 파일 형식, 유형별 사용 사례 및 장점과 단점 정리
• 99design - Image file formats: when to use each file type

원문 참조. Digital images 101: all you need to know as a designer