학습목표
- 실제 챌린지(공모전) 요건에 맞춰 미니앱을 기획부터 완성까지 진행할 수 있다.
- 외부 공공 API를 연동해 실사용 가능한 기능을 구현할 수 있다.
- 위치 권한 없이도 사용자가 신뢰할 수 있는 UX를 설계할 수 있다.
오늘은 지금까지 배운 것을 총동원해 실제 "토스 바이브코딩 챌린지" 출품을 목표로 하나의 미니앱을 처음부터 끝까지 완성한다. 주제는 "더위탈출" — 무더운 날 시원하게 쉴 곳을 찾아주는 앱이다.
1. 토스 바이브코딩 챌린지 개요
바이브 코딩만으로 실제 동작하는 토스 미니앱을 만들어 출품하는 챌린지다. 완성도보다 "실제로 켜서 써볼 수 있는가"가 핵심 평가 기준이며, 8일차에 배운 앱인토스 개발·QR 테스트·오픈 정책까지 모두 실전에 적용해보는 마무리 단계다.
2. "더위탈출" 앱 기획
2-1. 컨셉
사용자의 정확한 실시간 위치(GPS)를 요구하지 않고도, 지역을 직접 선택하는 방식으로 주변의 시원한 장소(그늘·실내 쉼터·수변 공간 등)를 추천해주는 미니앱이다.
2-2. Open-Meteo API 연동
Open-Meteo 날씨 API로 선택한 지역의 현재 기온·체감온도를 가져온다. 무료 공개 API는 비상업적 이용 조건과 호출 제한이 적용된다. 광고를 붙이거나 상업적으로 운영할 경우 유료 상업 이용 조건과 API 키 사용을 검토한다(2026-10-12 공식 요금 안내 확인).
Open-Meteo API로 사용자가 선택한 지역의 현재 기온과 체감온도를 가져와서
"더위 위험도"를 3단계(보통/주의/위험)로 표시하는 기능을 만들어줘.
3. GPS 미사용 신뢰 UX 설계 원칙
실시간 위치 권한을 요구하면 설치·사용 장벽이 높아지고, 개인정보 우려로 신뢰도도 떨어질 수 있다. 이 앱은 사용자가 "지역을 직접 선택"하게 해 오히려 더 명확하고 예측 가능한 경험을 제공한다.
4. 화면 구성
4-1. 메인화면
현재 선택된 지역명과 더위 위험도를 큼직하게 보여주고, 지역 변경 버튼을 상단에 배치한다.
4-2. 날씨카드
기온·체감온도·습도를 카드 형태로 정리해 한눈에 파악할 수 있게 한다.
4-3. 지도화면
선택 지역 주변의 추천 장소(그늘·쉼터·수변공간)를 지도 위 마커로 표시한다.
4-4. 목록화면
지도 대신 리스트 형태로도 추천 장소를 볼 수 있게 해, 지도 조작이 익숙하지 않은 사용자도 쉽게 이용할 수 있게 한다.
4-5. 상세화면
장소별 사진, 운영시간, 특징(무료 여부, 실내/실외 등)을 상세히 보여준다.
4-6. 길찾기
상세화면에서 "길찾기" 버튼을 누르면 외부 지도 앱으로 연결해 실제 이동까지 지원한다.
4-7. 지역 데이터
전국 주요 지역의 대표 쉼터 데이터를 미리 정리한 로컬 데이터셋으로 관리해, 매번 외부 크롤링 없이도 빠르게 응답할 수 있게 한다.
5. 구현 파일 구조
| 파일 | 역할 |
|---|---|
app/page.tsx |
메인화면 |
app/map/page.tsx |
지도화면 |
app/list/page.tsx |
목록화면 |
app/place/[id]/page.tsx |
상세화면 |
lib/weather.ts |
Open-Meteo API 호출 로직 |
data/places.ts |
지역별 추천 장소 데이터 |
granite.config.ts |
앱 메타 정보 설정 |
6. 빌드 확인
- 로컬 개발 서버로 전체 화면 흐름(메인→지도/목록→상세→길찾기) 점검
- QR 테스트로 실기기에서 위치 선택부터 길찾기까지 전 과정 실행
- 8일차의 오픈 정책 체크리스트로 최종 점검 후 검토 요청 제출
7. UX 원칙 정리
- 위치 권한을 요구하지 않아도 되는 대안(지역 직접 선택)을 우선 고려한다
- 사용자가 다음에 무엇을 해야 할지 항상 명확하게 안내한다(지도 ↔ 목록 전환, 길찾기 버튼 위치 등)
- 외부 API 응답이 느리거나 실패할 때를 대비한 대체 화면(로딩·에러 상태)을 반드시 준비한다
오늘 실습
- Open-Meteo API 연동 테스트
- 메인→지도/목록→상세→길찾기 전체 화면 흐름 구현
- QR 테스트로 실기기 확인 및 오픈 정책 체크리스트 최종 점검
오늘의 실습 산출물
- "더위탈출" 미니앱(챌린지 출품용, QR 테스트 완료)
관련 노트
실습 검증과 문제 해결
날씨 API 실패 상태 만들기
- 직접 해볼 일: 정상 지역 선택 뒤 네트워크 연결이 없는 상황을 별도로 시험한다.
- 예상 결과와 판정 기준: 정상일 때 관측·갱신 시각과 단위를 표시하고, 실패 시 현재값처럼 임의 숫자를 보여주지 않아야 한다.
- 오류를 좁히는 방법: 교육용 위험도는 공식 폭염 특보나 의료 판단이 아니다. 쉼터 운영시간·위치의 출처와 갱신일을 표시하고 외부 길찾기 링크도 확인한다.
이 항목은 교육용 검증 시나리오이며 실제 실행 성공·수익·플랫폼 승인을 보고하는 사례가 아니다. 결과 화면과 수정 내용을 기록하면 다음 실습에서 같은 오류를 줄일 수 있다.
자료 업데이트 안내
2026-10-12 주요 설명 보완. 설치 명령·계정별 기능·요금과 심사 규정은 실행 시점의 공식 문서를 다시 확인한다.
- Open-Meteo 요금 및 상업 이용 조건
- 강의 내용 문의 및 오류 신고: 라인블록