5편: 모든 정보를 화면에서 보여주는 프론트엔드 만들기

들어가며

4편에서 백엔드 API 서버를 만들었다. 데이터가 JSON 형태로 나오긴 하는데, 이걸 일반 사람이 보기에는 너무 날것이다. 숫자와 괄호의 나열일 뿐이다.

결국 필요한 건 화면이다. 데이터를 차트로, 표로, 색깔로 보여주는 대시보드. 이번 편에서는 프론트엔드 — 사용자가 실제로 보고 만지는 화면을 어떻게 만들었는지 다룬다.

---

처음 열면 뭐가 보이나

사이트를 열면 대시보드가 나온다. 한 화면에 시장 전체를 훑어볼 수 있도록 설계했다.

위에서부터 순서대로:

• 시장 요약 바 — KOSPI/KOSDAQ 지수, 시가총액, PER/PBR, 거래대금, 환율, 원자재 가격. 오늘 시장이 전체적으로 어떤 상태인지 한 줄로 파악
• 상승/하락 TOP — 오늘 가장 많이 오른 종목, 가장 많이 떨어진 종목
• 거래량 급증 — 평소보다 거래가 갑자기 많아진 종목 (뭔가 이슈가 있다는 신호)
• 52주 신고가/신저가 — 1년 중 최고가/최저가를 경신한 종목
• 테마/시총 랭킹 — 어떤 테마(2차전지, AI 등)가 강한지, 시총 상위 종목은 어디인지
• 수급 패널 — 외국인, 기관, 연기금, 개인이 각각 무엇을 사고 팔았는지
• 시그널 — 골든크로스, 연속 상승, 배당수익률 TOP, 주요 공시

HTS를 켜서 메뉴 5개를 돌아다닐 필요 없이, 이 한 페이지만 보면 오늘 시장이 어떤지 감이 잡힌다. 이게 처음부터 목표였다.

---

 

12개 화면, 12개 파일

대시보드 하나만 있으면 심심하다. 현재 총 12개 화면이 있다:

화면	기능
대시보드	시장 전체 요약 (메인 화면)
종목 상세	개별 종목 차트, 재무, 수급, 공시, 뉴스 (6탭)
종목 스크리너	15개 조건 필터링, 7개 프리셋
퀀트 추천	3개 전략 일일 추천, 백테스트 결과
시장지도 (트리맵)	시가총액 기준 전 종목 시각화
ETF 분석	1,037개 ETF 카테고리/랭킹/분배금
증권사 추천	컨센서스, 개별 리포트
종목 비교	최대 5종목 병렬 비교
관심종목	내가 찜한 종목 모아보기
시장 리뷰	주간/월간 시장 리뷰
이벤트 캘린더	실적 발표, 배당락일
사용법	기능 안내

 

화면 하나당 파일 하나로 분리했다. 총 12개 파일, 약 9,200줄. 여기에 공통 코드(라우팅, 유틸, 스타일)를 합치면 프론트엔드 전체가 약 13,700줄이다.

---

페이지 이동 없이 화면 전환

보통 웹사이트는 메뉴를 클릭하면 새 페이지를 불러온다. 화면이 깜빡이고, 로딩 바가 돌고, 잠깐 기다려야 한다.

이 사이트는 페이지를 다시 불러오지 않는다. 처음에 한 번만 로드하고, 이후에는 화면 안에서 내용만 바꾼다. 대시보드에서 종목 상세로 넘어갈 때도, 스크리너를 열 때도 깜빡임 없이 부드럽게 전환된다.

이런 방식을 SPA(Single Page Application)라고 한다. 페이지 전체를 다시 받지 않으니 빠르고, 차트 같은 무거운 리소스도 처음에 한 번만 로드하면 된다.

---

차트 - TradingView가 다 해준다

주식 사이트에서 차트는 핵심이다. 캔들스틱, 이동평균선, 거래량 바 — 이걸 직접 만들려면 어마어마한 작업이 필요하다.

다행히 TradingView Lightweight Charts라는 오픈소스 라이브러리가 있다. 전 세계 트레이더들이 쓰는 TradingView에서 만든 차트 엔진인데, 무료로 쓸 수 있다.

캔들스틱 차트에 12가지 보조지표를 올릴 수 있다:

• 추세: 이동평균선(MA), 볼린저 밴드, 일목균형표, SAR
• 모멘텀: MACD, RSI, 스토캐스틱, CCI, 윌리엄스 %R
• 거래량: OBV, VWAP
• 변동성: ATR

보조지표 이름이 낯설 수 있는데, 간단히 말하면 "지금 이 종목이 과열인지, 저평가인지, 추세가 살아있는지" 판단하는 도구들이다. 본인이 쓰는 지표만 켜면 된다.

---

종목 클릭 한 번이면 상세 페이지로

대시보드의 모든 종목은 클릭할 수 있다. 상승 TOP에서 종목을 클릭하면 바로 그 종목의 상세 페이지로 넘어간다.

종목 상세 페이지는 6개 탭으로 구성된다:

• 주가 — TradingView 차트 + 보조지표 + 일별 시세 테이블
• 재무 — PER, PBR, ROE, 매출, 영업이익 추이 (연간/분기)
• 구성종목 — ETF일 경우 어떤 종목이 들어있는지
• 수급 — 외국인/기관/연기금 순매수 추이 차트
• 공시 — DART 전자공시 (실적, 지분변동, 유상증자 등)
• 뉴스 — 관련 뉴스 목록

HTS에서는 각각 다른 메뉴에 흩어져 있는 정보를 탭 하나로 모아놨다. 탭만 클릭하면 같은 화면에서 정보가 바뀐다.

---

스크리너 - 조건 넣으면 종목이 나온다

PER 10 이하, ROE 15% 이상, 시총 1,000억 이상... 이런 조건을 넣으면 해당하는 종목 목록이 나온다.

매번 조건을 일일이 설정하기 귀찮을 수 있어서 프리셋 7종을 만들어뒀다:

• 저평가 우량주
• 고배당주
• 성장주
• 소형 가치주
• 대형 안정주
• 턴어라운드 후보
• 외국인 순매수

버튼 하나 누르면 조건이 자동으로 설정되고 결과가 나온다. 정렬도 자유롭게 바꿀 수 있어서 "PBR 낮은 순", "외국인 매수 많은 순" 등으로 볼 수 있다.

---

시장지도 - 시장 전체를 한눈에

 

트리맵(Treemap)이라고 부르는 시각화인데, 네모 크기 = 시가총액, 색깔 = 등락률이다.

삼성전자 네모가 제일 크고, 빨간색이면 오늘 올랐다는 뜻. 반도체 섹터 전체가 빨갛고 바이오 섹터가 파랗다면, "오늘은 반도체가 강하고 바이오가 약하구나"를 1초 만에 파악할 수 있다.

시총 기준 외에도 등락률, 거래대금 기준으로 바꿔서 볼 수 있다. 총 6가지 조합이 있다.

---

관심종목 - 로그인 없이, 내 컴퓨터에 저장

마음에 드는 종목이 있으면 관심종목에 추가할 수 있다. 그룹도 여러 개 만들 수 있다 — "배당주", "성장주", "관망 중" 같은 식으로.

별도 로그인이나 회원가입은 없다. 관심종목 데이터는 브라우저의 로컬 저장소(localStorage)에 저장된다. 서버에 개인 데이터를 보내지 않으니 프라이버시 걱정도 없다.

단점은 브라우저 데이터를 지우면 같이 사라진다는 것. 하지만 개인 프로젝트 규모에서 회원 시스템까지 만드는 건 과하다고 판단했다.

---

React 안 쓰고 순수 JavaScript로

요즘 웹 개발에서는 React, Vue 같은 프레임워크를 쓰는 게 일반적이다. 그런데 이 한국 버전은 프레임워크 없이 순수 JavaScript로 만들었다.

이유는 단순하다 — 처음에는 프로토타입으로 빠르게 만들고 싶었고, AI에게 "대시보드 만들어줘"라고 했더니 순수 JS로 뚝딱 만들어줬기 때문이다. 거기에 기능을 계속 얹다 보니 13,000줄이 되어버렸다.

나중에 만든 미국 버전은 React + TypeScript로 만들었다. 확실히 구조적으로 깔끔하긴 하다. 하지만 순수 JS로도 이 정도 규모의 사이트를 만들 수 있다는 걸 경험한 건 좋았다.

---

삽질 기록

증시 색상을 미국식으로 넣었다.

미국은 상승이 초록, 하락이 빨강이다. 한국은 - 상승이 빨강, 하락이 파랑. AI가 미국산이라 처음에 미국식으로 만들길래 한국식으로 변경했다.

4열 레이아웃의 고통

대시보드 패널을 처음에 2열로 배치했는데 정보가 너무 적어 보였다. 3열로 바꿨더니 테마 패널이 좁아서 못 생겼다. 결국 4열 그리드로 정착했는데, 테마와 시총 랭킹만 2열 너비로 넓혔다. 이 레이아웃 잡는 데만 며칠을 썼다.

모바일 대응

처음에 PC만 생각하고 만들었더니 폰으로 열면 글자가 깨알같이 나왔다. 화면 크기에 따라 4열→2열→1열로 바뀌는 반응형 레이아웃을 추가했다. 완벽하진 않지만 최소한 볼 수는 있는 수준이다.

차트 라이브러리 선택

처음에 Chart.js로 캔들스틱을 그리려고 했는데, 주식 차트에 특화된 게 아니라 한계가 많았다. TradingView Lightweight Charts로 바꾸니 캔들스틱, 거래량 바, 보조지표까지 깔끔하게 나왔다. 무료 오픈소스인 게 믿기지 않을 정도.

---

정리

• 대시보드 한 페이지로 시장 전체 파악: 수급, 시그널, 테마, 상승/하락 TOP
• 12개 화면을 SPA 방식으로: 페이지 깜빡임 없이 부드러운 전환
• TradingView 차트 + 보조지표 12종: 오픈소스의 힘
• 다크 테마: 눈 피로 감소, 증권 앱 느낌
• 종목 상세 6탭: 주가, 재무, 구성종목, 수급, 공시, 뉴스를 한 곳에
• 스크리너 + 트리맵 + 퀀트: 종목 발굴의 다양한 방법

여기까지가 한국 주식 사이트의 전체 구조다. 데이터 수집(2편) → DB(3편) → 백엔드(4편) → 프론트엔드(5편). 이 4단계로 3,970종목을 분석할 수 있는 풀스택 사이트가 완성됐다.

---

다음 편 예고

• 6편: 종목 상세 페이지 만들기 - 주가 차트, 수급 차트, 재무제표, 공시, 뉴스를 하나로