최근 한 달간 사람들은 어디를 많이 갔을까, 발자국 연구소

Sun Aug 01 2021•loplat

200여개 국내 상권과 500여개 소비재 브랜드 매장의 방문자 수의 한달간 추이를 볼 수 있는 서비스입니다. loplat과 loplat i 홍보를 위한 작은 프로젝트로 시작됐으며 SSR과 D3.js를 학습한 뒤 기한 내에 릴리즈까지 마친 프로젝트입니다.

매달 평균 1천명이 방문하고 있으며, 언론사에서 주로 활용하고 있습니다.

기간

2021년 7월, 2주간

'프로토타입으로 시작한 프로젝트였는데, 생각보다 큰 프로젝트가 되었다. 기획이 늦어졌음에도 불구하고 일정에 맞추어 릴리즈까지 완벽하게 해주었다'는 평가를 받았습니다.
배포 직전에는 짝코딩을 도입하게 되었습니다. '짧은 시간내에 서로 아는 것들을 빠르게 교환해가며 안정적으로 배포했다'는 평가를 받았습니다.

NextJS, D3.js, Recoil, Typescript, ESLint, Prettier, Tailwind, styled-components, Firestore, Google Analytics, storybook, Vercel

SEO 대응과 빠른 렌더링을 위해 NextJS + SSG를 사용했습니다.
- build 시 600 여개의 브랜드 및 상권 페이지를 static generate하고, 차트에 필요한 데이터는 Client 단에서 호출하는 방식으로 개발하였습니다.
Atomic Design 을 사용하지 않고 Presentational and Container Component Pattern을 사용했습니다.
- 구체적으로는 비즈니스 로직을 담당하는 contaner와 prop에 따라 UI 구현을 담당하는 foundation로 구조화하였습니다.
- Atomic Design은 atom과 molecule의 구분이 명확하지 않아 혼란을 야기할 수 있다고 판단했습니다. 구분 기준을 합의하는 과정 또한 비용이며 합의를 한다 하더라도 유의미하지 않습니다. 참고자료 (opens in a new tab)
사용자가 이전에 선택했던 브랜드/상권 탭을 유지하기 위해 Recoil을 도입하였습니다.
- SSR 환경에서 Recoil이 작동여부와 상관없이 console warning을 발생했던 점은 앞으로 리팩토링해야할 점입니다.

SSR의 특성을 고려하여 클라이언트 단에서 js를 통해 판단해야하는 window width가 아닌, css media query 를 이용하여 UI를 분기하였습니다.
tailwind를 이용하여 css와 미디어 쿼리의 가독성을 높였습니다.

브랜드/상권의 공식 이름, 한글 이름, 영문 이름의 유사도를 각각 구하여 가장 높은 유사도 값을 가진 항목을 자동완성 리스트에 넣는 방식으로 구현했습니다.

입력값에 따른 검색결과 배열을 반환하는 로직을 useList로 분리하여 코드의 중복을 방지하였습니다.
브랜드/상권 각각 한 곳에 대한 방문자 변화량에 따른 문자 알림을 받을 수 있습니다. 브랜드/상권 명과 핸드폰 번호를 입력받으면, 중복되지 않도록 알림을 업데이트하거나 추가할 수 있는 로직을 useAlarm으로 분리하였습니다.