개인 프로젝트· 2025

Quant Compass

투자 성향 분석 + 시장 심리 비교 서비스 (단독 기획·개발)

역할: 기획 · 디자인 · 개발 (단독)

ReactFirebaseFirestoreViteTailwind CSS

Live Site

Headline

내 투자 페르소나를 다른 투자자들과 비교하고 시장 심리를 한눈에

투자 정보를 입력하면 페르소나를 분석해 다른 투자자와 비교하고 강세/약세 시장 심리를 보여주는 서비스. 기획부터 개발까지 단독 진행.

Problem

· 내 투자 성향이 시장 평균과 어떻게 다른지 직관적으로 비교할 도구가 부재
· 강세/약세 같은 시장 심리 지표를 개인 페르소나와 함께 보여주는 UI가 드뭄

Action

· 투자 성향 설문 → 가중치 합산 → 페르소나 분류 알고리즘 설계
· Firestore onSnapshot 기반 실시간 집계 + 최근 100명 투자자 비교 쿼리
· Vite + React 빠른 부트스트래핑, Tailwind로 1인 개발 효율화

Result

· 기획 → 디자인 → 개발 → 배포까지 단독 진행 (quant-compass.web.app)

Core Code

핵심 코드 스니펫

Firestore 실시간 집계 + 페르소나 분류

const personaRef = doc(db, "personas", userId);

// 실시간 페르소나 구독
const unsubscribe = onSnapshot(personaRef, (doc) => {
  const { type, marketSentiment } = doc.data();
  setPersona(type);            // 강세/약세/중립
  setSentimentScore(marketSentiment);
});

// 페르소나 분류 (설문 → 가중치 합산)
const persona = scoreSurvey(answers, weights);
await setDoc(personaRef, {
  type: persona, marketSentiment,
  updatedAt: serverTimestamp(),
});

// 전체 투자자 집계 비교 (최근 100명)
const allPersonas = await getDocs(
  query(collection(db, "personas"),
        orderBy("updatedAt", "desc"), limit(100))
);

다른 프로젝트 보기