안녕하세요! 프론트엔드 개발자 여러분, 이번에는 브라우저가 서버에 "나 이런 종류의 데이터 받을 수 있어!"라고 미리 알려주는 기본 Accept 값 목록(List of default Accept values)에 대해 알아보겠습니다.
우리가 브라우저 주소창에 주소를 입력하거나, <img src="..."> 태그로 이미지를 불러올 때 브라우저는 보이지 않는 곳에서 서버와 협상(Content Negotiation)을 합니다. 이때 보내는 HTTP Accept 헤더의 기본값들이 브라우저 버전이나 요청하는 파일 종류에 따라 어떻게 달라지는지, 공식 문서를 통해 꼼꼼히 살펴볼게요. 실무에서 서버가 엉뚱한 파일을 내려줄 때 원인을 파악하기 좋은 지식이 될 거예요!
이 문서는 특정한 입력 상황이나 브라우저 버전에 따라 HTTP Accept 헤더가 기본적으로 어떤 값을 전송하는지 기록해 둔 문서입니다.
브라우저가 정확히 뭘 가져와야 할지 구체적인 문맥 정보가 없을 때(예: 주소창에 직접 URL을 입력하고 엔터를 쳤을 때, 또는 HTML <a> 태그로 단순 링크를 클릭했을 때) 서버로 보내는 기본 Accept 값들입니다.
자세히 보시면 모든 브라우저가 맨 마지막에 */* MIME 타입(모든 종류 허용)을 추가해서, 최악의 경우라도 서버가 뭐라도 주면 다 받겠다는 의지를 보여주고 있어요.
| 사용자 에이전트 (User Agent) | 전송되는 Accept 값 (Value) |
|---|---|
| Firefox 132 및 이후 버전 [1] | text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 |
| Firefox 128 ~ 131 | text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/png,image/svg+xml,*/*;q=0.8 |
| Firefox 92 ~ 127 | text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8 |
| Firefox 72 ~ 91 [2] | text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 |
| Firefox 66 ~ 71 [2] | text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 |
| Firefox 65 [2] | text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 |
| Firefox 64 및 이전 버전 [2] | text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 |
| Safari 13.1 ~ 18.1+ [4] | text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 |
| Chrome 131+ [4] | text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7 |
| Safari, Chrome (구버전) [4] | text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 |
| Safari 5 [3] | text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 |
| Edge | text/html, application/xhtml+xml, image/jxr, */* |
| Opera | text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 |
about:config를 치고 들어가서 network.http.accept 환경설정 값을 바꾸면 원하는 문자열로 이 값을 맘대로 세팅할 수 있어요.network.http.accept.default 값으로 세팅할 수 있었습니다.image/png를 text/html보다 더 우선순위(Rank)로 둬서 문제가 된 적이 있었어요.💡 강사의 실무 TIP!
저기 보이는q=0.9같은 값은 Quality Value (우선순위/가중치)를 뜻합니다. 값이 1(생략 시 기본값)에 가까울수록 "나 이 포맷이 젤 좋아! 제일 먼저 이거 줘!"라는 뜻이고, 숫자가 낮을수록 "정 없으면 이거라도 줘..."라는 뜻이에요. 위 표를 보면 브라우저들이 대부분text/html을 제일 간절히 원하고, 정 없으면*/*(아무거나)를 달라고(q=0.8) 하는 걸 볼 수 있죠!
HTML의 <img> 태그를 통해서 이미지를 다운로드하려고 할 때, 브라우저(사용자 에이전트)는 "나는 이런 이미지 포맷들을 환영해!"라고 구체적인 미디어 타입 목록을 세팅해서 보냅니다. 최신 브라우저일수록 용량이 적고 효율적인 최신 이미지 포맷(avif, webp 등)을 앞다투어 원한다는 걸 알 수 있어요.
| 사용자 에이전트 (User Agent) | 전송되는 Accept 값 (Value) |
|---|---|
| Firefox 128 및 이후 버전 [1] | image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5 |
| Firefox 92 ~ 127 [1] | image/avif,image/webp,*/* |
| Firefox 65 ~ 91 [1] | image/webp,*/* |
| Firefox 47 ~ 63 [1] | */* |
| Firefox 47 이전 버전 [1] | image/png,image/*;q=0.8,*/*;q=0.5 |
| Safari (Mac OS Big Sur 이후) | image/webp,image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5 |
| Safari (Mac OS Big Sur 이전) | image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5 |
| Chrome 및 Edge 121 및 이후 버전 | image/avif,image/webp,image/apng,image/*,*/*;q=0.8 |
image.http.accept 파라미터를 통해 변경할 수 있습니다 (소스 코드 참고).HTML <video> 태그를 통해 비디오를 요청할 때도, 브라우저는 자기가 잘 틀어줄 수 있는 특정 비디오 포맷들을 요구합니다.
| 사용자 에이전트 (User Agent) | 전송되는 Accept 값 (Value) |
|---|---|
| Firefox 3.6 및 이후 버전 | video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5 |
| Firefox 3.6 이전 버전 | <video> 태그 자체를 지원하지 않음 |
| Chrome | */* (서버가 주는 대로 다 받아보겠다는 쿨한 태도네요!) |
HTML <audio> 태그를 통해 오디오 파일을 요청할 때의 값입니다.
| 사용자 에이전트 (User Agent) | 전송되는 Accept 값 (Value) |
|---|---|
| Firefox 3.6 및 이후 버전 [1] | audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5 |
| Safari, Chrome | */* |
HTML <script> 태그를 통해 자바스크립트 파일을 가져오려고 할 때의 값입니다. 다들 심플하죠?
| 사용자 에이전트 (User Agent) | 전송되는 Accept 값 (Value) |
|---|---|
| Firefox [1] | */* |
| Safari, Chrome | */* |
HTML에서 <link rel="stylesheet"> 태그를 사용해 CSS 스타일시트를 불러올 때의 값입니다.
당연히 텍스트 형태의 CSS(text/css)를 1순위로 원한다는 걸 명확히 알려주고 있어요.
| 사용자 에이전트 (User Agent) | 전송되는 Accept 값 (Value) |
|---|---|
| Firefox 4 [1] | text/css,*/*;q=0.1 |
| Safari, Chrome | text/css,*/*;q=0.1 |
| Opera 11.10 | text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 |
| Konqueror 4.6 | text/css,*/*;q=0.1 |
Accept 헤더를 가지고 어떻게 서로 티키타카 하는지 자세히 알아볼 수 있어요!이 페이지는 MDN 기여자들에 의해 2025년 8월 20일에 마지막으로 수정되었습니다.
오늘 다룬 내용은 달달 외울 필요는 전혀 없습니다! "브라우저마다, 태그마다 서버에 요청할 때 1순위로 요구하는 데이터 타입(Accept 값)이 미묘하게 다르구나~" 정도만 이해하시면 충분해요. 혹시 개발하시다가 리소스 로딩 관련해서 꼬이는 일이 생기면 이 표를 슬쩍 참고해 보세요. 화이팅! 🚀