인터넷에서 사용되는 모든 리소스에는 고유한 미디어 타입(media type)이 있습니다. 흔히 MIME 타입(Multipurpose Internet Mail Extensions)이라고 부르는 이 정보는 서버와 클라이언트 간 통신에서 반드시 필요합니다.
브라우저는 전달받은 리소스의 미디어 타입을 알아야만 해당 리소스를 적절하게 처리할 수 있습니다.
서버도 마찬가지입니다. 서버 역시 수신한 데이터의 타입을 알아야 정확한 파싱과 처리가 가능합니다.
콘텐츠 타입(Content-Type)은 어디에 선언될까?
리소스의 미디어 타입은 클라이언트가 서버에 요청을 보낼 때는 요청 헤더(request header)의 Content-Type 속성에, 서버가 응답을 보낼 때는 응답 헤더(response header)의 Content-Type 속성에 선언됩니다.
리소스의 콘텐츠 타입을 명시적으로 선언하지 않으면 클라이언트가 자동으로 타입을 추측하지만, 그 결과가 정확하지 않을 수 있습니다. 그렇기 때문에 콘텐츠 타입을 반드시 명시적으로 선언하는 것이 중요합니다.
미디어 타입(Media Types)의 종류
미디어 타입은 다양한 형태로 존재하며, 여러 그룹으로 분류됩니다.
- application
- audio
- font
- example
- image
- message
- model
- multipart
- text
- video
각 카테고리 안에는 다시 세부 타입들이 속해 있습니다. 예를 들어 application/json은 application 그룹에 속한 타입이고, text/html은 text 그룹에 속한 타입입니다.
미디어 타입의 전체 목록은 IANA(인터넷의 핵심 요소들을 조율하는 국제 기구)의 공식 미디어 타입 레지스트리에서 확인할 수 있습니다.
이러한 타입들은 텍스트, 오디오, 이미지, HTML 등 인터넷 전반에서 사용되는 거의 모든 데이터 유형을 포괄합니다.
브라우저는 리소스의 미디어 타입을 알아야 한다
앞서 언급했듯이, 브라우저는 수신하는 콘텐츠의 타입을 정확히 알아야 합니다. 이를 보여주는 예제를 살펴보겠습니다.
다음은 HTML 파일을 서빙하는 Node.js 서버 코드입니다.
const http = require("http");
const fs = require("fs");
const path = require("path");
const server = http.createServer(function (req, res) {
const filePath = path.join(__dirname, "index.html");
var stat = fs.statSync(filePath);
res.writeHead(200, {
"Content-Type": "text/css",
"Content-Length": stat.size,
});
const readStream = fs.createReadStream(filePath);
readStream.pipe(res);
});
server.listen(5000);
console.log("Node.js web server at port 5000 is running..");
코드의 세부 사항은 걱정하지 않아도 됩니다. 중요한 포인트는 두 가지입니다. 첫째, 서빙하는 파일은 index.html이라는 점, 둘째, Content-Type이 text/css로 잘못 설정되어 있다는 점입니다.
index.html 파일의 내용은 다음과 같습니다.
<h1>Homepage</h1>
당연히 HTML 문서와 CSS 파일은 전혀 다릅니다. 서버를 실행한 후 localhost:5000에 접속하면 다음과 같은 결과가 나타납니다.
DevTools의 네트워크(Network) 탭에서 응답 헤더를 확인하면 실제 응답 내용도 함께 확인할 수 있습니다.
Chrome 브라우저에서 확인한 결과는 다음과 같습니다.
브라우저는 콘텐츠를 CSS 타입으로 전달받았기 때문에, 해당 내용을 CSS로 처리하려고 시도합니다. 그 결과 HTML 태그가 의도한 대로 렌더링되지 않고 화면에 그대로 노출됩니다.
또 한 가지 주목할 점은, 브라우저가 수신한 콘텐츠의 타입을 정확히 알면 해당 데이터에 맞는 보안 기준을 적용할 수 있어 보안 취약점도 줄어든다는 것입니다.
MIME 타입의 개념과 중요성을 이해했으니, 이제 본론인 JSON으로 넘어가겠습니다.
JSON의 올바른 Content-Type
JSON은 브라우저에서 올바르게 해석되어야 적절하게 활용할 수 있습니다. 과거에는 JSON에 text/plain이 흔히 사용되었지만, IANA에 따르면 JSON의 공식 MIME 타입은 application/json입니다.
따라서 서버로 JSON을 전송하거나 서버에서 JSON을 수신할 때는 항상 헤더의 Content-Type을 application/json으로 선언해야 합니다. 이것이 바로 클라이언트와 서버가 공통으로 이해하는 표준이기 때문입니다.
참고로 RFC 8259 표준에 따르면 JSON 텍스트는 기본적으로 UTF-8로 인코딩됩니다. 따라서 application/json에는 별도의 charset 파라미터가 필요하지 않으며, application/json; charset=utf-8처럼 작성해도 동작하지만 필수는 아닙니다.
마치며
앞서 설명했듯이, 서버 역시(브라우저와 마찬가지로) 수신하는 데이터의 타입을 알아야 합니다. 대표적인 예가 POST 요청입니다. 파일이 포함된 form에 enctype 속성 값으로 multipart/form-data를 지정하는 것도 같은 이유에서입니다.
요청을 이러한 방식으로 인코딩하지 않으면 POST 요청이 제대로 동작하지 않습니다. 또한 서버가 수신한 데이터의 타입을 파악하면, 인코딩된 데이터를 어떻게 파싱해야 할지 판단할 수 있습니다.
이번 글에서는 MIME 타입이 무엇이고 어떤 용도로 사용되는지 살펴보았고, JSON의 공식 콘텐츠 타입도 함께 알아보았습니다. 인터넷에서 리소스를 주고받을 때 리소스 타입을 명시하는 것이 왜 중요한지 이제 확실히 이해하셨기를 바랍니다.