NOW DO BOSS

프로젝트 배경

NOW DO BOSS는 서울시에서 창업을 준비하고 있으며 자기 지역 상권을 분석하고 싶은 예비 창업자들을 위해 방대한 공공데이터를 엑셀이나 표로만 보는 대신, 지도로 직관적으로 확인하고, 지표별 비교까지 가능하게 만드는 것이 목표였습니다.

✔︎ 개발 과정

프론트엔드 담당으로 다음과 같은 역할을 수행했습니다.

1. 서울시 구별 현황 데이터 제공
   • 서울시 행정구 JSON 데이터를 활용한 D3.js 기반 지도 구현
   • 유동인구, 매출, 개·폐업률 등 상권 지표를 Chart.js로 시각화
   • 지표별 비교가 가능하도록 시각적 위계 및 인터랙션 설계
2. 창업 비용 계산 및 시뮬레이션
   • 지역·업종·상가규모 등 입력값을 바탕으로 사용자 맞춤 창업 비용 계산
   • 카테고리별 비용 구성 데이터 구조 설계 및 컴포넌트 분리
   • 결과 페이지에서 카카오톡 공유 및 북마크 기능을 통한 사용자 경험 향상
3. UI·UX 및 페이지 구조 설계
   • 반응형 레이아웃 구성으로 PC·모바일 환경에 모두 최적화
   • 사이드바 스크롤 연동 탭 활성화 기능 구현

✔︎ 주요 도전 과제

• 서울시 행정구별 지도 컬러차트로 구별하여 시각화하는 것
• 다양한 행정구 통계 데이터를 그래프를 가독성있게 표현하는 것
• 사이드바 스크롤 시 네비게이션바 변환
• 초기 로딩 시 대량 데이터를 불러올 때 발생하는 성능 저하 문제
• 카카오톡 공유하기 및 비교하기 기능 추가

✔︎ 해결책

• D3.js를 사용해 서울시 행정구 폴리곤 구현
• Chart.js로 지표별 그래프를 구성하고, 데이터에 맞는 최적 그래프 표현
• IntersectionObserver와 커스텀 훅을 적용해 탭 활성화와 섹션 스크롤 상태를 동기화
• 하나의 API를 7개의 엔드포인트로 분리해, 응답이 빠른 데이터부터 순차 렌더링
• 카카오 SDK를 사용하여 매개변수를 전달하여 결과페이지 공유

✔︎ 결과 및 성과

• 초기 화면 로딩 시간 약 40% 단축
• 복잡한 상권 데이터를 직관적으로 탐색할 수 있는 사용자 흐름 설계 경험
• 구현하고싶은 기술을 끝까지 파고들어 구현한 경험

✔︎ 배운 점

• 데이터 시각화에서 UX와 성능을 함께 고려한 설계의 중요성
• 스크롤·탭·레이아웃이 결합된 인터랙션 구성 시 상태 동기화의 난이도와 해결 방법
• 사용자가 “어떻게 볼지”를 먼저 고민하는 것이 프론트엔드의 출발점이라는 점