이번 포스팅에서는 컴퓨터가 어떤 방식으로 여러 그래픽 데이터들(이미지나 동영상 등 대용량 파일)을 읽고 쓰고 처리하는지 알아보고 여러 데이터 형식들을 정리해보았다.

---

1. 파일과 확장자

컴퓨터 파일이란 컴퓨터 등의 기기에서 의미 있는 정보를 담는 논리적인 단위를 의미한다. 일반적으로 이름과 확장자로 파일을 식별할 수 있으며, 인코딩 과 디코딩 을 통해 파일을 읽거나 쓸 수 있다.

인코딩 (encoding) : 사람이 인지할 수 있는 형태의 데이터를 약속된 규칙에 의해 컴퓨터가 사용하는 0과 1로 변환하는 과정 (= 코드화, 암호화, 부호화)

디코딩 (decoding) : 디지털로 변환된 형태를 원래 상태로 되돌리는 과정(= 복호화)

코덱 (CODEC) : COmpressor와 DECompressor의 합성어로, 동영상 혹은 데이터 스트림이나 신호에 대해 압축을 하고(인코딩), 압축을 풀고(디코딩) 할 수 있는 하드웨어나 소프트웨어 혹은 알고리즘.

파일의 종류는 다음과 같다.

1. 텍스트 파일
2. 바이너리(이진) 파일

텍스트 파일은 ASCII나 유니코드로 이루어진 텍스트 파일을 의미하고, 바이너리(이진) 파일은 이미지, 영상, exe와 같은 실행파일 등 텍스트가 아닌 모든 파일을 의미한다.

👆 이미지의 바이너리 파일 형태

👆 바이너리 파일을 메모장으로 열었을 때, 깨진 모습

확장자는 컴퓨터 파일의 이름에서 파일의 종류와 그 역할을 표시하기 위해 사용하는 부분으로 대부분의 OS에서 . 뒤에 나타나는 부분을 확장자로 인식한다. (ex. index.html, image.png)

바이너리 파일의 확장자는 종류가 되게 많은데 웹에서 자주 쓰일 것 같은 확장자들을 한번 정리해보았다. - 전세계의 모든 파일확장자들 모음

2. 마크업 파일

.HTML

HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)은 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다. 브라우저에 내장된 렌더링엔진이 HTML확장자를 가진 파일을 파싱하고, DOM트리를 구성하고 CSS와 함께 Render트리를 구성한다음, 화면을 그려준다.

HTM : 원래 확장자 명칭이 HTML이었으나 도스(MS-dos)와 Windows3.X 시절에는 확장자의 문자길이를 3글자로 제한했었기 때문에 당시엔 htm이라고 썼다고 한다. 기술적으로 차이가 없다.

.XML

XML (Extensible Markup Language)은 W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다. 주로 다른 종류의 시스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어졌다고 한다.

수많은 종류의 데이터를 유연하고 자유롭게 기술하는 데에 중심을 맞춰 탄생한 언어이기 때문에 다양한 용도로 응용되고 있다. JAVA로 만든 어플리케이션이나 C# 프로그램 등 다양하게 쓰이고 있다.

.SVG

