우주 뉴스를 한 화면에 — Spaceflight News API 완전 정복

🛰 Spaceflight News API는 NASA를 비롯한 세계 우주 전문 언론의 뉴스를 자동으로 모아주는 무료 API입니다. API 키 없이 열리며, 오늘 실측으로 누적 기사 35,952편을 확인했습니다 — 어제(2026-09-04) 게시된 기사까지 신선하게 흘러나옵니다. 응답은 SWAPI와 같은 {count, next, previous, results} 표준 봉투(envelope) 구조에 offset 방식 페이지네이션입니다.

국어(뉴스 요약·제목 짓기)·과학·사회(우주 개발 경쟁)를 한 화면에서 묶는 수업 소재입니다. 기사마다 대표 이미지(image_url)도 함께 오는데, 학내망 배포본에서는 이미지 칸을 다루는 방식을 따로 설계해야 합니다 — 이번 글에서 해법까지 담았습니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
API 정체	우주 전문 언론(NASA·NASASpaceflight 등)의 뉴스를 모아두는 무료 창고. 키·등록 없이 브라우저에서 바로 열리고, 오늘 실측 기준 누적 35,952편입니다.	/v4/articles/?limit=5 → 최신 기사 5편.
봉투(envelope) 구조	{count, next, previous, results} 봉투로 옵니다. next에는 offset이 붙은 다음 페이지 주소가 절대 URL로 들어 있어, 그대로 fetch하면 이어 보기가 됩니다.	받은 json.next 주소를 '더 보기' 버튼에 연결하기.
데이터 모양	기사 1편 = id·title·authors[]·url(원문 링크)·image_url·news_site(언론사)·summary(요약)·published_at(ISO8601)·launches[]·events[].	news_site(언론사)별로 묶어 '누가 가장 많이 쓰나' 세어보기.
검색·필터	?search=Moon로 전체 검색(실측 성공), title/summary 조건, news_site 지정, published_at_gte(특정 시각 이후)까지. 정렬(ordering)도 지원합니다.	?published_at_gte=2026-09-01T00:00:00Z → 이번 주 뉴스만.
학내망 배포 대응	뉴스는 매일 바뀌므로 통째 심기는 부적합 — '주간 베스트 10편' 심기로 해결합니다. 교사가 아침에 한 번 받아 심으면 학생 단말은 통신 0. 대표 이미지(image_url)는 외부 주소이므로 학생 배포본에서는 텍스트 카드로 전환합니다.	EMBED_DATA에 이번 주 뉴스 10편 요약 심기 + image 칸 제외.

2. 핵심 아키텍처 해설 — 뉴스 창고는 이렇게 생겼다

① URL 해부: 봉투와 offset 페이지네이션

https://api.spaceflightnewsapi.net/v4/articles/?limit=2

api.spaceflightnewsapi.net/v4 — 현재 버전 v4. 자원은 articles(뉴스)가 중심이고, blogs도 있습니다.
?limit=&offset= — 한 번에 받을 건수와 건너뛸 건수. next/previous가 절대 URL로 오므로 주소 조립 없이 그대로 fetch하면 이어 보기가 됩니다(페이지네이션 표준 학습).
CORS — 실측 Access-Control-Allow-Origin: * — 브라우저에서 바로 fetch됩니다.
탐색형 API 페이지 — 주소 뒤에 ?format=api를 붙이면 문서처럼 보이는 탐색 화면이 열립니다. 필터 목록을 읽는 연습에 좋습니다.

② 데이터 모양: 기사 한 편이 한 장의 카드

{
  "count": 35952,
  "next": "https://api.spaceflightnewsapi.net/v4/articles/?limit=2&offset=2",
  "previous": null,
  "results": [{
    "id": 39839,
    "title": "Blue Origin expands test and launch sites across the Cape",
    "url": "https://www.nasaspaceflight.com/2026/09/...",
    "image_url": "https://www.nasaspaceflight.com/wp-content/...jpg",
    "news_site": "NASASpaceflight",
    "summary": "Blue Origin is expanding its Kennedy Space Center ...",
    "published_at": "2026-09-04T20:37:43Z",
    "launches": [],
    "events": []
  }]
}

실측 데이터(2026-09-04 게시 기사)입니다. launches[]·events[]에는 이 기사가 관련된 발사·사건의 번호가 들어 있어, 발사 일정 데이터와도 연결할 수 있습니다.

