CMU02
프로젝트 목록

CleanBreath

팀 프로젝트

안양시 금연·흡연구역 시각화 서비스

Full Stack Developer
GitHub서비스 바로가기
TypeScriptReactJavaSpring BootMySQLKakao Map API

안양시 내의 명확하게 구분되어 있지 않은 금연구역 및 흡연구역을 시각화하여, 흡연자와 비흡연자 간의 갈등을 해결하는 웹 애플리케이션입니다. 복잡한 법령과 조례를 직관적인 지도 기반 UI로 제공합니다.

해결한 문제

흡연구역 인식 부족

많은 사람들이 흡연구역과 금연구역 경계에 대해 혼동이 오고 있습니다.

공공장소의 갈등

이러한 문제들로 인해 공공장소에서 비흡연자와 흡연자 간의 갈등이 발생하고 있습니다.

문제점의 사례

법령과 조례는 금연구역을 복잡하고 이해하기 어려운 형태로 정의가 되어있습니다. 이러한 규정은 자주 변경될 뿐만 아니라, 지자체마다 조례를 통해 세부 사항을 다르게 조정할 수 있어 지역별로 혼란이 발생하기도 합니다. 지자체가 변경된 사항을 지속적으로 홍보하려 하지만, 시민들에게 제대로 전달되지 않는 것이 현실입니다.

문제점의 사례 사례
문제점의 사례 사례
문제점의 사례 사례
문제점의 사례 추가 사례
동기 및 문제정의

법령과 조례는 시민들이 이해하기 어렵지만, 이를 직관적인 시각화로 쉽게 전달하는 서비스를 제공하고자 했습니다. 특히 안양시에 한정된 금연·흡연구역 정보를 지속적으로 업데이트하며, 시민들이 이해하기 쉽게 정보를 제공하는 것이 핵심입니다.

기술 선택 이유

React

선택 이유: Kakao Map API와의 원활한 연동과 실시간 인터랙티브 UI 구현을 위해 선택했습니다.

해결한 것: 컴포넌트 기반 아키텍처로 지도 UI, 검색 기능, 필터링 등을 모듈화하여 유지보수성을 높였습니다.

Kakao Map API

선택 이유: 한국 지역에 최적화된 지도 서비스와 정확한 위치 정보를 제공하기 위해 선택했습니다.

해결한 것: 안양시 금연·흡연구역을 폴리곤과 마커로 시각화하여 사용자가 직관적으로 이해할 수 있게 했습니다.

Spring Boot

선택 이유: 안정적인 REST API 서버와 관리자 기능, 데이터 관리 시스템 구현을 위해 도입했습니다.

해결한 것: 금연·흡연구역 CRUD API, 관리자 인증 시스템, 실시간 데이터 업데이트 기능을 안정적으로 구축했습니다.

MySQL

선택 이유: 위치 기반 데이터 저장과 공간 인덱스를 활용한 효율적인 검색을 위해 선택했습니다.

해결한 것: Spatial Index를 활용하여 금연·흡연구역 검색을 빠르게 처리했습니다.

TypeScript

선택 이유: 타입 안정성을 확보하고 대규모 프로젝트의 유지보수성을 높이기 위해 도입했습니다.

해결한 것: 컴파일 타임에 타입 오류를 잡아내어 런타임 에러를 줄이고, 코드 품질을 향상시켰습니다.

주요 기능
  • •Kakao Map API 기반 금연·흡연구역 실시간 시각화
  • •모바일 친화적 반응형 웹 디자인
  • •금연구역 검증 및 피드백 시스템
내가 기여한 부분
  • ✓React + TypeScript 기반 프론트엔드 전체 아키텍처 설계 및 구현
  • ✓Kakao Map API 연동 및 금연·흡연구역 폴리곤 시각화 구현
  • ✓Spring Boot REST API 설계 및 구현
  • ✓모바일 반응형 UI/UX 설계 및 구현
기대 효과
  • ▸흡연자 편의 제공: 복잡한 법령 및 조례에 의한 혼란을 줄이고, 명확한 정보를 기반으로 행동할 수 있도록 지원
  • ▸간접흡연 피해 감소: 흡연구역 정보를 명확하게 제공하여 지정된 구역에서만 흡연하도록 유도
  • ▸공공장소 갈등 해소: 흡연자와 비흡연자 간의 갈등을 줄이고 쾌적한 환경 조성
  • ▸서울 서초구 사례 참고: QR 안내판 사업에서 금연구역 내 흡연이 약 25% 감소한 성과를 목표로 함
ERD 다이어그램
ERD 다이어그램
스크린샷
스크린샷
스크린샷
스크린샷
현장 조사
현장 조사
UI 디자인 개선

개선 전

UI 디자인 개선 전

개선 후

UI 디자인 개선 후
문제 해결 사례

SSL 인증서 만료로 인한 서버 장애

문제 상황

10월 30일 강의 중 서버 장애가 발생하여 프론트엔드에서 API를 제대로 가져오지 못하는 상황이 발생했습니다.

원인 분석

서버의 SSL 인증서가 만료되어 HTTPS 연결이 실패하고 있었습니다.

해결 방법

즉시 수동으로 SSL 인증서를 갱신하여 문제를 해결했습니다. 이후 매번 수동 갱신의 번거로움을 해결하기 위해 자동 갱신 스크립트를 작성하고, 크론탭에 매월 1일 새벽 3시에 자동 실행되도록 설정했습니다.

결과

테스트 결과 스크립트가 성공적으로 실행되는 것을 확인했으며, 이후 SSL 인증서 만료로 인한 장애가 재발하지 않았습니다.

SEO 성과

구글 검색에서 랜딩 페이지와 메인 페이지가 대부분 상위권에 노출되어 1페이지에 위치하게 되었습니다.

구글 검색어 순위

2024년 10월 31일

검색 순위 2024-10-31

2024년 11월 11일

검색 순위 2024-11-11

2024년 11월 11일

검색 순위 2024-11-11

2024년 11월 18일

검색 순위 2024-11-18

지표 변화

총 클릭 수적용 전: 59적용 후: 84+42.4%
총 노출 수적용 전: 111적용 후: 250+125.2%
평균 CTR적용 전: 53.2%적용 후: 33.6%-19.6%p (새 키워드 추가로 인한 자연스러운 하락)
평균 게재 순위적용 전: 1.0적용 후: 2.8다양한 키워드 노출로 인한 변동

키워드 변화

적용 전

cleanbreath

적용 후

안양시 흡연구역안양시 금연구역흡연구역 찾기금연 팁cleanbreath

Google Search Console

적용 전

SEO 적용 전
SEO 적용 전

적용 후

SEO 적용 후
SEO 적용 후