티스토리 이미지 태그의 expires 옵션에 대해; 웹페이지를 다시 읽는 방식에 따라 다른 캐싱 판단

이것은 티스토리 블로그를 이미지 뱅크로 사용하지 못하게 하는 것이다. 티스토리만이 아니라 많은 서비스가 이 코드를 사용한다고.

원래는 브라우저 캐싱을 통한 로딩 속도 향상 및

일부 용도에서의 보안 목적인 것 같다.

 

 

구글검색 AI모드 설명

============

 

티스토리의 경우

티스토리 HTML 코드나 이미지 URL 주소에 포함된 expires(또는 Expires)는 해당 이미지 파일의 '만료 시간(유효 기간)'을 의미합니다. [1]

주로 티스토리 본문에 삽입된 이미지 주소의 파라미터(?expires=...)나 HTTP 헤더 정보에서 볼 수 있으며, 다음과 같은 목적으로 사용됩니다.

1. 보안 및 링크 도용 방지 (시간 제한 링크)

티스토리는 카카오 데이터 센터의 스토리지(서버)에 이미지를 저장합니다.

• 외부 사이트에서 티스토리 이미지 주소를 무단으로 긁어가서 보여주는 것(무단 불펌 및 트래픽 도용)을 막기 위해, 이미지 URL에 특정 유효 기간을 부여합니다.
• expires에 지정된 시간이 지나면 해당 URL 주소는 만료되어 외부에서는 이미지가 엑박(깨짐)으로 나타나게 됩니다. 티스토리 내부에서는 글이 조회될 때마다 유효한 새 링크를 자동으로 갱신하여 보여주므로 정상적으로 출력됩니다.

2. 브라우저 캐싱을 통한 로딩 속도 향상

웹 브라우저가 티스토리 페이지를 로드할 때 사용하는 캐시(Cache) 제어 목적입니다. [2, 3]

• 만료 전: 사용자가 블로그에 재방문했을 때 expires 날짜가 지나지 않았다면, 서버에서 이미지를 다시 다운로드하지 않고 사용자 컴퓨터에 저장된 캐시 파일을 곧바로 불러옵니다. 이 과정 덕분에 블로그 로딩 속도가 획기적으로 빨라집니다.
• 만료 후: 유효 기간이 지나면 브라우저는 서버에 "이미지가 변경되었는지" 새로 요청하여 최신 이미지를 반영합니다. [2, 3]

---

 

💡 추가 안내 사항
만약 티스토리 글 내용을 외부(스마트스토어, 개인 웹사이트 등)로 복사·붙여넣기 했을 때 시간이 지나 이미지가 깨진다면 바로 이 expires 제한 때문입니다. 외부에 이미지를 정상적으로 노출하려면 이미지를 해당 서비스에 직접 업로드해야 합니다.

 

 

HTML 표준 체계에서 이 정보가 포함된 핵심 이유는 웹 표준의 '캐시 제어(Cache Control)' 규칙을 따르기 위함

HTML 표준 명세에서 expires는 URL 안의 파라미터가 아니라, 서버가 브라우저에게 보내는 HTTP 헤더(Expires) 형태로 정의되어 있습니다.

HTML 표준 체계에서 이 정보가 포함된 핵심 이유는 웹 표준의 '캐시 제어(Cache Control)' 규칙을 따르기 위함입니다. 브라우저와 서버 사이의 통신 효율을 극대화하기 위해 전 세계 웹 표준 기구(W3C, IETF)가 지정한 규격입니다.

웹 표준 관점에서 expires가 존재하는 이유는 다음과 같습니다.

1. 웹 서버 트래픽 비용 절감 (표준 캐싱 메커니즘)

• 이미지, CSS, 자바스크립트 같은 정적 파일은 한 번 로딩되면 내용이 잘 바뀌지 않습니다.
• 표준 스펙에 따라 Expires에 미래의 특정 날짜(예: 1년 뒤)를 지정해 두면, 브라우저는 그 기간 동안 서버에 "이 이미지 좀 다시 보내줘"라는 요청을 아예 보내지 않습니다.
• 결과적으로 수많은 사용자가 접속해도 서버의 대역폭(트래픽) 소모를 극적으로 줄여줍니다.

2. 사용자 기기의 데이터 소모 방지

• 모바일 기기나 느린 네트워크 환경에서 방문자가 블로그의 다른 글을 읽거나 재방문할 때, 이미 다운로드한 이미지를 다시 받느라 데이터(LTE/5G)를 낭비하지 않도록 보호합니다.
• 웹 표준은 사용자가 가장 빠른 속도로 웹페이지를 렌더링(화면 표시)할 수 있도록 이 캐시 유효 기간 설정을 권장합니다.

3. 웹 성능 최적화 표준 규격의 진화

사실 초기 웹 표준에서 사용되던 Expires 헤더는 '절대적인 날짜와 시간(예: Thu, 31 Dec 2026 23:59:59 GMT)'을 적어야 해서, 서버와 사용자 컴퓨터의 시계가 다르면 오류가 나는 한계가 있었습니다.

• 이를 보완하기 위해 현대 웹 표준(HTTP/1.1 이상)에서는 초 단위의 상대 시간을 지정하는 Cache-Control: max-age=31536000 방식을 함께 사용합니다.
• 하지만 구형 브라우저 및 검색 엔진 로봇과의 하위 호환성(Backward Compatibility)을 완벽하게 유지하기 위해 현재까지도 표준 규격으로서 Expires를 함께 전송하는 것이 웹 표준 생태계의 관례입니다.

---

요약하자면
HTML 표준에서 이것을 규정한 이유는 "이미 한 번 다운로드한 파일은 만료일 전까지 서버에 다시 요청하지 말고 사용자 컴퓨터 메모리에서 바로 꺼내 써라"라는 전 세계 웹 브라우저 간의 약속이기 때문입니다.

 

 

웹브라우저에서 F5를 눌러 리로드하면?

웹 브라우저에서 F5(새로고침)를 누르면 브라우저는 Expires 날짜가 지나지 않았더라도 이미지를 다시 확인하거나 새로 읽어옵니다.

다만, 새로고침의 종류(일반 새로고침 vs 강력 새로고침)에 따라 브라우저가 동작하는 방식에 차이가 있습니다.

---

1. 일반 새로고침 (F5 또는 🔄 버튼)

사용자가 의도적으로 페이지를 다시 불렀기 때문에, 브라우저는 로컬 캐시를 무조건 신뢰하지 않고 서버에 가서 "이 이미지 정말 안 바뀐 게 맞냐?"고 한 번 물어봅니다. 이를 '조건부 요청(Conditional Request)'이라고 합니다.

• 동작 과정: 브라우저가 서버에 이미지 요청을 보낼 때, 기존에 가지고 있던 이미지의 고유 식별값(ETag)이나 최종 수정일(If-Modified-Since) 정보를 함께 보냅니다.
• 결과 (304 Not Modified): 서버가 확인해보고 "이미지가 바뀐 게 없다"고 판단하면, 이미지 데이터 전체를 다시 보내지 않고 "안 바뀌었으니 네가 가진 캐시를 그대로 써라"라는 신호(HTTP 304 코드)만 보냅니다.
• 효과: 이미지를 처음부터 다시 다운로드하는 것보다 속도가 훨씬 빠르고 데이터 소모도 매우 적습니다. (네트워크 탭을 보면 크기가 몇 백 바이트 수준으로 찍힙니다.)

2. 강력 새로고침 (Ctrl + F5 또는 Ctrl + Shift + R)

브라우저에 저장된 해당 페이지의 모든 캐시를 강제로 무시하고 웹 서버로부터 완전히 새로운 데이터를 가져옵니다.

• 동작 과정: Expires 정보나 기존 캐시 상태를 완전히 무시하고, 서버에 이미지를 처음 요청하는 것처럼 동작합니다.
• 결과 (200 OK): 서버는 이미지 파일 전체 데이터를 처음부터 끝까지 브라우저로 다시 전송합니다. (HTTP 200 코드)
• 효과: 블로그 스킨을 수정했거나 이미지를 교체했는데 화면에 곧바로 반영되지 않을 때 주로 사용합니다. 데이터 소모와 로딩 시간이 가장 깁니다.

---

📌 요약하자면

• 그냥 주소창을 치고 들어가거나 링크를 클릭할 때: Expires 기간 내라면 서버에 묻지도 않고 컴퓨터 캐시에서 즉시 꺼내옵니다. (가장 빠름)
• F5 (일반 새로고침)를 누를 때: 서버에 변경 여부를 확인한 뒤, 안 바뀌었으면 캐시를 쓰고 바뀐 게 있으면 새로 읽어옵니다.

==============