오늘은 커밋 수가 역대 최다였다. 디자인 가이드 v2를 기반으로 전체 페이지를 다시 만들었고, Phase 1의 핵심 기능들을 완성했다.
어제 디자인 시스템 색상 변수를 정의했지만, 적용하려니 문제가 드러났다. 페이지마다 인라인 스타일이 다르고, 공통 레이아웃 클래스가 없었다. 부분 패치로는 해결이 안 됐다. 페이지 단위로 처음부터 다시 만드는 게 빨랐다.
content-area 클래스를 정의했다. max-width 1040px, 좌우 패딩 자동. 모든 서브페이지가 이 클래스를 쓰면 너비가 통일된다.
대시보드는 "지금 내 투자 상태가 한눈에 보이는가"가 핵심이다. 관심 종목 위젯에 실데이터를 연결했다. 가격, 등락률이 실시간으로 보인다. 투자 목표 달성률과 학습 진행도 카드도 추가했다. 숫자가 있어야 행동이 바뀐다.
랜딩은 "처음 방문자가 30초 안에 이 서비스가 뭔지 이해할 수 있는가"가 기준이다. 7개 섹션 구조를 잡았다. 히어로에서 가치를 보여주고, PainPoints에서 공감을 만들고, How It Works에서 신뢰를 쌓는다.
매매일지 목록 페이지를 피드 스타일로 바꿨다. 카드를 클릭하면 상세 내용이 펼쳐지고, 다른 사용자의 전략에 리액션을 남길 수 있다. 공개된 일지가 쌓일수록 "비슷한 고민을 하는 투자자들이 어떻게 대응했는지" 볼 수 있게 된다.
/profile/[userId] 페이지를 만들었다. 매매일지 공개 피드, 투자 성향, 편향 태그 분포가 표시된다. 아직 팔로우 기능은 없지만, 구경하는 건 가능하다.
compute_personality SQL 함수를 만들었다. 매매일지를 쓸 때마다 FOMO/손실회피/과신 편향 점수가 자동으로 계산되고 users 테이블의 personality JSON을 업데이트한다. 쌓인 데이터가 실시간으로 자신의 투자 성향을 반영하기 시작한다.
OG 이미지를 동적으로 생성한다. /og?title=... 엔드포인트에서 Next.js ImageResponse로 카드를 그린다. 개발일지나 전략을 공유할 때 미리보기가 제대로 나온다.
robots.txt는 어드민 경로를 차단하도록 업데이트했다. 검색 엔진이 어드민 페이지를 인덱싱하면 안 된다.
기능이 아무리 좋아도 말이 안 되면 전달이 안 된다. 랜딩, 대시보드, 전략 페이지의 카피를 Gemini로 한 번 더 다듬었다. "오늘의 투자 점검"보다 "오늘 당신의 투자 습관은 계획적이었나요?"가 더 생각하게 만든다.
bottom: 56px
로고가 틀려있다는 건 며칠째 인지했지만, 다른 작업에 밀려있었다. 오늘에서야 수정했다.
이 글의 소감을 Threads에서 확인하세요.
스레드에서 보기