프리미엄 핀테크 암호화폐 거래 대시보드 UI 목업

Mevolut 대시보드 UI 디자인 사양 --- ## 1. 전체 스타일 및 비주얼 언어 이 인터페이스는 프리미엄 현대 핀테크/암호화폐 거래 대시보드로, 다크 테마를 사용합니다. 비주얼 언어는 **소프트 뉴모피즘(soft neumorphism)** 과 **럭셔리 Web3 미학**을 결합합니다. 핵심 특징: - 따뜻한 골드/오렌지 액센트 하이라이트 - 모노크롬 컬러 팔레트, 미니멀한 효과와 그림자 - 깊이감과 미묘한 배경을 가진 카드 기반 레이아웃 - 최소한의 테두리, 그림자 또는 밝은 배경으로 구분 타겟 인식: - 안전함 - 전문적 - 하이엔드 / 기관급 - 숙련된 트레이더에 최적화 --- ## 2. 레이아웃 구조 ### 전체 레이아웃 - 데스크톱 우선 대시보드 - 출력 비율: 3:2 - 세 가지 주요 영역: 1. 상단 내비게이션 바 (가로) 2. 왼쪽 사이드바 내비게이션 (세로) 3. 메인 콘텐츠 영역 (카드의 다중 열 그리드) 간격은 넉넉하게 두어 명확성과 시각적 여백을 우선합니다. --- ## 3. 상단 내비게이션 바 - 높이: 72px - 왼쪽: - 브랜드 로고 텍스트 "Mevolut" - 스타일화된 "M" - 골드/오렌지 액센트 - 중앙: - 내비게이션 링크: 대시보드, 보안, 추천인, 거래 수수료, API 관리 - 오른쪽: - 주문 링크 - 기본 CTA: "입금" (골드 필 버튼) - 사용자 아바타 (원형) - 테마 토글 (달 아이콘) 타이포그래피: - 깔끔한 산세리프체 - 중간 두께 - 흰색 기본 텍스트, 회색 비활성 상태 --- ## 4. 왼쪽 사이드바 내비게이션 - 너비: 240px - 배경: near-black - 아이콘이 있는 세로 내비게이션 항목: - 대시보드 (활성) - 보안 - 추천인 - 거래 수수료 - API 관리 - 하단 정렬: - 설정 활성 항목: - 미묘한 배경 하이라이트 - 약간의 배경 틴트 - 둥근 컨테이너 아이콘: - 아웃라인 스타일 - 활성 상태에서 골드 액센트 --- ## 5. 메인 콘텐츠 영역 ### 5.1 사용자 개요 카드 - 상단의 큰 둥근 카드 - 왼쪽: - 원형 아바타 - 인사말 텍스트 ("안녕하세요...") - 사용자 이름 - 인라인 정보 블록: - UID (복사 아이콘) - 신원 인증 상태 - 보안 수준 - 시간대 - 마지막 로그인 시각 - 오른쪽: - "정보 숨기기" 토글 스타일: - 미묘한 내부 그림자 --- ### 5.2 입금 / 구매 카드 - 중간 크기 카드 - 입금 옵션을 설명하는 제목 텍스트 - 두 개의 액션 행: - 입금 (달러 또는 암호화폐) - 주식 구매 (현지 통화) - 각 행: - 아이콘 - 라벨 - 화살표 액션 버튼 (골드 액센트) --- ### 5.3 총 자산 카드 - USD 잔액 및 USD 환산액 표시 - 배경에 크고 흐릿한 달러 기호 워터마크 - 액션 탭: - 주식 구매 - 입금 - 출금 - 숫자 값은 크게 표시 --- ### 5.4 VIP 레벨 카드 - 현재 VIP 레벨 표시 - 현물 및 선물 수수료율 - 토큰 보유량 진행 바 - "더 보기" 링크 진행 바: - 둥근 모서리 - 다크 배경 트랙 --- ### 5.5 현재 보유 자산 테이블 - 테이블 레이아웃을 포함한 카드 - 열: - 코인 (아이콘 + 이름) - 가격 - 24시간 변동 - 4시간 추세 (스파크라인) - 액션 (입금, 출금, 거래) 스파크라인: - 상승 추세는 녹색 - 하락 추세는 빨간색 호버: - 행마다 미묘한 배경 하이라이트 --- ### 5.6 제휴 프로그램 카드 - 프로모션 카드 - 골드 코인 일러스트레이션 - 짧은 설명 및 CTA 버튼 ("지금 신청") --- ### 5.7 정보 / 뉴스 카드 - 공지사항 세로 목록 - 헤드라인 + 타임스탬프 - 상단에 "더 보기" 링크 --- ## 6. 컬러 팔레트 - 기본 배경: 딥 차콜 / 블랙 - 카드 표면: 약간 더 밝은 톤 - 액센트 컬러: 웜 골드 - 텍스트 계층: - 흰색 (기본) - 회색 (보조) - 다크 그레이 (비활성) - 상태 색상: - 녹색 (긍정) - 빨간색 (부정) --- ## 7. 효과 및 인터랙션 - 전체적으로 둥근 모서리 (sm) # 디자인 토큰: { // 전역 테마 정의 "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // 레이아웃 측정 및 구조 "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // 컬러 시스템 "colors": { "background": "#0B0D10", // 메인 앱 배경 "primaryAccent": "#F5A623", // 골드/오렌지 하이라이트 "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // 타이포그래피 스케일 "typography": { "fontFamily": "SF Pro, system-ui, sans-serif", "weights": { "heading": 600, "body": 400, "numeric": 500 }, "sizes": { "h1": 24, "h2": 20, "h3": 16, "body": 14, "caption": 12 } }, // 핵심 UI 컴포넌트 "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "none", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "transparent", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", "itemRadius": 12, "iconStyle": "outline" }, "table": { "rowHeight": 56, "divider": "subtle", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // 아이콘 시스템 "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } }