MIME 유형 및 Content-Type 전체 참조 가이드

브라우저가 웹 서버에 파일을 요청할 때마다 서버는 단순히 비트와 바이트만 보내는 것이 아닙니다. 또한 해당 파일이 어떤 종류인지 브라우저에 알려주는 "라벨"을 보냅니다. 이 라벨을 MIME 유형(Multipurpose Internet Mail Extensions)이라고 하며, Content-Type HTTP 헤더를 통해 전송됩니다.

서버가 잘못된 MIME 유형을 보내면 브라우저는 비디오를 재생하는 대신 다운로드하려고 시도하거나, 보안상의 이유로 스크립트 실행을 거부할 수 있습니다.

빠른 참조 표: 일반적인 MIME 유형

MIME 유형	일반적인 확장자	카테고리	목적
`text/html`	`.html`, `.htm`	웹 페이지	표준 웹 페이지 콘텐츠
`text/css`	`.css`	스타일링	CSS(Cascading Style Sheets)
`application/javascript`	`.js`	로직	웹 애플리케이션 스크립트
`application/json`	`.json`	데이터	API용 구조화된 데이터
`application/xml`	`.xml`	데이터	XML(Extensible Markup Language)
`text/csv`	`.csv`	데이터	CSV(Comma-Separated Values)
`image/webp`	`.webp`	미디어	최신 압축 이미지 형식
`image/avif`	`.avif`	미디어	고효율 이미지 형식
`font/woff2`	`.woff2`	글꼴	최신 웹 글꼴 형식
`application/wasm`	`.wasm`	컴파일됨	WebAssembly 바이너리 코드
`application/octet-stream`	`.bin`, `.exe`	바이너리	일반 바이너리 데이터(보통 다운로드 유도)
`multipart/form-data`	N/A	업로드	파일 업로드가 포함된 양식 제출에 사용

1. 구조화된 데이터 및 API

현대 웹 애플리케이션은 프런트엔드와 백엔드 간에 정보를 교환하기 위해 이러한 유형에 크게 의존합니다.

application/json: REST API의 업계 표준입니다. 가볍고 JavaScript에서 기본적으로 지원됩니다.
application/xml: 더 오래되었지만 사용자 정의 스키마와 복잡한 유효성 검사를 지원하는 강력한 형식입니다.
text/csv: 데이터베이스나 스프레드시트에서 대규모 데이터 세트를 내보낼 때 자주 사용됩니다.

2. 미디어 및 자산

빠른 로드 시간을 보장하려면 서버가 최신 고압축 미디어 형식을 올바르게 식별해야 합니다.

image/webp & image/avif: 이러한 최신 형식은 JPEG 또는 PNG보다 훨씬 더 나은 압축률을 제공합니다. 서버가 올바른 MIME 유형을 보내지 않으면 브라우저가 이미지를 제대로 렌더링하지 못할 수 있습니다.
font/woff2: 웹 타이포그래피에 필수적입니다. 올바른 MIME 유형 지정은 브라우저가 글꼴의 압축을 빠르게 해제할 수 있도록 합니다.

3. 전문 및 바이너리 데이터

application/wasm: WebAssembly가 작동하는 데 필요합니다. 브라우저는 매우 엄격합니다. 서버가 application/wasm Content-Type을 명시적으로 보내지 않으면 WASM 모듈 컴파일을 거부하는 경우가 많습니다.
application/octet-stream: 바이너리 데이터를 위한 "범용" 유형입니다. 서버가 파일이 무엇인지 모를 경우 기본적으로 이 유형을 사용합니다. 브라우저는 이를 표시하려고 시도하는 대신 파일을 다운로드하라는 신호로 처리합니다.

4. 양식 및 업로드

웹사이트에서 양식을 제출할 때 브라우저는 특정 MIME 유형을 사용하여 입력을 인코딩합니다.

application/x-www-form-urlencoded: 간단한 텍스트 기반 양식의 기본값입니다. URL 쿼리 문자열(name=John&age=30)처럼 보입니다.
multipart/form-data: 양식에 파일 업로드가 포함된 경우에 필요합니다. 브라우저가 단일 요청에서 서로 다른 유형의 데이터(텍스트 및 바이너리 파일)를 "경계(boundary)"로 구분하여 보낼 수 있도록 합니다.

파일의 MIME 유형을 확인하는 방법

브라우저에서: 개발자 도구 -> 네트워크(Network) 탭을 엽니다. 요청을 클릭하고 "응답 헤더(Response Headers)" 섹션에서 "Content-Type"을 찾습니다.
Linux / macOS에서: --mime-type 플래그와 함께 file 명령을 사용합니다.
```
file --mime-type -b my-image.webp
# 출력: image/webp
```

자주 묻는 질문(FAQ)

Q: 서버가 잘못된 Content-Type을 보내면 어떻게 되나요?

A: 브라우저는 종종 올바른 유형을 추측하기 위해 "MIME 스니핑(MIME Sniffing)"을 수행합니다. 그러나 보안상의 이유(예: XSS 방지)로 최신 브라우저는 훨씬 더 엄격해지고 있습니다. 스크립트가 application/javascript 대신 text/plain으로 전송되면 대부분의 브라우저는 실행을 거부합니다.

Q: application/javascript가 JS 파일에 대한 유일한 올바른 유형인가요?

A: 역사적으로 사람들은 text/javascript 또는 application/x-javascript를 사용했습니다. 한때 application/javascript가 공식 권장 사항이었지만, 최신 표준은 실제로 text/javascript를 선호하는 방향으로 다시 이동했습니다. 대부분의 서버와 브라우저는 두 가지 모두 잘 처리합니다.

Q: 왜 "No 'Content-Type' header" 오류가 발생하나요?

A: 이는 서버가 파일 유형에 대한 정보를 제공하지 않았음을 의미합니다. 브라우저는 보통 text/plain 또는 application/octet-stream으로 기본 설정되며, 이로 인해 페이지가 잘못 렌더링되거나 원치 않는 다운로드가 발생할 수 있습니다.

Tool3M의 관련 도구

Base64 인코더/디코더: 바이너리 데이터를 HTML 또는 CSS에서 사용할 수 있는 데이터 URI(MIME 유형 포함)로 변환합니다.
JSON 포맷터: application/json 데이터의 유효성을 검사하고 형식을 지정합니다.

MIME 유형 및 Content-Type 완벽 참조 가이드