SVG (Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. 도형의 기하학에서 텍스트 및 도형의 스타일링, 애니메이션, 비디오 및 오디오를 포함한 멀티미디어 프레젠테이션에 이르기까지 이미지 또는 웹 응용 프로그램의 모든 것을 표현할 수 있다.

XML로 기술하므로 웹 브라우저 상에서 열람할 수 있고 문서 편집기 등에서 편집할 수 있으며, 벡터그래픽이 때문에 확대,축소를 하여도 화질의 변화가 없다. 어도비 일러스트레이터와 같은 벡터 드로잉 프로그램을 사용하여 편집도 가능하다.

2. 이미지 파일

.PNG

PNG (Portable Network Graphics )는 손실이없고 휴대용이며 압축이 잘된 래스터 이미지 (비트 맵)의 저장 및 교환을위한 정적 파일 형식이다. 특허 문제가 얽힌 GIF 포맷의 문제를 해결하고 개선하기 위해서 고안되었고, 인덱스 색상, 그레이 스케일 및 트루 컬러 지원 및 알파 채널 투명성을 갖춘 풍부한 색상 제어 기능이 있지만 웹 상의 이미지 표시를 위해 개발되었기 때문에 CMYK 등의 색 공간은 지원하지 않는다.

PNG 포맷을 만들게 된 배경은 1995년, GIF에 사용되는 LZW 데이터 압축 알고리즘에 대해 소프트웨어 특허를 적용할 것이라고 공고하면서부터라고 한다. 또한 컴퓨터 성능이 좋아지면서 256 색만을 저장할 수 있는 GIF의 한계점도 PNG의 개발을 부추겼다고 한다.

PNG는 국제 표준과 W3C 표준으로 2003년 11월 10일 발표되었고, 현재 보편적인 그림파일 형식으로 자리잡게 되었다.

.GIF

GIF (Graphics Interchange Format)는 네트워크 상에서 그래픽을 압축하여 빠르게 전송하려는 목적으로 개발된 비트맵 그래픽 파일형식이다. 최대 256 색까지 저장할 수 있는 비손실 압축 형식이며, 국내에서는 여러 장의 이미지를 하나의 파일에 담을 수 있다는 성질 덕분에 움짤로 많이 불리고있다.

PNG와 비교

1. 대부분의 경우 PNG는 GIF보다 압축률이 더 높다. (PNG가 더 용량이 크지만 데이터손실이 없다)
2. GIF의 단색 투명층과 달리 PNG는 8비트 알파 채널을 이용한 다양한 투명층을 지원한다.
3. 256색까지 지원하는 GIF와 달리 PNG는 트루 컬러를 지원한다.
4. GIF에서는 제공되는 애니메이션을 PNG는 지원하지 않는다. (대안으로 PNG에 기반한 APNG, JNG, MNG와 같은 파일 형식이 제안되었다.)

.JPEG

JPEG (Joint Photographic Experts Group)은 정지 화상을 위해서 만들어진 손실 압축 방법 표준이며, jpg, jpeg, jpe 확장자로 사용된다. 사진에 특화된 손실 압축 알고리즘을 비교적 용량이 작은 파일을 만들 수 있다.

JPEG와 JPG의 혼용은 HTML과 HTM의 혼용과 마찬가지로 도스(MS-dos)와 Windows3.X 시절에는 확장자의 문자길이를 3글자로 제한했었기 때문이다. 기술적으로 차이없음.

3. 동영상 파일

디지털 형식의 일반 비디오 파일은 “코덱”과 “컨테이너”의 두 부분으로 구성된다. “코덱”은 비디오 파일을 압축하고 압축을 풀 때 사용되며, “컨테이너”는 디지털 파일(오디오와 비디오)에 대한 정보를 저장하는 파일 모음을 의미한다. 일부 인기있는 유형의 “컨테이너”는 FLV, MP4, AVI, MOV, WMV가 있다.

.FLV

FLV (Flash Video)는 한 때는 매크로미디어사가, 지금은 어도비 시스템즈사가 개발하고 있는 동영상 파일 포맷이다. 유튜브 같은 많은 인터넷 스트리밍 서비스을 하고 업체에서 많이 이용되고 있는 동영상 파일 포맷 이다.

주로 웹 환경에서 쓰이는 포맷이므로 다른 환경에서는 따로 인코딩하여 재생하는 경우가 많다.

.MP4

MP4 (MPEG-4 Part 14)는 미디어 컨테이너 포맷 표준이며, 고화질의 동영상을 높은 압축률로 저장하고 재생할 수 있다. 또한 인터넷을 통한 스트리밍을 지원하며, 파일 내 스트리밍 정보를 포함하기 위해 별도의 힌트 트랙이 사용된다.

H.264 codec 으로 인코딩된다.

.AVI

AVI (Audio Video Interleave)는 마이크로 소프트사에서 개발한 동영상 파일 포맷이다. 오디오와 비디오 파일이 함께 순차적으로 들어 있다고 해서 AVI (Audio Video Interleave) 라고 나타내고 있으며, 윈도우 시스템의 표준 동영상 파일 포맷으로써 널리 쓰고 있으며, 많은 압축 코덱(Codec)들이 존재한다.

MP4의 경우 국제 표준이기 때문에 표준에서 정한 몇가지의 코덱만을 사용할 수 있는 반면 AVI는 거의 모든 종류의 코덱을 담을 수 있다.

AVI 자체는 영상과 음향을 담는 컨테이너 역할을 할 뿐, 화질과 음질은 전적으로 해당 AVI가 무슨 코덱으로 압축되었는지에 의해 결정되기 때문이다. 또한 무슨 코덱으로 압축되었는지에 따라 재생여부가 달라진다.

.MOV

MOV (Quicktime Format)은 애플에서 개발한 동영상 파일 컨테이너이다. IOS 계열의 기기에서 녹화한 영상은 MOV컨테이너로 저장되며, AVI와 동일하게 여러 코덱이 존재한다.

MOV는 도대체 무슨 의미의 말인지는 모르겠다. 확장자는 보통 약자를 많이 쓰는 것 같은데 MOV는 Quicktime extension으로만 나온다..

.WMV

WMV (Windows Media Video Format)은 마이크로 소프트 사에서 개발된 동영상 파일 포맷이다. ASF (Advanced Systems Format) 기반의 파일 포맷이며,고압축 인터넷 환경에 적합하게 설계 되었다. WMV은 압축 후 파일 크기가 크게 줄어들어 비디오 품질이 떨어지는 단점이 있지만 휴대성이 좋다는 장점도 가지고 있다.

4. 폰트 파일

.TTF

TTF (True Type Font)는 TTF는 1980년대에, 마이크로소프트와 애플이 어도비에 대항하기 위해 만든 글꼴 저장 형식이다. 한때 비트맵을 대체하여 Windows 글꼴이 대부분 이 형식이었으나 지금은 레거시 기술로 넘어가고 최신 Windows의 기본 글꼴은 대부분 OTF로 대체되었다고한다. 제어점이 3개인 2차 베지어 곡선(Quadratic Bezier)을 사용한다.

.OTF

OTF (Open Type Font)는 1996년, 마이크로소프트와 어도비가 합작하여 발표한 글꼴 저장 형식이다. 3차원 베지어 곡선(Cubic Bezier)을 사용한다.

TTF vs OTF

1. TTF와 OTF 모두 벡터 그래픽 형태이다.
2. TTF는 접근성이 좋고 빠르기 때문에 문서작업에 용이하다.
3. OTF는 3차원 베지어 곡선을 이용하기 때문에 계산과정이 복잡하지만 섬세한 작업이 가능해서 그래픽작업에 용이하다.
4. TTF는 폰트타입(이탤릭, 볼드 등)을 하나하나 다른파일로 취급하지만 OTF는 묶어서 하나의 파일로 취급이 가능하다.

.WOFF

WOFF (Web Open Font Format)는 OTF와 TTF의 무단배포 등의 문제 등을 해결하기 위해 모질라 재단과 오페라 소프트웨어, 마이크로소프트에서 제안한 웹폰트 파일 형식이다. 기본적으로 OTF, TTF를 이용한 구조를 하고 있으며, 압축된 버전이라 웹에서 다운받아가며 사용하기에 최적화되어있다. 또한 글꼴 파일내에서 라이센스 및 메타데이터 등을 따로 포함할 수 있어 저작권 문제에 도움을 준다.

이러한 이유 등으로 인해 W3C의 웹 폰트 작업 그룹에서 권장하는 파일 형식이며 모든 브라우저에서 사용 가능하도록 표준화 되고 있는 추세이다. 출처 : WOFF - 나무위키

5. 참고자료

참고자료는 ❤️Web Graphics Archive❤️ 에도 업로드 되었으니 참고바랍니다.

File

• 컴퓨터 파일 - 위키백과 컴퓨터 파일 - 위키백과
• [텀즈] 파일 확장자 목록 전세계의 모든 파일형식들 모음 (파일 확장자 목록)
• 인코딩 - 나무위키 인코딩 - 나무위키
• [일반] 코덱? 인코딩? 디코딩? 코덱, 인코딩, 디코딩 정의
• 확장자 htm과 html의 차이는 ? 확장자 html 과 html의 차이
• 이미지 파일 형식의 차이(GIF, PNG, JPG, JPEG) 이미지 파일 형식의 차이(GIF, PNG, JPG, JPEG) - 확이의 i티타임
• 이미지 파일명 뒤에 붙는 JPG, GIF, PNG 포멧의 장단점과 차이점 JPG, GIF, PNG 차이점 - 세오의 어필로그
• Web에서 PNG , GIF, JPEG , SVG 중 어떤 것을 사용하면 좋을까요? Web에서 PNG , GIF, JPEG , SVG 중 어떤 것을 사용하면 좋을까요? - Soeun/Sona Lee - Medium
• 미디어 파일 포맷의 종류 미디어 파일 포맷의 종류
• MP4, AVI, TS, .. 동영상 확장자의 차이 MP4, AVI, TS, .. 동영상 확장자의 차이 - 와이즈스톤
• 가장 일반적인 5가지 비디오 형식에 대해 알아야 할 사항들 가장 일반적인 5가지 비디오 형식에 대해 알아야 할 사항들 | MotionElements