당신은 현대적이고 미니멀한 디자인, 그림자, 글래스 효과, 부드러운 색상을 추구하는 경험 많은 UI 디자이너입니다. 당신의 역할은 다음 요구사항을 기반으로 전달 가능한 전문적이고 아름다운 목업을 제작하는 것입니다: <requirements> ## 1. 전체 스타일 및 비주얼 언어 이 인터페이스는 다크 테마를 사용하는 프리미엄 현대 핀테크/암호화폐 트레이딩 대시보드를 나타냅니다. 비주얼 언어는 **부드러운 뉴모피즘**과 **고급 Web3 미학**을 결합합니다. 핵심 특징: - 따뜻한 골드/오렌지 악센트 하이라이트 - 미니멀한 효과와 그림자가 포함된 단색 색상 팔레트 - 깊이와 미묘한 배경이 있는 카드 기반 레이아웃 - 최소한의 테두리, 그림자 또는 밝은 배경을 통한 분리 목표 인식: - 안전함 - 전문적임 - 고급 / 기관급 - 숙련된 트레이더에게 최적화됨 --- ## 2. 레이아웃 구조 ### 글로벌 레이아웃 - 데스크톱 우선 대시보드 - 출력 비율: 3:2 - 세 가지 주요 영역: 1. 상단 내비게이션 바 (가로) 2. 왼쪽 사이드바 내비게이션 (세로) 3. 메인 콘텐츠 영역 (카드의 다중 열 그리드) 여백이 넉넉하여 명확성과 시각적 여유 공간을 우선시합니다. --- ## 3. 상단 내비게이션 바 - 높이: 72px - 왼쪽: - 브랜드 로고 텍스트 "Mevolut" - 스타일화된 "M" - 골드/오렌지 악센트 - 중앙: - 내비게이션 링크: 대시보드, 보안, 추천인, 거래 수수료, API 관리 - 오른쪽: - 주문 링크 - 기본 행동 유도 버튼: "입금" (골드 필 버튼) - 사용자 아바타 (원형) - 테마 토글 (달 아이콘) 타이포그래피: - 깔끔한 산세리프 - 중간 굵기 - 흰색 기본 텍스트, 차분한 회색 비활성 상태 --- ## 4. 왼쪽 사이드바 내비게이션 - 너비: 240px - 배경: 거의 검정색 - 아이콘이 있는 세로 내비게이션 항목: - 대시보드 (활성) - 보안 - 추천인 - 거래 수수료 - API 관리 - 하단 정렬: - 설정 활성 항목: - 미묘한 배경 하이라이트 - 약간의 배경 틴트 - 둥근 컨테이너 아이콘: - 아웃라인 스타일 - 활성 상태에 골드 악센트 --- ## 5. 메인 콘텐츠 영역 ### 5.1 사용자 개요 카드 - 상단의 큰 둥근 카드 - 왼쪽: - 원형 아바타 - 인사말 텍스트 ("안녕하세요…") - 사용자 이름 - 인라인 정보 블록: - UID (복사 아이콘) - 본인 확인 상태 - 보안 레벨 - 시간대 - 마지막 로그인 타임스탬프 - 오른쪽: - "정보 숨기기" 토글 스타일: - 미묘한 내부 그림자 --- ### 5.2 입금/구매 카드 - 중간 크기 카드 - 입금 옵션을 설명하는 제목 텍스트 - 두 가지 행동 행: - 입금 (달러 또는 암호화폐) - 주식 구매 (현지 통화) - 각 행: - 아이콘 - 라벨 - 화살표 행동 버튼 (골드 악센트) --- ### 5.3 총 자산 카드 - USD 잔액과 USD 환산 금액을 표시 - 배경에 크고 흐릿한 달러 기호 워터마크 - 행동 탭: - 주식 구매 - 입금 - 출금 - 숫자 값이 큼 --- ### 5.4 VIP 레벨 카드 - 현재 VIP 레벨 표시 - 현물 및 선물 수수료율 - 토큰 보유 진행 표시줄 - "더 보기" 링크 진행 표시줄: - 둥근 모서리 - 어두운 배경 트랙 --- ### 5.5 현재 보유 자산 테이블 - 테이블 레이아웃이 포함된 카드 - 열: - 코인 (아이콘 + 이름) - 가격 - 24시간 변동률 - 4시간 추세 (스파크라인) - 행동 (입금, 출금, 거래) 스파크라인: - 양수 추세는 녹색 - 음수 추세는 빨간색 호버 시: - 행별 미묘한 배경 하이라이트 --- ### 5.6 제휴 프로그램 카드 - 홍보 카드 - 골드 코인 일러스트레이션 - 짧은 설명과 행동 유도 버튼 ("지금 신청하기") --- ### 5.7 정보/뉴스 카드 - 공지사항 세로 목록 - 헤드라인 + 타임스탬프 - 상단에 "더 보기" 링크 --- ## 6. 색상 팔레트 - 기본 배경: 짙은 차콜 / 검정 - 카드 표면: 약간 밝은 색 - 악센트 색상: 따뜻한 골드 - 텍스트 계층: - 흰색 (기본) - 차분한 회색 (보조) - 짙은 회색 (비활성) - 상태 색상: - 양수는 녹색 - 음수는 빨간색 --- ## 7. 효과 및 인터랙션 - 전체에 둥근 모서리 적용 (소형) # Design tokens: { // 글로벌 테마 정의 "theme": { "mode": "다크", "style": [ "부드러운 뉴모피즘", "프리미엄 핀테크" ] }, // 레이아웃 측정 및 구조 "layout": { "type": "데스크톱 대시보드", "grid": "3단", "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": "아웃라인" }, "table": { "rowHeight": 56, "divider": "미묘한", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // 아이콘 시스템 "icons": { "style": "아웃라인", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>