2026년 9월 6일 일요일

[바이브 코딩] HTTP Cat - 고양이 사진으로 배우는 HTTP 상태코드 퀴즈 웹앱



고양이 사진으로 끝내는 HTTP 상태코드 — HTTP Cat 완전 정복

🐱 HTTP Cat은 개발자라면 한 번쯤 마주쳤을 전설적인 서비스입니다. https://http.cat/404처럼 웹 주소 뒤에 세 자리 숫자만 붙이면, 그 상태코드의 감정을 완벽하게 연기하는 고양이 사진(image/jpeg)을 돌려줍니다. 오늘 실측으로 JSON API가 아니라 순수 이미지 서비스임을 확인했습니다 — 즉, JavaScript의 fetch도, CORS도 필요 없이 오직 <img src="..."> 태그 하나로 앱이 완성됩니다.

정보·컴퓨팅 교과의 단골 난제인 HTTP 상태코드(200, 301, 404, 500 등)를 아이들이 웃으면서 외우게 만드는 최고의 시각 교재입니다. 외부 이미지를 불러오는 서비스 특성상, 학내망 '외부 호출 0' 원칙에 맞춘 상태코드 사전 심기 모드(데이터 임베딩) 설계법까지 함께 다룹니다.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
서비스 정체 JSON을 돌려주는 일반 API가 아니라, 주소 자체가 이미지를 뱉는 이미지 서빙 서비스입니다. 실측: Content-Type이 image/jpeg(약 38KB). <img src="https://http.cat/404"> 한 줄로 화면에 고양이가 뜹니다.
CORS·fetch 불필요 자바스크립트로 데이터를 긁어와(fetch) 파싱할 필요가 없습니다. 브라우저의 <img> 태그는 원래 출처 제한(CORS) 없이 다른 사이트의 이미지를 보여줄 수 있습니다. 코드 10줄로 만드는 초경량 퀴즈 앱이 가능합니다.
상태코드 분류 체계 백 단위 첫 자리로 인터넷의 감정을 배웁니다: 1xx(잠깐만), 2xx(성공!), 3xx(저쪽으로 가), 4xx(너의 잘못), 5xx(서버 내 잘못). 각 자리마다 고양이 표정이 달라집니다. "화면의 고양이 표정을 보고 4xx인지 5xx인지 맞히기" 퀴즈.
주요 지원 코드 200(OK), 201(Created), 301(이동), 400(Bad Request), 403(금지), 404(못 찾음), 418(나는 찻주전자!), 500(서버 오류), 503(서비스 불가) 등 수십 종 지원. 418 Teapot(만우절 표준 RFC 2324)으로 인터넷 문화 이야기 나누기.
학내망 배포 대응 <img src="http.cat/...">는 학생 브라우저에서 외부 이미지를 부르므로 완전한 오프라인 환경에선 차단될 수 있습니다. 상태코드 사전 심기(코드·의미·해설 20개를 상수로 내장)로 퀴즈를 돌리고, 이미지는 대체 텍스트 카드로 우아하게 전환합니다. EMBED_DATA에 20개 코드 심기 + 이미지 로딩 실패 시 SVG 아이콘 폴백.

2. 핵심 아키텍처 해설 — 고양이 주소는 이렇게 동작한다

① URL 해부: 주소가 곧 이미지다

https://http.cat/404

  • http.cat/{상태코드} — 다른 파라미터(?limit= 등)가 일절 없습니다. 주소 뒤의 숫자가 곧 이미지 파일의 이름입니다.
  • 응답 헤더 실측: Content-Type: image/jpeg, 파일 크기 약 38KB.
  • 지원하지 않는 코드를 넣으면 어떤 이미지가 돌아오는지 브라우저에서 직접 확인해보는 것도 재미있는 미니 실험입니다 — 오류 화마저 서비스의 일부로 만든 설계입니다.

② HTML로 바로 꽂기: 자바스크립트도 필요 없다

<!-- 가장 단순한 사용법 -->
<img src="https://http.cat/200" alt="200 OK 고양이" width="400">

JSON을 받아 res.json()을 거치는 앞선 API들과 달리, HTTP Cat은 웹 브라우저의 기본 기능(img 태그)만으로 끝납니다. 입문 학생들에게 "웹 주소(URL) 하나가 사진 한 장을 가리킨다"는 원리를 보여주는 데 이보다 직관적인 교재는 없습니다.

③ 퀴즈 웹앱 구조: 상태코드 풀(Pool)과 버튼

