디자이너 필수 이론 이미지 포맷(Format) 알아보기

안녕하세요
다들 명절 잘 보내셨나요?
긴 연휴 동안 코로나로 인하여 어디 나가기도 그렇고 해서 집에서 가족들과 함께 하는 시간을 가지면서
디자인에 필요한 기초적인 이론이 무엇이 있을까 고민하다가 디자이너 직업을 가지고 있으면서도 아직 모르는 분들이
계셔서 이미지 포맷(Format)에 대해 이야기해보자 생각이 들어 가능한 자세하고 쉽게 설명을 드려보려고 합니다.
매일 저장을 해야 하는 디자이너는 꼭 알아두면 좋을 것 같으니 꼭 끝까지 보시고 도움이 되면 좋겠습니다.

 

---

비트맵(Bitmap)

벡터(Vector)

두 분류로 나뉘는

이미지 포맷 종류

---

 

비트맵은 우리가 가장 자주 사용하는 저장 이미지 포맷입니다.

위의 이미지를 보면 알겠지만 작은 사각형(픽셀)이 모여 하나의 이미지를 만들어요

여기에 속하는 포맷은 Jpg(Jpeg), Png, Gif 등이 있습니다.

작은 사각형 하나하나가 모여 이미지를 표현하기 때문에

디테일한 표현이 가능하지만, 확대 시 픽셀 정보가 변하기 때문에 이미지가 깨져서 품질이 저하되어 보이는 게

단점입니다.

 

전에 해상도 ppi에 대해 알아본 적이 있었는데요

ppi에 대해 모르는 분들은 아래 링크를 통해 포스팅을 보시면 됩니다.

가로 2500px X 1768px는 가로 2500개의 사각 픽셀이 있고 세로 1768개의 사각 픽셀로 이루어진 하나의 이미지입니다.

즉 2500 X 1768 = 4,420,000 개의 픽셀이 이미지를 이루고 있다는 뜻입니다.

 

https://hohodesign.tistory.com/15

디자이너가 꼭 알아야 할 기본 이론 픽셀(Pixel) , 해상도(Resolution)이해하기

 

 

벡터(Vector)는 수학적인 알고니즘으로

점과 점을 픽셀이 아닌 하나의 선으로 표현하기 때문에

이미지를 키우거나 줄여도 전혀 깨지는 현상이 없기 때문에

회사 로고, 인포그래픽 그래픽 디자인, 캐릭터 디자인 등

크기를 자유롭게 변형을 해야 하는 디자인은

벡터를 사용해서 작업을 합니다.

벡터를 사용하는 가장 대표적인 프로그램은

어도비(Adobe)에서 개발한

일러스트레이터가 있습니다.

 

---

JPG

JPEG

(Joint Photographic Experts Group)

알아보기

---

JPG는 대중적인 이미지 포맷입니다.

핸드폰으로 사진을 촬영해서 컴퓨터로 옮기면 파일 확장명이 JPG로 되어 있는 것을 많이 보셨을 텐데요

JPG의 가장 큰 특징은 압축률이 좋아서 저용량으로 이미지를 저장할 수 있어 저장공간은 많이 차지하지 않는다는 장점이 있지만

대신 이미지를 압축하기 때문에 이미지 손신을 가져옵니다.

 

포토샵으로 예를 들어볼까요?

포토샵은 저장을 할 경우 압축 단계를 지정하는 옵션 창이 화면에 보이게 됩니다.

JPG는 이미지 손실을 가져오기 때문에 편집을 하는 용도로는 적합하지 않고 웹상에 업로드할 때

자주 사용되는 이미지 포맷입니다.

내가 웹상에 올릴 때 이미지 크기가 제한되어 있는 경우가 많습니다.

그럴 때 제한된 이미지 파일 크기에 맞추어 압축을 할 수 있다는 것이 가장 큰 장점이라 할 수 있어요

 

---

TIF

TIFF

(Tagged Image File Format)

알아보기

---

이미지 손실 없는 고화질 포맷

이미지 손실이 없기 때문에 PNG 파일 포맷이 나오기 전까진

편집디자인 쪽에서 많이 사용한 이미지 포맷입니다.

TIF는 Adobe와 Microsoft사가 공동으로 개발한 포맷으로

원본 이미지를 100% 표현한 동일한 품질을 가지고 있는 고품질 확장자입니다.

그러나 JPG 보다는 파일 크기가 상대적으로 큽니다.

 

TIF 포맷은 이미지 수정이 가능할 수 있도록

레이어 하나하나를 살려서 저장을 해줍니다.

 

위의 이미지를 이용해서 TIF와 JPG 확장자가 어떤 차이가 있는지 살펴보도록 하겠습니다.

정확한 차이를 보기 위해 이미지를 흑백으로 변경을 해주었어요

 

첫 번째 이미지는

원본 이미지와 TIF 이미지를 [Subtract]로 블랜딩(합성)을 해주었어요

Subtract는 하위 레이어 - 상위 레이어입니다.

그래서 아래위 레이어가 동일하기 때문에 빼주면 0이 되죠

그래서 검은색으로 보이게 됩니다.

육안으로는 JPG와 차이가 없어 보이지만

[Threshold]를 적용해서 보면 검은색 0으로 다 통일된 것을 볼 수 있어요

즉 다른 컬러가 전혀 포함되어 있지 않은 순수 검은색이란 의미입니다.

 

원본 이미지와 JPG를 [Subtract]로 블랜딩을 하면

TIF와 차이가 전혀 없어 보이지만

[Threshold]로 살펴보면 순수 검은색만 있는 것이 아닌 다른 컬러도 포함된 것을 알 수 있습니다.

즉 JPG로 저장을 하면 이미지 컬러에 손상이 가서 색상이 변하게 됩니다.

 

 

---

PNG

(Portable Network Graphics]

알아보기

---

PNG 파일 포맷은 이미지 손실이 없고

투명 배경을 그대로 유지할 수 있도록 해줍니다.

이미지 위에 배경이 제거된 로고를 넣어야 할 경우

PNG로 저장을 하면 배경이 투명하기 때문에 깔끔하게 이미지에 합성을 할 수 있습니다.

 

배경이 투명한 로고를 이미지 위에 합성을 해봤어요

정말 깔끔하게 합성이 됩니다.

투명 배경을 제공하지 않는다면 누끼를 딴다고 하죠

배경을 제거해야 하는 번거로움이 생기고 그리고 깔끔하게 제거도 되지 않기 때문에

PNG 포맷으로 저장을 해서 깔끔한 이미지 합성을 하는 것이 좋습니다.

 

 

---

GIF

(Graphics interchange Format)

알아보기

---

GIF 포맷은 투명 배경을 지원하고 애니메이션 효과도

지원을 해주는 포맷입니다.

 

요즘 움직이는 이미지로 움짤이라고도 하는

파일을 만들어 SNS에 올리는 사람들이 많아졌어요

그래서 GIF 파일로 만들어주는 어플도 엄청 많이 생겨났고

포토샵으로도 GIF 움짤 이미지를 만들 수 있습니다.

 

이미지를 보면 글씨가 움직이는 것을 볼 수 있죠

이렇게 여러 개의 이미지를 이동해서 하나의 움직이는 이미지로 만들어주는 장점도 있지만

지원하는 색상이 256으로 제한적이어서 높은 품질을 요구하는 이미지에는 적합하지 않아요

 

색상을 256 단계 컬러만 제공하고 있습니다.

이미지에 색상이 많이 포함되어 있다면 이미지 색감이 단순화되어 이미지 품질이 저하될 수 있어요

 

GIF 이미지는 배경이 투명하면

이미지 경계 부분이 칼 같이 잘라지는 이미지가 됩니다.

 

우측 PNG 이미지를 보면 배경이 투명한 것은 비슷하지만

이미지 경계부분이 부드러운 것을 볼 수 있습니다.

 

배경이 투명한 이미지를 원한다면 PNG로 저장하는 것이 좋아요

 

---

TGA

(Truevision Graphics Adapter]

알아보기

---

TGA 파일 포맷은 트루비전사의 타가보드를 위한 개발된 포맷입니다.

TGA 포맷은 32 비트  색상까지 저장이 되고, 무엇보다 손실이 없는 압축방식을

지원하고 있습니다.

TGA 파일은 3D 디자이너들이 자주 사용하는 포맷인데요

32비트로 저장을 할 경우 24비트까진 RED, GREEN, BLUE 색상을 표현하고

나머지 8비트는 배경 제거를 위한 알파채널이 생성이 됩니다.

 

---

여기서 잠깐

1비트에 2가지 색상이 들어가요

그럼 24비트란 2를 24번 곱한 16,777,216 색을 표현할 수 있습니다.

그래서 24비트란?

R 8비트 256 색

G 8비트 256 색

B 8비트 256 색

총 24비트의 색상을 갖게 됩니다.

---

이미지 파일을 보면

우측의 TGA 파일 포맷은 알파채널이 생성이 되어 있습니다. 

 

---

PSD

(Photoshop Document)

알아보기

---

PSD 파일 포맷은 포토샵에서만 사용하는

작업에서 사용한 레이어 모두를 그대로 간직한

편집 가능한 파일 포맷입니다.

 

물론 포토샵에서 레이어를 Merge 해서 레이어 합병을 하지 않는다면

모든 레이어는 원본 레이어 그대로를 유지할 수 있습니다.

PSD 파일이 있어야 작업 이미지 수정 편집이 가능합니다.

 

포토샵에서 PSD 작업 파일을 열면 위와 같이

작업을 위해 쌓아 두었던 레이어와 스타일 모두가

유지된 상태로 열립니다.

건축 CG 리터칭 작업을 하면 수정이 정말 많이 있기 때문에

반드시 PSD 파일로 저장을 하는 습관을 꼭 가지셔야 

나중에 불상사가 일어나지 않으니

저장하는 습관을 꼭 가지시길 바랄게요

 

---

---

PDF

(Portable Document Format)

알아보기

---

요즘 시대는

스마트폰으로도 파일을 주고받는 정보의 시대입니다.

그런데 파일을 저장할 때 해당 기기에 받을 파일을 열 수 있는

확장자 프로그램이 없다면 아무리 좋은 자료라도 무용지물이 되겠죠?

 

그래서 PDF 포맷이 요즘 시대에는 정말 사용하는

포맷이 되었습니다.

 

PDF는 원본의 속성을 그대로 간직한 상태에서 압축하고 고정합니다.

그래서 PDF 파일을 받으면 PDF 뷰어만 있으면

원본 상태 그대로를 볼 수 있습니다.

 

디자이너들이 인쇄소에 맡길 때 PDF로 변환해서 전송하는 경우가 정말 많아요

왜냐하면 전송을 하다가 이미지가 깨질 수 있고

또 적용된 폰트가 깨지거나 이미지가 누락되거나 할 수 있는 많은 걱정들을

한 번에 잠식시켜버릴 수 있기 때문입니다.

 

쉽게 말하면 PDF는 최종 파일이 흔들리지 않도록 코팅을 해버리는 효과와

비슷하다고 볼 수 있습니다.

 

위의 이미지와 같이

이미지가 고정되어 어디서나 원본 상태 그대로를 볼 수 있습니다.

 

---

EPS

(Encapsulated PosrScript)

알아보기

---

EPS 파일 포맷은

비트맵 이미지와 벡터 이미지를 한 번에 저장이 가능하고

CMYK 모두를 지원하기 때문에

편집 디자이너들이 작업의 편의상 많이 사용하는 이미지 포맷입니다.

 

 

---

AI

(Adobe Illustrator)

알아보기

---

포토샵에서는 PSD 파일이 있었다면

일러스트레이터에선 AI 파일 포맷이 존재합니다.

이미지를 키우거나 줄여도 전혀 손상이 없고 일러스트레이터에서 작업한 모든 레이어와

효과가 한 번에 저장이 되기 때문에 

일러스트레이터로 작업한 파일을 일러스트레이터 프로그램에서

수정할 수 있는 일러스트레이터 전용 프로그램 포맷이라고 보면 됩니다.

 

---

---

글 속에 숨은 TIP과 작은 행복을 찾으셨나요?

호호디자인은 좋아요와 구독하기로 먹고삽니다.

---