생성형 AI를 활용하여 제작한 React 기반 여행 계획 서비스
MAPLOY는 여행지, 날짜, 예산, 여행 스타일을 입력하면 맞춤형 여행 일정을 자동으로 생성해주는 웹 서비스입니다.
- 🗺️ 6개 여행지 지원: 도쿄, 파리, 발리, 뉴욕, 바르셀로나, 이스탄불
- 🗓️ 맞춤 일정 생성: 3일, 5일, 7일 일정 자동 생성
- 💰 예산 분석: 여행 예산에 맞는 실용적인 비용 계획 제공
- 🍽️ 현지 정보: 대표 음식, 주요 명소, 여행 꿀팁 제공
| 기능 | 설명 |
|---|---|
| 여행지 선택 | 도쿄, 파리, 발리, 뉴욕, 바르셀로나, 이스탄불 중 선택 |
| 여행지 상세 정보 | 주요 명소, 대표 음식, 여행 꿀팁, 예산 정보 제공 |
| 맞춤 일정 생성 | 출발일, 여행 기간(3/5/7일), 인원, 예산, 스타일 입력 후 일정 자동 생성 |
| 예산 분석 | 입력한 예산이 여행에 적합한지 실시간 피드백 |
| 일자별 상세 일정 | 오전/오후/저녁으로 나뉜 구체적인 일정 제공 |
| 일정 저장 | 브라우저 인쇄 기능을 통해 일정 저장 가능 |
| 구분 | 기술 |
|---|---|
| Frontend | React 18, CSS3 |
| CI/CD | GitHub Actions |
| Hosting | AWS Amplify |
| Font | Cormorant Garamond, Outfit |
.github/workflows/deploy.yml에 정의된 파이프라인:
Push to main
│
▼
[Build Job]
├── Checkout code
├── Setup Node.js 24
├── npm ci
└── npm run build
│
▼
Build Artifact 업로드 완료
Repository → Settings → Secrets and variables → Actions
| Secret | 설명 |
|---|---|
AWS_ACCESS_KEY_ID |
AWS Access Key |
AWS_SECRET_ACCESS_KEY |
AWS Secret Key |
AWS_SESSION_TOKEN |
AWS Session Token |
AWS_REGION |
us-east-1 |
⚠️ AWS Academy 세션 기준 4시간만 유효합니다.
https://main.d3p0y9tcragi8.amplifyapp.com
| 영상 | 링크 |
|---|---|
| GitHub Actions 활용 CI/CD 구축 시연 | YouTube 바로가기 |
| AWS Amplify 서비스 활용 시연 | YouTube 바로가기 |
이동규 — 컴퓨터공학과