📌 프로젝트 소개
- FinVibe는 사용자가 가상 자산으로 실시간 시세 기반 투자 시뮬레이션을 수행할 수 있는 플랫폼입니다.
- 사용자는 매수/매도 주문을 실행하고, 포트폴리오 평가금액 및 수익률 변화를 즉시 확인할 수 있습니다.
- 이 프로젝트에서 저는 금융 시뮬레이션 환경에서 데이터 정합성과 UI 안정성을 동시에 확보하는 프론트엔드 구조 설계를 담당했습니다.
🎯 핵심 목표
- 매수/매도 직후 포트폴리오 상태를 즉시 반영
- 실시간 시세 변동에 따른 평가 금액 업데이트
- 차트 데이터와 보유 자산 상태 동기화
- UI 상태와 서버 상태 충돌 방지
🧱 기술 스택
- React
- 복잡한 투자 UI를 컴포넌트 단위로 모듈화
- TypeScript
- 금액/수량/수익률 계산 로직의 타입 안정성 확보
- TanStack Query
- 서버 상태 조회/캐싱/동기화 표준화
- 매매 요청 이후 재동기화 전략 설계
- 캐시 정책으로 중복 요청 감소
- Zustand
- 종목 선택, 필터, 모달, 인증, 실시간 시세 등 전역 상태 경량 관리
- 서버 상태와 분리해 충돌 방지
- Lightweight Charts
- 번들 크기와 렌더링 성능을 고려한 시계열 차트 구성
- Axios Interceptor
- 토큰 주입/갱신(Refresh)/재시도 정책 일원화
🙋 기여 내용
- 투자 시뮬레이션 화면 렌더링 구조 설계
- 매매 후 포트폴리오 상태 동기화 구조 설계
- React Query 기반 서버 상태 관리 표준화
- Zustand 기반 전역 클라이언트 상태 구조 설계
- 도메인별 API 계층 정리 및 에러 처리 일원화
- 차트 렌더링 최적화
- Storybook 기반 컴포넌트 개발 환경 구축
🛠 문제 해결
- 매매 후 포트폴리오 반영 지연 및 UI 불안정
| 문제 | 해결 | 결과 |
|---|---|---|
| 매수/매도 후 전체 리렌더링 | 영역 단위 상태 분리 | 부분 렌더링 구조 확보 |
| 매매 반영 전 UI 깜빡임 | keepPreviousData 전략 적용 |
체감 지연 최소화 |
| 시세 데이터와 포트폴리오 동기화 지연 | 재요청 정책 설계 | 데이터 정합성 확보 |
→ 매매가 빈번한 환경에서도 즉각적이고 안정적인 반영 구조를 구현
- 서버 상태와 UI 상태 혼재로 인한 충돌
| 문제 | 해결 | 결과 |
|---|---|---|
| 매매 후 중복 API 요청 | React Query 캐싱 전략 적용 | 네트워크 효율 개선 |
| UI 상태와 서버 데이터 혼재 | Server / Client State 분리 | 상태 책임 명확화 |
| 기능 확장 시 수정 범위 증가 | axios API 계층 일원화 | 유지보수성 향상 |
→ 투자 시뮬레이션에서 중요한 데이터 일관성 강화
- 차트 렌더링 부담
| 문제 | 해결 | 결과 |
|---|---|---|
| 무거운 차트 라이브러리 | lightweight-charts 도입 | 초기 로딩 부담 감소 |
| 불필요한 리렌더링 | 메모이제이션 적용 | 렌더링 안정성 확보 |
→ 시계열 데이터 환경에서 성능과 가독성의 균형 확보
🏗 아키텍처 본 프로젝트는 상태를 다음 3계층으로 분리한 하이브리드 구조를 사용합니다.
- Local UI State: 컴포넌트 내부 UI 상태
- Global Client State (Zustand): 인증/사용자/실시간 시세 등 앱 전역 상태
- Server State (TanStack Query): REST API 데이터 조회·캐싱·동기화
또한 도메인별 Axios 클라이언트로 API 계층을 분리해
baseURL, 토큰 주입, 토큰 갱신(Refresh), 재시도 정책을 일관되게 관리했습니다.
실시간 WebSocket 시세 데이터와 REST 거래 데이터를 분리 관리하여, 매매 이후 데이터 정합성과 UI 반응성을 동시에 확보했습니다.
설계 의도
- 매매 요청 후 Server State 재동기화
- UI 상태 독립 관리로 충돌 방지
- 단방향 데이터 흐름 유지
- 낙관적 업데이트를 고려한 확장 가능한 구조 기대 효과
- 매매 반영 즉시성 확보
- 포트폴리오 계산 정합성 유지
- 예측 가능한 상태 전이 구조 확립
📊 다이어그램
- 플로우차트
- 시퀀스 다이어그램
🖼️ 서비스 주요 화면
1️⃣ 메인 페이지
📌 실시간 시장 요약, 주요 자산 현황, 빠른 투자 진입을 위한 대시보드 구성
2️⃣ 투자 시뮬레이터
📊 실시간 시세 기반 가상 매매 시뮬레이션
- 차트 중심 정보 구조
- 매수/매도 즉시 반영
- 포트폴리오 변동 실시간 확인
3️⃣ AI 투자 학습
🤖 AI 기반 투자 학습 콘텐츠
- 시장 흐름 분석
- 전략 이해 지원
- 사용자 맞춤 학습 흐름 제공
4️⃣ 챌린지 시스템 🏅 개인 챌린지
🎯 수익률 기반 경쟁 및 참여형 투자 경험
- 개인 랭킹 시스템
- 팀 기반 스쿼드 경쟁
- 투자 동기 강화 구조