1. 배경(Problem)
“장소 선택, 왜 이렇게 어려울까?”
한 번쯤 이런 경험이 있으셨을 거예요.
시험 공부를 하려고 카페에 갔는데, 너무 시끄러워서 집중이 안 됨 화상 회의를 하려고 조용한 카페를 찾아갔지만, 매장마다 분위기가 달라 곤란함 독서실이나 도서관에서 공부하려 했지만, 특정 시간대에는 사람이 많고 소음이 심함현재 음식점의 맛이나 카페의 분위기는 쉽게 검색할 수 있지만, 장소의 “조용함”을 알 수 있는 정보는 부족합니다.
소음 정보가 없기 때문에 사용자는 직접 가봐야만 알 수 있죠.
설문조사로 검증한 문제이러한 문제를 객관적으로 검증하기 위해, 24년 12월 12일부터 14일까지 3일간 설문조사를 진행했습니다.
총 44명의 20~50대 사용자가 참여했으며, 소음 관련 경험과 서비스 필요성에 대한 의견을 수집했습니다.
설문 결과 요약• 85%: 공공장소(카페, 음식점)에서 소음 문제로 불편함을 느낀 적 있음
• 70%: 장소 선택 시 소음 정보가 있다면 매우 유용할 것 같음
• 65%: 본인이 직접 소음을 측정해 공유하는 것에 긍정적 반응
사용자들은 소음 데이터의 부족으로 인해 불편을 겪고 있으며, 해결책이 필요하다고 응답했습니다.
소리담 서비스가 제공하는 해결책1. 실시간 소음 지도
• 특정 장소의 소음 수준을 미리 확인 가능
• 방문 전 소음 데이터를 비교하여 원하는 환경을 찾을 수 있음
2. 사용자 측정 및 공유
• 직접 측정한 소음 데이터를 지도에 업로드 가능
• 다른 사용자들이 정확한 데이터를 활용할 수 있도록 협력
3. 시간대별 소음 데이터
• 특정 장소의 혼잡한 시간대 피하기
• 특정 시간에 따라 소음 패턴을 파악할 수 있음
소리담은 단순한 리뷰가 아니라, 객관적인 데이터 기반으로 조용한 공간을 추천하는 서비스입니다.2. 서비스 소개(Solution)
우리 동네, 조용함을 찾는 가장 쉬운 방법.소리담은 사용자 참여형 소음 지도 모바일 웹 서비스입니다.
사용자가 직접 측정한 데이터를 기반으로 장소별 실시간 소음 정보를 제공합니다.
조용한 공간을 찾고 싶지만, 리뷰만으로는 부족한가요? 객관적인 소음 데이터를 바탕으로 최적의 장소를 선택하세요!
소리담의 3가지 핵심 기능① 소음 측정 – 실시간 소음 기록
현재 위치에서 실시간으로 소음을 측정 측정 후, 평균/최대 dB 값 + 그래프 분석 제공 장소 유형(카페, 도서관 등)과 시간대 입력 가능 결과는 “조용함 / 적절함 / 시끄러움”으로 표시② 소음 지도 – 소음 데이터 탐색
지도에서 장소별 소음 데이터 한눈에 확인 색상(파랑/초록/빨강)으로 소음 정도 직관적 표시 검색 및 필터 기능 제공• 예: “조용한 카페만 보기”, “저녁 시간에 조용한 곳 찾기”
③ 데이터 저장 – 즐겨찾기 및 내 기록 관리
자주 가는 장소를 즐겨찾기 등록 내가 측정한 데이터 개인 계정에 저장 측정 히스토리 확인 + 장소별 소음 변화 비교 가능 소리담의 핵심 가치는? 객관적인 데이터 기반 – 감성적인 리뷰 대신 실제 소음 수치 제공 실시간 정보 업데이트 – 사용자 참여로 최신 데이터 반영 맞춤 검색 가능 – “내게 꼭 맞는 조용한 장소 찾기” 이제, 소리담과 함께 조용한 공간을 쉽게 찾아보세요! 출시 후 빠르게 사용해보고 싶은 분들을 위해 출시 알림 신청을 받고 있어요! 아래 정보를 입력해주시면, 정식 출시 소식을 가장 먼저 받아보실 수 있습니다.
3. 아키텍처 및 핵심 기능
서비스 구조• 프론트엔드: ReactJS 기반의 모바일 웹
• 백엔드: Spring Boot 기반의 RESTful API 서버로, 다양한 데이터베이스 및 메시징 기술을 활용하여 확장성과 성능을 확보.
• 데이터 처리: 사용자가 측정한 소음 데이터를 실시간으로 지도에 반영
시스템 구조•
데이터 흐름: 사용자가 업로드한 데이터를 서버로 전송 → PostGIS에 저장(위치 기반 처리) → Kafka를 통해 검증된 데이터를 Elasticsearch에 동기화 → 빠른 검색 및 필터링 제공.
•
컴포넌트 연계:
◦
Spring Security를 통한 인증 및 권한 관리.
◦
Redis를 활용한 RefreshToken 저장 및 관리로 인증 성능 최적화.
◦
MongoDB를 사용하여 유저 및 리뷰 데이터를 유연하게 관리.
◦
PostGIS를 통해 GeoSpatial 연산 및 위치 기반 데이터 처리.
◦
Elasticsearch를 활용한 실시간 검색 및 데이터 분석.
핵심 기능1. 소음 데이터 수집
• 사용자 위치 기반 소음 측정
• 특정 장소의 소음 데이터 업로드
2. 데이터 시각화
• 지도에서 시간대별, 장소 유형별 소음 확인 가능
• 컬러 맵을 활용한 직관적인 UI 제공
3. 사용자 필터링 기능
• 카페, 도서관, 공원 등 장소 유형별 소음 검색
• 특정 지역/시간대 필터링
4. 활용 라이브러리 및 개발 환경
기술 스택• 프론트엔드: ReactJS, typescript, ReduxToolkit, react-router-dom, styled-component, Vite
• 백엔드: Spring boot, Spring Security, Spring Data Jpa, PostGIS,Redis, Elasticsearch, MongoDB, Kafka
• 지도 및 위치 서비스: KakaoMap API, Geolocation API, react-kakao-maps-sdk library
• 소음 측정: Web Audio API
• Bottom Sheet: Framer Motion library
• 알림창(Toast popup): Toastify library
선택 이유• Spring Boot: 경량화된 애플리케이션 개발을 위한 프레임워크로, 빠른 설정과 생산성 향상을 위해 사용.
• Spring Security: 인증 및 권한 관리를 간편하게 구현하기 위해 사용. OAuth2 및 JWT 기반 인증 지원.
• Spring Data JPA: 관계형 데이터베이스와의 상호작용을 간단하게 처리하기 위해 사용.
• PostGIS: 지리공간 데이터를 효율적으로 저장 및 처리하고, 위치 기반 검색을 위해 사용.
• Redis: RefreshToken을 저장하고 관리하기 위해 사용. 빠른 메모리 기반 데이터 저장소로, 짧은 만료 시간의 토큰을 효과적으로 처리하여 성능 최적화를 지원.
• MongoDB: 문서 기반 NoSQL로 유저 정보와 리뷰 같은 비정형 데이터를 유연하게 관리.
• Elasticsearch: 실시간 검색과 대규모 데이터 분석을 위해 사용. 빠른 검색 성능 제공.
• Kafka: 데이터 스트림을 비동기적으로 처리하여 메시지 큐 및 로그 기반 데이터 전송을 위해 사용.
• ReactJS: React 작동 원리에 따른 화면 변화 최소화 및 웹으로 발전 가능성
• Typescript: 입력되는 데이터의 타입을 설정하여 안정성을 높이고,
실행 중 발생되는 에러(Runtime error)를 줄임
• Vite: 빠른 개발 환경을 구축하여 생산성을 높임
• Kakao Map API, react-kakao-maps-sdk: 장소 검색 및 위치 기반 소음 데이터를 시각화하는 데 최적화
• Geolocation API: 현재 위치 기반 서비스를 위한 유저의 현재 위치 데이터 습득
• Framer Motion library: 자연스러운 animation 효과
• Web Audio API: 여러 브라우저에 호환되는 Audio API를 사용함으로써 decibel 측정
• ChartJS: 대중적으로 가장 많이 사용되는 Chart library
이러한 기술 선택을 통해 빠른 MVP 제작이 가능하며, 유지보수와 확장성도 고려하였습니다.5. 트러블 슈팅
소리담을 개발하면서 여러 기술적/기획적 문제들이 발생했어요.
하지만 팀원들과 협력하며 해결했고, 그 과정에서 많은 걸 배울 수 있었습니다.
여기, 우리가 맞닥뜨린 문제들과 해결 방법을 공유해 볼게요.
1) “소음 데이터, 어떻게 신뢰도를 높일까?” 문제:소음 데이터는 사용자가 직접 측정하는 방식이라 부정확한 데이터가 입력될 가능성이 높았어요.
예를 들어, 같은 장소에서도 측정 시간이나 환경에 따라 값이 다를 수 있고, 일부 사용자가 잘못된 데이터를 올릴 위험도 있었어요.
해결 방법: 데이터 태깅 시스템 도입 → 측정 시 장소 위치 + 시간대 자동 입력 평균/최대 dB 값 + 그래프 분석 제공 → 한 번의 측정값이 아니라 트렌드 기반으로 신뢰성 확보 2) “소음 지도에서 유의미한 패턴을 보여줄 수 있을까?” 문제:소음 데이터가 지도에 무작위로 표시되면, 사용자들이 유의미한 패턴을 파악하기 어려웠어요.
예를 들어, 특정 시간대에만 조용한 곳(예: 평일 오전 도서관)이나 특정 구역에서 지속적으로 소음이 높은 곳(예: 번화가 카페) 등의 정보가 한눈에 보이지 않았어요.
해결 방법: 색상 코딩 시스템 적용 → 소음 정도를 “조용함(파랑) / 적절함(초록) / 시끄러움(빨강)” 마커로 시각화 필터 기능 추가 → 사용자가 시간대/장소 유형별 소음 데이터 탐색 가능 히트맵 적용 검토 → 장기적으로, 특정 지역의 소음 변화 추이를 분석할 수 있도록 개선 예정 3) “사용자에게 친숙한 UX/UI를 제공하려면?” 문제:소음 측정 앱은 일반 사용자들에게 익숙한 서비스가 아니기 때문에, 사용자 경험이 직관적이지 않으면 사용성이 떨어질 위험이 있었어요.
해결 방법: 3가지 핵심 기능(측정 / 지도 / 저장)으로 단순화 → 복잡한 기능을 줄이고, 사용자가 쉽게 이해할 수 있도록 구성 온보딩 가이드 추가 예정 → 처음 앱을 실행하면 측정 방법 및 주요 기능을 안내하는 튜토리얼 제공 4) “데이터 저장 & 공유 방식 – 서버 부담을 줄이면서 빠르게 제공하려면?” 문제:사용자들이 업로드한 소음 데이터를 실시간으로 반영하려면, 서버 부하가 증가할 가능성이 컸어요.
또한, 검증 없이 모든 데이터를 지도에 즉시 반영하면 신뢰도가 떨어질 위험도 있었어요.
해결 방법: CQRS 패턴 적용 → 읽기 작업은 Elasticsearch, 쓰기 작업은 PostGIS로 분리하고, 비정형 데이터인 유저 및 리뷰는 MongoDB를 활용하여 각 작업에 최적화된 데이터베이스를 사용. 이상치 필터링 로직 적용 → 특정 값이 비정상적으로 높거나 낮으면 평균값 보정 후 반영 데이터 검증 없이 즉시 반영하되, 사용자의 신고 기능을 통해 부적절한 데이터 필터링 가능 트러블 슈팅을 통해 더 나아진 소리담 서비스!이런 문제들을 해결하면서, 소리담은 더 정확하고, 더 직관적인 소음 정보 제공 서비스가 될 수 있었습니다.
해커톤 이후 배포를 준비하고 있으며, 사용자들에게 가장 신뢰할 수 있는 소음 지도 플랫폼을 제공할 계획입니다.
6. 팀 소개
팀 소리숲은 더 조용한 공간을 원하는 사람들을 위해 모였습니다.
우리는 각자의 강점을 살려 기획, UX/UI 디자인, 프론트엔드, 백엔드 등 다양한 역할을 수행하며 프로젝트를 완성해 나갔습니다. 사용자의 불편함을 해결하기 위한 디자인 사고와 기술적 도전이 결합된 과정이었습니다.
솔 – 기획자
이메일: gwtqfhfj@gmail.com“사용자 중심의 서비스 기획을 통해 명확한 방향성을 제시하며, 효율적이고 차별화된 솔루션을 만드는 것을 목표로 합니다”
역할:• 프로젝트 초기 기획 단계에서 사용자 페르소나 설계 및 핵심 기능 정의
• 시장 조사 및 VOC 데이터 분석을 통해 문제 정의와 서비스 방향성 수립.
배운 점:•
다양한 VOC 분석과 페르소나 설계를 통해 서비스의 가치를 사용자의 관점에서 정의하고, 이를 기반으로 우선순위를 조정하는 경험을 했습니다.
•
기술적 이해가 필요한 부분을 팀원들과 협의하여 명확한 목표를 수립하고, 이를 통해 효율적이고 원활한 커뮤니케이션의 중요성을 배웠습니다.
•
프로젝트 기획 과정에서 데이터를 분석하고 이를 기반으로 사용자 중심의 솔루션을 설계하는 방법을 배웠습니다.
성현 – 팀리더, 프로덕트 디자이너
이메일: seonghyeon.kr@gmail.com“사용자 경험을 고민하며 문제를 해결하는 과정을 즐깁니다.”
역할:• 사용자 리서치 및 문제 정의
• UX 설계 및 IA(정보구조) 정의
• UI 디자인 및 프로토타입 제작
• 사용자 테스트 및 피드백 반영
배운 점:이번 프로젝트에서 단순한 UI 디자인이 아닌, 데이터 기반 UX 설계의 중요성을 깊이 이해할 수 있었습니다.
특히, 사용자의 문제를 근거 기반으로 정의하고, 이를 논리적으로 풀어나가는 과정이 필수적이라는 점을 배웠어요.
• “이런 기능이 있으면 좋겠다”에서 끝나는 것이 아니라, 실제 데이터와 사용자 니즈를 근거로 기능을 설계하는 과정이 필요하다는 것을 깨달았습니다.
• 소음 데이터의 시각적 표현 방식(컬러 코딩, 필터링 UX 등)을 최적화하는 과정에서 사용자 경험을 향상시키는 방법을 고민하는 법을 배웠습니다.
• 또한, 개발팀과의 협업을 통해 디자인 시스템을 정리하고, UX와 기술을 연결하는 커뮤니케이션 방식을 익힌 것도 큰 성과였습니다.
영섭 – 프론트엔드 개발자
이메일: herjun802@naver.com“사용자의 편의성을 고려하며, 입력값의 안정성 및 코드의 가독성을 높일 수 있도록 노력합니다”
역할:• ReactJS 기반 프론트엔드 아키텍처 설계 및 개발
• ReduxToolkit을 활용한 전역 상태 관리
• Geolocation API, KakaoMap library, Web Audio API 등 API 및 library를 활용한 서비스 구현
• 성능 최적화 및 코드 가독성을 위한 컴포넌트 분리, 모듈화
배운 점:이번 프로젝트에서 사용자의 편의성과 안정성 있는 서비스 제공을 위해 여러 기술 스택을 사용하고,
유지 보수성 있는 코드를 구현하는 경험을 얻었습니다.
• 성능 최적화 : 컴포넌트 분리를 통한 랜더링 최소화, side effect 제거를 위한 훅 함수 사용
• 입력값의 안전성 강화
1. Typescript를 활용한 type 설정으로 Runtime error ↓
2. 시간당 측정되는 데시벨 수치 갯수를 조절함으로써 보다 정확한
데이터가 입력되도록 함
• 유지 보수성 향상
1. 자주 사용하는 함수에 대해 custom Hook 함수 생성
2. 컴포넌트 분리를 통한 코드의 가독성 향상
• API 의존적 설계: 다양한 API(Geolocation API, Audio API, Kakao map API 등)에 변주를 주어
서비스에 적합한 코드 구현
요한 – 백엔드 개발자
이메일: rmvmf123@naver.com“성능과 선택의 근거를 판단하며 시스템을 구축하고, 효율성과 안정성을 향상시키는 것을 목표로 합니다 ”
역할:• Spring Boot 기반 백엔드 아키텍처 설계 및 개발
• PostGIS, Elasticsearch, Kafka 등 기술 통합 및 데이터 관리
• 실시간 데이터 처리 및 성능 최적화를 위한 시스템 구현
배운 점:•
지리 정보 활용: PostGIS를 통해 지리 데이터를 효과적으로 저장 및 처리하여, 사용자 위치 기반의 실시간 소음 데이터를 관리
•
ReactJS 의 비동기 처리 운영
각 포지션에 따른 팀원들과의 협업을 통해 어떤 부분을 작업을 하고 프로젝트 완성에 어떻게 기여를 하는지 전체적으로 파악할수 있는 좋은 경험이였습니다.
민준 – 백엔드 개발자
이메일: alswns11346@kgu.ac.kr"효율적이고 확장 가능한 시스템을 설계하며, 안정성을 기반으로 사용자 경험을 향상시키는 것을 목표로 합니다.”
역할:• Spring Boot 기반 백엔드 아키텍처 설계 및 개발
• PostGIS, Elasticsearch, Kafka 등 기술 통합 및 데이터 관리
• 실시간 데이터 처리 및 성능 최적화를 위한 시스템 구현
배운 점:이번 프로젝트에서는 데이터 중심의 설계와 안정적인 서비스 제공을 위해 여러 기술 스택을 통합하고, 확장 가능한 구조를 설계하는 경험을 얻었습니다.
•
분산 시스템 설계: Kafka를 활용한 실시간 데이터 스트림 처리 및 시스템 간 메시지 브로커 구축
•
지리 정보 활용: PostGIS를 통해 지리 데이터를 효과적으로 저장 및 처리하여, 사용자 위치 기반의 실시간 소음 데이터를 관리
•
검색 최적화: Elasticsearch를 활용하여 대용량 데이터를 빠르게 검색하고 필터링하는 방식을 구현
특히, 데이터의 신뢰성과 효율성을 동시에 보장하는 시스템을 설계하며, 팀원들과의 협업을 통해 기술적 문제를 해결하고 효과적으로 커뮤니케이션하는 방법을 배웠습니다.
팀 프로젝트를 통해 배운 점소리담 프로젝트를 진행하며 우리는 실제 사용자들의 니즈를 반영한 제품이 얼마나 중요한지를 깨달았습니다.
단순히 기능을 구현하는 것을 넘어, 사용자 경험을 중심으로 한 디자인과 개발이 결합될 때 비로소 완성도 높은 서비스가 탄생한다는 점을 경험했습니다. 또한, 팀원 간의 원활한 소통과 역할 분담이 프로젝트의 성공을 좌우한다는 것도 배웠습니다.
앞으로도 사용자 중심의 문제 해결을 고민하며, 더 나은 제품을 만들어 나가겠습니다!