2026년 9월 6일 일요일

[바이브 코딩] Nobel Prize API - 노벨 공식 무료 데이터로 만드는 수상자 검색기



노벨 공식 데이터로 만드는 수상자 검색기 — Nobel Prize API 완전 정복

🏆 API 키 발급도 없이, 노벨프라이즈 공식 사이트가 운영하는 공개 데이터로 1901년부터 지금까지 수상자 1,018명(사람·단체)의 전체 기록을 무료로 받을 수 있습니다. CORS가 열려 있어 브라우저 하나만으로 검색기가 완성됩니다.

노벨상 검색기는 사회·역사·과학·영어를 한 화면에 묶는 인물 학습 소재입니다. 특히 학내망 대응은 쉽습니다 — 역사 데이터는 1년에 한 번(10월 발표)만 바뀌니 전체를 받아 심어두면 끝. 이 글에는 3.8MB짜리 전체 데이터를 10분의 1로 줄여 심는 '슬림 심기' 기법까지 담았습니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
공식·무료·키 없음 "상장도, 등록도, 키도 없는 국보급 데이터 창고." 노벨프라이즈 공식 운영이고 JSON·CSV 두 가지 형식을 제공하며, 새 수상자 발표 시 곧바로 갱신됩니다. 브라우저 주소창에 laureates 주소 입력 → 1901년부터의 전체 수상자 데이터가 그대로!
URL 구조와 함정 주소는 세 덩어리 = 창고(api.nobelprize.org) + 버전(2.1) + 자원명(laureates). 함정: 끝에 슬래시(/)를 붙이면 404 — 이번 글에서 실측으로 확인한 가장 많이 빠지는 구멍입니다. 주소 뒤에 ?nobelPrizeYear=2024&category=literature를 붙이면 2024년 문학상(한강)이 바로 나옵니다.
데이터 모양(해부) 'laureates' 배열(수상자 목록) + 'meta'(전체 개수 1,018). 사람은 knownName, 단체는 orgName. 수상 기록은 nobelPrizes 배열 안에 연도·부문·수상 이유(영문)·상금 금액이 담깁니다. json.laureates[0].knownName.en을 화면에 찍어보기 → 첫 수상자 이름이 뜹니다.
검색 파라미터 "서버가 대신 골라주는 필터." 주소 뒤에 조건을 붙이면 됩니다: 연도(nobelPrizeYear), 부문(category), 성별(gender), 이름(name), 개수(limit), 건너뛰기(offset). 이번 글에서 네 가지를 실측 검증했습니다. ?gender=female → 여성 수상자만. ?category=peace → 평화상만.
학내망 배포 대응 역사 데이터는 1년에 한 번만 바뀌므로 '데이터 심기'와 찰떡입니다. 전체는 약 3.8MB지만, 필요한 필드만 뽑은 슬림 버전으로 심으면 10분의 1 수준 — 외부 호출 0 원칙도 부담 없이 지킵니다. 10월 발표 후 1년 1회 슬림 JSON을 다시 심는 '연 1회 갱신' 루틴으로 운영.

2. 핵심 아키텍처 해설 — 노벨 데이터 창고는 이렇게 생겼다

① URL 해부: 슬래시 하나가 전부를 가른다

https://api.nobelprize.org/2.1/laureates

  • api.nobelprize.org — 노벨 공식 데이터 전용 창고(문서 페이지가 아니라 이 주소 자체가 데이터 출구입니다)
  • 2.1 — API 버전. '2'만 써도 최신 버전 별칭으로 동작합니다(실측 확인).
  • laureates — 수상자 목록 자원. 같은 방식으로 nobelPrizes(수상 연도별)도 있습니다.

⚠ 실측 경고: 끝에 슬래시를 붙인 .../laureates/는 404, 루트 주소 .../2.1/도 404였습니다. "URL 끝 슬래시는 폴더의 관습"이라는 다른 서비스 습관을 버리고, 이 API는 슬래시 없이 정확히 써야 합니다. 오타가 생기면 결과가 아니라 '404 찾을 수 없음'만 돌아옵니다.

② 데이터 모양: 사람·단체가 한 배열에

{
  "laureates": [{
    "id": "1042",
    "knownName": { "en": "Han Kang" },
    "nobelPrizes": [{
      "awardYear": "2024",
      "category": { "en": "Literature" },
      "portion": "1",
      "motivation": { "en": "for her intense poetic prose ..." },
      "prizeAmount": 11000000
    }]
  }],
  "meta": { "count": 1018 }
}

사람은 knownName, 단체(2024 평화상의 Nihon Hidankyo처럼)는 orgName으로 불립니다 — 코드를 짤 때 둘 다 처리해야 하는 함정이자 배움거리입니다. birth 안에는 생년월일·출생 도시와 국가가, nobelPrizes 안에는 수상 연도·부문·수상 이유·상금이 들어 있고, 2024년 상금은 모두 11,000,000 크로나(대략의 환율로 환산하면 약 15.6억 원)였습니다.

③ 검색 파라미터: 서버에 미리 골라 달라고 하기

