홈페이지 v4 리뉴얼 — 4시간의 핑퐁과 v4 목업 한 방

시작은 trade-log 섹션 하나

WILD_SNIPER 봇 주간 거래 데이터를 wildeconforce.com 에 공개하는 섹션 하나만 박을 생각이었다. 11.5KB 짜리 AGENT_SPEC HTML 받아서 그대로 적용 — Supabase 두 테이블 (weekly_trade_logs + agent_analysis), Next.js 컴포넌트 3개 (WeeklyTradeCard / SymbolBar / AgentAnalysisBlock), 메인 페이지 + /trade-log + /trade-log/[week] 신규 페이지.

빌드 통과. dev 서버 띄우고 미리보기. 검은 다크 카드가 크림색 배경 narrow column 안에 갇혀 보였다.

핑퐁 1: 너비

"비율이 왜 이모냥이냐"

880px → 1240px → 1100px → 880px → 1240px → 1100px lg:1400px. 4시간 동안 컨테이너 max-width 만 4번 바꿨다. 매번 이유가 있었다 — "사이트 다른 섹션과 톤 통일" / "데이터 콘텐츠는 더 넓어야" / "기존 홈페이지 비율 유지".

핵심 깨달음은 Jack 의 한 마디였다. "데스크탑 비율을 모바일용으로 만든거 아니야??"

맞다. 사이트가 max-w-[880px] 로 고정된 건 모바일 우선 디자인의 흔적이다. Medium 스타일 readable column 폭 — 폰에서는 자연스럽지만 1920px 모니터에서는 양옆 1000px 빈 공간이 남는다. 라이브 사이트는 AdSense 광고가 옆 칸을 채워 인상이 나았던 것뿐. dev 서버는 광고가 없어서 휑한 정체가 그대로 드러났다.

핑퐁 2: 글자 크기

text-[11px] / text-[13px] / text-[15px] — 이런 사이즈로 도배된 사이트였다. 모바일에서 정밀하게 빠진 editorial 톤. 데스크탑 wider 칸에 옮기니 글자가 점이 됐다.

"전체적으로 30퍼센트만 키워봐 글자들이 안보여" "아잇 작어" "더 키워 글자가 아예 안보인다니까" "좀!!!!"

폰트 사이즈 +30% → +50% → 다시 +30% 까지 핑퐁. Live Status 라벨 11→14px, Hero h1 48→68px (lg), 카드 헤딩 15→19px. 결국엔 lg: 반응형으로 데스크탑에서만 추가 점핑.

정리는 v4 목업 한 방

핑퐁이 길어지자 Jack 이 v4 디자인 목업 (178KB HTML) 을 던졌다. 풀 페이지 — Hero with avatar + stats + ticker, Live Systems 3-col, Projects featured 2/1 + 3-small, Field Notes 2-col, Philosophy Strip, Footer CTA Band. 디자인 시스템 한 번에 정렬됨.

pages/index.tsx 전면 재작성
globals.css 에 .v4-* 클래스 일괄 추가 (기존 클래스 무영향)
avatar.jpg 는 base64 에서 117KB 추출 → /public/avatar.jpg
container 1100px / lg 1400px (sweet spot)

빌드 통과. ISR 1800초 — 주간 배포 사이클에 충분.

사이드 이슈: Telegram 두 번 죽음

작업 중 Telegram MCP 플러그인 두 번 끊김. 한 번은 MCP 서버 자체 (bun 프로세스) 죽음, 한 번은 npm 업뎃이 어제 박은 npm shim 패치 (--channels plugin:telegram@claude-plugins-official 플래그 주입) 를 날려서 채널 게이트가 닫힘. 같은 증상 다른 원인.

해결: shim 두 파일 (~/AppData/Roaming/npm/claude + claude.cmd) 재패치 → /exit → claude --continue → 양방향 복구. npm 업뎃마다 또 풀릴 가능성, 영구 fix는 별도 트랙으로 남김.

결과

commit 99de45a (11 files, +882/-169)
Vercel 자동 배포 진행 중
trade-log Supabase 통합 완료 (vericum 프로젝트, 2주치 더미 데이터)
v4 디자인 라이브 (Vercel 환경변수 추가 후 trade-log 섹션 데이터 노출)

회고

"존나 힘들었네"

4시간의 너비 + 글자 핑퐁이 v4 목업 한 방으로 30분에 정리됐다. 디자인 토론이 컨테이너 너비 숫자만으로 진행되면 끝이 안 난다. 시각화된 목업 (mockup) 한 장이 1000줄의 채팅보다 빠르다.

다음 작업: Vercel 환경변수 추가 → trade-log 섹션 라이브 검증.