전국 축제 정보 웹서비스 제작기 🎉
프로젝트 소개
최근 Cursor를 활용한 바이브코딩으로 전국 축제 정보 웹서비스를 만들어봤습니다.
전국 각지에서 다양한 축제가 열리지만, 축제 일정이나 장소를 하나씩 찾아보는 과정은 생각보다 번거롭습니다. 그래서 전국에서 개최되는 축제 정보를 한곳에서 검색하고, 필요한 상세 정보까지 확인할 수 있는 서비스를 만들어보고 싶었습니다.
특히 이번에는 공공데이터를 활용해 실제로 도움이 되는 앱을 만들어보자는 목표로 시작했습니다.
전국 축제 정보에서는 다음과 같은 정보를 확인할 수 있습니다.
축제 일정
개최 장소
주소
연락처
공식 홈페이지
지도상 축제 위치
개발 과정
Cursor로 시작한 바이브코딩
이번 앱은 바이브코딩 도구인 Cursor를 활용해 제작했습니다.
구현하고 싶은 기능과 화면 구성을 자연어로 설명하고, Cursor가 작성한 코드를 확인하면서 기능을 하나씩 추가했습니다.
주요 기능 구현
1. 축제 진행 상태별 검색
축제를 현재 진행 상태에 따라 구분해서 볼 수 있도록 만들었습니다.
전체
진행 중
예정
완료
현재 참여할 수 있는 축제와 앞으로 열릴 축제를 빠르게 구분할 수 있습니다.
2. 지역별 필터링
원하는 지역의 축제만 확인할 수 있도록 지역별 필터 기능을 추가했습니다.
전국의 축제를 한꺼번에 보는 것뿐만 아니라, 관심 있는 지역을 중심으로 축제를 찾아볼 수 있습니다.
3. 지도에서 축제 위치 확인
축제 장소를 글로만 보여주는 대신, 지도에 축제 위치가 표시되도록 구현했습니다.
주소만 확인하는 것보다 축제가 열리는 위치를 직관적으로 파악할 수 있어 편리합니다.
4. 링크 공유와 즐겨찾기
관심 있는 축제 정보를 다시 확인하거나 다른 사람에게 전달할 수 있도록 다음 기능도 추가했습니다.
축제 링크 공유
관심 축제 즐겨찾기
화면 구성
📱 스크린샷 추가 위치
축제 목록 화면
한국어 웹사이트의 스크린샷
축제 상세 정보 화면
한국의 한 장소의 위치를 보여주는 지도
즐겨찾기 화면
한국어 앱 스크린샷
성과와 배운 점
전국 축제 정보를 한눈에 확인
가장 만족스러운 부분은 여러 지역의 축제 정보를 한 화면에서 확인할 수 있게 되었다는 점입니다.
축제의 진행 상태와 지역을 기준으로 원하는 정보를 찾을 수 있고, 상세 페이지에서는 일정과 장소, 연락처, 홈페이지 등의 정보도 확인할 수 있습니다.
공공데이터가 실제로 사용할 수 있는 서비스의 형태로 완성되는 과정을 경험한 것도 의미 있었습니다.
디자인의 어려움
기능 구현보다 어려웠던 것은 디자인이었습니다.
처음 만들어진 화면은 정보가 잘 보이지 않아 가독성이 많이 떨어졌습니다. 이후 디자인을 여러 번 수정해봤지만, 디자인 경험과 감각이 부족하다 보니 원하는 만큼 깔끔한 결과를 만드는 것이 쉽지 않았습니다.
이번 경험을 통해 단순히 기능이 작동하는 것뿐만 아니라 다음 요소도 중요하다는 것을 배웠습니다.
글자 크기와 색상 대비
정보 사이의 여백
기능별 우선순위
모바일 화면에서의 가독성
버튼과 필터의 위치
사용자가 정보를 찾는 흐름
다음에는 기능 개발을 시작하기 전에 참고할 만한 서비스의 화면을 먼저 조사하고, 기본적인 디자인 시스템을 정한 뒤 개발을 진행해보려고 합니다.
바이브코딩을 하며 느낀 점
바이브코딩을 활용하면 아이디어를 실제 서비스로 만드는 과정이 훨씬 빠르게 느껴집니다.
물론 AI가 만들어준 결과가 항상 완벽한 것은 아니었습니다. 원하는 결과를 얻기 위해서는 요구사항을 구체적으로 설명하고, 생성된 결과를 직접 확인하며 계속 수정해야 했습니다.
그래도 아이디어가 실제로 작동하는 앱으로 완성되는 과정은 정말 재미있었습니다.
앱 만들기, 너무 재밌네요! 😄
이번 경험을 바탕으로 앞으로도 공공데이터와 AI 도구를 활용한 유용한 서비스를 계속 만들어보고 싶습니다.
참고 자료
Cursor
공공데이터
