← Projects로 돌아가기
카카오맵 기반으로 추천 상권과 주요 정보를 탐색하는 화면 
창업 비용과 상권 데이터를 함께 비교할 수 있는 시뮬레이션 화면 
커뮤니티, 채팅, 알림 흐름을 연결한 실시간 사용자 경험 화면
NowDoBoss
NowDoBoss
2024.04 - 2024.05Completed#map#startup#realtime
NowDoBoss는 예비 창업자가 상권을 분석하고 비용을 계산하며, 다른 사용자와 실시간으로 소통할 수 있도록 만든 창업 지원 플랫폼입니다. 저는 지도 기반 추천 경험과 커뮤니티, 채팅, 알림 흐름을 프론트엔드에서 연결했습니다.
카카오맵 위에서 사용자가 지역을 고르고 추천 상권을 확인하는 과정이 끊기지 않도록 위치 선택, 드롭다운, 실시간 검색을 하나의 UX로 정리했습니다. 화면 좌표를 서버에 넘겨 폴리곤을 그리는 방식으로 추천 영역도 시각화했습니다.
동시에 커뮤니티 CRUD, WebSocket 채팅, FCM 푸시 알림까지 연결하면서 서로 다른 기능을 하나의 제품 경험처럼 보이게 만드는 데 집중했습니다. 이 프로젝트는 SSAFY 자율 프로젝트 경진대회 우수상으로 이어졌습니다.
What I worked on
- 카카오맵 기반 상권 추천 서비스와 지역 선택 로직을 개발하고, 화면 좌표를 서버로 전달해 추천 구역을 폴리곤으로 시각화했습니다.
- 위치 선택, 드롭다운, 실시간 키워드 검색을 함께 사용해 추천받을 상권을 더 쉽게 고를 수 있도록 UX를 개선했습니다.
- 커뮤니티 목록·상세·댓글 CRUD와 REST API 연결을 구현하고, Sock.js와 Stomp.js를 활용해 WebSocket 기반 채팅 기능을 개발했습니다.
- 입장한 채팅방에 새 글이 등록되면 알림을 받을 수 있도록 FCM 푸시 알림 흐름을 연결했습니다.
Technical highlights
- Intersection Observer를 사용해 인터랙티브한 메인 페이지를 구현했습니다.
- Styled Components 기반 컴포넌트 구조로 반응형 UI를 정리하고, 모든 화면 크기에서 사용할 수 있는 웹 경험을 구축했습니다.
- 지도 선택, 커뮤니티, 채팅, 알림까지 서로 다른 흐름을 하나의 제품 경험으로 연결하는 데 집중했습니다.
Screens
« Newer
MathCanvas
SVG와 Three.js로 수학교구를 디지털화한 인터랙션 캔버스
Older »
Mancity
드론 경기 영상을 분석해 기록과 하이라이트를 제공한 풋살 서비스