안녕하세요! 이번에는 프론트엔드 개발자라면 실무에서 정말 밥 먹듯이 마주치게 되는 'MIME 타입(MIME types)'에 대해 알아보겠습니다.
파일 업로드 기능을 구현하거나, 서버에서 엑셀 파일, 이미지, PDF 등을 다운로드하는 API를 연결할 때 브라우저에게 "이 파일은 이런 종류의 파일이야!"라고 알려주는 아주 중요한 역할을 하죠. 어떤 확장자가 어떤 MIME 타입을 갖는지 눈에 익혀두면 나중에 정말 큰 도움이 된답니다. 시작해 볼까요?
흔히 쓰이는 미디어 타입 (Common media types)
이 문서에서는 가장 흔하게 쓰이는 MIME 타입들을 파일의 기본 확장자(extension)를 기준으로 정렬하여, 해당 문서의 종류와 함께 정리해서 보여줍니다.
다음 두 가지 중요한 MIME 타입은 꼭 알아두셔야 하는 '기본(default) 타입'이에요:
text/plain은 텍스트 파일의 기본값입니다. 텍스트 파일은 사람이 읽을 수 있어야 하고, 바이너리(이진) 데이터를 포함해서는 안 됩니다.application/octet-stream은 텍스트가 아닌 다른 모든 경우의 기본값입니다. 파일 종류를 알 수 없을 때 이 타입을 사용해야 하죠. 브라우저들은 소프트웨어 취약점이나 위험한 동작으로부터 사용자를 보호하기 위해, 이 타입의 파일들을 다룰 때 특별히 조심한답니다.
💡 강사의 팁: 프론트엔드에서 서버로부터 다운로드한 파일을 브라우저에 저장할 때
Blob객체를 자주 쓰게 되실 거예요. 이때 서버에서 특정 타입을 지정해주지 않는 파일들이 있다면 브라우저는 이를application/octet-stream으로 취급합니다. 즉, "뭔지는 정확히 모르겠지만 일단 바이너리 데이터 덩어리야!"라는 뜻으로 이해하시면 좋습니다.
IANA는 MIME 미디어 타입의 공식 등록 기관이며, 공식 MIME 타입의 전체 목록을 관리하고 있어요. 아래 표는 웹에서 자주 쓰이는 중요한 MIME 타입들을 모아놓은 것입니다:
| 확장자 | 문서 종류 | MIME 타입 |
|---|---|---|
.aac | AAC 오디오 | audio/aac |
.abw | AbiWord 문서 | application/x-abiword |
.apng | 애니메이션 PNG (APNG) 이미지 | image/apng |
.arc | 아카이브 문서 (여러 파일 포함) | application/x-freearc |
.avif | AVIF 이미지 | image/avif |
.avi | AVI: 오디오 비디오 인터리브 | video/x-msvideo |
.azw | 아마존 킨들 전자책 포맷 | application/vnd.amazon.ebook |
.bin | 모든 종류의 바이너리 데이터 | application/octet-stream |
.bmp | 윈도우 OS/2 비트맵 그래픽 | image/bmp |
.bz | BZip 아카이브 | application/x-bzip |
.bz2 | BZip2 아카이브 | application/x-bzip2 |
.cda | CD 오디오 | application/x-cdf |
.csh | C-Shell 스크립트 | application/x-csh |
.css | 캐스케이딩 스타일 시트 (CSS) | text/css |
.csv | 쉼표로 구분된 값 (CSV) | text/csv |
.doc | 마이크로소프트 워드 | application/msword |
.docx | 마이크로소프트 워드 (OpenXML) | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
.eot | MS 임베디드 OpenType 폰트 | application/vnd.ms-fontobject |
.epub | 전자 출판물 (EPUB) | application/epub+zip |
.gz | GZip 압축 아카이브 | application/gzip. 참고로 윈도우와 macOS는 .gz 파일을 업로드할 때 비표준 MIME 타입인 application/x-gzip을 사용하기도 합니다. |
.gif | 그래픽스 교환 포맷 (GIF) | image/gif |
.htm, .html | 하이퍼텍스트 마크업 언어 (HTML) | text/html |
.ico | 아이콘 포맷 | image/vnd.microsoft.icon |
.ics | iCalendar 포맷 | text/calendar |
.jar | 자바 아카이브 (JAR) | application/java-archive |
.jpeg, .jpg | JPEG 이미지 | image/jpeg |
.js | 자바스크립트 | text/javascript (명세: HTML 및 RFC 9239) |
.json | JSON 포맷 | application/json |
💡 강사의 팁:
.json의application/json은 눈감고도 타이핑할 수 있을 정도로 외워두셔야 해요! React나 Next.js에서fetch()API로 데이터를 POST할 때headers객체 안에{'Content-Type': 'application/json'}을 명시해 주지 않으면 서버가 데이터를 제대로 파싱하지 못하는 에러가 정말 자주 발생합니다.
| 확장자 | 문서 종류 | MIME 타입 |
|---|---|---|
.jsonld | JSON-LD 포맷 | application/ld+json |
.md | 마크다운 | text/markdown |
.mid, .midi | MIDI (Musical Instrument Digital Interface) 오디오 | audio/midi, audio/x-midi |
.mjs | 자바스크립트 모듈 | text/javascript |
.mp3 | MP3 오디오 | audio/mpeg |
.mp4 | MP4 비디오 | video/mp4 |
.mpeg | MPEG 비디오 | video/mpeg |
.mpkg | 애플 인스톨러 패키지 | application/vnd.apple.installer+xml |
.odp | OpenDocument 프레젠테이션 문서 | application/vnd.oasis.opendocument.presentation |
.ods | OpenDocument 스프레드시트 문서 | application/vnd.oasis.opendocument.spreadsheet |
.odt | OpenDocument 텍스트 문서 | application/vnd.oasis.opendocument.text |
.oga | Ogg 오디오 | audio/ogg |
.ogv | Ogg 비디오 | video/ogg |
.ogx | Ogg | application/ogg |
.opus | Ogg 컨테이너 안의 Opus 오디오 | audio/ogg |
.otf | OpenType 폰트 | font/otf |
.png | 포터블 네트워크 그래픽스 (PNG) | image/png |
.pdf | 어도비 포터블 도큐먼트 포맷 (PDF) | application/pdf |
.php | 하이퍼텍스트 프리프로세서 (PHP) | application/x-httpd-php |
.ppt | 마이크로소프트 파워포인트 | application/vnd.ms-powerpoint |
.pptx | 마이크로소프트 파워포인트 (OpenXML) | application/vnd.openxmlformats-officedocument.presentationml.presentation |
.rar | RAR 아카이브 | application/vnd.rar |
.rtf | 리치 텍스트 포맷 (RTF) | application/rtf |
.sh | 본(Bourne) 쉘 스크립트 | application/x-sh |
.svg | 스케일러블 벡터 그래픽스 (SVG) | image/svg+xml |
💡 강사의 팁: 요새 프론트엔드에서는 아이콘에 PNG보다 해상도가 깨지지 않는 SVG를 정말 많이 사용하죠! SVG는 내부적으로 XML 코드 형태로 이루어져 있기 때문에 MIME 타입에
+xml이 붙는다는 점을 눈여겨보세요.
| 확장자 | 문서 종류 | MIME 타입 |
|---|---|---|
.tar | 테이프 아카이브 (TAR) | application/x-tar |
.tif, .tiff | 태그된 이미지 파일 포맷 (TIFF) | image/tiff |
.ts | MPEG 트랜스포트 스트림 | video/mp2t |
.ttf | TrueType 폰트 | font/ttf |
.txt | 텍스트 (일반적으로 ASCII 또는 ISO 8859-n) | text/plain |
.vsd | 마이크로소프트 비지오 | application/vnd.visio |
.wav | 웨이브폼(Waveform) 오디오 포맷 | audio/wav |
.weba | WEBM 오디오 | audio/webm |
.webm | WEBM 비디오 | video/webm |
.webmanifest | 웹 애플리케이션 매니페스트 | application/manifest+json |
.webp | WEBP 이미지 | image/webp |
.woff | 웹 오픈 폰트 포맷 (WOFF) | font/woff |
.woff2 | 웹 오픈 폰트 포맷 (WOFF2) | font/woff2 |
.xhtml | XHTML | application/xhtml+xml |
.xls | 마이크로소프트 엑셀 | application/vnd.ms-excel |
.xlsx | 마이크로소프트 엑셀 (OpenXML) | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
.xml | XML | RFC 7303 (섹션 4.1)에 의해 application/xml이 권장되지만, text/xml도 여전히 가끔 쓰입니다. 내용물을 어떻게 해석할지에 따라 .xml 확장자를 가진 파일에 특정한 MIME 타입을 지정할 수도 있어요. 예를 들어 Atom 피드는 application/atom+xml을 쓰지만, 보통 application/xml을 유효한 기본값으로 사용합니다. |
.xul | XUL | application/vnd.mozilla.xul+xml |
.zip | ZIP 아카이브 | application/zip. 참고로 윈도우는 .zip 파일을 비표준 MIME 타입인 application/x-zip-compressed로 업로드하기도 합니다. |
.3gp | 3GPP 오디오/비디오 컨테이너 | video/3gpp; 비디오가 없다면 audio/3gpp |
.3g2 | 3GPP2 오디오/비디오 컨테이너 | video/3gpp2; 비디오가 없다면 audio/3gpp2 |
.7z | 7-zip 아카이브 | application/x-7z-compressed |
같이 보기 (See also)
