Carbon Break(탄소 브레이크)

🌍 Carbon Break (탄소 브레이크)

대전 시민의 친환경 실천을 유도하는 참여형 웹 시각화 도구

---

🗓️ 프로젝트 개요

기간: 2025.05.12 ~ 2025.05.23 (2주)
구성원: 6명 (팀 프로젝트)

🎯 프로젝트 목표 & 목적

목표: 대전 시민이 일상 속에서 환경문제를 명확히 인식하고, 전기차와 자전거 등 친환경 교통수단을 적극적으로 실천할 수 있도록 유도하는 참여형 웹 기반 시각화 도구를 개발했습니다.
목적: 공공데이터를 활용하여 탄소 배출량, 전기차 보급률, 자전거 이용 이력 등을 시각적으로 제공함으로써, 시민의 자발적인 행동 변화를 유도하는 데 집중했습니다.

🔧 저의 주요 기여 (담당 업무)

역할 분류	상세 내용
데이터 엔지니어링	⚡ 전기차 관련 데이터 수집부터 DB 설계, 그리고 에너지 사용량 분석을 위한 복합 쿼리문 작성까지 전 과정을 담당했습니다.
백엔드 개발	⚙️ Spring Boot 기반 백엔드 서버를 구축하여, 프론트엔드와 데이터베이스 간의 원활한 통신을 위한 API를 구현했습니다.
프론트엔드 & 시각화	🗺️ CSV 데이터를 활용한 대전시 지역별 전기차 현황 지도 시각화 기능을 구현했으며, 프로젝트 홈페이지의 공통 템플릿 CSS를 정리하고 구조를 개선하여 사용자에게 일관되고 깔끔한 UI를 제공하는 데 기여했습니다.

📌 핵심 기능

• 1. ⚡ 전기차 통계 대시보드: 대전시 구별 전기차 등록 수, 충전소 수, CO₂ 배출량, 그린 점수를 시각적으로 대시보드 형태로 제공합니다.
• 2. 🗺️ SVG 기반 지역 지도: 사용자가 대전시 지도를 클릭하면, 해당 지역의 전기차 관련 데이터를 즉시 확인할 수 있도록 SVG 기반의 상호작용 지도를 구현했습니다.
• 3. 🚗➡️🔋 전기차 전환 시뮬레이터: 사용자가 기존 차량 정보를 입력하면, 전기차로 전환했을 때 예상되는 탄소 절감량, 나무 식재 효과, 연료비 절감액을 계산하여 시각적으로 제시합니다.
• 4. 📊 차트 시각화: 연도별 온실가스 배출량 추이 및 다양한 차량 유형별 오염도를 차트로 시각화하여 환경 문제의 심각성을 강조합니다.
• 5. 👣 탄소 발자국 측정: 자전거 사용 또는 차량 선택에 따라 개인이 얼마나 탄소를 감축할 수 있는지 직접 계산하고 확인할 수 있는 기능을 제공합니다.

🚀 프로젝트 진행 과정

• 데이터 수집: 🔍 공공데이터포털 및 대전시 행정데이터를 통해 필요한 정보를 수집했습니다.
• DB 설계: 💾 Oracle DB를 기반으로 전기차 등록 수, 충전소 위치, CO₂ 배출량 등 핵심 데이터를 위한 테이블을 설계했습니다.
• 백엔드 구축: 🏗️ Spring Boot 기반의 백엔드 서버를 구축하고, 필요한 API를 효율적으로 연동했습니다.
• 지도 시각화: 📍 CSV 데이터와 SVG, JavaScript를 활용하여 대전 지역의 지도 기반 시각화 기능을 구현했습니다.
• 쿼리 & 차트 구현: 📈 에너지 사용량 기반의 복잡한 쿼리를 작성하고, Chart.js를 활용해 다양한 데이터를 차트로 시각화했습니다.
• 프론트엔드 개선: 💅 홈페이지 템플릿을 정리하고 CSS 구조를 개선하여 사용자 경험을 최적화했습니다.
• 최종 통합: ✅ 시각화 화면, 시뮬레이터, 대시보드 등 모든 기능을 통합하여 완성된 서비스를 선보였습니다.

💡 활용 기술 및 도구

구분	기술 스택
프론트엔드	HTML5, CSS3, JavaScript, Bootstrap 5 (반응형 웹 디자인)
백엔드	Spring Boot, Apache Tomcat 9
데이터베이스	Oracle DB
데이터 처리	Python, CSV, Flask
기타 도구	Chart.js (차트 시각화), SVG, GeoMap (지도 데이터), jQuery

🏆 주요 성과

✅ 대전시 환경 데이터 시각화 웹 서비스 구축: 대전시 구별 환경 데이터를 직관적으로 시각화하여 시민들이 환경 문제 인식 및 친환경 실천에 동참하도록 유도하는 데이터 기반 웹 서비스를 성공적으로 구축했습니다.

✅ CSV 기반 전기차 지도 시각화 및 실시간 통계: 대량의 CSV 데이터를 활용하여 대전시 지도를 기반으로 전기차 관련 데이터를 효과적으로 시각화하고, 실시간 통계를 표시하는 기능을 구현했습니다. 이는 사용자에게 지역별 현황을 즉각적으로 파악할 수 있게 했습니다.

✅ 전기차 전환 효과 직관적 제시: 전기차 전환에 따른 탄소 절감량, 나무 식재 효과, 연료비 절감액 등을 수치와 함께 그래픽으로 제공하여, 사용자가 친환경 선택의 긍정적인 효과를 직접적으로 체감할 수 있도록 유도했습니다.

✅ 정책 활용 가능 데이터 확보: 전기차 보급 현황 및 충전소 밀도와 같은 시각화된 데이터를 통해, 향후 대전시의 친환경 정책 수립에 기여할 수 있는 유의미한 정보를 구축했습니다.

🤔 겪었던 어려움 & 해결 방안

1. 🗄️ DB 설계 및 쿼리 최적화의 난관

문제점: Oracle DB 기반으로 여러 테이블을 설계하고 CO₂ 배출량이나 연료비 절감액 같은 복잡한 계산식이 포함된 쿼리를 작성하는 과정에서, 초기에는 성능 저하나 부정확한 결과값이 나오는 문제가 발생했습니다. 정확한 로직 설계가 무엇보다 중요했습니다.

해결: 문제 발생 시마다 데이터 구조와 쿼리 로직을 여러 번 재검토하고, 다양한 테스트 케이스를 적용하며 지속적으로 수정 작업을 거쳤습니다. 특히 DB 인덱싱 최적화와 서브쿼리 활용을 통해 쿼리 성능을 향상시키고 정확도를 높였습니다.

2. 🤝 팀 내 역할 분담과 일정 조율

문제점: 2주라는 짧은 프로젝트 기간 동안 6명의 팀원이 각기 다른 파트를 담당하다 보니, 작업 간의 연계성이 부족하여 통합 단계에서 많은 조율이 필요했습니다. 특히 CSS 정리나 템플릿 통합 과정에서 코드 중복과 스타일 충돌이 잦아 어려움을 겪었습니다.

해결: 팀원들과의 정기적인 스크럼과 긴밀한 소통을 통해 진행 상황을 공유하고, 각자의 작업 영역에 대한 이해도를 높였습니다. 특히 프론트엔드 관련해서는 공통 스타일 가이드를 확립하고, 컴포넌트별 CSS 모듈화를 적용하여 코드 중복을 최소화하고 스타일 충돌 문제를 효과적으로 해결했습니다. 협업 도구를 적극 활용하여 효율적인 일정 관리를 할 수 있었습니다.

 

🎥 프로젝트 시연 영상 보러가기

---