그린 시티

2024.6 ~ 2024.7 (6주)

참여- 인원 : FE 3명, BE 3명, AI 2명 (총 8명)

Github : https://github.com/AIVLE-Big-Project-29/GreenCity-Frontend

프로젝트 개요

• 현대 도시에서 공원과 같은 녹지 공간을 늘리는 사업을 추진하고 있지만, 적합한 위치를 찾는 데 많은 시간과 자원이 소요
• 이 프로젝트의 목표는 AI 기반 데이터 분석을 통해 도시 내 최적의 녹지 조성 후보지를 신속하고 정확하게 선정하는 것
• 분석된 데이터는 다양한 환경적 요인과 사회적 요인를 반영하여, 종합적인 녹지 공간의 특성을 고려
• 예상 조감도를 시각적으로 제공하여 기획자가 쉽게 이해하고 참여할 수 있도록 하여, 효과적인 의사결정을 지원

활동 및 성과

1. 데이터 시각화

• 요구 사항
  • 지역의 환경, 날씨, 토지, 인구 등의 데이터를 입력받아 분석 결과를 사용자에게 출력
  • 데이터가 지역구 기준으로 나누어져 있어 갯수가 많아 사용자가 한눈에 쉽게 볼 수 있도록 설계
  • 각 데이터의 내용을 쉽게 확인할 수 있어야 하며, 사용자가 원하는 데이터를 비교할 수 있는 기능 제공
• 해결 과정
  • chart.js를 활용하여 각 카테고리의 데이터를 선택해 볼 수 있는 필터링 기능 구현
  • 그래프 이벤트 핸들링
    • 각 데이터 포인트에 마우스를 올렸을 때, 분석한 결과 수치를 확인할 수 있도록 이벤트를 활용해 툴팁구현
    • 데이터 포인트 클릭 이벤트와 바 그래프 클릭 이벤트를 활용하여 해당 포인트를 최대 3개까지 비교할 수 있고, 바 그래프를 클릭하면 사라지도록 구현하여 쉽게 비교할 수 있도록 만듬

2. 애니메이션 구현

• 요구사항
  • 사용자 경험을 향상시키고 페이지 이탈률을 감소시키기 위한 애니메이션 구현.
• 해결 과정
  • GSAP가 사용 성능이 우수해 부드럽고 다양한 애니메이션 효과를 제공하기 때문에 선택
  • LocomotiveScroll을 사용하여 부드러운 스크롤 효과 제공하고 ScrollTrigger와 통합하여 스크롤 이벤트에 따라 애니메이션을 업데이트
  • scrub 옵션을 사용해 스크롤 속도에 연동된 부드러운 애니메이션 효과 제공
• 결과
  • 애니메이션을 통해 해당 페이지의 이탈률을 30% 감소시킴으로써, 사용자 체류 시간을 증가시킴

3. JWT 인증 기능 구현

• 요구 사항
  • 여러 플랫폼에서 간편하게 인증할 수 있는 로그인 기능 구현
• 해결 과정
  • 사용자가 로그인 시 JWT 토큰을 쿠키에 저장하는 방법을 사용
  • API 요청 시 클라이언트에서 토큰을 헤더에 포함하여 인증을 통해 사용할 수 있도록 설정