[첫 개발일지] 나만의 실시간 주식 대시보드를 만들었습니다 — My Stock 제작기

 

🚀 시작하게 된 이유

주식을 하다 보면 항상 아쉬운 게 있었습니다. 국내 증권사 HTS는 기능은 많지만 UI가 복잡하고, 해외 주식을 보려면 앱을 또 따로 켜야 하고, 환율은 어딘가에서 또 따로 확인해야 하고…

그래서 아예 내가 원하는 기능만 담은 대시보드를 직접 만들어보자고 생각했습니다.

"코스피, 나스닥, 내가 보유한 주식, 환율까지 한 화면에서 바로 보고 싶다."

 

그게 My Stock의 시작이었습니다.

 

 

---

📱 어떤 서비스인가요?

My Stock은 실시간 글로벌 시장 지수, 개별 주식 시세, 환율을 한 화면에서 모니터링하고, 내 포트폴리오를 원화 기준으로 관리할 수 있는 개인용 금융 대시보드 웹앱입니다.

 

주요 기능을 정리하면 이렇습니다:

• 📊 글로벌 지수 모니터링: 코스피, 코스닥, 나스닥, S&P 500을 한눈에
• 🔍 종목 검색 & 추가: 미국 주식(AAPL, TSLA 등)과 국내 주식(삼성전자 등)을 검색해서 실시간 차트 확인
• 💱 상단 환율 바: 원/달러, 원/엔(100엔 기준) 실시간 환율을 항상 상단에 노출
• 📈 상세 환율 차트: 환율을 클릭하면 주식 차트처럼 기간별 추이(1D~5Y) 차트 팝업 확인 가능
• 💼 포트폴리오 관리: 보유 수량 입력 시 실시간 USD/KRW 환율 기반으로 총 원화 자산 자동 계산
• ⏳ 10개년 백테스팅: 내 포트폴리오가 과거에 어떤 성과를 냈는지 시뮬레이션
• ☁️ Firebase 클라우드 동기화: 구글 계정으로 로그인하면 어느 기기에서든 내 관심종목 & 포트폴리오 자동 복원

---

🛠 기술 스택

프론트엔드

기술	버전	역할
React	19.2.6	UI 컴포넌트 구성
TypeScript	6.0.2	정적 타입 적용, 안정성 확보
Vite	8.0.12	고속 빌드 & 개발 서버
Recharts	3.8.1	주식·환율 차트 렌더링
Lucide React	1.21.0	아이콘

백엔드 & 데이터

기술	역할
Yahoo Finance API	주식·환율 실시간 & 역사 데이터
Firebase Auth	Google 소셜 로그인
Cloud Firestore	관심종목·포트폴리오 클라우드 저장

인프라 & DevOps

기술	역할
GitHub Pages	무료 정적 웹 호스팅
GitHub Actions	CI/CD 자동 빌드 & 배포 파이프라인
auto-changelog	커밋 기반 자동 CHANGELOG 생성

---

🎨 디자인 철학

UI 디자인의 방향은 하나였습니다. "프리미엄 금융 앱처럼 보이게".

• 다크 모드 기반 Glassmorphism: 투명 유리 효과와 다크 네이비 배경을 조합해 고급스러운 느낌 구현
• 테마 컬러 토큰: 한국 주식(상승: 빨강, 하락: 파랑)과 미국 주식(상승: 초록, 하락: 빨강) 규칙을 각각 적용
• 반응형 레이아웃: 데스크톱부터 모바일까지 모든 화면 크기에서 동작
• 부드러운 호버 애니메이션: 카드, 버튼, 환율 바 등 상호작용 요소에 전반적으로 Transition 적용

---

🏗 개발 히스토리

v0.1 — 기초 뼈대 구축 (2026년 6월 28일)

처음에는 단순히 Yahoo Finance API로 주식 데이터를 받아와 차트를 그리는 것부터 시작했습니다.

그 다음 가장 크게 고민한 건 데이터 동기화였습니다. 로컬 스토리지만 쓰면 기기를 바꿀 때마다 데이터가 날아가 버리니까요. 그래서 Firebase Auth + Cloud Firestore를 붙여서 Google 로그인 후 자동으로 클라우드에 백업하고 복원하는 기능을 구현했습니다.

Firebase 환경 변수(.env)가 없는 경우엔 로컬 스토리지를 백엔드처럼 사용하는 Mock Fallback 모드로 자동 전환되게 해두었습니다. 덕분에 클론 후 Firebase 설정 없이도 바로 사용해볼 수 있습니다.

v0.2 — 환율 기능 추가 (2026년 7월 1일)

주식만 봐서는 부족했습니다. 미국 주식을 원화로 환산하려면 환율이 필수인데, 환율 정보를 한 번에 볼 수 없으니 불편했습니다.

그래서 두 가지를 추가했습니다:

① 상단 환율 바 (ExchangeRateBar)

대시보드 최상단에 원/달러, 원/엔 실시간 환율을 항상 보이게 했습니다. 슬림한 띠 형태라 공간을 많이 차지하지 않으면서도 시선이 자연스럽게 가도록 배치했습니다.

② 클릭 시 환율 차트 팝업

환율 항목을 클릭하면 이미 완성도 높게 구현되어 있던 StockChart 컴포넌트를 그대로 모달로 재활용했습니다. 덕분에 주식 차트와 동일하게 1D, 1W, 1M, 1Y, 5Y 기간 전환과 Line/Candle 차트 토글까지 환율에서도 모두 작동합니다.

v0.2 핫픽스 — 원/엔 환율 100배 스케일링 버그 수정

이 부분이 생각보다 까다로웠습니다.

Yahoo Finance API의 JPYKRW=X 티커는 1엔당 원화 가격(약 9.5원)을 반환합니다. 그런데 한국에서는 통상적으로 100엔당 원화 가격(약 950원)으로 표기하는 것이 관례입니다.

단순하게 소수점만 없애면 9원이 되어버리기 때문에, StockChart 컴포넌트 내부에서 JPYKRW=X 티커임을 감지하면 현재가, 변동액, 그리고 차트 데이터 배열 전체에 100을 곱해주는 스케일링 보정 로직을 넣었습니다.

덕분에 차트 Y축, 현재가 헤더, 마우스 호버 툴팁까지 모두 올바른 100엔 기준 가격으로 표시됩니다.

---

⚙️ CI/CD 자동 배포 파이프라인

개인 프로젝트지만 배포만큼은 제대로 하고 싶었습니다.

main 브랜치에 코드를 push하는 순간, GitHub Actions가 자동으로 Ubuntu 가상 서버를 띄우고 다음 과정을 처리합니다:

1. 코드 체크아웃 (전체 Git 히스토리 포함)
2. Node.js 20 환경 셋업
3. npm ci 로 의존성 설치
4. auto-changelog 실행 → CHANGELOG.md 자동 갱신 → 봇이 커밋 & Push
5. Firebase 시크릿 주입 후 npm run build
6. 빌드 결과물(dist/) → GitHub Pages 업로드 & 배포

Firebase API 키처럼 민감한 값들은 GitHub 저장소의 Secrets에 등록해두고, 빌드 시에만 환경 변수로 주입하여 코드에 절대 노출되지 않습니다.

auto-changelog 연동

재밌는 점은 배포 파이프라인 안에 CHANGELOG 자동 업데이트도 포함시켰다는 겁니다.

- name: Generate and Commit Changelog
  run: |
    npx auto-changelog --package --unreleased --output CHANGELOG.md
    git config --global user.name "github-actions[bot]"
    git config --global user.email "github-actions[bot]@users.noreply.github.com"
    git add CHANGELOG.md
    git diff-index --quiet HEAD || (git commit -m "docs: auto-update CHANGELOG.md [skip ci]" && git push origin main)

커밋 메시지에 [skip ci]를 붙여서 봇의 Push가 다시 배포를 트리거하는 무한 루프를 방지했습니다. 처음에 이걸 생각 못 해서 하마터면 무한 배포 사태가 날 뻔했습니다.

또 한 가지 함정이 있었는데, GitHub Actions의 기본 Checkout이 Shallow Clone(얕은 복사) 방식이라 Git 태그와 전체 커밋 히스토리를 불러오지 못해 CHANGELOG가 빈 파일이 되는 문제가 있었습니다. fetch-depth: 0 옵션을 추가해서 해결했습니다.

---

🤔 개발하면서 배운 것들

1. Yahoo Finance API는 비공식 API다
공식 문서가 없고 언제 막힐지 모릅니다. CORS 문제를 해결하기 위해 개발 환경에서는 Vite 프록시를, 프로덕션 환경에서는 corsproxy.io를 사용했습니다. 언젠가는 더 안정적인 대안을 찾아야 할 것 같습니다.

2. 컴포넌트 재사용이 생각보다 강력하다
환율 차트 팝업을 구현할 때, 이미 잘 만들어진 StockChart 컴포넌트를 모달 안에서 그대로 재사용했습니다. 새로 만드는 것보다 훨씬 빠르고, 기능도 동일하게 제공됩니다. 컴포넌트 추상화의 힘을 다시 한번 느꼈습니다.

3. CI/CD는 초기에 설정해두면 이후가 훨씬 편하다
처음에 GitHub Actions 설정하는 데 시간이 걸렸지만, 그 이후로는 그냥 git push만 하면 자동으로 배포됩니다. 개인 프로젝트라도 CI/CD를 구축해두면 습관적으로 더 자주, 더 작은 단위로 커밋하게 됩니다.

4. 진정 바이브코딩이 된다

직접 코딩한 것은 한 줄도 없습니다. 그냥 구글 안티그래비티를 다운받고 채팅하듯 명령을 내렸습니다.

최초 만들 때는 구글 드라이브에 내 포트폴리오를 저장하게 하였으나, 로딩시간 등이 지연되는 것 같아 조금 더 공부할 겸 firebase와 연결해 봤습니다. 하다보니 토큰이 부족해서 AI pro 프로모션 기간(3개월)에 가입까지 했습니다.

---

🔗 마무리

아직 개선하고 싶은 것들이 많습니다. Yahoo Finance API 의존성을 줄이는 방법, 더 다양한 자산 유형 지원, 알림 기능 등등.

하지만 지금 이 상태로도 제가 매일 쓸 수 있는 도구가 됐다는 것 자체로 만족스럽습니다.

코드는 GitHub에 오픈되어 있으니 관심 있으신 분은 살펴보셔도 좋습니다.

👉 GitHub: ethanjoh/mystock
👉 라이브 데모 보러가기

---

이 글은 구글 안티그래비티로 작성하였습니다. 😊

마이 스톡은 도서 "딸깍! 바이브코딩 by 안티그래비티"를 참고하였습니다.