const API = "https://api.nobelprize.org/2.1/laureates";   // 끝에 / 붙이면 404!

async function searchLaureates(params) {
  const qs = new URLSearchParams(params);
  const res = await fetch(API + "?" + qs);
  const json = await res.json();
  return json;   // json.laureates = 결과 배열, json.meta.count = 전체 개수
}

// 사용 예: searchLaureates({ nobelPrizeYear: 2024, category: "literature", limit: 10 })

실측으로 동작을 확인한 조건: nobelPrizeYear(연도), category(peace 등 부문), gender(female), name(이름), limit(개수), offset(건너뛰기). limit=1000을 한 번에 요청하면 전체 1,018명 분량(약 3.8MB)이 한 방에 도착합니다. 이 밖의 조건(연도 범위, 정렬 등)은 공식 SwaggerHub 문서에서 확인할 수 있습니다.

④ 학내망 전략: 3.8MB를 10분의 1로 줄여 심기

전체 JSON을 그대로 HTML에 심을 수도 있지만, 수업에 필요한 필드만 뽑은 '슬림 버전'을 심는 편이 파일도 가볍고 코드도 단순해집니다.

const slim = json.laureates.flatMap(function (l) {
  return l.nobelPrizes.map(function (p) {
    return {
      name: (l.knownName || l.orgName).en,          // 사람: knownName, 단체: orgName
      gender: l.gender || "",
      year: p.awardYear,
      category: p.category.en,
      motivation: p.motivation ? p.motivation.en : ""
    };
  });
});

한 사람이 상을 두 번 받은 경우(마리 퀴리처럼) 사람 수가 아니라 수상 건수 기준으로 늘어나므로 flatMap으로 한 줄씩 펴 주는 것이 정확합니다. 심기 모드 파일은 10월 발표가 끝나는 시즌에 1년 1회 새 슬림 JSON으로 갈아끼우면 됩니다. 참고로 motivation은 영어(및 스웨덴어·노르웨이어)만 제공되고 한국어 데이터는 없습니다 — 교실에서는 '영문 원문 읽기' 과제로 연결하거나, 교사가 사전에 등록한 한 줄 코멘트를 곁들이는 방식이 현실적입니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini가 코드를 짜기 전에 던지는 질문 3가지(검색 축, 데이터 모드, 화면 구성)에 자기 수업 상황을 답변하면 설계가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 메모장에 붙여 '노벨상검색기.html'로 저장 후 더블클릭. 심기 모드라면 그 파일이 곧 학내망 배포본입니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·프레임워크·웹폰트 없이 단일 HTML 파일로 완성한다. (노벨 데이터 fetch는 유일한 외부 통신 예외)
2. 사운드는 Web Audio API로 직접 합성한다: 검색 성공 시 부드러운 '똑' 소리, 결과 0건·통신 실패 시 '삑' 경고음. 오디오 파일·CDN 사운드 사용 금지.
3. 모바일 터치 대응: 뷰포트 메타 태그 필수, 버튼 최소 44×44px, 입력 필드 font-size 16px 이상, 360px 화면에서 가로 스크롤 금지.
4. 데이터 주소는 https://api.nobelprize.org/2.1/laureates 를 그대로 쓴다. 끝에 슬래시를 붙이면 404가 나므로 절대 붙이지 않고, URLSearchParams로 조건을 조립한다.
5. 수상자 이름은 사람(l.knownName)과 단체(l.orgName) 두 종류가 있으므로 둘 다 처리하고, motivation이 비어 있으면 빈 칸으로 두되 화면이 깨지지 않게 한다.
6. 파일 상단 EMBED_DATA 상수에 슬림 데이터가 심어져 있으면 fetch를 완전히 생략한다(학내망 배포용 외부 호출 0 모드). fetch 모드에서는 결과 없음·통신 실패를 화면 문구로 친절히 안내한다.
7. 결과 카드에는 이름·수상 연도·부문·수상 이유(영문 원문)를 표시하고, // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 검색의 기본 축은 무엇으로 할까? (연도·부문 드롭다운 / 영문 이름 검색 / 둘 다)
Q2. 데이터 모드는 무엇으로 할까? (A: 실시간 fetch 모드 / B: 학내망용 슬림 데이터 심기 모드)
Q3. 화면 구성은? (카드 목록 / 표 형식 / '오늘의 인물' 랜덤 카드 버튼 포함 여부)

🎯 에디터 한줄평

공식 기관이 데이터 문을 활짝 열어주면 수업의 스케일이 달라집니다. 120여 년 치 '1,018명의 인생 목록'은 그 자체로 완성된 인문·과학 큐레이션이고, 슬래시 하나에 404가 나는 함정조차 "API는 약속이다"를 가르치는 최고의 소재입니다. 심기 모드로 학내망 원칙까지 깔끔하게 넘긴 설계도 훌륭합니다. 다음 단계는 상금 원화 환산을 환율 API 계산기에 이어 붙이는 '두 API 협업' 앱 — 어렵지 않게 확장됩니다.

📚 기술·교육 참고 링크

By 시간: