관심종목, 차트, 성능 최적화 — 써보고 바로 요청받은 걸 그날 다 넣은 날

8/21 오후는 실제로 대시보드를 써보면서 나온 요청을 그날그날 반영한 하루였다.

"원하는 종목과 차트도 보고싶은데"

금/은 시세에 쓰던 Yahoo Finance 엔드포인트를 임의 종목 티커로 확장해서, 관심 종목(국내 .KS/.KQ + 해외 티커)을 등록하고 시세 차트를 보는 "종목" 화면을 새로 만들었다. 진짜 실시간 틱 스트리밍은 유료 서비스가 필요해서, 대신 오늘자 1분봉을 30초마다 폴링하는 방식으로 준-실시간을 흉내냈다.

이어서 "5년/6개월/3개월/1달/일주일/하루로 볼 수 있는 차트"를 요청받아 기간을 6종으로 확장했다. "종목이 뭐가 있는지 몰라서 검색을 어떻게 해야할지 모르겠다"는 말에는 Yahoo 검색 API를 붙이려다가 한글 종목명을 아예 인식 못 하는 걸 실측으로 확인했다("삼성전자"는 에러, "Samsung"은 정상). 국내 대형주 35개 정도는 로컬 별칭표로 한글 검색을 보완하고, 그 외/해외는 Yahoo 영문 검색으로 폴백하는 방식으로 마무리했다.

"대시보드가 너무 느리게 뜬다"

실측해보니 Render 콜드스타트(9초, 오래 쉬면 50초 이상)가 가장 크지만 이건 무료 티어 트레이드오프라 코드로 못 고쳤다. 대신 개선 여지가 있던 JS 번들(gzip 495KB 단일 파일)을 React.lazy로 라우트별 코드 스플리팅해서 대시보드 초기 로드를 약 371KB로 줄였다.

티커 검증이 사실 작동을 안 하고 있었다

"반도체" 같은 일반 단어가 종목 티커로 그대로 저장되는 걸 막으려고 List<@Pattern String> 타입 인자 애노테이션을 달았는데, 프로덕션에서 실측해보니 잘못된 값이 여전히 저장되고 있었다. Jakarta Bean Validation이 Kotlin의 이 문법을 실제로는 검증하지 않는다는 걸 확인하고, 애노테이션을 걷어낸 뒤 서비스 레이어에서 직접 정규식 검사 후 예외를 던지도록 바꿨다.

그 밖

상단 가로 메뉴를 사이드바로 전환하고 좁은 화면에서 자동으로 접히게 했고(사용자 지적: "화면 크기에 따른 오토스케일링이 하나도 안 되어있다"), AI 추천종목 칩이 계속 빈 배열이던 것도 발견해서 Gemini 프롬프트에 "추천종목: A, B" 형식을 요청하고 파싱하도록 채워 넣었다.