다녀온 나라들을 한눈에 볼 수 있는 여행 정리 웹사이트

기획 배경

평소 여행을 즐기는데 다녀온 나라들을 한눈에 직관적으로 볼 수 있는 프로그램이 있으면 좋겠다고 생각했습니다.

여행 경로를 지도 애니메이션으로 만들어 SNS에 공유하는 ‘TravelBoast’라는 앱이 작년에 인스타에서 자주 보였습니다.

아이디어는 괜찮다고 생각했는데 실제 사용해 보니 애니메이션의 부드러움이나 디자인적인 완성도 면에서 아쉬움이 있었습니다.

이번 해커톤 주제를 고민하며 ThorVG의 벡터 렌더링을 활용하여 디자인과 퍼포먼스를 발전시킨 모션 그래픽 지도를 만들어보면 어떨까? 하는 구상에서 프로젝트를 기획하게 되었습니다.

핵심 기능 및 동작 흐름

나라 검색 ➔ 순서대로 추가 ➔ 재생(애니메이션) ➔ 테마 조정 및 저장

ThorVG 활용

지도 렌더링과 모션 그래픽을 WebCanvas 기반으로 구현하여 외부 지도 타일 API 없이 벡터 기반의 고품질 애니메이션을 제공합니다.

• 자체 지도 렌더링: SVG 기반 벡터 데이터를 ThorVG Path로 렌더링하여 확대·축소에도 품질 저하 없는 세계 지도 구현
• 경로 애니메이션: Stroke Dash 기반 경로 드로잉 애니메이션
• 감성 테마 시스템: Blur, Shadow 등의 장면 효과를 활용한 테마 연출
• 결과물 추출: 렌더링 결과물 파일화