Vibe Seoul
Vibe Seoul — Feel K-Content (Demo URL: https://vibeseoul.pages.dev/) 한국 인터넷에는 "Do you know ○○?" 라는 밈(meme)이 있다.
Core trick
Gemini maps a K-content poster's mood to Seoul locations, then Nano Banana generates a mood image for each place paired with its OST.
Description
Vibe Seoul — Feel K-Content
(Demo URL: https://vibeseoul.pages.dev/)
한국 인터넷에는 "Do you know ○○?" 라는 밈(meme)이 있다.
한국의 자랑거리를 외국인에게 알려주고 싶은 마음을 살짝 비꼬는 듯하면서도, 그 안에는 우리 콘텐츠를 알아줬으면 하는 은근한 자부심이 담겨 있다. Vibe Seoul은 바로 그 마음에서 출발했다.
What problem does it solve?
K-드라마, K-영화, K-팝은 전 세계적으로 소비되고 있지만, 그 콘텐츠가 품고 있는 장소의 분위기까지 경험하기는 어렵다. 콘텐츠를 좋아하는 외국인이 실제로 서울을 방문했을 때 "그 바이브"를 느낄 수 있는 장소를 연결해주는 서비스는 아직 부족하다.
How it works?
사용자가 좋아하는 K-콘텐츠 포스터를 선택하면, Gemini가 해당 콘텐츠의 분위기를 잘 담은 서울의 장소 2~5곳을 추천한다. 실제 촬영지이거나, 작품의 무드와 어울리는 공간이다. 각 장소는 nano banana2가 생성한 분위기 이미지와 함께 제공되고, 콘텐츠의 OST/BGM 하이라이트가 동시에 재생되어 시각과 청각을 아우르는 공감각적 경험을 만든다.
Goal
K-콘텐츠의 감성을 눈과 귀로 동시에 느끼게 하고, 언젠가 서울에 가보고 싶다는 마음을 심어주는 것. 그게 Vibe Seoul의 작은 목표다. :-)
README excerpt
# 🎵 Vibe Seoul **K-콘텐츠로 서울을 느끼다 — Feel K-Content Through Seoul** > K-드라마, K-팝, 한국 영화의 감성을 서울의 실제 장소로 연결해주는 AI 감각 여행 경험 🌐 **Live:** [vibeseoul.pages.dev](https://vibeseoul.pages.dev) --- ## 한국어 ### 무엇인가요? 포스터를 탭하면 그 K-콘텐츠의 감성과 분위기를 가장 잘 담은 서울 명소 5곳을 AI가 추천해줍니다. 장소마다 AI가 생성한 시네마틱 아트워크와 OST가 함께 흘러나와 마치 그 장면 속에 있는 듯한 경험을 선사합니다. ### 주요 기능 - **플로팅 포스터 랜딩** — 실제 K-콘텐츠 포스터들이 서울 지도 배경 위에 자유롭게 떠다님 - **AI 장소 추천** — Gemini 2.5 Flash가 콘텐츠 분위기를 분석해 서울 명소 5곳 추천 - **인터랙티브 지도** — Google Maps에 무드 컬러 마커로 표시 - **AI 아트워크** — Gemini Flash Image가 각 장소를 시네마틱하게 생성 - **이머시브 풀스크린 뷰** — 카드/마커 탭 시 전체화면으로 감상 (스와이프, 키보드 지원) - **OST 자동 재생** — YouTube에서 콘텐츠 OST를 찾아 자동 재생 - **무드 반응형 UI** — romantic / tense / bright / melancholy / energetic 5가지 테마 ### 기술 스택 | 역할 | 기술 | |------|------| | 장소 추천 AI | Gemini 2.5 Flash | | 이미지 생성 AI | Gemini Flash Image (gemini-3.1-flash-image-preview) | | 포스터 이미지 | TMDB API | | 지도 | Google Maps JavaScript API | | 음악 | YouTube IFrame API | | 배포 | Cloudflare Pages + Functions | | 프론트엔드 | Vanilla HTML/CSS/JS (빌드 도구 없음) | ### 직접 배포하기 1. 이 저장소를 클론합니다 2. [Cloudflare Pages](https://pages.cloudflare.com)에 배포합니다 3. Cloudflare Pages 대시보드에서 환경 변수(Secrets)를 설정합니다: ``` GEMINI_API_KEY — Google AI Studio API 키 GOOGLE_API_KEY — YouTube Data API v3 키 (Google Cloud Console) GOOGLE_MAPS_API_KEY — Google Maps JavaScript API 키 TMDB_READ_TOKEN — TMDB API Read Access Token ``` > API 키는 `functions/api/` 서버사이드 함수에서만 사용되어 외부에 노출되지 않습니다. --- ## English ### What is it?