2026년 9월 6일 일요일

[바이브 코딩] HTTP Dog - 개 사진과 JSON이 협업하는 HTTP 상태코드 카드 앱



JSON과 이미지가 협업하는 상태코드 카드 — HTTP Dog 완전 정복

🐶 HTTP Cat의 개 버전이지만, 결정적으로 다른 점이 하나 있습니다. HTTP Dog는 JSON API를 겸용합니다. https://http.dog/404.json을 열면 상태코드 번호·이름("Not Found")·이미지 주소 4종(jpg·webp·avif·jxl)이 정돈된 JSON으로 돌아옵니다(오늘 실측). 즉 'JSON을 읽고 → 필요한 이미지 주소를 골라 → 화면에 표시'하는 3단 협업 파이프라인을 배울 수 있는, 데이터 처리 수업의 완성형 교재입니다.

외부 이미지 서비스라는 점은 HTTP Cat과 같으므로, 학내망 '외부 호출 0' 원칙에 맞춘 상태코드 사전 심기 모드(데이터 임베딩) 설계도 함께 담았습니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
서비스 정체 상태코드별 개 사진 서비스 + JSON 안내서. /{code}(HTML 페이지)·/{code}.json(JSON)·/{code}.jpg(이미지)가 접미사로 구분되는 3중 구조입니다. http.dog/404.json → 정돈된 JSON 확인.
JSON 응답 모양 {status_code, title, url, image} 봉투가 돌아오고, image 안에는 jpg·webp·avif·jxl 최신 포맷 4종의 주소가 나란히 담겨 옵니다(실측). json.image.jpg를 <img> 태그 src에 꽂기.
3단 협업 흐름 ① fetch로 JSON 받기 → ② image 칸에서 jpg 주소 선택 → ③ img 태그로 표시. '데이터를 읽어 미디어를 고르는' 파이프라인은 실무 API 앱의 표준 구조입니다. 코드 입력 → JSON → 개 카드 표시의 3단 함수 만들기.
HTTP Cat과 비교 Cat은 '주소 = 이미지'의 한 방 서비스, Dog는 JSON이 이미지를 안내하는 협업 서비스. 두 방식 모두 실무에 존재하며, 이 둘을 나란히 다루면 데이터→표시 연결 개념이 완성됩니다. HTTP Cat 앱과 나란히 만들어 차이점 발표.
학내망 배포 대응 외부 이미지는 학생 단말에서 호출되므로, 배포본은 상태코드 사전 심기(CODE_TABLE 상수) + CSS 개 카드 대체로 외부 호출 0을 만듭니다. JSON fetch 실습은 교사 PC 시연 모드에서 진행합니다. EMBED_DATA에 코드 12종 심기 + 시연 전용 파일 분리.

2. 핵심 아키텍처 해설 — JSON이 이미지를 안내한다

① URL 해부: 접미사로 포맷을 고른다

  • https://http.dog/404 — HTML 카드 페이지(사람이 보는 페이지, 실측).
  • https://http.dog/404.json — JSON 안내서(앱이 읽는 데이터, 실측 200 OK).
  • https://http.dog/404.jpg — 이미지 파일(실측 109KB image/jpeg). webp·avif·jxl도 같은 규칙.

'같은 자원을 접미사로 다른 포맷으로 얻는다'는 설계는 옛 RSS에서 지금의 이미지 CDN까지 이어지는 오래된 지혜입니다.

② JSON 응답 모양: 실측 그대로

{
  "status_code": 404,
  "title": "Not Found",
  "url": "https://http.dog/404",
  "image": {
    "jpg": "https://http.dog/404.jpg",
    "webp": "https://http.dog/404.webp",
    "avif": "https://http.dog/404.avif",
    "jxl": "https://http.dog/404.jxl"
  }
}

webp·avif·jxl은 더 작고 더 선명한 차세대 이미지 포맷입니다. '같은 그림을 포맷만 바꿔 4개 주소로 주는' 구조에서, 앱은 상황에 맞는 주소를 고르면 됩니다.

③ 3단 협업 코드: fetch → 선택 → 표시

