Now in Seoul — 서울 실시간 관광 정보 플랫폼

프로젝트 개요

Now in Seoul은 서울을 방문하는 외국인 관광객과 국내 여행자를 위한 실시간 관광 정보 플랫폼입니다.

서울시 120개 주요 명소의 실시간 인구밀도(혼잡도), 교통 상황, 날씨를 한꺼번에 확인하고, 지도에서 원하는 장소를 탐색할 수 있습니다. 한국어·영어·일본어 3개 언어를 완벽 지원해 외국인 방문객도 불편 없이 이용할 수 있습니다.

팀 구성 · Team Seoul Friends

이름	역할
원정	PM · 기획 · 지도 및 다국어 구현 · 인프라 구성
홍민	프로젝트 컨셉 구성 · 메인/상세페이지 개발 · 다국어 데이터 검수
지연	DB 설계 및 구현 · 데이터 파이프라인 개발 · 스케줄러 개발
지윤	로고 제작 · 화면 구성 아이디어 제공

기술 스택

영역	기술
Framework	Python Flask 3.x
Template Engine	Jinja2
Database	SQLite
WSGI Server	Gunicorn
Reverse Proxy	Nginx
Multilingual	Flask-Babel (한국어 · 영어 · 일본어)
Map	Leaflet.js + OpenStreetMap
Container	Docker · DockerHub
CI/CD	GitHub Actions
Cloud	AWS EC2 · Route 53
Public API	서울 열린데이터 광장 (실시간 도시데이터) · 기상청 API Hub

서비스 구조

(서비스 구조도 이미지 추후 포함 예정)

핵심 기능

메인 페이지 — 테마별 명소 탐색

서울의 주요 명소를 Food · Drama · Beauty · Movie 테마로 분류해 한눈에 탐색할 수 있습니다. 각 카드에는 대표 이미지와 장소명이 표시되며, 데스크톱과 모바일 모두 최적화된 반응형 레이아웃으로 제공됩니다.

메인 페이지 — 데스크톱 (일본어)

메인 페이지 데스크톱 뷰 (일본어)

메인 페이지 — 모바일 (한국어)

메인 페이지 모바일 뷰 (한국어)

상세 페이지 — 실시간 3종 정보

명소 카드를 클릭하면 해당 장소의 실시간 정보를 즉시 확인할 수 있습니다.

정보 항목	데이터 출처	갱신 주기
혼잡도 (Crowd Density)	서울 실시간 도시데이터 API	5분
교통 상황 (Traffic Conditions)	서울 실시간 도시데이터 API	5분
날씨 (Weather)	기상청 단기예보 API	3시간

혼잡도는 여유 / 보통 / 붐빔 / 매우붐빔 4단계로 색상 배지와 함께 표시되며, 시간대별 예측 그래프를 함께 제공해 방문 계획을 세울 때 유용합니다. 날씨는 기온과 강수 확률을 시간대별로 제공합니다.

상세 페이지 — 혼잡도·날씨·공공자전거

상세 페이지: 실시간 혼잡도 · 날씨 · 인근 공공자전거 대여소 현황

지도 탐색 — Leaflet 기반 인터랙티브 맵

Leaflet.js + OpenStreetMap 기반 지도에서 서울 전체 명소를 한 화면에서 탐색할 수 있습니다. 지도 핀을 클릭하면 해당 명소의 현재 혼잡도 상태가 팝업으로 표시되고, 상세 페이지로 바로 이동할 수 있습니다. 인근 공공자전거(따릉이) 대여소 위치와 잔여 대수도 함께 확인할 수 있어 이동 편의성을 높였습니다.

모바일 화면 — 홈·상세·지도 뷰

모바일 확정안: 홈 / 상세 / 지도+필터 화면

다국어 지원 — Flask-Babel i18n

Flask-Babel을 활용해 한국어·영어·일본어 3개 언어를 지원합니다. 언어는 URL 경로(/<locale>/)로 결정되며, 경로에 locale이 없을 경우 브라우저의 Accept-Language 헤더를 분석해 최적 언어를 자동 선택합니다.

외국인 방문자가 별도 설정 없이도 자신의 언어로 서비스를 이용할 수 있도록 설계했으며, 명소 설명·UI 라벨·혼잡도 및 교통 상태 문구 모두 3개 언어로 검수 완료했습니다.

