스케치 Export 파일 형식 알아보기
Raster Graphics & Vector Graphics
스케치의 Export 기능을 보면 PNG, JPG, TIFF, WEBP, PDF, EPS, SVG 이렇게 총 7가지의 포맷을 지원합니다. 이 포맷에 대해서 한번 알아보겠습니다.
회색 라인 위에 있는 것은 Raster Graphics, 아래에 위치한 것은 Vector Graphics라고 부릅니다. 자세한 설명은 아래에 있습니다.
들어가기 전 용어설명 :
*손실 압축 : export 할 때 이미지를 압축하게 되는데 용량이 줄어들면서 이미지손실이 생기는 것을 말합니다.
*비손실 압축 : 압축할 때 이미지 손실이 생기지 않는 것을 말합니다.
- Raster Graphics
Raster Graphics는 정사각형 모양의 픽셀 수백 개가 모여 전체 이미지를 구성하는 방식으로, 비트의 지도(Map of bits)라는 뜻의 '비트맵(Bitmap)'이라고도 불립니다.
0. 스케치에는 없지만 알면 좋은 GIF (Graphic Interchange Format)
비손실 압축을 사용하며, 한정된 256개의 컬러(8비트)를 지원합니다. 애니메이션을 지원하기 때문에 움직이는 이미지가 필요할 때 주로 쓰입니다. 저자는 '지프'로 읽는다고 밝힌 바가 있지만 아직까지 이렇게 읽는 분을 만난 적이 없습니다 : D
1. PNG (Portable Network Graphics)
비손실 압축을 사용하며, 고화질 이미지가 필요할 때 사용됩니다. 재편집용으로도 많이 쓰이는 파일 포맷입니다. 24비트의 트루 컬러(16777216개의 컬러)를 지원합니다. 투명도가 지원되기 때문에 이를 활용한 이미지가 필요할 때 주로 쓰입니다. PNG는 공식적으로는 "핑"(/pɪŋ/)이라고 읽지만, 대부분은 "피엔지"라고 영어 철자 그대로 읽습니다.
*PNG-8, PNG-24, PNG-32의 차이
다른 그래픽 툴에 보면 PNG-8과 PNG-24를 설정할 수 있습니다. 여기서 숫자는 비트를 의미하며, 8비트는 256개의 컬러, 24비트는 16777216개의 컬러(트루 컬러)를 지원합니다. 32비트는 24비트에 투명도(8비트)를 추가한 것을 의미합니다. 스케치는 비트를 따로 설정할 수 없으며 32비트를 default로 사용하고 있습니다.
2. JPG (Joint Photographic Express Group)
손실 압축 형식으로 파일 크기가 작기 때문에 웹에서 널리 쓰입니다. 압축률을 높이면 파일 크기는 작아지지만 이미지 품질은 더욱 떨어집니다. 참고로 JPG Quality를 100%로 해도 이미지 손실이 일어난다고 합니다.
Progressive를 체크한 jpg는 온라인상에 이미지를 불러올 때 저화질의 이미지를 먼저 불러온 후에 점차적으로 선명해집니다. 더 빠르게 다운로드되는 듯한 느낌이 필요할 때 사용됩니다.
Save for web을 체크하면 Color profile과 EXIF metadata가 삭제된 상태로 저장됩니다. Color profile은 다양한 포맷에 사용될 수 있도록 컬러 값을 만들어 주는 것을 말하고, EXIF metadata는 디지털카메라에 쓰이는 이미지 파일 포맷을 말합니다.
즉, Save for Web을 체크한 이미지는 웹에서만 쓰일 것이기 때문에 color profile과 EXIF metadata는 필요 없게 됩니다.
캡처된 이미지를 보면 크기가 다르고, 색상 프로파일이 추가된 것을 알 수 있습니다.
3. TIFF (Tagged Image File Format)
앨더스(Aldus)사와 마이크로소프트사가 공동 개발한 이미지 저장 포맷입니다.
여러 가지 면에서 PNG와 유사하지만 일부 운영체제에서만 사용되며, 용량이 크다는 단점이 있습니다.
*한 번도 사용해본 적이 없습니다...
4. WEBP (Web Photographic(?))
2010년 9월 30일 JPEG를 대체하기 위해 구글이 공개한 이미지 포맷입니다. 기존 이미지 포맷의 3대장인 GIF, PNG, JPEG의 특징을 모두 갖고 있습니다. 손실 압축(JPEG)과 비손실 압축(PNG, GIF)을 둘 다 지원하고 애니메이션(GIF)과 투명도(PNG)도 지원합니다. 하지만 지원하는 브라우저가 많지 않고 모바일은 안드로이드만 지원합니다. 구글이 7년째 밀고 있지만 점유율은 0.03 정도....라고 합니다.
- Vector Graphics
Vector Graphics는 점과 점을 연결해서 만든 점, 선, 면을 이용해 그래픽을 만드는 방식입니다. 벡터의 점은 좌표계(x, y)로 구성되기 때문에 Raster Graphics(Bitmap)과 달리 크기 조절이나 변형할 때 이미지가 깨지지 않습니다.
1. PDF (Portable Document Format)
어도비에서 개발한 전자 문서 형식으로, 일반 문서 및 문자, 도형, 그림, 글꼴을 포함할 수 있습니다. 암호화 및 압축 기술을 통해 내용의 변조가 어렵고 다양한 프로그램에서 지원이 가능하여 많이 쓰이고 있습니다.
*어도비에서 어크로뱃 리더(현재의 어도비 리더)를 무료로 배포하기 시작하면서 온라인 상의 인쇄용 문서의 실질적 산업 표준으로 자리 잡게 되었다고 합니다.
2. EPS (Encapsulated PostScript)
인쇄 디자인용 벡터 포맷으로 최근에는 PDF를 더 많이 사용한다고 합니다.
3. SVG (Scalable Vector Graphics)
1999년 W3C의 주도하에 개발된 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식입니다. 파일이 코드로 되어있어서, 일러스트레이터와 같은 벡터 드로잉 프로그램이나 메모장과 같은 문서편집기로도 편집이 가능합니다. 코드로 되어있기 때문에 모든 스크린에서 화질이 선명하며, 최소 용량이고, 편집과 수정이 쉽다는 장점이 있습니다.
참고자료
