17 min read

이미지를 저장하는 파일 확장자 알아보기

이미지를 저장하는 파일 확장자 알아보기

여러가지 종류의 디자인 콘텐츠 저장하기 위해서 다양한 파일 확장자(File Format)가 사용되고 있습니다. 이번 뉴스레터에서는 디자인 작업에서 많이 사용되는 여러 파일 확장자에 대해 알아보겠습니다. 그래픽 파일 형식은 이미지 데이터 표시방법(픽셀인지 벡터인지), 지원하는 압축 기법, 사용되는 용도 등에서 차이가 있습니다. 작업 상황에 맞게 파일 형식을 지정하여 저장해야 합니다.

벡터 파일

벡터(Vector) 파일은 그리드에 점을 설정하는 수학 공식을 기반으로 만들어진 고해상도 이미지입니다. 벡터 파일의 핵심 특징은 가변성입니다. 높은 해상도를 유지한 채로 얼마든지 크기를 조정할 수 있기 때문에 다양한 크기로 조정해야 하는 이미지에 적합합니다. 대표적인 벡터 파일 포맷으로는 SVG, STL, EPS가 있습니다.

래스터 파일

래스터(Raster) 이미지 파일은 픽셀이 그리드 형태로 모여 만들어진 이미지입니다. 하나의 픽셀이 한 가지 색상을 표현하며, 일정한 수의 색상 픽셀로 구성되어 있기 때문에 파일 크기를 변경하면 해상도가 저하됩니다. 온라인이나 인쇄 매체에서 볼 수 있는 대부분의 이미지가 래스터 이미지 파일이며, 많은 프로그램으로 열 수 있습니다. 대표적인 래스터 파일 포맷으로는 GIF, PNG, JPEG이 있습니다.

RAW 파일

RAW 파일로 촬영하면 디지털카메라에서 제어할 수 있는 부분이 많아집니다. 촬영된 사진은 이미지 파일이 아닌 RAW 파일로 저장됩니다. 세부 정보를 최대한 많이 포함하므로 크기가 크며, 나중에 다른 프로젝트에 사용하기 위해 편집할 수 있습니다. 이를 위해서는 RAW 파일을 가져온 다음, 이미지 포맷으로 내보내 작업해야 합니다. 대표적인 RAW 파일 포맷으로는 DNG 파일이 있습니다.


주요 파일 포맷

JPEG(*.jpg)

JPEG(Joint Photographic Experts Group) 형식은 1986년 ISO와 CCITT가 공동으로 만든 컬러 정지 화상의 국제표준 압축방식입니다. 이 형식은 풀 컬러(full-color)와 그레이 스케일(gray-scale)의 압축을 위하여 고안되었으며, HTML(Hypertext Markup Language) 문서에 사진과 기타 연속톤 이미지를 나타낼 때 주로 사용하는 파일 형식입니다.

손실 압축방식(불필요한 데이터를 삭제하는 방식)으로 압축하여 화질의 저하 없이 파일을 압축합니다. 최대 1/20까지 이미지를 압축하며, 24비트 컬러의 트루컬러를 지원하고 1,600만 색상을 표시할 수 있어 고해상도 표시장치에 적합합니다. 인터넷뿐만 아니라 멀티미디어 환경에서도 대중적인 파일 포맷입니다. 이미지 파일 압축률이 높으며 적은 용량으로 고화질의 사진을 저장할 수 있다는 장점이 있습니다. 제작시에 압축률을 조절할 수 있어 파일 크기 조절이 가능하지만 압축률을 높이면 화질이 떨어집니다. GIF와 함께 인터넷에서 가장 자주 사용되며 GIF에 비해 데이터의 압축 효율이 더 좋은 편입니다.

Compuserve GIF(*.gif)

GIF(Graphics Interchange Format)는 HTML(Hypertext Markup Languag) 문서에서 인덱스 색상 그래픽과 이미지를 나타낼 때 주로 사용되는 파일 형식입니다. CompuServe 라는 미국 통신회사에서 저속 모뎀이나 업로드나 다운로드를 할 목적으로 개발하였습니다. GIF는 파일 크기와 전자 전송 시간을 최소화하기 위해 디자인된 LZW 압축 형식입니다. GIF 형식은 인덱스 색상(8비트 256색 이하의 제한된 색상) 이미지에 투명도를 유지할 수 있고, 자체적인 애니메이션 기능을 제공하지만 알파 채널은 지원하지 않습니다. 파일의 용량이 작아 웹 상에서 빠르게 로딩되며 이미지의 손상이 적은 편이어서 JPG 포맷과 함께 웹용 이미지 포맷의 표준으로 자리잡고 있습니다. 배경을 투명하게 저장할 수 있고 소위 움짤이라고도 하는 간단한 애니메이션을 만들 수 있습니다.

PNG(*.png)

PNG(Portable Network Graphic) 형식은 GIF의 대안으로 특허 없이도 사용할 수 있도록 W3C (world wide web consortium)에서 제정한 파일 포맷입니다. 가장 최근에 개발된 웹용 그래픽 포맷으로 무손실 압축 방식 파일 포맷으로 화면용 이미지 파일 포맷에서 가장 선명하게 이미지를 표현합니다. 8비트부터 16비트, 24비트 이미지 모두를 저장할 수 있는 장점이 있습니다. 256 컬러의 PNG-8 포맷과 함께 24비트 컬러의 PNG-24 포맷이 함께 제공됩니다. 특히, PNG-24 포맷의 경우 JPG 포맷과 같이 24비트의 풀컬러 이미지를 무손실 압축하여 저장함과 동시에 원 이미지에 전혀 손상을 주지 않는 압축과 완벽한 알파 채널(alpha channel)을 지원하는 등 이전에는 불가능했던 다양한 기능들을 포함하고 있습니다.

GIF와 달리 PNG는 24비트 이미지를 지원하며 가장자리에 들쭉날쭉한 계단 모양이 나타나지 않는 배경 투명도를 만듭니다. 일부 오래된 브라우저에서 지원하지 않는 경우도 있기 때문에 사용에 주의가 필요합니다. PNG 형식은 알파 채널이 없는 RGB, 인덱스 색상, 회색 음영 및 비트맵 모드 이미지를 지원하고 회색 음영과 RGB 이미지에 투명도를 보존합니다.

Photoshop PDF(*.pdf)

PDF(Portable Document Format)는 여러 플랫폼과 응용 프로그램 간에 사용할 수 있는 유연성이 뛰어난 파일 형식입니다. 어도비 사의 아크로뱃(Adobe Acrobat) 프로그램의 파일 포맷으로 온라인 상에서 운영 체제에 상관없이 편집된 상태 그대로의 문서를 보여 줄 뿐 아니라, 문자나 벡터 그래픽을 포함시켜 깨끗한 출력물을 얻을 수 있습니다. 국제 표준 인쇄 출판 기술언어인 포스트스크립트(PostScript)를 기반으로 어떠한 운영체제를 탑재한 PC라도 동일한 형태의 문서를 볼 수 있는 파일 포맷입니다. 여러 플랫폼과 응용 프로그램 간에 사용할 수 있는 유연성이 뛰어나므로 PDF 파일은 글꼴, 페이지 레이아웃 및 벡터와 비트맵 그래픽을 정확하게 표시하고 유지합니다. 또한 PDF 파일에는 전자 링크와 같은 전자 문서 검색 및 탐색 기능이 포함될 수 있습니다. PDF는 채널당 16비트 이미지를 지원합니다.

TIFF(*.tif)

TIFF(Tagged-Image File Format)는 호환성이 가장 뛰어난 이미지 포맷입니다. 응용 프로그램과 컴퓨터 플랫폼 간에 파일을 교환할 때 사용되며 PC와 MAC에서 가장 널리 쓰입니. 인쇄를 목적으로 24개의 알파 채널을 포함시킬 수 있고, LZW라는 비 손실 압축 방법을 사용하여 파일의 용량을 최대한 줄여주는 특성이 있습니다. 응용프로그램 간 그래픽 데이터 교환을 목적으로 개발된 형식으로 전자 출판 등에 이용하기도 합니다. TIFF 형식은 알파 채널이 포함된 CMYK, RGB, Lab, 인덱스 색상 및 회색 음영 이미지와 알파 채널이 포함되지 않은 비트맵 모드 이미지를 지원합니다.

TIFF는 거의 모든 페인트, 이미지 편집 및 페이지 레이아웃 응용 프로그램에서 지원하는 비트맵 이미지 형식으로 다양한 용도로 사용할 수 있습니다. 사실상 모든 데스크탑 스캐너에서 TIFF 이미지를 만들 수 있습니다. TIFF 문서의 크기는 최대 4GB입니다.

BMP(*.bmp, *.rle)

BMP는 DOS와 Windows 호환 컴퓨터에서 사용되는 Windows 표준 이미지 형식으로 가장 단순한 형태의 비트맵 포맷입니다. BMP 파일 포맷은 이미지의 픽셀 색상값을 그대로 저장하며, 압축이 되지 않아 용량이 크며, 윈도우의 바탕화면에 사용가능합니다. BMP 형식은 RGB, 인덱스 색상, 회색 음영 및 비트맵 색상 모드를 지원하고 Windows 또는 OS/2® 형식과 8비트/채널의 비트 심도를 지정할 수 있습니다. Windows 형식을 사용하는 4비트 및 8비트 이미지에 대해 RLE 압축을 지정할 수도 있습니다. 레이어와 알파채널은 지원하지 않습니다.

BMP 이미지는 대개 아래쪽에서 위쪽으로 작성되지만 [행 순서 뒤집기] 옵션을 사용하여 위쪽에서 아래쪽으로 작성할 수 있습니다. [고급 모드]를 클릭하여 다른 인코딩 방법을 선택할 수도 있습니다. [행 순서 뒤집기]와 [고급 모드]는 게임 프로그래머나 DirectX®를 사용하는 사람에게 가장 필요합니다.

EPS(*.eps)

EPS(Encapsulated PostScript) 언어 파일 형식은 벡터와 비트맵 그래픽이 모두 포함될 수 있으며 모든 그래픽, 일러스트레이션 및 페이지 레이아웃 프로그램에서 지원합니다. EPS 형식은 출판 인쇄용 전용 포맷으로 4도 분판 출력을 목적으로 하여 RGB모드를 CMYK 모드로 변환하여 저장합니다. EPS는 벡터와 비트맵 그래픽이 모두 포함될 수 있으며 Quark Xpress(Mac용 편집 프로그램)나 Page Maker 같은 모든 그래픽, 일러스트레이션 및 페이지 레이아웃 프로그램에서 지원합니다. EPS 형식은 Illustrator, Pagemaker, QuarkXpress 등의 응용 프로그램 간에 포스트스크립트 아트웍 파일을 전송할 때 사용되는 포맷입니다. 벡터 그래픽이 들어 있는 EPS 파일을 열 때 Photoshop에서는 이미지를 래스터화하고 벡터 그래픽을 픽셀로 변환합니다.

EPS 형식은 Lab, CMYK, RGB, 인덱스 색상, 이중톤, 회색 음영 및 비트맵 색상 모드를 지원하며 알파 채널은 지원하지 않지만 클리핑 패스는 지원합니다. 표준 EPS 형식의 하나인 DCS(Desktop Color Separation) 형식을 사용하면 CMYK 이미지의 색상 분판을 저장할 수 있습니다. DCS 2.0 형식을 사용하여 별색 채널이 들어 있는 이미지를 내보낼 수 있습니다. EPS 파일을 인쇄하려면 포스트스크립트 프린터를 사용해야 합니다.

파일의 용량이 크기 때문에 IBM PC에서는 잘 사용하지 않지만, 인쇄와 출력에 관련된 장비들을 지원하는 맥에서 가장 많이 사용되는 파일 포맷 방식입니다.

Photoshop PSD(*.psd, *.pdd)

PSD 파일은 포토샵에서 사용하는 기본 파일포맷으로 비트맵과 벡터방식을 동시에 지원합니다. 포토샵의 모든 기능을 저장할 수 있으므로 작업 중인 파일을 저장하면 PSD로 저장됩니다. 포토샵에서 작업한 원본을 저장하려면 이 확장자를 사용해야 합니다. 대용량 문서 형식(PSB)을 제외하고는 모든 Photoshop 기능을 지원하는 유일한 형식으로 포토샵에서 다루는 모든 문자레이어, 투명레이어(Layer), 채널(Channel), 스팟채널, 패스(Path) 등을 모두 저장할 수 있으며 이미지의 압축율도 좋고 손상도 없어 무엇보다 포토샵의 모든 작업과 효과가 그대로 저장되므로 용량이 큰 편입니다.

Adobe 프로그램들은 서로 긴밀하게 통합되어 있으므로 Adobe Illustrator, Adobe InDesign, Adobe Premiere, Adobe After Effects 및 Adobe GoLive와 같은 기타 Adobe 응용 프로그램에서 PSD 파일을 불러올 수 있으며 Photoshop 기능은 대부분 그대로 유지됩니다.

Illustrator AI(*.ai)