③ 로딩 코드: 봉투를 그대로 돌려주기

const API = "https://api.spaceflightnewsapi.net/v4/articles";

async function loadNews(limit, offset) {
  const qs = new URLSearchParams({ limit: limit || 10, offset: offset || 0 });
  const res = await fetch(API + "?" + qs);
  const json = await res.json();
  return json;   // json.count, json.next, json.results
}

④ 날짜 표시: ISO8601을 사람 말로

function fmtDate(iso) {
  const d = new Date(iso);
  return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0")
       + "-" + String(d.getDate()).padStart(2, "0") + " "
       + String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
}

published_at의 2026-09-04T20:37:43Z 같은 국제 표준 시각을 '2026-09-05 05:37'(한국 시각)처럼 바꿔주는 작은 함수 — 시차(Z=세계표준시, 한국은 +9시간)를 다루는 수학·사회 소재가 됩니다.

⑤ 학내망 전략: 주간 베스트 심기

교사가 아침에 최신 기사 10편을 받아 title·news_site·summary·url만 골라 EMBED_DATA로 심습니다. 심기 모드(데이터 임베딩)가 무엇인지는 앞의 '📖 한 줄 정의' 박스를 참고하세요. image_url은 외부 이미지 주소이므로 학생 배포본에서는 빼고, 대신 언론사 이름 배지로 카드를 꾸밉니다 — '데이터 API와 이미지 CDN은 별개'라는 개념이 여기서도 통합니다.

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

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

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·프레임워크·웹폰트 없이 단일 HTML 파일로 완성한다. (Spaceflight News 데이터 fetch는 유일한 외부 통신 예외)
2. 사운드는 Web Audio API로 직접 합성한다: 새 기사 불러오기 성공 시 부드러운 '똑' 소리, 결과 0건·통신 실패 시 '삑' 경고음.
3. 모바일 터치 대응: 뷰포트 메타 태그 필수, 버튼 최소 44×44px, 입력 필드 font-size 16px 이상, 360px 화면 가로 스크롤 금지.
4. 응답 봉투(envelope)를 그대로 처리한다: count는 상단 배지로, next가 있으면 '더 보기' 버튼을 보여주고 누르면 next 주소를 그대로 fetch한다.
5. published_at은 국제표준시(Z)이므로 한국 시각(+9시간)으로 바꿔 보여주는 fmtDate 함수를 반드시 만든다.
6. 파일 상단 EMBED_DATA에 주간 뉴스 10편(제목·언론사·요약·원문 링크)이 심어져 있으면 fetch를 완전히 생략한다(학내망 배포용 외부 호출 0 모드).
7. image_url은 외부 이미지 주소이므로 심기 모드에서는 이미지 없는 텍스트 카드로 렌더링하고, fetch 모드에서만 이미지를 표시한다. 이미지 로딩 실패 시에도 카드가 깨지지 않게 한다.
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 화면의 기본 축은 무엇으로 할까? (최신순 카드 목록 / 언론사별 탭 / 검색창 중심)
Q2. 데이터 모드는 무엇으로 할까? (A: 실시간 fetch 모드 / B: 학내망용 주간 베스트 심기 모드)
Q3. 카드에 무엇을 강조할까? (제목 크게 / 언론사 배지 / 날짜)

🎯 에디터 한줄평

'뉴스를 검색하는 아이'와 '뉴스가 흘러오는 파이프를 만드는 아이'의 차이가 이 API 하나로 생깁니다. 봉투(envelope)의 next 주소를 그대로 fetch하는 '더 보기' 버튼은 페이지네이션의 본질을 손으로 익히는 최고의 예제이고, 언론사별 기사 수 세기는 데이터 리터러시의 첫 단계입니다. 주간 베스트 심기로 학내망 원칙까지 통과한 설계입니다.

📚 기술·교육 참고 링크

Spaceflight News API 공식 사이트 : 서비스 소개·문서
탐색형 API 페이지 : ?format=api — 필터 옵션을 눈으로 읽기
교육과정 연계: 국어(뉴스 요약·헤드라인 분석), 과학(우주 개발 동향), 사회(언론과 매체)와 함께 활용

인문학과 바이브 코딩의 만남

2026년 9월 6일 일요일

[바이브 코딩] Spaceflight News API - 하루에도 수십 편 쏟아지는 우주 뉴스를 한 화면에