프롬프트 캐싱(Prompt Caching)이란?

📎 두 시나리오 모두 매 요청마다 "회사 규정집 (5,000자)"라는 동일한 참고 문서를 함께 보내고, 그 뒤에 짧은 새 질문 1개를 붙인다고 가정해요.

🐢 캐싱 없이

⚡ 캐싱 있음

총 처리 시간: 캐싱 없이 약 9초 vs 캐싱 있음 약 3.5초

※ 실제 절감 폭은 문서 길이·모델·서비스에 따라 다르며, 위 숫자는 이해를 돕기 위한 예시예요.

💬 한 줄 정리

AI에게 긴 문서나 상세한 시스템 지침처럼 매번 똑같이 반복해서 보내는 내용이 있다면, 그 부분을 매 요청마다 처음부터 다시 읽고 이해하는 건 시간과 비용 낭비겠죠. 프롬프트 캐싱은 바로 이 문제를 해결하는 기능이에요 — 한 번 처리한 긴 맥락을 저장해두고, 다음 요청에서 그 부분이 그대로라면 다시 처리하지 않고 저장해둔 결과를 바로 불러오는 방식이에요. 그 결과 응답 속도가 빨라지고, 비용도 줄어들어요. 특히 긴 문서나 대량의 지침, 코드베이스를 반복적으로 참조하면서 짧은 질문만 바꿔가며 던지는 챗봇이나 에이전트를 만들 때 특히 유용한 기능이에요.

🧾 이 페이지, 이런 프롬프트로 만들었어요

아래 프롬프트를 복사해서 Claude·ChatGPT(GPT)·Gemini 어디에든 붙여넣고 직접 시도해보세요. 참고로 이건 예시 없이 지시만 담은 제로샷(zero-shot) 프롬프트예요 — 원하는 결과물의 예시를 1개 넣으면 원샷(one-shot), 여러 개 넣으면 퓨샷(few-shot) 프롬프팅이 되는데, 예시를 더할수록 결과가 원하는 스타일에 더 가까워지는 경우가 많아요.

AI 강의용 데모 페이지를 하나 만들어줘. 주제는 "프롬프트 캐싱(Prompt Caching)"이야.

- "회사 규정집 (5,000자)"라는 동일한 긴 참고 문서를 매번 함께 보내면서 짧은 새 질문을 던지는 요청을 3번 연속 보낸다고 가정해줘
- "캐싱 없이" 열과 "캐싱 있음" 열을 나란히 보여줘
  - 캐싱 없이: 3번 모두 "문서 전체를 매번 다시 처리한다"는 걸 보여주고 처리 시간 바를 길게
  - 캐싱 있음: 첫 요청만 "문서 최초 처리 + 캐시 저장", 2·3번째 요청은 "캐시에서 즉시 불러옴"으로 표시하고 처리 시간 바를 짧게
- "3번 요청 실행해보기" 버튼을 누르면 두 열에 요청들이 순서대로 하나씩 나타나는 애니메이션을 넣어줘
- 마지막에 두 방식의 총 처리 시간을 비교하는 요약 문구(예시 숫자 사용, 실제 수치가 아님을 명시)를 추가해줘
- 왜 프롬프트 캐싱이 속도와 비용 면에서 유리한지 초보자도 이해할 수 있게 설명하는 문단도 넣어줘

CSS·JS 전부 인라인으로 넣은 단일 HTML 파일로, 한국어로 출력해줘.

⚡ 프롬프트 캐싱(Prompt Caching)이란?

💬 한 줄 정리

🧾 이 페이지, 이런 프롬프트로 만들었어요