💡 30초 핵심 요약
전 세계 250개국의 국기, 수도, 인구, 언어, 화폐 정보를 한눈에 찾아볼 수 있다면 얼마나 편리할까요? 복잡한 데이터베이스 구축 없이도 무료 REST Countries API를 활용하면 사회·지리 수업과 세계시민 교육에 딱 맞는 '세계 나라 정보 탐색기' 인터랙티브 웹앱을 바이브 코딩으로 손쉽게 완성할 수 있어요!
🌍 REST Countries API란 무엇일까요?
REST Countries는 전 세계 모든 국가의 지리, 인구, 문화, 행정 관련 방대한 정보를 무료로 제공하는 대표적인 오픈 데이터 API예요. 회원가입이나 API 인증키(Key) 발급 절차 없이 누구나 즉시 데이터를 조회할 수 있는 것이 가장 큰 장점입니다.
국기(SVG/PNG) 이미지부터 공식 국가명, 수도, 대륙(Region), 인구수, 사용 통화, 공용어, 그리고 구글 지도(Google Maps) 링크까지 풍부한 속성을 포함하고 있어, 학생들이 직접 클릭하고 탐색하며 살아있는 세계 지리를 학습할 수 있는 인터랙티브 교육용 웹앱을 만들기에 안성맞춤이랍니다.
📊 나라 정보 탐색기 핵심 기능 한눈에 보기
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 전 세계 국가 데이터 연동 | 250여 개 국가의 최신 지리·통계 데이터를 실시간 API 호출로 빠르고 가볍게 불러옵니다. | 웹앱 실행 시 자동으로 전 세계 국가 카드가 멋진 그리드 레이아웃으로 펼쳐져요. |
| 실시간 검색 & 대륙별 필터 | 국가 이름 입력 즉시 반응하는 실시간 검색과 아시아/유럽/아프리카 등 대륙별 필터링을 제공합니다. | "유럽 대륙에서 인구가 가장 많은 나라는?" 같은 탐구 과제를 바로 해결해요. |
| 상세 정보 모달 & 고화질 국기 | 국가 카드를 누르면 팝업 모달창이 뜨며 수도, 화폐, 공용어, 면적 등 상세 지리 정보를 보여줍니다. | 선명한 SVG 국기와 함께 각국의 고유 화폐 단위와 언어를 생생하게 확인해요. |
| 국가명 & 수도 발음 듣기 | 브라우저 내장 Web Speech API(TTS)를 통해 영문 국가명과 수도의 정확한 발음을 들려줍니다. | 스피커 아이콘을 눌러 낯선 나라와 수도 이름의 원어민 발음을 청취해요. |
| 원클릭 구글 지도 연동 | API에서 제공하는 국가별 Google Maps 링크를 연결해 실제 지형과 위치를 탐색합니다. | '지도 보기' 버튼을 눌러 해당 국가의 위성 지도와 주변 지형을 바로 관찰해요. |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
✨ [에러 제로 & 거꾸로 질문] 추천 바이브 코딩 프롬프트
너는 웹 프론트엔드 전문 개발자이자 교육용 UX 디자이너야.
무료 REST Countries API를 연동하여 누구나 쉽게 전 세계 국가 정보를 검색하고 탐색할 수 있는 단일 파일 '세계 나라 정보 탐색기(World Country Explorer)' 웹앱을 만들어 줘.
[1. 에러 방지 기본 안전장치 (Zero-Error Baseline)]
1. Single-file Standalone HTML: HTML5, CSS3, Vanilla JS를 외부 빌드 도구 없이 단 하나의 완성형 HTML 파일 내부에 모두 작성해 줘. 코드 중간에 생략(// TODO) 없이 완전한 코드를 출력해 줘.
2. 최적화된 API 호출 및 필터링: 'https://restcountries.com/v3.1/all?fields=name,capital,currencies,languages,flags,population,region,subregion,maps,cca3' 엔드포인트를 사용해 필요한 필드만 경량으로 호출하고, 최초 1회 호출 후 브라우저 메모리에 캐싱하여 끊김 없는 검색 경험을 제공해 줘.
3. 방어적 데이터 파싱: 국가별로 수도(capital)가 없거나, 화폐(currencies) 및 언어(languages)가 객체 형태로 가변적인 경우(예: Object.values() 활용)에도 화면이 깨지지 않도록 Nullish 병합 연산자(??)와 기본값 처리(예: '정보 없음')를 완벽하게 적용해 줘.
4. 대규모 데이터 렌더링 최적화: 250여 개국 데이터가 한 번에 렌더링될 때 버벅거리지 않도록 검색어 입력 시 디바운스(Debounce) 또는 부드러운 카드 렌더링을 적용해 줘.
5. 반응형 카드 그리드 & 내장 SVG: 모바일/태블릿/PC 화면에 맞춰 반응형 그리드(CSS Grid/Flexbox)로 구현하고, UI 아이콘은 깨지지 않는 인라인 SVG를 사용해 줘.
[2. 핵심 기능 명세 (Core Logic)]
1. 상단 컨트롤 바:
- 실시간 검색창: 국가 이름(공식명/통용명)을 실시간으로 검색.
- 대륙(Region) 필터 드롭다운: 전체, 아시아, 유럽, 아메리카, 아프리카, 오세아니아 선택 기능.
- 정렬(Sort) 옵션: 국가명 순(가나다/ABC), 인구수 많은 순, 인구수 적은 순 정렬.
2. 국가 카드 갤러리:
- 각 카드에는 선명한 국기 이미지, 국가 통용명(common name), 소속 대륙, 수도, 인구수(세 자리 콤마 포맷)를 카드 형태로 깔끔하게 표시.
3. 상세 정보 팝업 모달(Modal):
- 카드 클릭 시 열리는 상세 모달창: 공식 명칭, 통용 명칭, 수도, 사용 화폐(이름 및 기호), 공용어 목록, 세부 지역(Subregion), 인구수, 구글 지도 링크 버튼 제공.
- 국가명 및 수도 음성 발음(TTS): Web Speech API를 활용해 스피커 아이콘 클릭 시 영문 발음 재생.
4. 부가 기능:
- '즐겨찾기(북마크)' 기능: 관심 있는 국가를 저장하여 모아볼 수 있도록 LocalStorage 연동.
[3. 거꾸로 질문하기 (Reverse Prompting)]
- 코드를 바로 작성하지 말고, 먼저 아래의 3가지 질문을 나에게 던진 후 나의 답변을 확인하고 나서 최종 코드를 완성해 줘:
1. 웹앱의 주 사용 대상(초·중등 사회/지리 수업용, 글로벌 여행자용, 일반 상식 탐색용)과 선호하는 비주얼 테마(깔끔한 모던 화이트, 심해 블루 아틀라스 테마, 다크 모드)는 무엇인가요?
2. 국가 상세 모달에 구글 지도 링크 외에 '국기 맞히기 퀴즈 모드'나 '두 나라 인구/면적 비교 기능' 같은 추가 학습 요소를 포함하기를 원하시나요?
3. 한글 국가명 검색 지원을 위한 자체 매핑 힌트나 특정 국가 필터 고정 옵션이 필요한가요?
📋 3단계 실천 가이드
- 1단계 (프롬프트 복사): 위의 추천 프롬프트를 복사하여 Google Gemini, Gemini Gems, 또는 Gemini Spark 대화창에 입력합니다.
- 2단계 (거꾸로 질문 답변): AI가 제시하는 3가지 맞춤 질문(사용 목적, 디자인 테마, 추가 학습 모드 등)에 원하는 설정을 간단히 답변합니다.
- 3단계 (원클릭 실행): AI가 완성해 준 단일 HTML 코드를 복사하여
index.html로 저장한 후 더블 클릭하거나 Google Sites/Blogger에 삽입하여 바로 활용합니다!
🎯 에디터 한줄평
"250개국의 방대한 세계 지리 데이터도 REST Countries API와 제미나이의 거꾸로 프롬프트만 있다면, 단 몇 분 만에 직관적이고 멋진 탐색기 웹앱으로 변신합니다!"
