[2편] Chart.js 이중 Y축 구현과 UX를 고려한 검색 시스템 최적화
서론: 개별 주가와 바탕 지수를 한눈에 비교하기 데이터를 성공적으로 가져온 후, 프론트엔드에서 직면한 문제는 ‘스케일의 차이’였습니다. 예를 들어 애플(AAPL) 주가는 백 달러 단위인데, S&P 500 지수는 수천 포인트 단위입니다. 이를 하나의 차트에 그리면 주가 선이 바닥에 납작하게 붙어버립니다. 이를 해결하기 위해 Chart.js의 이중 Y축(Dual Y-axis) 기능을 도입했습니다.
해결 과정: 영역형(Area) 차트를 활용한 바탕 화면화 개별 주가와 OLS 추세선은 좌측 Y축(y)을 기준으로 뚜렷하게 그리고, 벤치마크 지수(S&P 500, 코스피 등)는 우측 Y축(y2)을 기준으로 그리되, 선 아래에 투명도를 주어 색을 채우는 방식으로 ‘배경 바탕화면’처럼 작동하도록 만들었습니다.
💡 핵심 구현 코드 (Chart.js 이중 축 및 레이어 설정)
JavaScript
datasets: [
{
label: `${displayTicker} 주가 종가`,
data: prices,
borderColor: '#4bcdbe',
yAxisID: 'y', // 좌측 메인 축
order: 1 // 가장 상단 레이어
},
{
label: `[바탕] ${benchmarkName}`,
data: benchmarkPrices,
borderColor: 'rgba(180, 190, 200, 0.5)',
backgroundColor: 'rgba(180, 190, 200, 0.15)', // 영역 채우기
fill: true, // 선 아래를 색칠하여 바탕 화면처럼 연출
yAxisID: 'y2', // 우측 보조 축 지정
order: 3 // 가장 하단 레이어(배경)로 배치
}
]
UX 최적화: API 속도와 사용자 편의성의 타협점 초기에는 네이버 증권 자동완성을 스크립트 단에서 몰래 가져오려 했으나, 구글 서버를 거치면서 발생하는 1~2초의 딜레이가 UX를 깎아먹었습니다. 결국 시스템 과부하를 유발하는 실시간 한글 자동완성을 과감히 덜어내고, 영문/숫자 티커 전용의 초고속 야후 자동완성만 남겼습니다. 대신 국내 종목은 직관적인 안내 버튼을 통해 ‘네이버 증권 새 탭’에서 코드를 복사해 오도록 동선을 분리하여 시스템의 쾌적함을 극대화했습니다.
