UI 리디자인 후 사이드바가 하루 종일 왔다갔다 한 날

리스킨

루트에 있던 Design.md(스타벅스 사이트 디자인 시스템 추출본)를 토큰 레벨로 적용했다. Primary를 인디고에서 Green Accent(#00754A)로, 캔버스를 크림으로, 버튼을 50px 풀필로 바꿨다. 다크모드는 House Green 계열로 직접 파생시켰다. 검증하다가 AntD Layout.Sider가 theme="light"일 때 커스텀 배경 토큰을 무시하는 걸 발견해서 인라인 스타일로 우회했다.

국내외 지수(코스피·코스닥·S&P500·나스닥·다우)와 미국채 10년물 수익률도 이날 매일 브리핑 핵심 지표로 추가했다. 한국국채 10년물은 Yahoo에 수익률 데이터가 없어서 제외했다.

그리고 사이드바가 하루 종일 왔다갔다 했다

리뷰를 거치며 UX 지적이 쏟아졌고, 메뉴 구조를 하루에만 여섯 번 넘게 갈아엎었다.

1. 사이드바 강제 접힘·에러 화면 전체화면 등 버그 5건 수정
2. 로고를 사이드바에서 헤더로 이동 (사이드바가 접히면 로고도 같이 사라지던 문제)
3. 헤더 로고-햄버거를 가로에서 세로 스택으로
4. 햄버거를 눌러도 실제 열리는 게 버튼 위치와 다른 문제 → 데스크톱은 사이드바, 모바일은 헤더 바로 아래 드롭다운으로 완전히 분리
5. 그 과정에서 데스크톱 접기 기능을 확인 없이 같이 없앰 → 복구
6. "메뉴가 왼쪽으로 나온다"는 지적이 재발 → 992px 분기 자체를 없애고 드롭다운 하나로 통일
7. 드롭다운도 별로라 Menu mode="horizontal"로 항상 노출로 교체
8. AntD Menu의 자동 오버플로우가 좁은 화면에서 메뉴를 "..." 뒤로 숨김 → Menu를 걷어내고 절대 숨기지 않는 커스텀 Link 목록 + 사이드바 재추가
9. 결국 사이드바에 표준 collapsible(collapsedWidth=80)을 붙이고, 완전 숨김이 필요할 때만 collapsedWidth=0으로 별도 처리

콜드스타트를 에러로 착각하지 않게

Render 콜드스타트가 90초 이상 걸릴 수 있는데, 첫 요청이 실패하면 바로 에러 화면을 보여주고 있었다. [2s,4s,8s,15s,25s,35s] 간격(누적 약 89초)으로 재시도하면서 loading 상태를 유지하고, 전부 실패했을 때만 최종 에러를 보여주도록 6개 훅 전체에 적용했다. 대시보드/종목/지수/뉴스와 감사로그/설정을 헤더 두 그룹으로 재배치하고, 티커 표기와 지수 용어를 설명하는 가이드 페이지도 신설했다.

돌아보면

디자인 하나 바꿨을 뿐인데 레이아웃 구조 전체가 흔들렸다. "메뉴가 안 보인다"는 지적이 반복될 때마다 다른 컴포넌트로 갈아엎기보다, 한 번 더 확인하고 갔으면 왕복이 줄었을 것 같다.