💡 30초 핵심 요약
회원가입도, 복잡한 API 인증 키(Key) 발급도 전혀 필요 없는 100% 완전 무료 오픈소스 API인 Dog API를 소개합니다! 단 한 줄의 주소(
https://dog.ceo/api/breeds/image/random)만으로 전 세계 수만 장의 강아지 사진을 실시간으로 불러와 교실과 일상에서 활용할 수 있는 '댕댕이 힐링 포토카드 & 견종 탐구 퀴즈 웹앱'을 제미나이(Gemini)로 단 1분 만에 제작해 보세요.
안녕하세요! '프롬프트로 배우는 바이브 코딩'의 친절한 에디터입니다. 🐶
앞서 다룬 고양이 API에 이어, 이번에는 진입 장벽이 '완전 0(Zero)'에 가까운 최강의 무료 오픈 API인 Dog API(https://dog.ceo/dog-api/)를 소개해 드립니다. API 키 발급 절차가 아예 없기 때문에 초등학교 실과·정보 수업이나 코딩에 두려움이 있는 비전공 선생님들도 학생들과 함께 1분 만에 실습을 마칠 수 있답니다!
📊 Dog API의 3대 핵심 엔드포인트 완벽 정리
단 3가지 주소만 알면 강아지 관련 모든 웹앱과 수업 교구를 뚝딱 만들 수 있습니다.
| 무엇이 바뀌었나요? / 기능 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 1. 랜덤 강아지 사진 (/breeds/image/random) |
호출할 때마다 무작위로 귀여운 강아지 사진 URL 1장을 {"message": "사진주소", "status": "success"} 형태로 반환해요. |
아침 등교 맞이 '오늘의 댕댕이 힐링 포토' 카드로 교실 전자칠판에 띄워보세요! |
| 2. 견종별 사진 검색 (/breed/{견종}/images) |
골든 리트리버, 허스키, 웰시코기 등 특정 견종 영문명을 넣으면 해당 품종의 사진만 골라서 가져옵니다. | 학생들이 좋아하는 견종을 선택해 관찰하는 '인터랙티브 강아지 도감'을 만들 수 있어요. |
| 3. 전체 견종 목록 (/breeds/list/all) |
전 세계 100여 종 이상의 공인 견종 리스트를 트리 구조의 깔끔한 JSON 데이터로 제공합니다. | 사진을 보고 견종 이름을 맞히는 '4지선다 견종 퀴즈 게임'의 보기 목록으로 활용하세요. |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
Dog API를 연동하여 버튼을 누르면 새로운 강아지 사진이 폴라로이드 감성 카드로 출력되고, 귀여운 멍멍 효과음(Web Audio)과 견종 퀴즈 모드가 포함된 '댕댕이 힐링 포토카드 & 퀴즈 웹앱' 제작 프롬프트입니다.
🪄 Dog API 연동 포토카드 & 퀴즈 웹앱 바이브 코딩 프롬프트
인증키가 필요 없는 Dog API(https://dog.ceo/api/breeds/image/random)를 연동하여 '오늘의 댕댕이 힐링 포토카드 & 견종 퀴즈 웹앱'을 제작해 주세요.
[🚨 에러 방지 기본 안전장치 (Zero-Error Baseline)]
1. 단일 HTML 파일 완결: HTML5, CSS3, Vanilla JS를 하나의 .html 파일에 모두 포함하고 // TODO 생략 없이 100% 완성 코드로 출력할 것.
2. 안전한 비동기 API 통신: fetch() 호출 중 회전하는 로딩 애니메이션을 띄우고, 데이터 수신 실패 시 '다시 불러오기' 재시도 버튼을 제공할 것.
3. Web Audio 효과음: 카드 뽑기 시 부드러운 '멍멍!' 차임벨 효과음(Web Audio API 자체 합성)을 내장하고, 브라우저 정책(첫 터치 시 AudioContext 활성화)을 준수할 것.
4. 모바일·전자칠판 반응형: 감성적인 폴라로이드 사진 프레임과 이미지 다운로드(PNG 저장) 및 A4 인쇄 서식을 지원할 것.
[❓ 역질문 유도 (Reverse Prompting)]
코드를 바로 작성하기 전에, 나에게 아래 3가지 질문을 먼저 던져서 기획을 구체화해 줘:
1. 주된 사용 모드가 [랜덤 힐링 포토카드 모드]인가요, 아니면 사진을 보고 견종을 맞히는 [4지선다 견종 퀴즈 모드]인가요? (둘 다 포함할 수도 있습니다.)
2. 포토카드 하단에 표시할 텍스트(예: 오늘의 긍정 확언, 강아지 힐링 응원 한 줄, 학생 칭찬 문구 등)의 테마는 무엇인가요?
3. 선호하는 UI 디자인 테마(따뜻한 크림 베이지 웜톤 vs 발랄한 파스텔 옐로우)가 있으신가요?"
🏃 실전 적용 3단계 따라하기
- 1단계 (프롬프트 복사 & 전달): 위 프롬프트를 복사하여 제미나이(Gemini)에 전달합니다.
- 2단계 (역질문 답변): AI가 물어보는 질문에 "포토카드와 퀴즈 둘 다 포함, 학생 칭찬 문구, 크림 베이지 웜톤"처럼 간단히 답변합니다.
- 3단계 (원클릭 실행): 생성된 단일 HTML 코드를 메모장에 붙여넣고
dog_app.html로 저장한 뒤 열면 1초 만에 강아지 포토카드 웹앱이 작동합니다!
🎯 에디터 한줄평
"회원가입도, API 키도 필요 없는 Dog API는 세상에서 가장 친절한 코딩 입문 선생님입니다. 복잡한 인증 절차에 지친 교육자와 초보 바이브 코더에게 100% 성공 경험과 미소를 선물해 줍니다!"
📌 Dog API 공식 리소스 & 문서
• Dog API (The internet's biggest collection of open source dog pictures) 공식 웹사이트 🔗
• Dog API 엔드포인트 공식 개발 문서 🔗
