애플 수준의 제품 디자이너 UI 시스템 프롬프트

# UI 시스템 설계 명세서 ## 1. 제품 컨텍스트 **제품:** 전문가용 데이터 분석 대시보드 **사용자:** 데이터 분석가, 제품 관리자, 경영진 **주요 액션:** 데이터 시각화 탐색 및 인사이트 공유 ## 2. 레이아웃 아키텍처 **페이지 구조 (상단 → 하단):** - 글로벌 내비게이션 바 (64px) - 컨텍스트 헤더 (48px) - 현재 뷰 제목 및 필터 상태 - 메인 콘텐츠 영역 - 12컬럼 그리드 - 보조 패널 (오른쪽, 320px) - 상세 정보 및 작업 패널 **그리드 시스템:** - 12컬럼 그리드, 24px 거터 - 마진: 48px (데스크톱), 24px (태블릿), 16px (모바일) - 섹션 간 간격: 48px **섹션 계층:** 1. 글로벌 내비게이션 2. 컨텍스트 헤더 3. 데이터 시각화 영역 (기본 뷰) 4. 상세 데이터 테이블 5. 푸터 (간소화) ## 3. 타이포그래피 시스템 **폰트:** Inter (중립적 산세리프) **크기 스케일:** - H1: 32px / 40px 라인 높이, 볼드 - H2: 24px / 32px 라인 높이, 세미볼드 - H3: 20px / 28px 라인 높이, 세미볼드 - 본문: 16px / 24px 라인 높이, 레귤러 - 캡션: 14px / 20px 라인 높이, 레귤러 - 라벨: 12px / 16px 라인 높이, 미디엄 **가중치 사용:** - 볼드: 주요 제목, 강조 수치 - 세미볼드: 부제목, 테이블 헤더 - 레귤러: 본문, 설명 텍스트 - 미디엄: 라벨, 버튼 텍스트 ## 4. 컬러 시스템 **기본 팔레트 (중립 우선):** - 배경: #FFFFFF (기본), #F8F9FA (대체 영역) - 텍스트: #1A1A1A (기본), #6B7280 (보조), #9CA3AF (비활성) - 경계선: #E5E7EB (기본), #D1D5DB (강조) **액센트 (제한적, 의도적):** - 프라이머리: #2563EB (파랑) - 주요 액션, 활성 상태 - 세컨더리: #7C3AED (보라) - 시각화 강조 **기능적 컬러 역할:** - 성공: #059669 - 오류: #DC2626 - 경고: #D97706 - 정보: #2563EB ## 5. 컴포넌트 시스템 **버튼:** - 프라이머리: 파랑 배경, 흰색 텍스트, 8px 모서리 반경 - 세컨더리: 흰색 배경, 회색 테두리, 회색 텍스트 - 고스트: 투명 배경, 텍스트만 표시 - 크기: 36px 높이 (기본), 32px (소형), 44px (대형) **입력 필드:** - 높이: 36px - 테두리: 1px, #D1D5DB - 포커스: 2px 파랑 테두리, 부드러운 그림자 - 라벨: 상단 정렬, 14px **카드/컨테이너:** - 배경: 흰색 - 테두리: 1px, #E5E7EB - 모서리 반경: 12px - 그림자: 없음 (플랫 디자인 우선) **내비게이션:** - 높이: 64px - 왼쪽: 로고, 메뉴 항목 - 오른쪽: 검색, 알림, 프로필 - 활성 상태: 하단 2px 파랑 인디케이터 ## 6. 인터랙션 디자인 **호버/활성 상태:** - 버튼: 배경색 5% 어두워짐 - 카드: 테두리 색상 10% 진해짐, 미세한 그림자 추가 - 내비게이션: 텍스트 색상 변화, 배경 변화 없음 **전환 효과:** - 지속 시간: 150ms (기본), 200ms (패널) - 이징: cubic-bezier(0.4, 0, 0.2, 1) - 적용: 색상, 배경, 테두리, 그림자 **피드백 패턴:** - 로딩: 스켈레톤 플레이스홀더 (회색 블록) - 성공: 녹색 체크 아이콘 + 텍스트 - 오류: 빨간색 메시지 + 입력 필드 강조 ## 7. 간격 및 리듬 **간격 스케일 (4px 기준):** - 4, 8, 12, 16, 24, 32, 48, 64, 96 **정렬 규칙:** - 모든 요소는 4px 그리드에 정렬 - 텍스트는 왼쪽 정렬 (기본) - 수치 데이터는 오른쪽 정렬 - 아이콘은 시각적 중심 기준 정렬 **시각적 균형:** - 섹션 간 48px 간격 - 카드 내부 패딩: 24px - 리스트 항목 간: 8px ## 8. 출력 구조 ### UI 개요 이 시스템은 전문가용 데이터 분석 대시보드로, 복잡한 데이터를 명확하고 효율적으로 표현하는 데 중점을 둔다. 중립적인 색상 팔레트와 강력한 타이포그래피 계층을 통해 데이터 자체가 주인공이 되도록 설계했다. 모든 인터랙션은 빠르고 미니멀하며, 사용자가 데이터 분석에 집중할 수 있도록 방해 요소를 최소화했다. ### 레이아웃 구조 12컬럼 그리드 기반의 반응형 레이아웃으로, 데스크톱에서 모바일까지 일관된 경험을 제공한다. 상단 내비게이션과 컨텍스트 헤더가 안정적인 프레임을 제공하고, 메인 콘텐츠 영역은 데이터 시각화에 최적화된 넓은 공간을 확보한다. 보조 패널은 상세 정보와 작업을 위한 컨텍스트를 제공한다. ### 타이포그래피 시스템 Inter 폰트를 사용한 명확한 계층 구조로, 32px에서 12px까지 5단계의 크기 스케일을 제공한다. 볼드에서 레귤러까지의 가중치 변화가 정보의 중요도를 자연스럽게 전달한다. 모든 텍스트는 4px 그리드에 정렬되어 일관된 리듬을 만든다. ### 컬러 시스템 중립적인 회색 팔레트를 기본으로 하고, 파랑과 보라를 제한적으로 사용하여 주요 액션과 데이터 강조에만 활용한다. 기능적 컬러는 성공, 오류, 경고 상태를 명확히 구분한다. 전체적으로 차분하고 전문적인 분위기를 유지한다. ### 컴포넌트 정의 모든 컴포넌트는 재사용성과 일관성을 최우선으로 설계했다. 버튼은 3가지 스타일(프라이머리, 세컨더리, 고스트)로 구분되며, 입력 필드는 명확한 포커스 상태를 제공한다. 카드는 플랫 디자인을 기본으로 하여 콘텐츠에 집중할 수 있게 한다. ### 인터랙션 노트 모든 인터랙션은 150ms에서 200ms 사이의 빠른 전환을 사용하며, 부드러운 이징 곡선을 적용한다. 호버 상태는 미세한 색상 변화로 표현하고, 피드백은 스켈레톤 로딩과 명확한 성공/오류 메시지로 제공한다. 과도한 애니메이션은 지양하고, 기능적 목적이 있는 경우에만 사용한다. ### 디자인 철학 이 시스템은 "명확성이 장식보다 우선한다"는 원칙을 따른다. 모든 디자인 결정은 사용자가 데이터를 더 잘 이해하고, 더 빠르게 인사이트를 얻는 데 기여해야 한다. 불필요한 장식, 과도한 색상, 복잡한 인터랙션은 모두 제거하고, 정보 전달의 효율성과 사용자의 인지 부하 감소에 집중한다. 결과적으로 전문가가 매일 사용해도 피로감이 없고, 데이터에 집중할 수 있는 환경을 만든다.