상세 페이지 — EN / JA / KO 비교

동일 페이지의 영어(EN) · 일본어(JA) · 한국어(KO) 화면

데이터 파이프라인

실시간성이 핵심인 서비스인 만큼, 안정적인 데이터 수집·가공·저장 파이프라인을 별도로 구축했습니다.

수집 대상 API

데이터	API	갱신 주기
실시간 인구밀도 + 교통 상황	서울 열린데이터 광장 — 실시간 도시데이터	5분
인구밀도 시간대별 예측값	서울 열린데이터 광장 — 실시간 도시데이터	1시간
단기 날씨 예보	기상청 API Hub	3시간
공공자전거 대여소 현황	서울 공공자전거 API	실시간

ETL 구조

[외부 API 호출]
       │
       ▼
 {domain}_raw 테이블     ← 원본 데이터 적재
       │
       ▼
   ETL 처리              ← 정제·변환 (etl.py)
       │
       ▼
 {domain}_cache 테이블   ← 서비스 응답에 사용

raw → cache 2단계 구조로 원본 데이터를 보존하면서 서비스 응답에는 정제된 캐시 테이블만 사용합니다. 오류 발생 시 원본 데이터가 손상되지 않아 재처리가 용이합니다.

크론 스케줄러

crontab으로 API 호출·ETL·DB 반영을 자동화했습니다.

# 실시간 인구밀도 + 교통 상황 (5분 간격)
1/5 * * * *  /path/to/detail.sh
 
# 인구밀도 예측값 (매시 2분, 5분 간격)
2 * * * *    /path/to/density.sh
2/5 * * * *  /path/to/density.sh
 
# 날씨 예보 (하루 8회 — 3시간 간격)
3 2,5,8,11,14,17,20,23 * * *  /path/to/weather.sh

인프라 구성

GitHub Actions → DockerHub → AWS EC2의 자동 배포 파이프라인을 구성했습니다.

AWS 인프라 아키텍처

AWS 인프라 구성도: Route 53 → Nginx → Gunicorn(Flask) + SQLite · GitHub Actions CI/CD

구성 요소	역할
AWS Route 53	도메인 DNS 라우팅
AWS EC2	애플리케이션 서버
Nginx	리버스 프록시 · 정적 파일 서빙
Gunicorn	Python WSGI 서버 (Flask 앱 실행)
Docker · DockerHub	컨테이너 이미지 빌드 및 배포
GitHub Actions	Push 이벤트 기반 자동 빌드·배포

배포 흐름:

git push → GitHub Actions (CI/CD)
              │  Build & Push
              ▼
          DockerHub
              │  Pull & Run
              ▼
          AWS EC2 (Docker 컨테이너)
              │
    Nginx Reverse Proxy
              │
    Gunicorn (Flask App)
              │
          SQLite DB

특장점 요약

1. 외국인 관광객 친화적 다국어 UX URL과 브라우저 언어 설정을 모두 활용하는 두 단계 locale 감지로, 별도 설정 없이도 방문자의 언어로 자동 전환됩니다. 명소 설명과 UI 문구 전체를 한·영·일로 검수해 번역 품질을 확보했습니다.

2. 실시간 데이터 기반 방문 계획 지원 혼잡도 배지·시간대별 예측 그래프·교통 상황·날씨를 한 화면에서 확인할 수 있어, 관광객이 혼잡한 시간을 피해 방문 계획을 세울 수 있습니다.

3. raw → cache 2단계 ETL로 안정적인 데이터 운영 원본 데이터를 보존한 채 정제·캐싱하는 구조로, API 오류나 데이터 이상 시 재처리가 용이하고 서비스 응답 속도를 유지합니다.

4. 크론 기반 자동 스케줄링 데이터 종류별 갱신 주기를 세분화(5분·1시간·3시간)해 API 호출 비용을 최소화하면서 실시간성을 유지합니다.

5. GitHub Actions → DockerHub → EC2 자동 배포 코드 푸시만으로 빌드·이미지 등록·서버 배포까지 자동화되어 운영 부담을 최소화했습니다.

6. Leaflet.js 기반 인터랙티브 지도 OpenStreetMap 위에 혼잡도 핀과 공공자전거 대여소 정보를 레이어로 올려, 지도 하나에서 명소 탐색과 이동 수단 계획을 동시에 지원합니다.

42kitrun Blog