const CODES = [
  { code: 200, name: "OK", desc: "요청이 성공적으로 처리되었습니다." },
  { code: 301, name: "Moved Permanently", desc: "이 페이지는 새 주소로 영구 이동했습니다." },
  { code: 403, name: "Forbidden", desc: "접근 권한이 없습니다. 들어오지 마세요!" },
  { code: 404, name: "Not Found", desc: "요청한 페이지를 찾을 수 없습니다." },
  { code: 418, name: "I'm a teapot", desc: "저는 커피를 끓일 수 없습니다. 왜냐하면 찻주전자니까요!" },
  { code: 500, name: "Internal Server Error", desc: "서버 내부에서 알 수 없는 오류가 발생했습니다." }
];

function showQuiz(item) {
  imgEl.src = "https://http.cat/" + item.code;
  // 보기 4개를 섞어서 버튼으로 뿌리기
}

④ 이미지 에러 대응: onerror 폴백(fallback)

imgEl.onerror = function() {
  // 학내망에서 외부 이미지가 차단되었을 때 텍스트 카드로 우아하게 전환
  imgEl.style.display = "none";
  fallbackCard.style.display = "block";
  fallbackCard.textContent = "🐱 [" + currentCode + "] " + currentName;
};

⑤ 학내망 전략: 상태코드 사전 심기

학생 단말에서 외부 이미지 호출조차 허용하지 않는 엄격한 학내망이라면, 코드 목록(CODES) 전체를 파일 안 EMBED_DATA로 심습니다. 심기 모드(데이터 임베딩)가 무엇인지는 앞의 '📖 한 줄 정의' 박스를 참고하세요. 이미지는 텍스트 표정(예: 404=(；´д｀)ゞ, 200=(*^▽^*))이나 순수 CSS 배지로 대체하여 외부 통신 0의 완전한 오프라인 단일 파일 퀴즈 앱을 완성합니다.

3. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini가 던지는 질문 3가지(대상 학년, 퀴즈 방식, 이미지 모드)에 답하면 설계가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '고양이HTTP퀴즈.html'로 저장 후 더블클릭.

제미나이 전용 에러 제로 프롬프트

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·프레임워크·웹폰트 없이 단일 HTML 파일로 완성한다. (http.cat 이미지 로딩은 선택적 외부 통신)
2. 사운드는 Web Audio API로 직접 합성한다: 정답 시 경쾌한 2화음 띵동, 오답 시 묵직한 삑, 결과 화면에서 승리 팡파르.
3. 모바일 터치 대응: 뷰포트 메타 태그 필수, 보기 버튼 최소 48×48px, 모바일 화면에서 가로 스크롤 금지.
4. HTTP 상태코드 퀴즈 풀: 200, 201, 301, 400, 403, 404, 408, 418, 429, 500, 502, 503 등 대표 12종을 내장 객체 배열로 구성한다.
5. 고양이 이미지 태그에 onerror 핸들러를 반드시 연결하여, 인터넷이 끊기거나 학내망에서 이미지가 차단되면 화면이 깨지지 않고 귀여운 CSS 고양이 이모지 카드로 자동 폴백되도록 만든다.
6. 파일 상단 EMBED_DATA에 12개 상태코드의 번호·이름·한국어 해설·힌트가 상수로 완결되어 있어, 외부 통신 없이도 퀴즈의 핵심 로직이 100% 돌아가는 심기 모드(데이터 임베딩) 구조를 갖춘다.
7. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 퀴즈 대상은 누구인가요? (초중등 입문용 4종 퀴즈 / 정보교과 실전용 12종 퀴즈)
Q2. 퀴즈 형식은 어떻게 할까요? (고양이 사진 보고 번호 맞히기 / 상황 설명 읽고 코드 고르기)
Q3. 학내망 오프라인 모드(CSS 텍스트 카드)와 온라인 모드(고양이 사진)를 토글하는 스위치 버튼을 화면 상단에 넣을까요?

🎯 에디터 한줄평

'404 Not Found'를 백 번 외우는 것보다, 박스 속에 숨은 고양이 사진 한 장을 보는 편이 백 배 강렬합니다. 이 서비스의 진짜 가치는 난해한 네트워크 규약을 인간의 유머와 감정으로 번역해냈다는 데 있습니다. 게다가 복잡한 fetch도 없이 <img> 하나로 돌아가니, 바이브 코딩으로 웹 개발에 첫발을 딛는 학생에게 이보다 만만한 성공 경험은 없습니다. 외부 이미지 차단에 대비한 onerror 폴백 설계까지 배우면 금상첨화입니다.

📚 기술·교육 참고 링크

By 시간: