---
title: 9일차 강의노트
tags:
  - 강의자료
  - AI에이전트크리에이터
  - 토스챌린지
  - 미니앱
  - UX설계
created: 2026-10-12
---

# 9일차 강의노트
## 실전 프로젝트 — 챌린지 출품 미니앱 완성

### 학습목표
- 실제 챌린지(공모전) 요건에 맞춰 미니앱을 기획부터 완성까지 진행할 수 있다.
- 외부 공공 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. 길찾기
상세화면에서 "길찾기" 버튼을 누르면 외부 지도 앱으로 연결해 실제 이동까지 지원한다.

<!-- lecture-diagram:start day-9-1 -->
**그림으로 정리 · 더위탈출 사용자의 이동 경로**

![더위탈출 사용자의 이동 경로](assets/diagrams/day-09-1.svg)

지도와 목록은 같은 장소를 찾는 두 가지 경로이며, 이후 상세 화면으로 연결됩니다.
<!-- lecture-diagram:end -->

### 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` | 앱 메타 정보 설정 |

<!-- lecture-diagram:start day-9-2 -->
**그림으로 정리 · 날씨와 장소 정보는 어디에서 올까?**

![날씨와 장소 정보는 어디에서 올까?](assets/diagrams/day-09-2.svg)

외부 날씨 요청이 느리거나 실패해도 사용자가 상황을 알 수 있도록 로딩·오류 화면을 준비합니다.
<!-- lecture-diagram:end -->

## 6. 빌드 확인

1. 로컬 개발 서버로 전체 화면 흐름(메인→지도/목록→상세→길찾기) 점검
2. QR 테스트로 실기기에서 위치 선택부터 길찾기까지 전 과정 실행
3. 8일차의 오픈 정책 체크리스트로 최종 점검 후 검토 요청 제출

## 7. UX 원칙 정리

- 위치 권한을 요구하지 않아도 되는 대안(지역 직접 선택)을 우선 고려한다
- 사용자가 다음에 무엇을 해야 할지 항상 명확하게 안내한다(지도 ↔ 목록 전환, 길찾기 버튼 위치 등)
- 외부 API 응답이 느리거나 실패할 때를 대비한 대체 화면(로딩·에러 상태)을 반드시 준비한다

## 오늘 실습
1. Open-Meteo API 연동 테스트
2. 메인→지도/목록→상세→길찾기 전체 화면 흐름 구현
3. QR 테스트로 실기기 확인 및 오픈 정책 체크리스트 최종 점검

## 오늘의 실습 산출물
- "더위탈출" 미니앱(챌린지 출품용, QR 테스트 완료)

## 관련 노트
- [[8일차_강의노트]]
- [[10일차_강의노트]]


## 실습 검증과 문제 해결

### 날씨 API 실패 상태 만들기

- **직접 해볼 일**: 정상 지역 선택 뒤 네트워크 연결이 없는 상황을 별도로 시험한다.
- **예상 결과와 판정 기준**: 정상일 때 관측·갱신 시각과 단위를 표시하고, 실패 시 현재값처럼 임의 숫자를 보여주지 않아야 한다.
- **오류를 좁히는 방법**: 교육용 위험도는 공식 폭염 특보나 의료 판단이 아니다. 쉼터 운영시간·위치의 출처와 갱신일을 표시하고 외부 길찾기 링크도 확인한다.

이 항목은 교육용 검증 시나리오이며 실제 실행 성공·수익·플랫폼 승인을 보고하는 사례가 아니다. 결과 화면과 수정 내용을 기록하면 다음 실습에서 같은 오류를 줄일 수 있다.

## 자료 업데이트 안내

2026-10-12 주요 설명 보완. 설치 명령·계정별 기능·요금과 심사 규정은 실행 시점의 공식 문서를 다시 확인한다.

- [Open-Meteo 요금 및 상업 이용 조건](https://open-meteo.com/en/pricing)
- 강의 내용 문의 및 오류 신고: [라인블록](mailto:lineblock55@gmail.com)