πŸ’Ύ 0101 κ·Έλž˜ν”½ 데이터 (읽고 μ“°κ³  맛보고 즐기고)

이번 ν¬μŠ€νŒ…μ—μ„œλŠ” 컴퓨터가 μ–΄λ–€ λ°©μ‹μœΌλ‘œ μ—¬λŸ¬ κ·Έλž˜ν”½ 데이터듀(μ΄λ―Έμ§€λ‚˜ λ™μ˜μƒ λ“± λŒ€μš©λŸ‰ 파일)을 읽고 μ“°κ³  μ²˜λ¦¬ν•˜λŠ”μ§€ μ•Œμ•„λ³΄κ³  μ—¬λŸ¬ 데이터 ν˜•μ‹λ“€μ„ μ •λ¦¬ν•΄λ³΄μ•˜λ‹€.


1. 파일과 ν™•μž₯자

컴퓨터 νŒŒμΌμ΄λž€ 컴퓨터 λ“±μ˜ κΈ°κΈ°μ—μ„œ 의미 μžˆλŠ” 정보λ₯Ό λ‹΄λŠ” 논리적인 λ‹¨μœ„λ₯Ό μ˜λ―Έν•œλ‹€. 일반적으둜 이름과 ν™•μž₯자둜 νŒŒμΌμ„ 식별할 수 있으며, 인코딩 κ³Ό λ””μ½”λ”© 을 톡해 νŒŒμΌμ„ μ½κ±°λ‚˜ μ“Έ 수 μžˆλ‹€.

인코딩 (encoding) : μ‚¬λžŒμ΄ 인지할 수 μžˆλŠ” ν˜•νƒœμ˜ 데이터λ₯Ό μ•½μ†λœ κ·œμΉ™μ— μ˜ν•΄ 컴퓨터가 μ‚¬μš©ν•˜λŠ” 0κ³Ό 1둜 λ³€ν™˜ν•˜λŠ” κ³Όμ • (= μ½”λ“œν™”, μ•”ν˜Έν™”, λΆ€ν˜Έν™”)

λ””μ½”λ”© (decoding) : λ””μ§€ν„Έλ‘œ λ³€ν™˜λœ ν˜•νƒœλ₯Ό μ›λž˜ μƒνƒœλ‘œ λ˜λŒλ¦¬λŠ” κ³Όμ •(= λ³΅ν˜Έν™”)

코덱 (CODEC) : COmpressor와 DECompressor의 ν•©μ„±μ–΄λ‘œ, λ™μ˜μƒ ν˜Ήμ€ 데이터 μŠ€νŠΈλ¦Όμ΄λ‚˜ μ‹ ν˜Έμ— λŒ€ν•΄ 압좕을 ν•˜κ³ (인코딩), 압좕을 ν’€κ³ (λ””μ½”λ”©) ν•  수 μžˆλŠ” ν•˜λ“œμ›¨μ–΄λ‚˜ μ†Œν”„νŠΈμ›¨μ–΄ ν˜Ήμ€ μ•Œκ³ λ¦¬μ¦˜.

파일의 μ’…λ₯˜λŠ” λ‹€μŒκ³Ό κ°™λ‹€.

  1. ν…μŠ€νŠΈ 파일
  2. λ°”μ΄λ„ˆλ¦¬(이진) 파일

ν…μŠ€νŠΈ νŒŒμΌμ€ ASCIIλ‚˜ μœ λ‹ˆμ½”λ“œλ‘œ 이루어진 ν…μŠ€νŠΈ νŒŒμΌμ„ μ˜λ―Έν•˜κ³ , λ°”μ΄λ„ˆλ¦¬(이진) νŒŒμΌμ€ 이미지, μ˜μƒ, exe와 같은 μ‹€ν–‰νŒŒμΌ λ“± ν…μŠ€νŠΈκ°€ μ•„λ‹Œ λͺ¨λ“  νŒŒμΌμ„ μ˜λ―Έν•œλ‹€.

binaryfile1

πŸ‘† μ΄λ―Έμ§€μ˜ λ°”μ΄λ„ˆλ¦¬ 파일 ν˜•νƒœ

binaryfile2

πŸ‘† λ°”μ΄λ„ˆλ¦¬ νŒŒμΌμ„ λ©”λͺ¨μž₯으둜 μ—΄μ—ˆμ„ λ•Œ, 깨진 λͺ¨μŠ΅

ν™•μž₯μžλŠ” 컴퓨터 파일의 μ΄λ¦„μ—μ„œ 파일의 μ’…λ₯˜μ™€ κ·Έ 역할을 ν‘œμ‹œν•˜κΈ° μœ„ν•΄ μ‚¬μš©ν•˜λŠ” λΆ€λΆ„μœΌλ‘œ λŒ€λΆ€λΆ„μ˜ 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


Written by@taenyKim
μ›Ή ν”„λ‘ νŠΈμ—”λ“œ 곡뢀 λΈ”λ‘œκ·Έ / Learn in Public

GitHubFacebook