async function loadStatusCard(code) {
  const res = await fetch("https://http.dog/" + code + ".json");
  const json = await res.json();          // ① JSON 받기
  const img = document.createElement("img");
  img.src = json.image.jpg;               // ② 주소 고르기
  img.alt = json.status_code + " " + json.title;
  return img;                             // ③ 표시용 노드 돌려주기
}

④ 상태코드 사전: 학내망용 심기 데이터

const CODE_TABLE = [
  { code: 200, ko: "성공", ko_long: "요청이 정상적으로 처리되었습니다." },
  { code: 403, ko: "접근 금지", ko_long: "허가받지 않은 접근입니다." },
  { code: 404, ko: "못 찾음", ko_long: "요청한 자원이 서버에 없습니다." },
  { code: 418, ko: "찻주전자", ko_long: "I'm a teapot — 인터넷의 유머 표준(RFC 2324)." },
  { code: 500, ko: "서버 오류", ko_long: "서버 쪽에서 문제가 생겼습니다." }
];

심기 모드(데이터 임베딩)가 무엇인지는 앞의 '📖 한 줄 정의' 박스를 참고하세요. 학생 배포본은 이 표를 코드·이름·해설 카드로 렌더링하고, 개 이미지는 순수 CSS 일러스트(귀·눈·코를 div로 조립)로 대체해 외부 통신 0을 완성합니다.

⑤ fetch 실패와의 연결: 고양이 카드와 손잡기

try {
  const res = await fetch(anyUrl);
  if (!res.ok) showDogCard(res.status);
} catch (err) {
  showDogCard(500);   // 통신 자체가 실패했을 때의 친절한 안내
}

실습 앱의 에러 처리 화면에 개 카드를 붙이면, '에러가 무섭지 않은 교실'이 완성됩니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini가 던지는 질문 3가지(포맷 선택, 카드 형식, 데이터 모드)에 답하면 설계가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '개HTTP카드.html'로 저장 후 더블클릭. 심기 모드 파일이면 곧 학내망 배포본입니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·프레임워크·웹폰트 없이 단일 HTML 파일로 완성한다. (http.dog의 JSON·이미지 접근은 선택적 외부 통신)
2. 사운드는 Web Audio API로 직접 합성한다: 카드 생성 성공 시 '똑', 없는 코드 입력·통신 실패 시 '삑'.
3. 모바일 터치 대응: 뷰포트 메타 태그 필수, 버튼 최소 44×44px, 360px 화면 가로 스크롤 금지.
4. 입력은 100~599 범위의 숫자로 제한하고, 범위를 벗어나면 친절한 안내와 함께 '삑'을 낸다.
5. JSON에서 image.jpg 주소를 꺼내 img 태그로 표시하는 3단 협업 함수(loadStatusCard)를 반드시 구현한다.
6. img 태그에 onerror 핸들러를 연결해 이미지 로딩 실패 시 CSS로 만든 개 카드로 자동 폴백한다(화면이 깨지지 않게).
7. 파일 상단 EMBED_DATA에 상태코드 12종(번호·이름·한국어 해설)이 심어져 있으면 fetch를 완전히 생략한다(학내망 배포용 외부 호출 0 모드).
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 이미지 포맷은 무엇으로 할까요? (jpg 표준 / webp 가벼운 버전 — JSON의 image 칸을 비교해서)
Q2. 카드 배치는 어떻게 할까요? (코드 하나 크게 / 12종 격자 도감)
Q3. 데이터 모드는 무엇으로 할까요? (A: 실시간 fetch — JSON 읽기 실습 / B: 학내망용 사전 심기 모드)

🎯 에디터 한줄평

'JSON이 이미지를 안내한다' — 이 한 문장이 이번 글의 주제입니다. 데이터(상태코드의 이름)와 미디어(개의 사진)가 주소로 손을 잡는 구조는, 앞서 본 SWAPI의 하이퍼미디어(URL 목록)와 정확히 같은 발상입니다. webp·avif 같은 포맷 이야기는 '같은 그림, 다른 파일'이라는 디지털 미디어 소양으로 이어지고, 고양이 앱과 나란히 비교 수업을 하면 두 서비스의 설계 철학 차이까지 읽히기 시작합니다. 데이터는 심고, 실습은 시연에 — 학내망 원칙의 정석적인 마무리입니다.

📚 기술·교육 참고 링크

By 시간: