[Day 16] 종목 상세 페이지를 토스증권처럼 바꾸는 하루

오늘 한 일

어제까지만 해도 종목 상세 페이지 상단(Hero)에 시가총액, PER, PBR이 2×2 격자로 떡하니 박혀 있었다. 보는 순간 "이거 Bloomberg 터미널 같다"는 느낌이 들었다. HubWise는 전문 트레이더를 위한 서비스가 아니다. 매매 습관을 기록하고 투자 행동을 개선하려는 사람들을 위한 곳이다. 정보가 많다고 좋은 게 아니라는 걸 이번에 다시 실감했다.

### Hero를 단순하게

KPI 그리드를 통째로 걷어냈다. 이제 Hero에는 종목명, 현재가, 등락률, 52주 범위만 남는다. 토스증권이 딱 이 패턴이다. 시가총액이나 PER 같은 지표는 아래 시세 탭 안에서 보면 충분하다. Hero는 "지금 이 종목 어때?"를 한눈에 보여주는 공간이어야 한다.

### 관심종목·공유·거래량·고점 대비 % 복원

Hero를 단순화하면서 함께 사라졌던 기능들도 다시 붙였다. 관심종목 추가 버튼, 공유 버튼, 거래량, 전일 종가, 52주 고점 대비 현재 위치(%)까지. 모바일에서 종목명이 긴 경우 레이아웃이 깨지는 문제도 이번에 잡았다.

### DART 내부자 공시 — 4,000개 쿼리를 1개로

종목 검색 페이지 내부자 탭을 위해 DART 공시 데이터를 연동했다. 처음 구현에서는 종목 4,000개를 하나씩 조회하는 방식이었는데, RPC 단일 쿼리로 교체했다. A005930 같은 접두사 포함 티커 처리도 함께 해결했다.

### 종목 검색: DB 버그 수정 + 테마/내부자 탭 추가

Supabase ILIKE 쿼리가 % 기호를 이중 인코딩해서 검색이 안 되는 버그가 있었다. RPC 방식으로 교체해서 해결했다. 그 위에 테마 탭(AI, 2차전지, 반도체 등 10개 카드)과 내부자 탭을 새로 붙였다.

## 아쉬웠던 것

JSX 텍스트 노드에 bare 유니코드 이스케이프가 그대로 화면에 출력되는 버그가 생겼다. HTML 환경에서는 \uXXXX 이스케이프가 해석되지 않는다는 걸 다시 한번 확인했다. Python 스크립트로 JS expression으로 래핑해서 수정했다.

## 배운 것

정보를 덜어내는 게 때로는 더 어렵다. KPI 그리드 하나 지우는 데 "정말 빼도 되는가?"를 몇 번이나 고민했다. 결국은 서비스 방향에서 답이 나왔다. HubWise는 정보 과부하를 줄이고 행동 개선에 집중하는 곳이다. 화면도 그 방향을 따라야 한다.