ChanghyukBan한 화면에서 재무제표와
주가를 동시에 보는 대시보드
"매출 늘 때 주가도 올랐을까?"를 한눈에
🎯 이번 강의의 목표
화면을 좌우로 나눠 왼쪽엔 재무제표 막대그래프, 오른쪽엔 주가 라인차트를 동시에 띄웁니다. 종목코드 하나 입력하면 모든 정보가 한 화면에 뜨는 진짜 분석 대시보드를 완성합니다.
✅ 3편 복습: 3편에서는 주가 차트 하나만 있었죠. 오늘은 재무제표 차트를 추가해서 두 개를 나란히 보여줍니다.
📌 이번 편 순서
- 백엔드 점검: 재무제표 API 다듬기 (5분)
- 프론트엔드: 레이아웃 좌우 분할 (10분)
- 왼쪽 영역: 재무제표 막대그래프 (10분)
- 상단 정보 카드 4개 추가 (10분)
- 반응형 대응: 모바일에서도 깔끔하게 (5분)
완성 이미지 미리보기
우리가 만들 화면은 대략 이런 구조입니다.
│ [종목코드 입력] [조회] │
├─────────────────────────────────────┤
│ [매출] [영업이익] [순이익] [이익률] │ ← 정보 카드
├──────────────────┬──────────────────┤
│ │ │
│ 재무제표 차트 │ 주가 차트 │
│ (막대그래프) │ (라인차트) │
│ │ │
└──────────────────┴──────────────────┘
💡 오늘의 핵심 개념: 한 화면에 여러 차트를 배치하는 걸 "대시보드"라고 합니다. Bloomberg 단말기나 네이버 금융 같은 분석 도구가 다 대시보드 구조입니다.
STEP 1. 환경 다시 가동하기
컴퓨터를 껐다 켰다면 다시 켜야 할 게 있습니다.
1-1. VS Code 열기
VS Code 실행 → stock-analyzer 폴더 열기.
1-2. 터미널 2개 열기
[Terminal] → [New Terminal]로 첫 번째 터미널 열고:
uvicorn main:app --reload
터미널 우측 위 + 버튼으로 두 번째 터미널 열고:
npm run dev
💡 앞으로 작업할 때마다 이 두 개 터미널은 항상 켜둬야 합니다. 백엔드 서버와 프론트엔드 서버가 동시에 돌고 있어야 화면이 작동합니다.
STEP 2. 백엔드 점검 — 재무제표 API 확인
3편에서 만든 재무제표 API가 잘 작동하는지 먼저 확인합시다.
2-1. 브라우저에서 테스트
주소창에 입력:
→ /api/financials/{stock_code} 클릭 → Try it out → 005930 입력 → Execute. JSON 데이터가 잘 뜨면 OK.
2-2. 안 뜨면 Claude에게
Claude Code 실행하고:
/api/financials/005930 호출했을 때 [에러 메시지 붙여넣기] 이렇게 떠. 원인 찾아서 고쳐줘.
STEP 3. 프론트엔드 레이아웃 분할하기
이제 화면을 좌우로 나눕니다. Claude Code에 frontend 폴더에서 실행한 뒤 명령합니다.
3-1. 새 터미널에서 Claude Code 실행
VS Code에서 새 터미널 열고:
claude
3-2. 레이아웃 명령
아래를 그대로 복사해서 붙여넣으세요.
레이아웃:
1. 상단: 종목코드 입력창 + 조회 버튼
2. 그 아래: 4개의 정보 카드를 가로로 배치 (매출액, 영업이익, 당기순이익, 영업이익률)
3. 그 아래: 좌우 2단 분할
- 왼쪽: 재무제표 막대그래프 (최근 3년 연도별 매출·영업이익·순이익)
- 오른쪽: 주가 라인차트 (3편에서 만든 것 그대로)
스타일:
- 카드는 흰 배경에 살짝 그림자, 둥근 모서리
- 메인 컬러는 주황색 #c2410c
- 전체 배경은 연한 회색 #f3f4f6
- 모바일에서는 좌우 분할이 위아래로 자동 변환되도록 반응형으로
💡 반응형이란? 큰 화면(PC)에서는 좌우로, 작은 화면(휴대폰)에서는 위아래로 자동 배치되는 것. CSS의 Grid나 Flexbox로 구현하는데, Claude가 알아서 처리합니다.
STEP 4. 정보 카드 데이터 연결
레이아웃은 됐지만 카드 안 숫자가 비어있을 겁니다. 데이터를 채워봅시다.
4-1. 정보 카드 데이터 채우기
/api/financials/{종목코드}를 호출해서 가져온 데이터 중 가장 최근 연도 값으로 4개 카드를 채워줘.각 카드 구성:
- 카드 제목 (예: "매출액")
- 큰 숫자 (예: "300조원")
- 작은 글씨로 연도 표시 (예: "2024 기준")
숫자는 보기 좋게 포맷팅해줘. 1조 이상은 "조원", 1억 이상은 "억원" 단위로.
4-2. 등락 표시 추가 (선택)
STEP 5. 왼쪽 영역 — 재무제표 막대그래프
레이아웃의 왼쪽 칸에 재무제표 차트를 그립니다.
5-1. 막대그래프 추가
구성:
- X축: 연도 (2022, 2023, 2024)
- Y축: 금액 (조원 단위)
- 한 연도당 3개 막대를 나란히: 매출액(주황 #c2410c), 영업이익(노랑 #fbbf24), 당기순이익(갈색 #7c2d12)
- 차트 위에 "재무제표 추이" 제목
- 막대에 마우스 올리면 정확한 숫자 툴팁 표시
✅ 여기까지 진행하면
화면에 정보 카드 4개 + 좌측 재무제표 막대그래프 + 우측 주가 라인차트가 동시에 뜹니다. 브라우저에서 http://localhost:5173 새로고침 후 005930 조회해보세요.
STEP 6. 디자인 다듬기
기능은 됐으니 이제 보기 좋게 만듭니다.
6-1. 헤더 추가
6-2. 로딩 표시
6-3. 종목명 표시
STEP 7. 모바일 대응 점검
브라우저에서 F12 누른 다음, 좌측 위 모바일 아이콘(📱) 클릭. 휴대폰 화면 사이즈로 보면서 점검합니다.
체크 포인트:
- 좌우 분할되어 있던 차트가 위아래로 잘 정렬되는가
- 정보 카드 4개가 가로로 좁아져도 텍스트가 안 잘리는가
- 차트 X축 레이블이 겹치지 않는가
- 버튼 크기가 손가락으로 누르기 충분한가
문제가 있으면 Claude에게:
STEP 8. 검증하기
여러 종목 돌려보면서 점검하기:
대형 흑자 기업 — 삼성전자(005930), SK하이닉스(000660)
→ 매출·영업이익이 늘어나는 막대 패턴이 보이는가?
적자 전환 기업 — 영업이익이 마이너스인 종목
→ 막대가 0 아래로 내려가도 차트가 정상 표시되는가?
잘못된 종목코드 — 999999 같은 존재하지 않는 코드
→ 에러 메시지가 친절하게 뜨는가? "종목을 찾을 수 없습니다" 같은
💡 마지막 케이스에서 에러가 보기 흉하게 뜬다면 Claude에게: "종목코드가 잘못되면 '해당 종목을 찾을 수 없습니다'라는 친절한 메시지로 보여줘"
자주 발생하는 에러 해결법
❌ 화면이 좌우 분할되지 않고 위아래로만 쌓임
→ CSS Grid나 Flexbox 설정이 안 됐을 수 있음. Claude에게 "PC 화면에서 좌우 2단 분할 안 되고 있어. CSS 확인해서 고쳐줘."
❌ 막대그래프 막대가 잘 안 보이거나 너무 작음
→ 차트 높이가 부족할 가능성. "BarChart 컨테이너 높이를 400px로 늘려줘"처럼 구체적으로 요청.
❌ 정보 카드 숫자가 "NaN" 또는 "undefined"로 뜸
→ 백엔드가 보내는 데이터 구조와 프론트엔드가 읽는 키 이름이 다를 때 발생. F12 → Network 탭에서 실제 응답을 확인하고 그대로 Claude에게 보여주면 매칭해줍니다.
❌ 모바일에서 차트가 화면 밖으로 삐져나감
→ Recharts의 ResponsiveContainer를 안 썼을 가능성. "차트를 ResponsiveContainer로 감싸서 화면 크기에 맞게 자동 조정되게 해줘"
응용해보기
대시보드가 완성됐으니 한 단계 더 진화시킬 수 있습니다.
📑 즐겨찾기 기능
"입력창 아래에 '⭐ 즐겨찾기' 버튼을 추가해서, 자주 보는 종목을 저장하고 한 번에 부를 수 있게 해줘."
📊 영업이익률 추이 차트
"재무제표 막대그래프 아래에 영업이익률 추이 라인차트를 작게 추가해줘. 수익성 변화를 한눈에 보고 싶어."
🎨 다크 모드
"우측 상단에 다크/라이트 모드 전환 버튼을 추가해줘. 다크 모드에서는 배경이 어둡고 차트 색이 더 밝게."
오늘 배운 것 정리
- ✅ 한 화면에 여러 차트를 배치하는 대시보드 개념
- ✅ CSS Grid·Flexbox 기반 좌우 분할 레이아웃
- ✅ 정보 카드(KPI Card) 패턴 구현
- ✅ Recharts로 막대그래프 그리기
- ✅ 반응형 디자인 — PC와 모바일 동시 대응
- ✅ 로딩 상태·에러 메시지 처리
이제 여러분이 만든 화면은 네이버 금융 부럽지 않은 분석 도구입니다. 친구한테 보여주면 "이거 진짜 네가 만든 거야?" 소리 듣게 됩니다.
다음 편 예고
📺 5편: AI가 분석 코멘트를 자동으로 써주는 진짜 비밀병기
Claude API를 연결해서, 차트 아래에 "이 회사는 매출은 늘었지만 영업이익률은 하락 추세" 같은 AI 분석을 자동 생성합니다. 단순 차트 뷰어에서 진짜 AI 분석 도구로 진화하는 단계입니다.
📌 이번 주 미션
"응용해보기" 3가지 중 다크 모드를 구현해보세요.
색상 시스템을 다뤄보면 디자인 감각이 한 단계 올라갑니다.
ATOZAI · 실전 구축기 · 4편