이 스킬은 사용자가 명시적으로 선택하거나 확인된 프로젝트 구성에서 지정한 경우에만 사용하십시오. 설명되지 않은 새로운 UI 요청의 경우, 여기서 사용자의 취향을 결정하는 대신 taste-selector와 같은 스타일 선택기를 사용하십시오. 기존 브랜드, 접근성 및 사용자 재정의는 아래 모든 예시보다 우선합니다. 다음 스타일 가이드는 스타일 선택 전에 UI 코딩을 시작할 수 있는 권한이 아닙니다.
스타일 팩: Bentō Grid
ID: bento
시그니처: 엄격한 시각적 위계, 다양한 내부 타일 구성, 통일된 공간 리듬을 갖춘 비대칭 모듈식 카드 구성.
이는 스타일 팩이지, 강제 기본값이 아닙니다. 명시적 선택 또는 확인된 프로젝트 스타일 후에만 로드하십시오. 프로젝트 지침은 개별 선택을 재정의할 수 있습니다. 접근성, 유용성 및 브랜드 제약 조건을 유지하십시오. 글꼴은 제안 사항이며 필수 종속성이 아닙니다. 동일한 기능 카드로 구성된 균일한 3x2 그리드는 Bentō Grid로 간주되지 않습니다.
적합성 및 절충점
- 적합한 분야: 제품 개요, 포트폴리오 랜딩 페이지, 개발자 기능 발견, 대시보드 요약, 하드웨어/소프트웨어 에코시스템 쇼케이스.
- 주의할 분야: 그리드 비대칭성이 순차적 진행을 방해할 수 있는 대량 선형 테이블 데이터 또는 단계별 트랜잭션 흐름.
- 참고 방향:
- 모던 매트 다크 Bento: 흑요석/슬레이트 배경(
#0B0D10)에 미세하게 떠오른 흑연 카드(#15191E), 1px 반투명 테두리(rgba(255, 255, 255, 0.08)), 하나의 생동감 있는 강조 색상. - 깔끔한 건축적 라이트 Bento: 선명한 오프-화이트 캔버스(
#F8F9FA)에 순백색 도자기 타일, 가는 선 구분선(rgba(0, 0, 0, 0.06)), 진한 차콜 타이포그래피.
- 모던 매트 다크 Bento: 흑요석/슬레이트 배경(
Bentō 그리드 충실도 게이트 — 필수
bento 그리드 페이지가 완료되었다고 판단하기 전에, 초기 뷰포트가 시각적으로 <|im_end|>선별된 비대칭 모듈식 구성으로 읽혀야 합니다. 사용자가 이 스타일을 선택했다면, 균일한 동일 카드(아이콘 + 제목 + 단락) 그리드는 실패이며, 일반 템플릿 슬롭에 해당합니다.
성공적인 bento 그리드 구현은 다음 모든 사항을 입증해야 합니다:
- 명확한 비대칭 시각적 무게: 그리드는 뚜렷한 초점 위계를 가집니다: 정확히 1개의 지배적인 히어로 타일(2x2 또는 2x1 열 차지)이 주요 메시지를 전달하고, 1-2개의 중간 보조 타일, 2-3개의 소형 3차 타일이 있습니다.
- 다양한 내부 타일 구성: 모든 타일은 특정 콘텐츠에 맞춰진 고유한 내부 레이아웃을 가집니다. 타일 1은 대화형 코드 블록일 수 있고, 타일 2는 활성 토글 위젯, 타일 3은 시각적 미리보기 또는 다이어그램, 타일 4는 실시간 메트릭 표시일 수 있습니다. 타일 전체에 걸쳐 동일한 반복 레이아웃은 실패입니다.
- 통일된 공간 리듬 및 거터 정렬: 타일 테두리는 일관된 CSS 그리드(예: 3열 또는 4열)를 따라 엄격하게 정렬되고, 균일한 거터(16px-24px)와 일치하는 모서리 곡률(20px-28px)을 가져야 합니다.
- 의도적인 모바일 재구성: 모바일 뷰포트에서 다중 열 bento는 콘텐츠가 잘리거나 어색한 가로 오버플로우 없이 논리적이고 콘텐츠 우선 순위가 지정된 단일 열로 축소됩니다.
- 읽기 쉬운 내부 위계: 각 타일은 명확하고 간결한 제목(18px-24px)과 고대비 콘텐츠를 가지며, 작은 상자에 압축된 작은 텍스트 벽을 피해야 합니다.
첫 뷰포트 테스트: 데스크톱 스크린샷에서 페이지 제목을 읽지 않고 지배적인 히어로 타일, 다양한 내부 타일 표현, 통일된 그리드 정렬을 식별하십시오. 모든 타일이 동일해 보이면 그리드 위계를 재설계하십시오.
명시적 bento 레이아웃 예외 — 비대칭 타일 권장
Bento 특정 재정의: 과도한 카드 또는 대시보드 혼잡에 대한 보편적 안티-슬롭 주의는 여기서 다중 타일 레이아웃을 금지하는 것으로 해석되어서는 안 됩니다. 정통 bento 그리드는 근본적으로 모듈식이고 구획화되어 있으며, 각 구획이 별개의 요리를 제공하는 일본식 bento 상자처럼 기능합니다.
- 허용된 레이아웃 처리: 비대칭 그리드 열/행 스팬(
grid-column: span 2; grid-row: span 2;), 미묘한 카드 호버 상승 효과, 임베디드 대화형 미니 컨트롤(토글, 코드 탭), 활성 타일의 주변 가장자리 광선. - 안티-슬롭 경계: bento 타일 내부의 카드-인-카드 중첩 금지. 타일은 이미 정보 컨테이너이며, 그 안에 다른 카드를 중첩하는 대신 내부 구조를 위해 타이포그래피 위계, 구분선 및 간격을 사용하십시오.
- 안티-슬롭 해석: bento 레이아웃을 카드 수로 평가하지 말고 콘텐츠 다양성, 정보 밀도 및 읽기 위계로 평가하십시오. 균일한 기능 그리드는 슬롭이고, 선별된 비대칭 bento 구성은 진정한 디자인입니다.
타이포그래피 및 타이핑
현대적이고 세련된 산세리프: DM Sans, Manrope, Inter 또는 시스템 산세리프. 주요 히어로 제목: 28-44px (굵기 700); 타일 제목: 18-22px (굵기 600); 본문: 14-15px; 캡션/태그: 12-13px. 본문 텍스트는 간결하고 스캔 가능하게 유지하십시오.
색상 방향
- 다크 모드 (기본 모던 매트):
- 캔버스 베이스: 흑요석 딥 슬레이트(
#0B0D10). - 타일 배경: 떠오른 슬레이트(
#15191E). - 기본 타이포그래피: 선명한 포슬린(
#F4F4F6). - 보조/음소거 텍스트: 균형 잡힌 쿨 그레이(
#9CA3AF— WCAG AA 4.5:1 통과). - 가는 선 테두리: 반투명 흰색 획(
rgba(255, 255, 255, 0.08)).
- 캔버스 베이스: 흑요석 딥 슬레이트(
- 라이트 모드 (깔끔한 건축적):
- 캔버스 베이스: 선명한 오프-화이트(
#F8F9FA). - 타일 배경: 순수 백색 포슬린(
#FFFFFF). - 기본 타이포그래피: 진한 차콜 잉크(
#111827). - 보조/음소거 텍스트: 슬레이트 그레이(
#6B7280— WCAG AA 4.5:1 통과). - 가는 선 테두리: 반투명 어두운 획(
rgba(0, 0, 0, 0.08)).
- 캔버스 베이스: 선명한 오프-화이트(
- 브랜드 강조: 고대비 시그니처 색상(예: 일렉트릭 바이올렛
#8B5CF6, 시안#06B6D4, 또는 에메랄드#10B981)으로 다크 및 라이트 타일 채움 모두에 대해 최소 3:1 대비 충족. - 테마 결합 및 충돌 방지 규칙: 캔버스, 타일 표면, 타이포그래피 및 테두리는 동기화된 쌍으로 적응해야 합니다. 다크 모드로 전환할 때 텍스트는 밝아져야 하고, 라이트 모드로 전환할 때 텍스트는 어두워져야 합니다. 어두운 타일에 어두운 텍스트(
#111827) 또는 밝은 타일에 흰색 텍스트(#FFFFFF)를 절대 허용하지 마십시오.
레이아웃 및 기하학
CSS 그리드: grid-template-columns: repeat(3, 1fr) 또는 repeat(4, 1fr); 간격: 16px-24px. 카드 반경: 20px-28px. 모든 타일 테두리는 가로 및 세로 그리드 트랙을 따라 평평하게 정렬되어야 합니다.
표면, 깊이, 질감
- Bento 타일: 단색 배경에 미묘한 가는 선 획(
1px solid var(--taste-bento-border)) 및 부드러운 주변 그림자(0 8px 24px rgba(0, 0, 0, 0.12)). - 호버 상호작용: 미묘한 상승(
transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18)).
컴포넌트 구성 및 상호작용
- 히어로 타일 (2x2 또는 2x1): 주요 가치 제안, 풍부한 시각 자료 또는 라이브 코드 미리보기, 눈에 띄는 CTA.
- 대화형 액션 타일: 통합 토글, 빠른 필터 또는 복사 가능한 명령 블록.
- 메트릭/상태 타일: 구체적인 레이블과 실제 데이터가 있는 깔끔한 표 형식 숫자.
- 쇼케이스 타일: 고해상도 스크린샷, 에셋 미리보기 또는 아키텍처 다이어그램.
모션
140-220ms 부드러운 이즈-아웃. 호버 시 절제된 타일 상승. 여러 타일에서 동시에 방해가 되는 경쟁 애니메이션 금지.
선택적 Anime.js v4 레시피
- 모션 결정: 지연된 미묘한 타일 진입 또는 부드러운 호버 상승.
- 시작 지속 시간: 180ms (0 = 즉시); 작업 및 사용자 선호도에 따라 조정.
- 피해야 할 것: 타일 뒤집기, 불규칙한 스케일링, 떠다니는 루프 방해 요소.
- 종속성: 기본적으로 CSS/네이티브. 요청된 상호작용이 정당화하는 경우에만 Anime.js v4를 사용하십시오. 사용 가능한 경우 Taste Engine
references/motion-engine.md를 따르고, 독립형 스킬은 위의 모션 감소 및 비장식 루프 원칙을 따릅니다.
UI 작성 및 마이크로카피
직접적이고, 강력하며, 유익합니다. 예: "즉시 배포", "설정 불필요", "48ms 지연 시간". "차세대 시너지"와 같은 모호한 유행어는 피하십시오.
시작 토큰 (제안 사항, 완전한 테마 아님)
| 토큰 | 다크 모드 기본값 | 라이트 모드 기본값 |
|---|---|---|
--taste-bento-bg | #0b0d10 | #f8f9fa |
--taste-bento-surface | #15191e | #ffffff |
--taste-bento-text | #f4f4f6 | #111827 |
--taste-bento-text-muted | #9ca3af | #6b7280 |
--taste-bento-border | 1px solid rgba(255, 255, 255, 0.08) | 1px solid rgba(0, 0, 0, 0.08) |
--taste-bento-radius | 24px | 24px |
--taste-bento-gap | 20px | 20px |
--taste-bento-shadow | 0 8px 24px rgba(0, 0, 0, 0.25) | 0 8px 24px rgba(0, 0, 0, 0.06) |
--taste-bento-accent | #8b5cf6 | #7c3aed |
--taste-bento-font-body | DM Sans, Manrope, system-ui, sans-serif | DM Sans, Manrope, system-ui, sans-serif |
--taste-bento-motion-duration | 180ms | 180ms |
토큰은 방향을 나타내며 모든 팔레트/플랫폼에 복사-붙여넣기로 보장되지 않습니다. 프로젝트 수준에서 --taste-bento-*를 정의하고, 색상 대비를 확인하며, 리터럴 값을 흩뿌리지 말고 테마 토큰을 통해 적응하십시오.
히어로 구성 (전체 첫 뷰포트)
공개 포트폴리오/랜딩/홈페이지에 히어로가 있는 경우: 하나의 가시 화면 헤더+히어로 구성을 사용하십시오. 기본 높이는 100vh 폴백과 함께 min-height: 100svh로 설정하고, 헤더가 일반 플로우에 있을 때만 실제 헤더를 빼십시오; 접근성과 짧은 모바일 화면을 위해 히어로가 확장되도록 두십시오. 비공개 대시보드나 다른 작업 화면에는 적용하지 마십시오; 사용자 직접 재정의가 우선합니다. 스타일별 방향: 상단 섹션을 히어로 bento 그리드로 배열하여 주요 제품 스토리가 기본 2x2 타일을 차지하고 지원 증명 포인트가 주변에 배치되도록 하십시오. 높이를 채우기 위해 첫 뷰포트에 8개의 작은 카드를 강제로 넣지 마십시오. 존재하는 경우 라우터 references/hero-layout.md를 참조하십시오. 독립형 사용은 동일한 반응형 및 안티-슬롭 원칙을 따릅니다.
스타일별 품질 게이트
- 해야 할 것: 히어로 타일의 명확한 시각적 우위 확인; 모든 타일이 고유한 내부 레이아웃을 가지는지 확인; 모바일에서 그리드 축소 확인; 일관된 간격 유지; 다크/라이트 모드 전환 대비 확인: 캔버스, 타일 표면, 타이포그래피 및 테두리가 결합된 쌍으로 전환되고 WCAG AA(최소 4.5:1)를 통과하는지 확인.
- 하지 말아야 할 것: 동일한 반복 3카드 또는 4카드 템플릿을 생성하지 마십시오; 타일 내부에 중첩된 카드를 피하십시오; 읽을 수 없는 미니어처 차트나 가짜 메트릭 레이블을 피하십시오; 어두운 타일에 어두운 텍스트, 밝은 타일에 흰색 텍스트, 보이지 않는 테두리와 같은 테마 충돌을 허용하지 마십시오.
- 데스크톱 및 모바일 일관성 확인; 가시적 키보드 포커스(
:focus-visible); 로딩, 빈, 비활성화, 오류 및 성공 상태; 모션 감소 동작(prefers-reduced-motion). - 관련 없는 프로젝트에 스타일별 가정을 주입하지 마십시오. 스타일을 결합할 때는 기본 스타일과 차용된 기능을 명시적으로 이름을 지정하십시오.
보편적 안티-슬롭 게이트 (자체 포함)
모든 요소는 그 자리를 얻어야 합니다. 장식보다 콘텐츠가 먼저입니다. 불확실성을 장식하지 마십시오. 잔고, 메트릭, 사용자 리뷰, 로고, 승인, 확인/라이브/온라인 상태, 가짜 활동 또는 성공 확인을 만들어 내지 마십시오; 대신 정직한 빈/로딩/오류 상태를 사용하십시오. 데모 데이터는 요청되고 명시적으로 표시된 경우에만 허용됩니다.
장식용 카드-인-카드 레이어를 추가하지 마십시오: 중첩된 표면은 뚜렷한 상호작용 또는 정보 경계를 나타내야 합니다. 자동 생성된 3-기능 그리드, 4-통계 대시보드, 가짜 히어로 주장, 목적 없는 차트, 배지/칩/아이콘 스팸, 관련 없는 장식 아트, 뷰포트를 채우기 위한 무작위 루프를 피하십시오. 타이포그래피, 간격, 정렬 및 구분선으로 그룹화하는 것을 선호하십시오. 동등한 동료는 의도적인 시각적 균형이 필요합니다.
안티-슬롭 카피라이팅: 일반적인 "잠재력 발휘", "미래 경험", "워크플로 강화", "완벽한" 주장 또는 번역된 동의어는 사용하지 마십시오. 제목은 실제 콘텐츠를 전달해야 하고, CTA는 작업 이름을 지정해야 하며, 빈/오류/성공 텍스트는 실제 상태와 다음 단계를 설명해야 합니다. 가짜 긴급성, 조작된 수치, 모호한 AI 과장, 불필요한 이모지, 접근할 수 없는 전체 대문자 벽을 피하십시오. 진실을 바꾸지 않고 이 스타일과 사용자 언어에 맞게 표현을 조정하십시오.
테마 및 모드 대비 무결성: 사용자가 다크 모드 또는 라이트 모드를 요청하거나(테마 전환기를 구축할 때) 배경과 전경 색상은 모든 표면, 텍스트, 테두리, 입력 및 의미 배지에서 동기화된 쌍으로 전환되어야 합니다. 검은색 배경에 검은색 텍스트, 흰색 배경에 흰색 텍스트 또는 읽을 수 없는 저대비 상태 알약을 남겨두지 마십시오. 모든 상태는 WCAG AA 대비(본문/일반 텍스트의 경우 최소 4.5:1, 큰 제목과 대화형 경계의 경우 3:1)를 충족해야 합니다.
반응형 및 모션: 모바일을 의도적으로 구성하고, 긴 레이블, 포커스 상태 및 접근 가능한 대비를 확인하십시오; 유행 레이아웃에 맞추기 위해 텍스트를 자르지 마십시오. 기본적으로 정적이며; 의미 있는 상호작용에 모션을 사용하고, 모션 감소 선호도를 존중하며, 실제 상태 없이 바운스/플로팅/맥동 장식을 피하십시오.
중요/높은 발견 사항 차단 완료: 조작된 상태/데이터, 끊어진 작업, 접근할 수 없는/잘린 컨트롤, 오해의 소지가 있는 카피, 테마 대비 충돌 또는 심각한 모바일 실패는 수정되어야 합니다. 실제로 확인된 것을 보고하십시오; 실행되지 않은 테스트를 주장하지 마십시오.
미학 거부권이 아님: 표현적인 색상, 그림자, 그라데이션, 카드 레이아웃 또는 장식적 처리는 선택된 미학의 의도적인 부분이고 사용성 검사를 통과하는 경우 합법적입니다. 조용히 미니멀리즘을 강요하지 마십시오.
안티-슬롭: 스타일별
선별된 구성, 자동 생성된 카드 그리드가 아님.
- 거부: 동일한 카드의 균일한 그리드, 카드 내 중첩 카드, 단위가 없는 가짜 메트릭, 명확한 의미가 없는 플레이스홀더 아이콘, CSS 그리드 균형을 위해 추가된 빈 타일, 텍스트가 타일 표면에서 읽을 수 없는 다크/라이트 모드 색상 충돌.
- 대신: 비대칭 가중치와 스캔 가능한 제목을 사용하여 각 타일을 실제 뚜렷한 기능이나 사용자 작업에 맞게 디자인하십시오.
- 카피 확인: 모든 타일 제목은 실제 기능적 콘텐츠를 전달해야 합니다.
귀속
이 스타일 팩은 Taste Engine 시스템의 일부입니다. 다른 스킬 또는 에이전트에 포함시키는 경우 이 출처를 명시하십시오.