진짜 자동매매 만들기 7일차. Hyper RSI 15m으로 돌렸더니 연속 손절이 확실히 줄었습니다. 평단 관리가 편해지는 게 체감돼요. (수익 보장 아님, 제 기록일 뿐)
가입·결제 후 /dashboard에서 오늘 할 일을 보고 /app으로 들어가, 웹훅 링크 복사 → Alert memo 설정 → 거래소 API 연결 → 주문·차트 확인으로 이어지는 흐름을 데스크탑·모바일(390px)로 담았습니다. 추후 하이브리드앱 전환까지 고려한 반응형 surface.
시각 정본·구조 정본·스타일 정본을 분리합니다. 모든 화면이 아래 우선순위를 따릅니다.
MOABOT-app-ui-final-v1.dc.html
고해상도 UI 톤·밀도, 차트/주문/포지션/전략, memo builder, BrandLogo 사용 방식의 기준.
tokens · components · guidelines
색·Pretendard·radius·spacing, 금지어, 로고/브랜드/거래소 로고 규칙. 토큰으로 조립.
F1–F14 · route · pattern
라우트·인라인·모달·상태·백엔드 핸드오프 기준. 카드/표 복제 대신 실제 제품 UI로 재구성.
길잡이 /dashboard와 업무 공간 /app의 역할을 분리합니다.
색·타입·간격·로고, 그리고 이 제품 고유의 차트 마커 토큰까지. 모든 프레임이 공유합니다.
COLOR
page
#0A0A0F
card
#131318
muted
#1C1C22
border
#23232A
emerald
#10B981
hover
#34D399
loss
#EF4444
warn
#F59E0B
TYPE · Pretendard
RADIUS
LOGO · BRAND · 다크=white / 라이트=default tone
CHART MARKER TOKENS
/dashboard는 길잡이, /app은 업무 공간으로 역할을 분리합니다. 가입·인증·체험·멤버십·페이백·파트너스·결제·가이드·관리자(Admin Island)까지 — 카드 남발 없이 큰 숫자·row·divider·chip 우선.
데스크탑 정보 동등성: 자산·포지션·차트·양방향 주문·손익·멤버십·파트너스·인증을 모바일 재구성판으로 노출. bottom nav · bottom sheet · full-screen modal · sticky CTA · safe-area · 44px+ 터치.
M1 · /dashboard 오늘 할 일
M2 · /app 운용 홈 (차트 분리)
M3 · 포지션
M4 · 차트보기 (영역/캔들)
M5 · 양방향 주문 차트
M6 · 웹훅 링크 sheet
M7 · Alert 메시지 sheet · 핵심
M8 · API 연결 full-screen
M9 · 결제 · USDT 입금 대기
M10 · 실현손익 캘린더 (flat)
M11 · 멤버십 상태
M12 · 파트너스 · 정산
M13 · 로그인 · 가입 · 체험
운용·차트·웹훅·전략·거래소에서 진입하는 커뮤니티. /design-preview/community 와 동일 컴포넌트를 공유해 디자인 언어가 1:1로 일치합니다. 데스크탑·모바일·설정값 추출까지 포함.
스레드형 피드 — 글이 다 보이는 한눈 피드
토스 증권 커뮤니티 + Threads 참고. 본문 전체 노출 · 작성자 뱃지(주주/VIP/멤버십/구독)+운용자산 · 팔로우 · 인기글 추천 · 컴포저 · 프로필 게이트.
진짜 자동매매 만들기 7일차. Hyper RSI 15m으로 돌렸더니 연속 손절이 확실히 줄었습니다. 평단 관리가 편해지는 게 체감돼요. (수익 보장 아님, 제 기록일 뿐)
0611 sk하이닉스 종가베팅 복기. 차트만 보고 들어가는 매매가 아니라, 시장 조정·외국인 수급 변화까지 종합해서 봤을 때 “못 먹어도 들어가 봐야 하는 자리”라고 판단했던 케이스. 다음 날까지 이어질 수급을 읽는 매매라고 생각합니다.
실전 대응 기록 (이미지 첨부)
차트 캡처 · 진입/청산 시점 · 느낀 점
BTC/USDT 양방향 주문 설정 공유합니다. Long/Short 동시 보유 기준 TP/SL과 분할 진입 값이에요. (API Key·개인정보 제외, 설정값만 추출)
Hyper Trend는 횡보장에서 어떻게 제한하시나요? 추세추종이라 휩쏘가 잦은데 진입 필터를 어떻게 두는지 궁금합니다.
프로필 생성 게이트
커뮤니티를 계속 이용하려면
프로필을 만들어주세요
닉네임
유기 진입 지도
제품 기능 → 커뮤니티. 토스 종목 커뮤니티처럼 맥락 안에서 자연스럽게 진입합니다.
토스 종목 커뮤니티처럼, 커뮤니티는 따로 떨어진 공간이 아니라 운용·차트·웹훅·전략·거래소 화면에서 자연스럽게 진입합니다.
운용 홈 · 거래소/종목 row
/app
차트 · 종목 상세 탭
/app#chart-section
대시보드 · 주문 실패 row
/dashboard
설정 · 웹훅 오류
/dashboard/settings#set-webhook
전략 가이드 · Hyper RSI
/strategy-guide/hyper-rsi/okx
전략 가이드 · Hyper Trend
/strategy/hyper-trend
API 가이드 · OKX
/api-guide/okx
모바일 · 하단 더보기
모바일 nav
시장 필터 — 현물 · 선물 · 국내주식 · 해외주식
종목 상세 안에서 토론하는 구조. 시장축으로 피드를 가릅니다.
BTC/USDT
현물 · 선물
ETH/USDT
선물
SOL/KRW
현물
TSLA
해외주식
SK하이닉스
국내주식
설정값 추출 — Hyper RSI · Hyper Trend
가볍게 글을 시작하고, 설정 공유일 때만 이미지/코드 첨부 → 설정값 추출 → 확인·수정. 전체 Pine Script 원문·API Key는 게시하지 않습니다.
데스크탑 커뮤니티 · C1~C8
홈 · 종목별 · 전략별 · 거래소별 · 글 상세 · 글 작성/설정 공유 · 매매일지 · 제한/검토.
모바일 스레드 · 자동 숨김 하단 nav
Threads 참고 — 스크롤 내리면 하단 nav 숨김/올리면 등장. 상단에 내 운용자산 고정.
하단 nav(+=글쓰기) · 스크롤 내리면 숨김 / 올리면 등장
모바일 커뮤니티 · C9~C14 · 390px
홈 · 글 리스트 · 글 상세 · 작성 bottom sheet · 설정값 공유 form · 제한/경고 sheet.
C9 · 커뮤니티 홈
C10 · 글 리스트 (BTC/USDT)
C11 · 글 상세 (봇 설정)
C12 · 작성 (write-first)
C13 · 설정값 공유 form
C14 · 제한/경고 sheet
실제 라우트(/checkout · /orders · /trial · /feedback · /login · /signup · /app · /dashboard · /api-guide · /strategy-guide)에 반영한 화면을 동일 컴포넌트로 렌더합니다. ?preview=1 로 로그인 없이 확인 — 기준판과 실제 라우트가 1:1로 일치합니다.
결제 · 주문 (USDT 입금)
체험 · 피드백 (지표 3일 + 피드백 1일)
인증 (이메일/매직링크 · VIP 별도)
앱 운용 · 대시보드 · 보안
가이드 (커뮤니티 유기 진입)
각 동작의 데이터 소스·상태·구현 가능 여부. backend 미확인은 분리 표기. 마지막에 QA 체크리스트.
Flow Map — 라이브 라우트 ↔ 프레임 연결
프레임은 전시가 아니라 흐름입니다. 아래 순서가 Figma 이관 시 프레임 그룹 순서이기도 합니다.
고객 시작
랜딩 → 회원가입/로그인(D17·M13) → 체험 또는 멤버십/구독 → 결제/온보딩(D10·D13) → 운용 홈(D2·M2)
체험
/trial → TradingView ID 입력 → 지표 3일 체험 → /feedback → 4일차 추가 → 점수 평가/전환 (D18)
멤버십 (사용료 충당)
/membership → 로그인/가입 → 멤버십 시작 → 사용료 충당 현황(D9·M11) → /dashboard/payback 페이백·출금(D16) → cooldown/recover(D19)
구독 · 결제
/checkout(D10) → /orders/:id/pending·complete·failed(D20) → /dashboard/subscription(D9)
파트너스 (정산)
/affiliate 신청폼·약관(D22) → 관리자 승인(D23) → /dashboard/affiliate 정산(D11) → 가이드 → 정산 신청/상태
관리자 (Admin Island)
/app/admin 사용자(D14) · 정산/입금/복구(D23) · 설문/지표/이메일/코드(D24) — operator 전용 분리 도메인
가이드
/api-guide → 거래소별 API → /strategy-guide → TradingView Alert 연결(D8) → 운용 홈 (D21)
모바일
M1~M13 · 데스크탑 정보 동등성 유지 · bottom sheet / full-screen / sticky CTA로 재구성(축소 아님)
Figma MCP 상태
figma-desktop MCP는 읽기 전용(get_design_context·screenshot·metadata·variable_defs)입니다 — 프레임 생성 API가 없어 코드에서 Figma 프레임을 자동 작성할 수 없습니다. 따라서 app-ui-final을 이관 가능한 UI 사전으로 완성했고, 위 Flow Map 순서가 프레임 그룹 배치 순서입니다.
권장 프레임 그룹: Customer Flow · App Operation · Membership · Payback/Usage Fee · Partners · Admin Island · Mobile · Modal/Sheet/Drawer · Empty/Loading/Error.
CRM UI Kit 적용 (관리자 재스킨)
QA 체크리스트 (재수정)