01
Scroll
AED: Alpha Engine Dashboard
전략 수가 늘고 분석 요구사항이 복잡해지면서 리서처마다 자기 컴퓨터에서 Python으로 따로 분석하던 방식은 한계에 도달했습니다. 운용 경험을 가진 기획자가 목업을 먼저 만들어 제안하고, 그 목업이 그대로 제품이 됐습니다.
Features
핵심 판단
프로젝트의 방향을 바꾼 세 가지 판단.
성과요약 화면에서 숫자를 보다가 "이 수치가 뭔가 이상하다"는 감각이 들었습니다. 샤프지수가 무위험 수익률(Rf)을 차감하지 않고 있었고 CAGR은 역일(365.25)과 영업일(252)이 혼용되고 있었습니다. 전수 감사 후 10개 지표 공식을 PRD에 표준 정의하고 461개 지표를 단일 glossary로 통합했습니다.
발견
샤프지수 Rf 미차감, CAGR 역일 불일치, 거래종목 수 산식 오류
조치
PRD 0.4절에 10개 지표 공식 표준화, 코드 일괄 수정
시스템화
metrics.tsx 단일 소스 + tooltip 3단계 (정의/수식/해석)
Tooltip 구조
샤프지수
위험 대비 초과수익을 측정하는 지표. 1 이상이면 양호.
formula
sqrt(252) x mean(r - rf) / std(r)
rf = 2% 연간 (0.02/252 일일)
리서처를 관찰하니 성과 확인 후 포트폴리오를 보고 분석으로 넘어가는 순서가 항상 같았습니다.
탭 3개는 클릭 3번이 아니라 맥락 전환 3번이었습니다.
성과요약은 한 페이지에서 스크롤로 읽고 매매탐색은 드릴다운으로 파고드는 구조로 통합했습니다.
BEFORE
맥락 전환 3회
AFTER
흐름 유지
운용을 해본 사람은 압니다.
전략을 평가할 때 성과가 좋다 나쁘다만으로는 부족합니다.
특정 날짜에 어떤 종목을 얼마나 들고 있었는지, 리밸런싱이 일어난 날에 비중이 어떻게 바뀌었는지를 직접 확인해야 판단이 가능합니다.
비중 차트 클릭 = Holdings 동기화
포트폴리오 비중 차트의 아무 지점을 클릭하면 그 날짜의 보유 종목 테이블로 즉시 이동. 차트와 테이블이 같은 날짜를 바라봅니다.
리밸런싱 일자 네비게이션
날짜를 하루씩 넘기는 것만으로는 부족합니다. 운용역은 다음 리밸런싱 날로 바로 점프하고 싶어합니다. 리밸런싱 전용 버튼을 추가해 비중 변동이 실제로 일어난 날만 빠르게 탐색합니다.
성과에서 매매탐색으로의 크로스탭
성과 차트에서 의문이 생긴 날짜를 클릭하면 그 시점의 보유 종목과 누적 기여를 보여주는 스냅샷 바가 나타납니다. "매매탐색에서 자세히" 링크 한 번으로 해당 날짜의 종목별 드릴다운으로 진입합니다.
리밸런싱 일자 점프 + 차트↔테이블 양방향 동기화
배경
퀀트 리서치팀의 전략 생성 엔진이 가동되자
전략 수는 10개에서 수백 개 단위로 빠르게 늘어났습니다.
늘어난 건 전략 수만이 아니었습니다.
전략마다 샤프지수, CAGR, MDD, Calmar 등 10개 이상의 성과 지표를 계산해야 했고,
종목별 매매 사이클 분석, 이격도 차트, 벤치마크 대비 IS/OS 기간 분리 검증까지.
하나의 전략을 제대로 평가하려면 필요한 분석 깊이 자체가 달라지고 있었습니다.
리서처마다 로컬 Python 환경에서 따로 확인했습니다. 같은 전략의 샤프지수를 서로 다른 기준으로 보고 있어도 알 길이 없었습니다.
차트 10개가 세로로 나열된 화면. 외부 미팅에서 전략의 강점을 설명할 근거 화면이 없었습니다.
디자이너와 프론트엔드 개발자가 없는 팀이었습니다. 아이디어가 있어도 시각화할 리소스가 없어, 기획서 문서에서 멈추는 상황이었습니다.
왜 이 종목을 이 타이밍에 샀는지 확인할 방법이 없었습니다. 성과 숫자만 보고 알고리즘의 판단을 믿어야 하는 상황이었습니다.
접근
글로 설명하면 판단이 안 돼서, 목업을 먼저 만들었습니다.
리서처 옆에서 실제 분석 워크플로우를 관찰하고, 어디서 멈추는지를 파악했습니다.
32개 HTML 목업을 만들어 바로 공유했습니다. A~D 시안 비교 후 리서처가 직접 선택했습니다.
슬랙 피드백이 1~2일 안에 반영됐습니다. 목업을 공유하면 피드백이 왔고, 피드백은 다음 목업이 됐습니다.
기획 의도가 그대로 화면에 반영됐습니다. 의도와 결과가 어긋나서 다시 맞추는 회의가 구조적으로 없어졌습니다.
시안 A · 기존 화면
Before
차트가 세로로 나열되고 성과 지표가 흩어져 있어 전략의 강점을 한눈에 판단할 수 없는 구조였습니다.
시안 B · 내가 제안한 목업
채택 · Proposal
정보 위계를 재설계해 핵심 지표 → 상세 분석으로 이어지는 구조. HTML 목업으로 먼저 공유하고 대표님 컨펌 후 그대로 제품이 됐습니다.
기존 화면을 분석하고, 개선안을 HTML 목업으로 직접 만들어 공유했습니다.
대표님 컨펌 한 번에 프로젝트가 시작됐고, 이 목업이 그대로 제품이 됐습니다.
A/B/C 3가지 목업 → 전원 B 선택
피드백을 받고자 합니다. 포트폴리오 차트에서 종목별 비중을 볼 수 있는 걸 추가하고자 하는데, holdings에도 함께 연결되어 있어 화면 잘리는 부분으로 인해 불편한 경우가 있습니다.
3가지 목업 화면을 확인하시고 상대적으로 이게 편하다고 생각되는 목업 말씀주시면 좋을 것 같아요! 선택을 되지 않는 버전이니 화면과 인터랙션만 잘 읽어봐주시면 됩니다.
감사합니다 :)
"이격도 관련 목업" → 디테일 체크리스트
어제 이격도 관련해서 말씀주신거 목업 만들어봤는데, 어떤 화면이 더 괜찮은지 피드백 부탁드립니다! (html 다운받아서 열어보시면 됩니다)
대표님 목업 리뷰 → "빼는 판단"
금일 랩 관련 피드백 후 작성된 목업입니다. 성과요약 탭에 기존 기능 통합 + 보강, 매매탐색 탭 신규 추가 구조입니다. 참고 부탁드립니다 :)
category contribution 은 삭제 해도 될 것 같아요.
그 외 이대로 나와주면 좋겠습니다.
기능들을 이용하는 방식(예: 매매탐색에서 기간 설정하는 방식)들에 대해서는 목업이라 기능 개발할때 어떤 식으로 할건지 공유되면 좋겠습니다.
목업을 공유하면 피드백이 왔고, 피드백은 1~2일 안에 다음 버전이 됐습니다.
git diff를 AI가 읽어 테스트 시나리오를 추출하고, Playwright가 before/after를 자동 촬영하고, 콘솔 에러와 건강도 점수, 목업 대조 결과까지 리포트로 만들었습니다. 디자이너와 QA 없는 팀에서, 품질은 사람이 아니라 파이프라인이 지켰습니다.
Before · 2026-03-26
"개요" 페이지 — 차트 3개 나열, 정보 위계 없음
After · 2026-03-26
"대시보드" — 태그 필터 + KPI 트렌드 + Pipeline + 리더보드 + 히스토그램
체크포인트가 잡아낸 것
파이프라인이 없었으면 놓쳤을 이슈들
사이드바 Data Sources 토글 클릭 시 nextElementSibling null 에러. NiceGUI의 <nicegui-html> 래퍼로 인한 DOM 형제 탐색 실패.
체크포인트가 없었으면 프로덕션 배포 후 사용자가 마주칠 버그.
✓ closest('.nicegui-html') 로 해결 · 5c4e960 커밋
건강도 91 → 95. 시각 품질 대폭 향상, 콘솔 에러 0. Highcharts 중복 타이틀 제거 · 컨트롤바 정리 · 벤치마크 드롭다운 개선.
리디자인 품질을 "느낌"이 아닌 점수로 검증. 얼마나 나아졌는지 객관적으로 측정.
✓ VERDICT: IMPROVED · 에러 0
시각 카테고리 80 감지. 3탭 x 5스크롤 총 13장 풀페이지 캡처 → 어느 영역이 감점인지 정확히 특정 후 폴리시.
"어딘가 이상하다"가 아니라 영역 단위로 측정·수정.
✓ 시각 80 → 90 · 총점 96 → 98
12번의 체크포인트, 165장의 스크린샷. 매 변경마다 파이프라인이 HIGH 이슈를 당일 수정하고, 품질 변화를 점수로 기록했습니다.
기능 정의에서 멈추지 않고, 디자인 토큰 표준화와 지표 산식 감사까지.
"같은 전략인데 샤프지수 기준이 달랐던" 문제를 문서 레벨에서 해결했습니다.
제품 구조
전체 전략의 핵심 성과 지표를 상단 KPI 카드로 요약합니다.
태그 필터를 클릭하면 KPI가 즉시 재계산됩니다.
하단에서는 샤프지수 분포 히스토그램으로 전략 품질을 진단하고
위험-수익 산점도에서 이상치 전략을 식별합니다.
전체 건강도 진단 — 품질이 떨어지는 전략이 늘고 있는지, 위험 대비 수익이 비정상인 전략이 있는지를 즉시 파악.
검색창에 타이핑하는 대신
유니버스와 태그를 선택하면 즉시 좁혀집니다.
리스트에서 행을 클릭하면 요약 패널이 열리며
핵심 성과 지표를 한눈에 확인합니다.
467개 전략 중 분석 대상을 좁히는 단계 — 대시보드에서 감지한 이상 신호를 여기서 추적.
핵심 성과 지표가 상단에 한 줄로 정리되고
아래로 스크롤하면 전략 수익률과 벤치마크 초과수익이 겹친 성과 차트.
학습 기간과 검증 기간을 분리해서
과적합 여부를 차트 위에서 바로 판단할 수 있습니다.
이상치 추적 — 학습 기간에는 성과가 좋았지만 검증 기간에 급락한 전략인지를 분리해서 확인.
종목을 클릭하면 전체 거래 내역이 펼쳐지고
매매 사이클마다 상세 분석으로 들어갑니다.
알고리즘의 매매 논리를 직접 검증하는 구조입니다.
원인 종목 식별 → 매매 논리 검증
종목 드릴다운
전체 거래 내역 + 기여수익률 추이 + 매매 사이클
사이클 확대
개별 매매 사이클의 캔들차트 + 원본/조정 기준 비교
리서처 2명이 공통으로 지적한 문제는 같았습니다. 67개 종목이 시그널 순으로 나열되어 있는데, 모델이 왜 이 종목을 편입했는지 테이블만으로는 맥락이 안 보인다는 것이었습니다.
히트맵과 평행 좌표도 검토했지만, 리서처가 모델 출력을 검증할 때 보는 축은 결국 두 가지 — 시그널 강도(X)와 변동성(Y)이었습니다. AI 모델이 출력한 시그널의 분포와 노이즈 패턴을 한눈에 읽도록 scatter plot을 선택했고, 점 크기에 진입 단계, 색상에 포트폴리오 상태를 매핑했습니다.
단일 축 테이블. 모델이 편입한 종목의 리스크 분포를 파악하려면 개별 확인 필요
2축 scatter로 모델 출력 전체의 시그널-변동성 분포를 즉시 검증
유니버스 시각화
scatter plot 2축 시각화 + 포트폴리오 상태 색상 구분 + 데이터 테이블
임팩트
전략 생성은 자동화됐고, 이제 판단·공유·외부 설득·검증까지 한 화면에서 가능해졌습니다.
기획 → 구현 사이클 시간
PRD 작성부터 리서처가 화면을 쓰기까지
전략 성과 확인
외부 미팅 근거
지표 기준
매매 논리 검증
기획 → 구현
0
전략 (4개 유니버스)
S&P500, KOSPI200, KOSDAQ150, US ETF를 같은 대시보드에서 비교
1~2일
기획 → 코드 사이클
기존 수주~수개월 대비 단축. 목업 공유 → 슬랙 피드백 → 다음 버전까지.
0+
HTML 목업
A~D 시안 비교, 리서처 피드백, 디자이너 검토를 거친 프로토타입
0
평균 건강도 점수
12번의 체크포인트 평균. 미수정 HIGH 이슈 0, 신규 콘솔 에러 0.
전환
NiceGUI(Python UI)는 빠르게 만들 수 있지만 차트 인터랙션에 한계가 있었습니다.
Next.js로 전환했으나 내부 도구에 SSR은 불필요하고 번들이 과잉이었습니다. Vite + React로 재전환했습니다.
HMR 속도가 곧 개발 속도입니다. 틀린 선택을 빠르게 인정하고 더 맞는 도구로 옮기는 것, 1인 개발에서 가능한 판단이었습니다.
NiceGUI (Python)
빠른 프로토타이핑, 차트 인터랙션 한계
Next.js
SSR 불필요, 번들 과잉
Vite + React CSA
HMR 즉시, 내부 도구에 최적
같은 회사 UX/UI 디자이너 2명에게 종합 평가를 요청했습니다. 7개 REQ로 분해하고 14개 레퍼런스 조사 후 전면 리디자인했습니다.
리디자인 프로세스
배운 것
HTML 목업 32개를 직접 만들고 바로 코드로 전환했습니다.
기획 의도가 그대로 화면에 반영되니
결과물이 달라서 수정하는 과정이 사라졌습니다.
프론트엔드 개발자에게 설명하고 기다리고
다시 확인하는 사이클이 필요 없었습니다.
목업에서 보이는 것이 그대로 제품이 됩니다.
목업에서 보이는 것이 그대로 제품이 됩니다.
리서처가 날짜 선택이 불편하다고 말했을 때,
겉으로 보이는 문제는 달력 위젯이었습니다.
하지만 직접 펀드를 운용해본 경험에서
진짜 필요한 건 다음 리밸런싱 날짜로 점프하는 기능이라는 걸 알았습니다.
포트폴리오 비중 차트를 클릭하면
그 날짜의 보유 종목으로 동기화되는 기능도 같은 맥락입니다.
요청에 없었지만 운용자라면 당연히 필요한 것이었습니다.
성과요약 화면에서 숫자를 보다가 "이 수치가 뭔가 이상하다"는 감각이 들었습니다. 기획서만 쓰는 PM은 이 숫자를 볼 기회 자체가 없습니다. 화면을 직접 만드는 기획자는 데이터의 이상을 가장 먼저 발견합니다.
Get in Touch
이 프로젝트에 대해
더 이야기하고 싶다면
Next Project
주주톡 — AI 멀티에이전트 주식 분석React · Vite · TypeScript · Tailwind CSS · Recharts · ECharts · FastAPI · ClickHouse · Python · Claude Code