AI 파일은 Adobe Illustrator의 기본 벡터 파일 포맷으로 비트맵 이미지와 벡터 이미지를 동시에 저장할 수 있지만 기본적으로 벡터를 위한 포맷입니다. AI는 Adobe Illustrator의 약어로, 벡터 이미지용으로 Adobe에서 개발하였습니다. 다른 벡터 이미지 파일 유형으로는 PDF, EPS, SVG 등이 있습니다. 픽셀로 만든 래스터 파일과 달리 벡터 파일은 무한히 확장 가능한 복잡한 그래프 같은 공식에 기반해 만들어지므로 크기를 조정해도 해상도가 저하되지 않습니다. 비트맵 이미지 정보를 사용하는 대신 AI 파일은 화질을 잃지 않고 크기를 조정할 수 있는 경로로 그림을 저장합니다.

SVG(*.svg)

SVG(Scalable Vector Graphics)는 웹 친화적인 벡터 파일 포맷입니다. 채도, 삽입형 글꼴, 투명도, 동영상, 필터 효과, HTML 코드 내에서 텍스트 명령어를 사용하기 등과 같은 고해상도 그래픽들이 사용되는 개방형 표준 벡터 그래픽 언어입니다. SVG는 XML 코드로 작성되므로 모든 텍스트 정보를 모양이 아닌, 텍스트로 저장합니다. 따라서 Google과 같은 검색 엔진이 SVG 그래픽을 키워드로 읽을 수 있으며, 이는 웹 사이트의 검색 순위를 높이는 데 큰 도움이 됩니다. 변환이 자유로운 벡터 그래픽으로 흔히 알고 있는 플래시와 마찬가지로 SVG 역시 벡터 기반 그래픽이기 때문에 그래픽을 축소 또는 확대하는 경우에 그래픽이 손상되지 않습니다. 정확한 색상 표현이 가능해 화면상에서 볼 때와 인쇄물로 볼 때 정확히 같은 색상을 표현하는 것을 보장해줍니다. SVG에는 1600만 이상의 색상들을 제대로 지원합니다.

지금까지 주요 이미지 파일포맷에 대해 알아보았습니다. 이 밖에도 많은 파일 확장자들이 사용되고 있지만 가장 많이 사용되는 몇 가지를 정리해 보았습니다. 기회가 되면 다른 확장자들에 대해서도 알아보도록 하겠습니다.

그럼 다음 뉴스레터에서 다시 만나 뵙겠습니다. 감사합니다.

누구나 하는 디자인 : 마라 스튜디오 클래스
마라스튜디오는 왕초보를 위한 디자인 도구 교육 채널입니다. 누구나 쉽게 디자인 할 수 있어요. 😃 안녕하세요. 마라입니다. 마라스튜디오 채널은 왕초보를 위한 디자인 만들기 정보 채널입니다. 포토샵이 없어도 쉽게 디자인 할 수 있는 디자인 플랫폼을 사용하는 방법, 꼭 필요한 그래픽 디자인 관련 지식들, 나만의 디지털 콘텐츠를 직접 만드는 방법을 강의합니다. 저는 오랫동안 학원에서 포토샵, 일러스트레이터, 웹디자인 강의를 했고 그 경험을 바탕으로 마라 스튜디오만의 강의 시스템을 만들어 가는 중입니다. 이 채널은 디지털 콘텐츠를 처음 만드는 초보자를 대상으로 실제 사용 면에서 유익한 콘텐츠를 만들기 위해 기획된 프로젝트입니다. 좋은 영상으로 여러분께 도움이 되길 바라면서 꾸준히 진행하겠습니다. 질문이 있으시면 영상 아래 댓글로 남겨주시거나 오픈카톡방에 올려주세요. 오픈 카톡방에서는 더 다양한 정보와 소식들이 자주 공유될 예정입니다. [강의 학원 경력] 종로 하이미디어,신촌 더좋은,강남 더좋은, 직업학교 등 [자격 사항] 컴퓨터 그래픽스 운용기능사 시각디자인 산업기사 웹 디자인 기능사 Adobe ACA Photoshop Adobe ACA Illustrator 🚩 마라스튜디오 오픈카톡방 : 오픈카톡방 입장하기 https://open.kakao.com/o/gqy4skGf 👆 🚩 마라스튜디오 홈페이지 : https://marastudio.kr/ 👆 🚩 마라스튜디오 블로그 : https://blog.naver.com/mara-studio 🚩 마라스튜디오 뉴스레터 신청 : 마라스튜디오 뉴스레터 : https://marastudio.ghost.io/ 📍 마라스튜디오 인스타그램: https://www.instagram.com/mara.studio.class/