(ETag, Vary, Accept-Language 완벽 분석)
웹 브라우저와 서버가 데이터를 주고받을 때, 우리는 눈에 보이지 않는 HTTP 헤더를 통해 수많은 정보를 교환합니다. Content-Type, Authorization 같은 메이저 헤더 외에도, 웹 성능과 캐싱, 콘텐츠 협상에 중요한 역할을 하는 ‘마이너’하지만 강력한 헤더들이 있습니다.
1️⃣ ETag (엔터티 태그): 파일의 지문 인식표 🏷️
ETag는 캐시(Cache) 효율을 극대화하여 웹사이트의 속도를 비약적으로 높이는 데 사용되는 헤더입니다. 서버에서 클라이언트(브라우저)로 리소스를 보낼 때 함께 전달됩니다.
🏠 ETag는 무엇인가요?
- 정의: 서버가 특정 리소스(파일, 이미지 등)에 부여하는 고유한 식별자 또는 버전 번호입니다. 리소스의 내용이 단 1바이트라도 변경되면, ETag 값은 완전히 달라집니다.
- 역할: 클라이언트가 다음에 같은 리소스를 요청할 때, 서버에 “내가 가진 이 리소스는 ETag 값이 A인데, 서버에 있는 값과 같은지 확인해 줘”라고 물어볼 수 있게 합니다.
🖥️ ETag가 작동하는 원리 (조건부 요청)
- 최초 요청: 클라이언트가 리소스를 요청하면, 서버는 리소스와 함께
ETag: "v1.2a4"같은 값을 응답 헤더에 담아 보냅니다. - 재요청 (조건부 요청): 클라이언트가 나중에 같은 리소스를 다시 요청할 때, 브라우저는 이전에 받은 ETag 값을
If-None-Match라는 요청 헤더에 담아 보냅니다.- 요청 헤더:
If-None-Match: "v1.2a4"
- 요청 헤더:
- 서버 검증 및 응답:
- ✅ 내용이 변하지 않은 경우: 서버는 요청받은 ETag(
"v1.2a4")가 현재 서버에 있는 리소스의 ETag와 같다는 것을 확인합니다. 서버는 304 Not Modified 응답을 보냅니다.- 결과: 실제 리소스 데이터는 전송되지 않습니다. 브라우저는 로컬 캐시(Local Cache)에 저장된 리소스를 사용하여 네트워크 트래픽을 아낍니다.
- ❌ 내용이 변한 경우: 서버는 ETag가 다르다는 것을 확인합니다. 서버는 200 OK와 함께 변경된 새 리소스와 새로운 ETag 값을 전송합니다.
- ✅ 내용이 변하지 않은 경우: 서버는 요청받은 ETag(
| 종류 | 헤더 역할 | 예시 값 |
| 응답 헤더 | 리소스의 현재 버전을 알림 | ETag: "6868976a1c1a" |
| 요청 헤더 | 이 값이 아닐 때만 리소스를 요청 | If-None-Match: "6868976a1c1a" |
2️⃣ Vary: 캐싱의 정확성을 높이는 기준 ⚖️
Vary 헤더는 프록시 서버나 CDN(Content Delivery Network) 같은 중간 캐시에게 “이 응답을 캐시할 때, 이 헤더 값들도 고려해서 캐시를 구분해야 해”라고 알려주는 역할을 합니다.
🏠 Vary는 왜 필요한가요?
- 문제 상황: 예를 들어,
example.com/index.html페이지가 있는데, 사용자의 브라우저 종류(모바일 vs. 데스크톱)에 따라 서버가 다른 HTML 내용을 응답한다고 가정해 봅시다. - Vary가 없다면: 중간 캐시 서버는 첫 번째 요청(예: 모바일 요청)에 대한 응답만 저장합니다. 이후 데스크톱 사용자가 요청해도 캐시 서버는 모바일용 응답을 잘못 제공하게 됩니다. ❌
- Vary가 있다면: 서버는 응답 헤더에
Vary: User-Agent를 포함하여 응답합니다.
🖥️ Vary 작동 원리
- 응답 헤더:
Vary: User-Agent - 의미: 중간 캐시는 이제
/index.html이라는 URL 하나에 대해 캐시를 저장할 때,User-Agent(사용자 환경 정보)가 다르면 별개의 캐시 항목으로 취급하여 저장합니다. - 결과:
User-Agent: Mobile→ 모바일용 캐시 저장User-Agent: Desktop→ 데스크톱용 캐시 저장
- 목적: 하나의 URL이 상황(헤더 값)에 따라 여러 다른 응답을 가질 때, 잘못된 캐시를 제공하는 것을 방지하여 정확한 콘텐츠를 보장합니다.
3️⃣ Accept-Language: 사용자에게 맞춤 언어 제공 🗣️
Accept-Language는 클라이언트(브라우저)가 서버에게 “나, 이 언어들 읽을 수 있어요”라고 자신의 선호 언어 목록을 알려주는 요청 헤더입니다.
🏠 Accept-Language의 구조
- 이 헤더는 여러 언어를 쉼표로 구분하여 전달하며, 각 언어 뒤에 ‘q’ (Quality factor) 값을 사용하여 선호도를 표현할 수 있습니다.
q값은 0에서 1 사이의 숫자로, 높을수록 선호도가 높습니다. (기본값은 1)
🖥️ Accept-Language 작동 원리 (콘텐츠 협상)
| 헤더 종류 | 예시 | 의미 |
| 요청 헤더 | Accept-Language: ko-KR, en-US;q=0.9, en;q=0.8 | 1. 한국어 (ko-KR) 최우선 선호 2. 미국 영어 (en-US)는 0.9 선호도 3. 일반 영어 (en)는 0.8 선호도 |
| 응답 헤더 | Content-Language: ko-KR | 서버가 최종적으로 한국어 콘텐츠를 보냈음을 명시 |
- 서버의 역할: 서버는 이
Accept-Language요청 헤더를 분석하여, 해당 언어로 번역된 리소스(HTML, 텍스트)가 있다면 가장 선호도가 높은 언어로 페이지를 생성하여 응답합니다. - 편의성 증대: 사용자가 별도의 언어 설정 없이도 웹사이트에 접속하는 즉시 가장 익숙한 언어의 콘텐츠를 볼 수 있게 해주는 핵심적인 기능입니다.
이 세 헤더는 눈에 잘 띄지 않을 수 있지만, 웹의 속도 (ETag), 정확성 (Vary), 그리고 사용자 친화적인 경험 (Accept-Language)을 뒷받침하는 매우 중요한 요소들입니다. 이들을 잘 이해하고 활용하는 것이 효율적인 웹 개발의 기본입니다.