01 / OVERVIEW
어떤 프로젝트인가요?
트렌드뷰는 이커머스 데이터를 기반으로 카테고리·브랜드·상품별 매출과 가격, 리뷰를 시각화하는 B2B 분석 대시보드입니다. 프론트엔드 1인 개발로 화면 구성과 상태 관리, API 연동, 데이터 시각화 전 영역을 담당했습니다. 지표마다 형태가 다른 데이터를 각각 맞는 시각화로 옮기고, 복잡한 검색 조건을 예측 가능하게 관리하는 것이 핵심 과제였습니다.
02 / DEEP DIVE
핵심 기능 집중 소개
01
화면 이동 없는 상품 3개 동시 비교
어떤 고민이 있었는가
- 상품 비교는 보통 목록과 상세를 오가며 기억에 의존하게 됩니다. 한 화면에서 비교하려면 목록과 상세 영역이 공존하면서도 서로를 침범하지 않아야 했고, 비교 대상이 늘어날수록 목록이 차지하는 폭을 줄여야 했습니다.
어떻게 해결했는가
- Start: 사용자가 상품 목록에서 상품을 선택하거나 해제한다.
- 선택 수가 0이면 목록을 한 페이지 40개, 한 행 10열로 넓게 보여 준다.
- 선택 수가 1 이상이면 목록을 한 페이지 12개, 한 행 3열로 좁히고 오른쪽에 상세 영역을 연다.
- 상세 영역은 선택 수에 따라 1개 · 2개 · 3개 비교 컴포넌트로 바뀌고, 각 상품의 월간 긍정 · 부정 리뷰 추이 차트를 그린다. 3개가 상한이다.
- 상품 모드 · 리뷰 모드를 전환하면 선택을 비우고 목록을 40개 보기로 되돌린다.
- 선택한 상품 수에 따라 레이아웃을 전환했습니다. 선택이 없으면 목록을 한 페이지 40개 · 한 행 10열로 넓게 보여 주고, 하나라도 선택하면 12개 · 3열로 좁히면서 오른쪽에 상세 영역을 엽니다. 페이지네이션도 같은 기준으로 다시 계산합니다.
- 상세 영역은 선택 수에 맞춰 1개 · 2개 · 3개 비교 컴포넌트로 바뀌고, 각 상품의 개요와 월간 긍정 · 부정 리뷰 추이를 같은 지표 순서로 나란히 그립니다. 상품 모드 · 리뷰 모드를 전환하면 선택을 비우고 40개 보기로 되돌려 상태가 꼬이지 않게 했습니다.
결과적으로
- 화면 이동 없이 최대 3개 상품을 같은 지표 순서로 나란히 비교할 수 있고, 선택 수가 바뀔 때마다 목록과 상세의 폭이 자동으로 맞춰집니다.
02
검색 조건 3종의 상태 설계
어떤 고민이 있었는가
- 브랜드 · 기간 · 상품 속성 세 갈래의 검색 조건이 여러 컴포넌트에 흩어지면, 화면에 보이는 조건과 실제 검색 결과의 조건이 어긋나는 버그가 생기기 쉽습니다. 조건을 바꿀 때마다 API를 부르면 불필요한 요청도 늘어납니다.
어떻게 해결했는가
- Start: 사용자가 브랜드 · 기간 · 상품 속성 조건을 고른다. 각 선택은 즉시 Redux 슬라이스(selectedBrand · selectedPeriod · brandKeyInformation 등)에 저장된다.
- 조건을 바꾸는 동안에는 API를 호출하지 않는다. 화면의 조건 표시는 모두 같은 슬라이스를 읽는다.
- 검색 버튼을 누르면 기간 라벨을 API 코드로 매핑(1주일 → week, 1개월 → month, 3개월 → month3, 1년 → year)하고 조건을 한 번에 POST한다.
- 응답은 searchResult 슬라이스에 저장되고, 목록 · 비교 · 차트가 모두 이 결과를 읽는다. 조건을 바꾸고 다시 검색하면 같은 경로를 반복한다.
- 조건마다 Redux 슬라이스를 두어(selectedBrand · selectedPeriod · selectedRating · keyInformation) 선택 즉시 저장하고, 조건 표시 UI는 모두 같은 슬라이스를 읽게 했습니다. 조건을 고르는 동안에는 API를 호출하지 않습니다.
- 검색 버튼을 누르는 시점에만 기간 라벨을 API 코드로 매핑(1주일 → week, 3개월 → month3, 1년 → year)해 조건을 한 번에 POST하고, 응답은 searchResult 슬라이스에 저장해 목록 · 비교 · 차트가 모두 같은 결과를 읽습니다.
결과적으로
- 선택된 조건과 결과 화면이 항상 일치하고, 검색당 요청이 1회로 고정되며, 조건 조합의 복원과 재검색이 예측 가능해졌습니다.
03
ECharts 6종 + D3 커스텀 시각화
어떤 고민이 있었는가
- 매출 추이, 가격 분포, 리뷰 감성처럼 지표마다 맞는 차트 형태가 달랐고, 특히 리뷰는 API 원본을 그대로 그릴 수 없어 월간 긍정 · 부정 시계열로 가공하는 변환 계층이 필요했습니다.
어떻게 해결했는가
- 상품별 월간 긍정 · 부정 리뷰 응답을 차트 시리즈 배열(긍정 · 부정 두 줄)로 변환하는 계층을 만들고, 선택 상품이 바뀌면 해당 상품 데이터만 다시 받아 차트가 즉시 갱신되도록 연결했습니다.
- 표준 형태(선 · 도넛 · 막대 · 주간 추이 · 분포 · 워드클라우드)는 ECharts 기반 6종 차트 컴포넌트로, 표준 차트로 표현이 안 되는 브랜드 점유율 트리맵 · 버블 플롯 · 지역 지도는 D3.js 커스텀 컴포넌트로 직접 구현하고 툴팁 · 레이블을 구성했습니다.
결과적으로
- 지표별로 읽는 방식이 다른 6종+α의 시각화를 하나의 대시보드 문법으로 제공합니다.
04
화면 밖 자동 스크롤 제어
어떤 고민이 있었는가
- 목록 자동 스크롤이 화면 밖에서도 타이머로 계속 돌아 자원을 낭비하고, 사용자가 돌아왔을 때 위치를 예측할 수 없는 UX 문제가 있었습니다.
어떻게 해결했는가
- Start: 목록 컨테이너에 IntersectionObserver를 붙인다(threshold 0.1).
- 컨테이너가 화면에 10% 이상 보이면 자동 스크롤 상태를 켜고, 45ms마다 scrollTop을 1px 올리는 interval을 시작한다.
- 화면에서 벗어나면 상태를 끄고 cleanup이 interval을 정리한다. 타이머가 화면 밖에서 돌지 않는다.
- 마우스가 목록에 들어오면 즉시 멈추고, 나가면 다시 시작한다. 컴포넌트가 사라지면 observer를 disconnect한다.
- IntersectionObserver(threshold 0.1)로 목록의 화면 노출 여부를 감지해 보일 때만 45ms 간격의 스크롤 interval을 시작하고, 벗어나면 effect cleanup이 interval을 정리합니다. 마우스가 들어오면 즉시 멈추고 나가면 다시 시작하며, 언마운트 시 observer를 disconnect합니다.
결과적으로
- 자동 스크롤이 보일 때만 동작하고, 사용자가 개입하면 즉시 멈추는 예측 가능한 동작이 됐습니다.
03 / SCREENS
서비스 화면
04 / REFLECTION
배운 점
대시보드 개발의 본체는 차트를 그리는 일이 아니라 "API 응답을 차트가 먹을 수 있는 형태로 바꾸는 계층"이라는 것을 배웠습니다. 1인 개발로 화면·상태·변환 계층을 모두 설계하며, 이후 어떤 데이터 화면이든 같은 구조로 접근하게 됐습니다.