kennedys0/taste-style-enterprise

이 스킬은 사용자가 명시적으로 선택하거나 확인된 프로젝트 구성에서 지정한 경우에만 사용하세요. 설명되지 않은 새로운 UI 요청의 경우 사용자의 취향을 여기서 결정하는 대신 스타일 선택기를 사용하세요. 기존 브랜드, 접근성 및 사용자 재정의는 아래 모든 예시보다 우선합니다. 다음 스타일 가이드는 스타일 선택 전에 UI 코딩을 시작할 수 있는 권한이 아닙니다.

스타일 팩: 엔터프라이즈 / 데이터 우선

ID: enterprise 시그니처: 정보 밀도가 높은 운영용 콕핏, 표 형식 데이터 정렬, 의미론적 상태 토큰, 키보드 생산성, 신뢰할 수 있는 워크플로우 아키텍처.

이는 스타일 팩이지, 필수 기본값이 아닙니다. 명시적 선택 또는 확인된 해당 프로젝트 스타일 이후에만 로드하세요. 프로젝트 지침이 개별 선택을 재정의할 수 있습니다. 접근성, 유용성 및 브랜드 제약 조건을 유지하세요. 글꼴은 제안사항이지 필수 종속성이 아닙니다. 3개의 가짜 KPI 숫자와 장식용 파이 차트가 포함된 소비자 카드 템플릿은 엔터프라이즈 데이터 우선에 해당하지 않습니다.

적합성 / 트레이드오프

• 적합한 경우: B2B SaaS 플랫폼, 운영 관리 콘솔, 클라우드 인프라 모니터, 핀테크 및 트레이딩 포털, 물류 및 공급망 백엔드, 데이터 집약적 생산성 도구.
• 주의할 경우: 내러티브 페이싱과 감성적 시각적 브랜딩이 밀집된 표 스캐닝보다 우선시되는 소비자 마케팅 랜딩 페이지.
• 참고 방향:
  • 모던 클라우드 콘솔 (Linear / Stripe / Vercel 스타일): 선명한 슬레이트 중성 기반 (#0F1117 다크 또는 #F9FAFB 라이트), 컴팩트한 36px 테이블 행, 탭 숫자 (font-variant-numeric: tabular-nums), 조용한 헤어라인 구분선 (#E5E7EB 또는 #262933), 의미론적 상태 토큰.
  • 고밀도 운영 데스크: 깨끗한 흰색 데스크와 컴팩트한 32px 행, 키보드 단축키(⌘K)가 있는 검색 필터 바, 고정 테이블 헤더, 반응형 마스터-디테일 창.

엔터프라이즈 데이터 충실도 게이트 — 필수

엔터프라이즈 페이지가 완료되었다고 판단하기 전에, 열리는 뷰포트가 기능적이고 밀집되고 전문적인 데이터 콕핏으로 명확히 보여야 합니다. 사용자가 이 스타일을 선택했다면, 장식적 지표 카드와 스캔 가능한 표 구조가 없는 거대한 소비자 템플릿은 직접적인 실패입니다.

성공적인 엔터프라이즈 데이터 우선 구현은 다음 모두를 증명해야 합니다:

1. 정보 밀도가 높은 표 형식 아키텍처: 핵심 레코드와 엔터티는 일관된 행 높이(32px–40px)와 명시적 열 헤더를 가진 구조화된 스캔 가능한 데이터 테이블 또는 컴팩트한 마스터-디테일 목록으로 표시됩니다.
2. 탭 숫자 및 오른쪽 정렬: 모든 숫자, 금액, 메트릭 및 타임스탬프는 font-variant-numeric: tabular-nums를 적용합니다. 숫자 열은 엄격히 오른쪽 정렬되고, 텍스트 열은 왼쪽 정렬됩니다.
3. 읽기 쉬운 대비의 의미론적 상태 토큰: 상태 표시기(정상, 저하됨, 실패, 대기 중)는 어둡고 접근 가능한 텍스트와 부드러운 색조 배경(예: 성공: 배경 #ECFDF5, 텍스트 #065F46, WCAG AA 4.5:1 통과)으로 보정된 의미론적 토큰 알약을 사용합니다.
4. 생산성 편의 기능 및 단축키: 검색창에는 키보드 트리거 힌트(⌘K 또는 /), 테이블 헤더에는 정렬 표시기(▲/▼), 레코드 선택 시 배치 작업 모음이 표시됩니다.
5. 진실된 상태 완전성: 테이블에는 실제 페이지 매김 표시줄(Showing 1–25 of 1,420 items 표시), 반응형 가로 스크롤 처리, 전용 빈/로딩/오류 상태가 포함됩니다.

첫 뷰포트 테스트: 데스크톱 스크린샷에서 페이지 제목을 읽지 않고 밀집된 데이터 테이블, 정렬 가능한 헤더, 필터 바 및 탭 숫자를 식별하세요. 소비자 마케팅 페이지처럼 큰 빈 카드로 보인다면 기능적 운영 뷰로 다시 만드세요.

명시적 엔터프라이즈 밀도 예외 — 데이터 테이블 필수

엔터프라이즈 전용 재정의: 대시보드 혼잡 또는 여러 메트릭 상자에 대한 보편적 슬롭 방지 경고는 여기서 데이터 테이블, 필터 도구 모음 또는 상태 표시기를 숨기라는 명령으로 해석되어서는 안 됩니다. 진정한 엔터프라이즈 소프트웨어(Stripe, Datadog, AWS, Bloomberg)에서 밀집된 스캔 가능한 데이터는 기본 인터페이스 요구사항입니다.

• 허용되는 엔터프라이즈 처리: 컴팩트 데이터 테이블(32px–40px 행), 다중 열 메타데이터 그리드, 필터 도구 모음, 키보드 단축키 배지가 있는 검색 창, 배치 작업 모음 및 의미론적 상태 알약.
• 슬롭 경계: 가짜 수익 메트릭, 축 눈금이 없는 장식용 미니 스파크라인, 또는 운영 데이터를 전달하지 않는 애니메이션 파이 차트를 절대 만들지 마십시오. 실제 데이터 필드, 빈 상태 및 실제 상태 표시기는 필수입니다.
• 슬롭 해석: 필요한 운영 컨트롤을 제거하려고 시도하지 말고 스캔 가능성, 정보 밀도 및 작업 효율성으로 엔터프라이즈 레이아웃을 평가하세요. 작업 속도를 높이는 탭 밀도는 진정한 디자인입니다.

타이포그래피 및 글꼴

중립적이고 가독성이 뛰어난 UI 산세리프: Inter, Source Sans 3, SF Pro 또는 시스템 산세리프. 식별자 및 해시용 모노스페이스: JetBrains Mono 또는 시스템 모노. 본문 및 테이블 셀: 13–14 px (줄 높이 1.45); 열 헤더: 12 px 대문자 (두께 600, 자간 0.05em); 메트릭: 20–28 px, 탭 숫자 사용.

색상 방향

• 라이트 모드 (모던 클라우드 콘솔):
  • 캔버스 베이스: 부드러운 중성 슬레이트 (#F9FAFB).
  • 표면 / 테이블: 순수 흰색 (#FFFFFF).
  • 기본 잉크 / 타이포그래피: 진한 슬레이트 (#111827).
  • 보조 / 흐린 텍스트: 균형 잡힌 슬레이트 (#6B7280).
  • 헤어라인 테두리: #E5E7EB.
  • 호버 행 강조: #F8FAFC.
• 다크 모드 (클라우드 콕핏):
  • 캔버스 베이스: 진한 슬레이트 (#0F1117).
  • 표면 / 테이블: 높아진 차콜 (#161922).
  • 기본 잉크 / 타이포그래피: 선명한 슬레이트 (#F9FAFB).
  • 보조 / 흐린 텍스트: 균형 잡힌 회색 (#9CA3AF).
  • 헤어라인 테두리: #232733.
  • 호버 행 강조: #1F2430.
• 기본 브랜드: 진한 엔터프라이즈 블루 (#2563EB 라이트 / #3B82F6 다크).
• 의미론적 상태 토큰 (두 모드용 WCAG AA 보정):
  • 성공 (정상): 라이트: 배경 #ECFDF5에 텍스트 #065F46 (테두리 #A7F3D0); 다크: 배경 rgba(16, 185, 129, 0.15)에 텍스트 #34D399 (테두리 rgba(16, 185, 129, 0.35)).
  • 경고 (저하됨): 라이트: 배경 #FEF3C7에 텍스트 #92400E (테두리 #FDE68A); 다크: 배경 rgba(245, 158, 11, 0.15)에 텍스트 #FBBF24 (테두리 rgba(245, 158, 11, 0.35)).
  • 오류 (실패): 라이트: 배경 #FEE2E2에 텍스트 #991B1B (테두리 #FECACA); 다크: 배경 rgba(239, 68, 68, 0.15)에 텍스트 #F87171 (테두리 rgba(239, 68, 68, 0.35)).
  • 중립 (대기 중 / 비활성): 라이트: 배경 #F3F4F6에 텍스트 #374151 (테두리 #E5E7EB); 다크: 배경 rgba(156, 163, 175, 0.12)에 텍스트 #9CA3AF (테두리 rgba(156, 163, 175, 0.25)).
• 테마 결합 규칙: 캔버스, 테이블, 텍스트 잉크 및 의미론적 배지는 함께 조정되어야 합니다. 다크 테이블에 다크 모드 텍스트 또는 다크 콘솔 배경에 라이트 모드 짙은 녹색 텍스트를 표시하지 마십시오.

레이아웃 및 기하학

4px 기본 리듬, 8/12/16px 밀도 증분; 미묘한 4px–6px 모서리 반경; 일관된 테이블 행 높이(36px 기본값, 32px 컴팩트). 마스터-디테일 레이아웃은 데스크톱에서 유연하게 분할되고 모바일에서 깔끔하게 쌓입니다.

표면, 깊이, 질감

표면은 깨끗하고 평평하며 테두리 중심입니다. 그림자 효과는 엄격히 플로팅 메뉴, 툴팁 및 모달 대화상자 전용입니다(0 4px 12px rgba(0, 0, 0, 0.08)). 데이터 그리드에 장식용 유리 또는 클레이 효과가 없습니다.

컴포넌트 구조 및 상호작용

• 데이터 테이블: 고정 헤더 행, 얼룩말 또는 호버 행 강조(#F8FAFC), 오른쪽 정렬 숫자 열, 왼쪽 정렬 텍스트.
• 필터 및 검색 창: 통합 검색 입력 + ⌘K 배지, 다중 선택 필터 드롭다운, 날짜 범위 선택기.
• 의미론적 상태 배지: 컴팩트한 둥근 알약, 색상 표시기 점, 접근 가능한 텍스트.
• 페이지 매김 바닥글: 현재 페이지 범위, 페이지당 항목 선택기, 이전/다음 버튼.

모션

미니멀한 100–140ms 선형 피드백 전환. 데이터 새로 고침 또는 테이블 필터링 중 견고한 안정성과 제로 모션을 우선시합니다.

Anime.js v4 선택적 레시피

• 모션 결정: 데이터 업데이트 또는 드로어 전환 시 미묘한 행 강조 플래시.
• 시작 지속 시간: 120ms (0 = 즉시); 작업 및 사용자 선호도에 맞게 조정.
• 피해야 할 것: 장식용 페이지 전환, 튀는 차트, 빠른 쿼리에서 회전하는 로더.
• 종속성: 기본적으로 CSS/네이티브. 사용 가능한 경우 Taste Engine references/motion-engine.md를 따르십시오. 독립 실행형 스킬은 위의 축소 모션 및 장식용 루프 없음 원칙을 따릅니다.

UI 라이팅 및 마이크로카피

객관적이고 정확하며 감사 친화적입니다. 예: “1,420개의 레코드가 찾았습니다”, “상태로 필터링”, “CSV 내보내기”, “2분 전에 마지막 업데이트됨”. 모호한 대화형 AI 슬로건을 피하십시오.

시작 토큰 (제안사항, 완전한 테마가 아님)

토큰	라이트 모드 기본값	다크 모드 기본값
--taste-ent-bg	#f9fafb	#0f1117
--taste-ent-surface	#ffffff	#161922
--taste-ent-ink	#111827	#f9fafb
--taste-ent-muted	#6b7280	#9ca3af
--taste-ent-border	1px solid #e5e7eb	1px solid #232733
--taste-ent-radius	6px	6px
--taste-ent-row-height	36px	36px
--taste-ent-accent	#2563eb	#3b82f6
--taste-ent-font-body	Inter, -apple-system, system-ui, sans-serif	Inter, -apple-system, system-ui, sans-serif
--taste-ent-motion-duration	100ms	100ms

토큰은 방향을 나타내며 모든 팔레트/플랫폼에 대해 복사-붙여넣기가 보장되지 않습니다. 프로젝트 수준에서 --taste-ent-*를 정의하고, 색상 대비를 확인하고, 리터럴 값을 흩뿌리지 말고 테마 토큰을 통해 조정하세요.

히어로 구성 (전체 첫 뷰포트)

퍼블릭 포트폴리오/랜딩/홈페이지에 히어로가 있는 경우: 하나의 보이는 화면 헤더+히어로 구성을 사용하세요. 기준 높이는 min-height: 100svh이고 100vh 폴백을 사용하며, 실제 헤더가 일반 흐름에 있을 때만 빼십시오; 접근성과 짧은 모바일 화면을 위해 히어로를 확장하세요. 이를 비공개 대시보드 또는 기타 작업 화면에는 적용하지 마십시오; 직접적인 사용자 재정의가 우선합니다. 스타일 전용 방향: 작동하는 콕핏 요약(핵심 필터 바, 실시간 데이터 개요, 즉각적인 운영 작업)으로 열리는 뷰를 고정하세요. 소비자 카드 인플레이션과 빈 공간을 피하십시오. references/hero-layout.md가 있을 때 해당 라우터를 참조하세요. 독립 실행형 사용은 동일한 반응형 및 슬롭 방지 원칙을 따릅니다.

스타일 전용 품질 게이트

• 해야 할 것: 탭 숫자(tabular-nums) 및 숫자 데이터의 오른쪽 정렬 확인; 의미론적 배지가 라이트 및 다크 모드 모두에서 WCAG AA 대비를 충족하는지 확인; 완전한 페이지 매김 및 검색 필터 바 제공; 고정 테이블 헤더 테스트; 모든 행, 테두리 및 텍스트가 동기화된 쌍으로 전환되도록 다크/라이트 모드 전환 확인.
• 하지 말아야 할 것: 데이터 테이블을 소비자 카드 그리드로 대체하지 마십시오; 크기가 조정되지 않은 장식용 스파크라인을 피하십시오; 백엔드 대응 항목이 없는 가짜 메트릭 숫자를 만들지 마십시오; 진한 배경에 진한 녹색 텍스트 또는 진한 테이블 행에 진한 텍스트와 같은 테마 대비 충돌을 피하십시오.
• 데스크톱 및 모바일 일관성 확인; 가시적인 키보드 포커스(:focus-visible); 로딩, 빈, 비활성화, 오류 및 성공 상태; 축소 동작(prefers-reduced-motion).
• 관련 없는 프로젝트에 스타일 전용 가정을 주입하지 마십시오. 스타일을 결합할 때는 기본 스타일과 차용된 기능을 명시적으로 지정하세요.

보편적 슬롭 방지 게이트 (자체 포함)

모든 요소는 그 자리를 차지할 자격이 있어야 합니다. 내용이 장식보다 우선합니다. 불확실성을 장식하지 마십시오. 잔액, 메트릭, 사용자 후기, 사용자, 로고, 승인, 확인됨/라이브/온라인 상태, 가짜 활동 또는 성공 확인을 만들지 마십시오; 대신 정직한 빈/로딩/오류 상태를 사용하세요. 데모 데이터는 요청되고 명시적으로 표시된 경우에만 허용됩니다.

카드 안에 카드 장식 계층을 추가하지 마십시오: 중첩된 표면은 별개의 상호작용 또는 정보 경계를 나타내야 합니다. 자동 생성된 3-기능 그리드, 4-통계 대시보드, 가짜 히어로 주장, 목적 없는 차트, 배지/칩/아이콘 스팸, 관련 없는 장식 예술, 뷰포트를 채우기 위한 무작위 루프를 피하십시오. 타이포그래피, 간격, 정렬 및 구분선으로 그룹화하는 것을 선호하세요. 동등한 동료는 의도적인 시각적 균형이 필요합니다.

슬롭 방지 카피라이팅: 일반적인 "잠재력을 발휘하세요", "미래를 경험하세요", "워크플로우를 강화하세요", "완벽한" 주장 또는 번역된 등가물을 사용하지 마십시오. 제목은 실제 내용을 전달해야 하고, CTA는 작업 이름을 지정해야 하며, 빈/오류/성공 텍스트는 실제 상태와 다음 단계를 설명해야 합니다. 가짜 긴급성, 조작된 숫자, 모호한 AI 과장, 과도한 이모지 및 접근 불가능한 전체 대문자 벽을 피하십시오. 진실을 바꾸지 않고 이 스타일과 사용자의 언어에 맞게 문구를 조정하세요.

테마 및 모드 대비 무결성: 사용자가 다크 모드 또는 라이트 모드를 요청하거나 테마 전환기를 구축할 때 배경색과 전경색은 모든 표면, 텍스트, 테두리, 입력 및 의미론적 배지에서 동기화된 쌍으로 전환되어야 합니다. 검은 배경에 검은 텍스트, 흰 배경에 흰 텍스트 또는 읽을 수 없는 낮은 대비 상태 알약을 남기지 마십시오. 모든 상태는 WCAG AA 대비(본문/일반 텍스트의 경우 최소 4.5:1, 큰 제목 및 상호작용 경계의 경우 3:1)를 충족해야 합니다.

반응형 및 모션: 모바일을 신중하게 구성하고, 긴 레이블, 포커스 상태 및 접근 가능한 대비를 확인하십시오; 유행하는 레이아웃에 맞추기 위해 텍스트를 자르지 마십시오. 기본적으로 정적; 의미 있는 상호작용에 모션을 사용하고, 축소 동작 선호도를 존중하며, 실제 상태 없이 바운스/플로팅/펄스 장식을 피하십시오.

중대/높은 발견 사항 차단 완료: 조작된 상태/데이터, 손상된 작업, 접근 불가능/잘린 컨트롤, 오해의 소지가 있는 카피, 테마 대비 충돌 또는 심각한 모바일 실패는 수정되어야 합니다. 실제로 검증된 내용을 보고하십시오; 실행되지 않은 테스트를 주장하지 마십시오.

미학 거부권이 아님: 표현적인 색상, 그림자, 그라데이션, 카드 레이아웃 또는 장식 처리는 선택된 미학의 의도적인 일부이고 사용성 검사를 통과하는 경우 적법합니다. s를 피하십시오.

…

[번역을 위해 잘림]