vroomfan

오프라인 foot traffic을 기반으로 최근 한 달간 브랜드/상권별 방문자 추이를 확인할 수 있습니다. loplat과 loplat i 홍보를 위한 작은 프로젝트로 시작됐으며 SSR과 d3.js를 학습한 뒤 마감 기한 내에 배포에 성공했습니다.

URL: https://footlab.loplat.com

개발 기간: 2주

개발 기여도: 50% (d3 chart UI와 header UI에 주력)

기술 스택

Next.js, d3.js, Typescript, ESLint, Prettier, styled-components, Firestore, Google Analytics, storybook, Vercel

사내 평가

• loplat i보다 훨씬 발전된 설계로 가독성이 좋고 유지보수가 쉬운 d3 chart component를 개발했습니다.
• 프론트팀 내부적으로 짝코딩을 도입하게 되었습니다. 짧은 시간내에 서로 아는 것들을 빠르게 교환해가며 최상의 코드를 만드는 경험을 할 수 있었습니다.
• 도전적인 프로젝트를 성공시킨 부분에 대해 '빡빡한 일정에도 본인이 판단한 기술 스택을 도입하여 잘 구현해냈다'는 평가를 받았습니다.

작업 내용

• PC/모바일 반응형 header UI 구현

  • SSR의 특성을 고려하여 클라이언트단에서 js를 통해 판단해야하는 window width가 아닌, css media query 를 이용하여 UI를 분기하였습니다.
  • 모바일 화면에서 Hamburger 버튼의 애니메이션을 구현했습니다.

• PC/모바일 반응형 d3.js chart UI 구현

  • d3.js는 js를 이용하여 DOM을 직접 조작하는 방식이므로 d3를 그대로 사용한다면 리액트와 합이 맞지 않을 것이라 판단했습니다.
  • d3를 가이드대로 사용하지 않고 커다란 차트 컴포넌트를 Path, Circle, XAxis, YAxis, WeatherAxis, Tooltip 등의 작은 컴포넌트들로 잘게 쪼개는 작업을 거쳤습니다.
  • UI를 쪼개는 과정에서 선과 축은 path, 점은 circle 과 같은 svg element tag 로 대응시킬 수 있게 되었고, 눈에 보이는 UI 그대로 컴포넌트를 분리하여 생각할 수 있게 되었습니다.
  • 차트의 scale을 계산하는 경우와 같이 d3 함수가 반드시 필요한 경우에만 제한적으로 라이브러리를 이용했습니다.
  • stroke-dashoffset과 stroke-dasharray를 이용하여 차트가 그려지는 애니메이션을 구현했습니다.
  • touch와 mousemove 이벤트의 좌표값과 d3 bisect 함수를 이용하여 툴팁을 구현했습니다.

• firestore에 매일 업데이트되는 방문자 수와 날씨 데이터를 불러와 차트로 나타냈습니다.
• 공휴일 데이터를 불러와 차트에 표시했습니다.