Vibe 코딩 가이드 4/5

🌍 Vibe 코딩 가이드

🚀 4단계 - API & 실시간 데이터

🎉 3단계 완료를 축하합니다!
이제 실용적인 앱을 만들 수 있습니다. 4단계에서는 외부 데이터를 가져와서 더욱 강력한 앱을 만들어봅시다!

🌟 4단계에서 배울 내용

• API가 무엇인지 이해하기
• 무료 API를 사용해서 실시간 데이터 가져오기
• 날씨 정보 앱 만들기
• 환율 정보 앱 만들기
• 명언/이미지 랜덤 생성기 만들기
• 로딩 상태 표시하기

🎯 API란?
API는 Application Programming Interface의 약자입니다.
쉽게 말하면 "다른 서비스의 데이터를 가져올 수 있는 통로"입니다!
예: 날씨 정보, 환율, 뉴스, 이미지 등을 실시간으로 가져올 수 있습니다.

🔑 무료 API 소개

☁️ OpenWeatherMap
전 세계 날씨 정보 제공
- 현재 날씨, 5일 예보
- 온도, 습도, 풍속 등
- 무료 계정: 하루 1,000번 호출 가능
- 사이트: openweathermap.org

💱 ExchangeRate-API
실시간 환율 정보 제공
- 150개 이상 통화 지원
- 무료 계정: 월 1,500번 호출
- 사이트: exchangerate-api.com

💬 Quotable
랜덤 명언 제공
- API 키 불필요
- 무료 무제한 사용
- 사이트: github.com/lukePeavey/quotable

🖼️ Unsplash
고품질 무료 이미지 제공
- 랜덤 이미지, 검색 기능
- 무료 계정: 시간당 50번
- 사이트: unsplash.com/developers

🐱 Cat API
귀여운 고양이 사진 제공
- API 키 불필요
- 무료 무제한
- 사이트: thecatapi.com

☁️ 실습 1: 날씨 앱 만들기

1 API 키 받기
- openweathermap.org 접속
- Sign Up으로 무료 가입
- API Keys 메뉴에서 키 복사

📝 기본 날씨 앱 요청:

날씨 정보 앱을 만들어주세요.

기능:
- 도시 이름 입력창
- "날씨 검색" 버튼
- OpenWeatherMap API를 사용해서 날씨 정보 가져오기
- 결과 표시: 도시명, 온도, 날씨 설명, 습도, 풍속
- 날씨 아이콘도 표시

디자인:
- 깔끔한 카드 스타일
- 하늘색 배경
- 온도는 크고 눈에 띄게

API 키는 제가 직접 입력할게요.

💡 API 사용 팁:
AI에게 "OpenWeatherMap API를 사용해서" 라고 말하면
AI가 자동으로 올바른 API 주소와 사용 방법을 적용합니다!

📝 개선 요청:

로딩 중일 때 "날씨 정보를 가져오는 중..."이라는
메시지와 로딩 애니메이션을 보여주세요.

도시를 찾을 수 없으면
"도시를 찾을 수 없습니다" 오류 메시지를 표시해주세요.

온도를 섭씨/화씨로 전환할 수 있는 버튼도 추가해주세요.

💱 실습 2: 환율 계산기 만들기

📝 환율 계산기 요청:

실시간 환율 계산기를 만들어주세요.

기능:
- ExchangeRate-API 사용
- 금액 입력창
- 출발 통화 선택 (USD, KRW, JPY, EUR, CNY)
- 도착 통화 선택 (USD, KRW, JPY, EUR, CNY)
- "환율 계산" 버튼
- 결과 표시: 계산된 금액과 현재 환율
- 마지막 업데이트 시간 표시

디자인:
- 금융 느낌의 깔끔한 디자인
- 녹색 계열 색상
- 결과는 크고 명확하게

💡 실시간 업데이트:
"페이지가 열릴 때 자동으로 최신 환율을 가져와주세요"라고 요청하면
항상 최신 정보를 보여줄 수 있습니다!

💬 실습 3: 랜덤 명언 생성기

📝 명언 생성기 요청:

랜덤 명언 생성기를 만들어주세요.

기능:
- Quotable API 사용 (API 키 불필요)
- 페이지 로딩 시 자동으로 명언 하나 표시
- "새 명언" 버튼 클릭하면 다른 명언 표시
- 명언 내용과 작가 이름 표시
- 트위터 공유 버튼 추가

디자인:
- 미니멀한 디자인
- 명언은 큰 글씨체
- 작가 이름은 작고 우아하게
- 부드러운 애니메이션 효과

📝 개선 요청:

"좋아요" 버튼을 추가해서
마음에 드는 명언을 localStorage에 저장하고
"저장된 명언" 섹션에서 볼 수 있게 해주세요.

🖼️ 실습 4: 랜덤 이미지 갤러리

🎯 프로젝트: 인스피레이션 이미지 갤러리

📝 이미지 갤러리 요청:

Unsplash API를 사용한 이미지 갤러리를 만들어주세요.

기능:
- 검색어 입력창 (예: "nature", "city", "food")
- "검색" 버튼
- 검색 결과 이미지 9개를 3x3 그리드로 표시
- 이미지 클릭하면 큰 사이즈로 모달 팝업
- "랜덤 이미지" 버튼으로 무작위 이미지 로드

디자인:
- Pinterest 스타일의 그리드 레이아웃
- 이미지에 호버하면 작가 이름 표시
- 부드러운 로딩 애니메이션

🐱 실습 5: 귀여운 동물 사진 앱

📝 간단한 API 연습:

귀여운 고양이 사진 앱을 만들어주세요.

기능:
- The Cat API 사용 (API 키 불필요)
- "새 고양이 보기" 버튼
- 버튼 클릭하면 랜덤 고양이 사진 표시
- "좋아요" 카운터
- 부드러운 페이드 인 애니메이션

디자인:
- 귀엽고 밝은 느낌
- 파스텔 톤 배경
- 하트 모양 좋아요 버튼

💡 비슷한 API들:
- Dog API (강아지 사진)
- Fox API (여우 사진)
- Shibe API (시바견 사진)
원하는 동물의 API를 찾아서 만들어보세요!

⏳ 로딩 상태 처리하기

🎯 왜 로딩 상태가 중요한가요?
API 호출은 시간이 걸립니다 (보통 1~3초).
사용자에게 "지금 데이터를 가져오고 있다"는 걸 알려줘야 합니다!

📝 로딩 상태 추가 요청:

API 호출 중일 때:
- "로딩 중..." 텍스트 표시
- 회전하는 스피너 애니메이션 표시
- 버튼 비활성화

데이터를 받으면:
- 로딩 표시 숨기기
- 결과 부드럽게 나타나기
- 버튼 다시 활성화

오류가 발생하면:
- 빨간색 오류 메시지 표시
- "다시 시도" 버튼 표시

🚀 실습 6: 종합 프로젝트 아이디어

🌤️ 프로젝트 1: 여행 대시보드
여행지의 날씨, 환율, 추천 이미지를 한 번에
- 도시 선택
- 날씨 정보 (OpenWeather)
- 현지 환율 (ExchangeRate)
- 도시 이미지 (Unsplash)

📰 프로젝트 2: 아침 브리핑 앱
아침에 확인하는 정보 모음
- 오늘의 날씨
- 오늘의 명언
- 랜덤 인스피레이션 이미지
- 현재 시간

🎲 프로젝트 3: 심심풀이 앱
랜덤 콘텐츠 생성기
- 랜덤 고양이 사진
- 랜덤 명언
- 랜덤 이미지
- "무작위 콘텐츠" 버튼으로 전체 새로고침

💼 프로젝트 4: 비즈니스 도구
업무에 유용한 도구 모음
- 환율 계산기
- 세계 주요 도시 시간
- 날씨 정보
- 할 일 목록 (localStorage)

⚠️ API 사용 시 주의사항

🔒 API 키 보안
- API 키는 절대 공개 저장소에 올리지 마세요
- GitHub에 업로드할 때 키를 코드에서 제거하고 설명에 "API 키가 필요합니다"라고 명시
- 무료 API를 사용하되, 사용량 제한을 확인하세요

⏱️ 호출 제한
- 대부분의 무료 API는 호출 횟수 제한이 있습니다
- 불필요한 반복 호출을 피하세요
- 가능하면 결과를 캐싱(임시 저장)하세요

🌐 CORS 오류
만약 "CORS 오류"가 발생하면 AI에게:
"CORS 오류가 발생했어요. 다른 방법으로 API를 호출해주세요" 라고 요청하세요.

🔧 API 문제 해결

❌ 데이터가 안 불러와져요

체크리스트:

• API 키가 올바른가요?
• 인터넷 연결이 되어있나요?
• API 호출 횟수 제한을 초과했나요?
• 브라우저 개발자 도구(F12)에서 오류 확인

❌ 로딩이 너무 느려요

AI에게 이렇게 요청하세요:

타임아웃을 5초로 설정하고,
5초 안에 응답이 없으면
"서버 응답이 없습니다. 다시 시도해주세요" 메시지를 표시해주세요.

🌐 GitHub에 API 앱 업로드하기

⚠️ 중요!
API 키가 필요한 앱을 GitHub에 올릴 때는 키를 제거하세요!

1 API 키를 코드에서 분리
코드에서 API 키 부분을 빈 문자열로 변경:

const API_KEY = ""; // 여기에 본인의 API 키를 입력하세요

2 README 파일 만들기
AI에게 요청하세요:

이 프로젝트에 대한 README.md 파일을 만들어주세요.
- 프로젝트 설명
- 사용 방법
- API 키 받는 방법
- API 키 입력하는 방법

3 업로드
index.html과 README.md를 함께 GitHub에 업로드

💡 API 키가 필요없는 앱:
Quotable, Cat API 같이 키가 필요없는 API를 사용한 앱은
바로 GitHub Pages에 올려도 완벽하게 작동합니다!

🏆 4단계 미션

1 최소 2개의 다른 API를 사용하는 앱 만들기

2 로딩 상태와 오류 처리 구현하기

3 localStorage와 API를 함께 사용하기 (예: 좋아하는 항목 저장)

4 반응형 디자인으로 모바일에서도 잘 보이게 만들기

5 GitHub에 올리고 README로 사용법 설명하기

🎓 다음 단계 예고:
4단계를 완료했다면 프레임워크 사용, 복잡한 상태 관리, 배포 최적화 등을 배우는 5단계로 넘어갈 준비가 되었습니다!
5단계는 진짜 프로 개발자 수준입니다! 🎓

💪 여러분의 성장:
1단계: 텍스트 ➜ 2단계: 인터랙션 ➜ 3단계: 저장 ➜ 4단계: 실시간 데이터!
이제 실제 서비스처럼 외부 데이터를 활용할 수 있습니다! 🌟