오늘은 개발 시작 이후 가장 큰 하루였다. 코드 한 줄보다 커밋 수가 많았다.
솔직히 기존 UI는 개발자가 만든 UI였다. 기능은 다 있었지만 "쓰고 싶다"는 느낌이 없었다.
토스, 카카오페이 같은 핀테크 앱을 다시 뜯어봤다. 차이가 명확했다. 색이 화려한 게 아니라, 여백과 계층 구조가 명확했다. 중요한 것만 크고, 나머지는 작다. 모바일 엄지손가락이 닿는 곳에 핵심 기능이 있다.
globals.css를 처음부터 다시 썼다. clamp() 기반 유동 타이포그래피 — 모바일에서 22px, 데스크탑에서 28px로 자연스럽게 바뀐다. 색상 토큰도 다크/라이트 모드 각각 명확하게 정의했다.
기존 모바일 탭바는 5개가 빽빽했다. 홈/종목/일지/자산/전체로 정리했다. 각 탭은 최소 48px 터치 영역을 확보했다.
페이지 이동 중에 상단에 얇은 초록색 바가 흐른다. SPA처럼 빠르게 느껴지게 하는 작은 장치다. Router 이벤트를 감지해서 진행 상태를 표시한다.
Hero, SocialProof, PainPoints, Bento Grid, 사용 흐름, 최종 CTA, 개발일지 미리보기 — 7개 섹션으로 재구성했다. "HubWise가 왜 필요한가"를 처음 방문자에게 30초 안에 전달하는 게 목표다.
그 과정에서 가짜 수치들을 다 제거했다. "사용자 12,000명", "수익률 42%" — 실제로 없는 숫자들이 Footer와 SocialProof 섹션에 박혀 있었다. 금융 서비스에서 허위 정보는 치명적이다. 모두 삭제했다.
디자인과 함께 보안 감사도 했다. 총 9개 취약점을 수정했다.
핵심은 세 가지였다.
내부 엔드포인트 노출 제거
/internal/ingestion/health 엔드포인트가 API 키 메타데이터를 그대로 반환하고 있었다. 삭제했다.
IDOR 취약점 수정
편향 분석 API가 X-User-Id 헤더만 보고 데이터를 반환했다. 헤더는 클라이언트에서 임의로 설정할 수 있다. Supabase JWT 검증 방식으로 교체했다.
Admin 엣지 인증 가드
middleware.ts를 새로 만들어서 /admin/* 경로는 edge에서 role 체크를 한다. DB까지 요청이 가기 전에 차단된다.
그 외에 Rate Limiting(slowapi), OAuth 콜백 Open Redirect 방지, login/logout 감사 로그 추가, 에러 응답 내부 정보 제거까지.
종목 상세 페이지와 개발일지를 카카오톡이나 Threads에 공유할 때 미리보기 카드가 나타나도록 OG 이미지를 추가했다. Next.js ImageResponse로 서버에서 동적으로 생성한다.
404 페이지도 새로 만들었다. 기본 흰 화면 대신, 브랜드 컬러와 "홈으로 돌아가기" 버튼이 있는 페이지다. 작은 것이지만 처음 오는 사람에게 인상을 남긴다.
매주 일요일 밤, 유저에게 그 주의 매매 편향 분석 결과를 이메일로 보내는 시스템을 만들었다. "이번 주 FOMO 편향이 3번 나타났습니다" 같은 내용이다. 마이페이지에서 수신 여부를 설정할 수 있다.
첫 발송은 2026-03-22(일) 21:00 KST다.
오늘 끝에 작은 버그 하나를 수정했다. 실제 폰에서 종목 검색 페이지를 열면 검색 버튼이 화면 밖으로 나가는 현상이 있었다. PC 개발자 도구에서는 정상이었다.
원인은 layout.tsx에 <meta name="viewport"> 태그가 없었던 것. Android Chrome은 viewport가 없으면 980px 기본 폭으로 렌더링한다. 한 줄 추가로 해결됐지만, 왜 개발자 도구에서는 안 보이는지 이해하는 게 더 중요했다.
---
오늘 배운 것: 기능이 100% 완성돼도 처음 보는 화면이 나쁘면 아무도 안 쓴다. 디자인은 미적 취향이 아니라 커뮤니케이션이다.
이 글의 소감을 Threads에서 확인하세요.
스레드에서 보기