kennedys0/taste-style-brutalism

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

스타일 팩: 브루탈리즘

ID: brutalism
시그니처: 날것의 구조적 정직함, 노출된 레이아웃 비계, 타협 없는 단색 대비, 제로 장식 위장.

이것은 의무 기본값이 아닌 스타일 팩입니다. 명시적 선택 또는 확인된 프로젝트 스타일이 적용된 경우에만 로드하세요. 프로젝트 지침은 개별 선택을 재정의할 수 있습니다. 접근성, 유용성 및 브랜드 제약 조건을 유지하세요. 폰트는 제안 사항이지 필수 종속성이 아닙니다. 혼란스럽고 깨진 레이아웃과 임의의 글꼴 크기는 건축적 브루탈리즘으로 간주되지 않습니다.

적합성 / 트레이드오프

• 잘 작동하는 경우: 아방가르드 포트폴리오, 활동가 플랫폼, 건축 아카이브, 독립 출판, 예술/문화 기관, 타협 없는 구조적 진정성을 추구하는 개발자 도구.
• 주의해야 할 경우: 장식적 친숙함과 부드러운 미학이 초기 사용자 거부감을 줄이는 기존의 대중 시장 소비자 애플리케이션.
• 참고 방향:
  • 건축적 베통 브뤼(Béton Brut): 날것의 콘크리트 회색(#E8E8E8 ~ #DCDCDC), 순수한 stark 검정 선(#000000), 노출된 구조적 그리드 분할, 고정폭 건축 메타데이터.
  • Stark 단색 비계(Scaffolding): 순수한 흰색 배경(#FFFFFF)에 무거운 검정 테두리(2.5px solid #000000), stark 검정 블록 액션, 제로 장식.

브루탈리스트 자재 충실도 게이트 - 필수

페이지를 브루탈리스트로 완료했다고 판단하기 전에, 열리는 뷰포트가 원시적이고 정직한 구조적 구성으로 명확히 읽혀야 합니다. 사용자가 이 스타일을 선택했다면, 기본값을 적용하거나 혼란스러운 중첩 텍스트만 제공하는 일반적인 사이트는 **실패(FAIL)**입니다.

성공적인 브루탈리스트 구현은 다음 모든 사항을 보여줍니다:

1. 노출된 구조적 비계(Exposed Structural Scaffolding): 그리드 선, 섹션 구분선, 콘텐츠 컨테이너는 보이는 실선 검정 테두리(2px–3px solid #000000)로 형성되어 웹페이지의 구조적 골격을 드러냅니다.
2. 제로 장식 위장(Zero Cosmetic Camouflage): 부드러운 흐림 그림자, 광택 반사, 둥근 버블 모서리, 반투명 유리 흐림 효과가 전혀 없습니다. 표면은 평평하고 불투명하며, 직접적이고 당당합니다.
3. 초-규율 정렬(Hyper-Disciplined Alignment): 원자재의 정직함에도 불구하고 정렬은 면도날처럼 날카롭습니다. 열, 테두리, 행이 완벽하게 맞물리며 산만한 흔들림이 없습니다.
4. Stark 고대비 팔레트(Stark High-Contrast Palette): 타협 없는 흑백 또는 흑색-콘크리트 단색 대비로 WCAG AAA(7:1+)를 충족합니다. 색상은 오직 작동 경고 신호(순수 빨강 #FF0000 또는 날것의 경고 노랑 #FFD700)로만 사용됩니다.
5. 즉각적인 상호작용 상태 전환(Immediate Interactive State Transitions): 버튼 및 상호작용 요소는 :hover 및 :active 시 즉시 전환됩니다(예: 흑백에서 백흑으로 즉시 색상 반전). 지연된 이징이나 인위적인 스프링 물리 효과가 없습니다.

첫 뷰포트 테스트: 데스크톱 스크린샷에서, 페이지 제목을 읽지 않고 노출된 구조적 테두리 그리드, 평평하고 장식 없는 평면, stark 단색 권위를 식별하세요. 둥근 카드나 부드러운 그림자가 포함되어 있다면 즉시 장식 위장을 제거하세요.

명시적 브루탈리스트 구조적 예외 - 노출된 그리드 테두리 필수

브루탈리즘 특화 재정의: 과도한 테두리 또는 거친 대비에 대한 범용 안티-슬롭 경고는 여기서 두꺼운 검정 구분선(2px–3px solid)이나 노출된 구조적 비계를 금지하는 것으로 해석되어서는 안 됩니다. 건축적 브루탈리즘에서 구조적 접합부와 정직한 재료는 축하받으며, 미용 페인트 뒤에 숨겨지지 않습니다.

• 허용되는 구조적 처리: 보이는 2px–3px 구조적 테두리, 날것의 직사각형 컨테이너, 고대비 고정폭 메타데이터, 즉각적인 색상 반전 상태.
• 안티-슬롭 경계: 본문 단락을 겹치게 하거나, 읽을 수 없는 네온 충돌 색상을 사용하거나, 버튼을 찾을 수 없게 만들어 의도적으로 접근성을 망가뜨리지 마세요. 진정한 브루탈리즘은 무작위로 깨진 것이 아니라 초-기능적입니다.
• 안티-슬롭 해석: 브루탈리스트 레이아웃을 구조적 무결성, 기능적 유용성 및 가독성 기준으로 평가하고, 날카로운 모서리를 부드럽게 하려고 하지 마세요. 일반적인 부드러움 휴리스틱을 만족시키기 위해 구조적 테두리를 제거하는 것은 디자인 퇴보입니다.

타이포그래피 및 타자기 스타일

굽히지 않는, 헤비급 그로테스크 산세리프 또는 기술적 고정폭: Arial, Helvetica, IBM Plex Sans, IBM Plex Mono, 또는 시스템 산세리프. 제목: 데스크톱 44–72 px / 모바일 30–44 px (두께 800–900, 좁은 줄 간격 1.05–1.15). 본문 텍스트: 16–18 px (두께 400, 줄 간격 1.5). 메타데이터, 타임스탬프, 섹션 인덱스에는 고정폭.

색상 방향

• 라이트 모드 (Stark 종이):
  • 캔버스 베이스: Stark 종이 흰색(#FFFFFF) 또는 건축 콘크리트(#E5E5E5).
  • 구조적 잉크 / 테두리: 순수 검정(#000000).
  • 표면 블록: 고대비 단색 채우기(#000000 또는 #FFFFFF).
• 다크 모드 (Pitch 반전):
  • 캔버스 베이스: Stark 피치 검정(#000000).
  • 구조적 잉크 / 테두리: 순수 stark 흰색(#FFFFFF).
  • 표면 블록: 고대비 단색 어두운 채우기(#000000 또는 #121212).
• 운영 신호 악센트 (단일 색상만): 신호 빨강(#FF0000 / #FF3333) 또는 경고 호박(#FFCC00).
• 테마 반전 규칙: 브루탈리즘에서 다크/라이트 모드는 권위적인 극성 반전입니다. 다크 모드에서 캔버스는 #000000, 텍스트/테두리는 #FFFFFF입니다. 버튼은 호버 시 깔끔하게 반전됩니다(라이트: 흰색 버튼이 검정 채우기 + 흰색 텍스트로 반전; 다크: 검정 버튼이 흰색 채우기 + 검정 텍스트로 반전). 검정 배경에 검정 텍스트 또는 흰색 배경에 흰색 텍스트는 엄격히 금지됩니다.

레이아웃 및 기하학

모서리는 엄격히 사각형입니다(border-radius: 0px). 구조적 테두리: 2px–3px solid #000000. 콘텐츠 블록은 서로 맞대어 붙거나 16px/24px 모듈식 간격을 유지합니다.

표면, 깊이, 질감

표면은 100% 평평하고, 불투명하며, 구조적입니다. 그림자 제로. 그라데이션 제로. 깊이는 순전히 검정 블록을 흰색 프레임 위에 겹치고 전경색과 배경색을 즉시 반전시켜서만 만들어집니다.

컴포넌트 해부학 및 상호작용

• 브루탈리스트 버튼: 두꺼운 검정 테두리(2px solid #000000), 흰색 배경, 굵은 대문자 텍스트; 호버/활성화 시 즉시 단색 검정 배경과 흰색 텍스트로 반전.
• 구조적 패널: 위/아래에 두꺼운 테두리가 있는 직사각형 컨테이너; 내부 섹션 사이의 구분선.
• 메타데이터 태그: 대괄호로 묶인 고정폭 태그: [DOC_REF: 4092].
• 폼 컨트롤: 장식 없는 입력 필드, 두꺼운 검정 테두리와 고대비 단색 검정 포커스 링(outline: 3px solid #000000; outline-offset: 2px;).

모션

기본값은 즉시 상태 전환(0ms) 또는 매우 짧은 선형 전환(60–100ms). 바운스, 이징 곡선, 패럴랙스, 장식적 전환 없음.

선택적 Anime.js v4 레시피

• 모션 결정: 기본값은 즉시 상태 전환; 진정한 브루탈리즘에는 일반적으로 Anime.js가 불필요.
• 시작 지속 시간: 0ms (즉시); 특정 기능적 기계식 셔터가 요청된 경우에만 조정.
• 피해야 할 것: 스프링, 슬라이딩 리빌, 연극적인 스크롤 애니메이션.
• 종속성: 기본적으로 CSS/native. Taste Engine references/motion-engine.md가 있으면 따르고; 독립 실행형 스킬은 위의 모션 감소 및 장식적 루프 금지 원칙을 따름.

UI 라이팅 및 마이크로카피

직접적이고, 사과하지 않으며, 사실에 근거합니다. 예: "INDEX", "DOWNLOAD SPECIFICATION", "TERMINAL ERROR: CONNECTION LOST", "CONFIRM". 수다스러운 대화체나 설득력 있는 마케팅 허풍은 피하세요.

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

토큰	라이트 모드 기본값	다크 모드 기본값
--taste-brutal-bg	#ffffff	#000000
--taste-brutal-ink	#000000	#ffffff
--taste-brutal-surface	#ffffff	#121212
--taste-brutal-border	2.5px solid #000000	2.5px solid #ffffff
--taste-brutal-radius	0px	0px
--taste-brutal-signal	#ff0000	#ff3333
--taste-brutal-font-heading	'Arial Black', Arial, Helvetica, sans-serif	'Arial Black', Arial, Helvetica, sans-serif
--taste-brutal-font-body	Arial, Helvetica, sans-serif	Arial, Helvetica, sans-serif
--taste-brutal-font-mono	'IBM Plex Mono', monospace	'IBM Plex Mono', monospace
--taste-brutal-motion-duration	0ms	0ms

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

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

공개-facing 포트폴리오/랜딩/홈페이지에 히어로가 있을 때: 한 화면 분량의 헤더+히어로 구성을 사용하세요. 기본 높이는 min-height: 100svh와 100vh 폴백을 사용하고, 헤더가 일반 흐름(normal flow)에 있을 때만 실제 헤더를 빼세요; 접근성과 짧은 모바일 화면을 위해 히어로가 확장되도록 두세요. 비공개 대시보드나 다른 작업 화면에는 적용하지 마세요; 사용자 직접 재정의가 우선합니다. 스타일별 방향: 첫 뷰포트를 사과하지 않는 건축적 모놀리스로 구성하세요: 구조적 비계 안에 갇힌 거대한 디스플레이 제목, stark 검정 클릭 유도 문구 블록, 제로 장식 충전재. 라우터에 references/hero-layout.md가 있으면 참조하세요. 독립 실행형 사용도 동일한 반응형 및 안티-슬롭 원칙을 따릅니다.

스타일별 품질 게이트

• 할 것: stark 단색 대비 확인; 2–3px 구조적 테두리가 실선인지 확인; 날카로운 0px 사각형 모서리 확인; 다크/라이트 모드 극성 반전 확인(텍스트와 배경이 절대 충돌하지 않도록, 검정 위 검정 또는 흰색 위 흰색 텍스트 금지); 신호 악센트가 엄격히 단일로 유지되는지 확인.
• 하지 말 것: 둥근 모서리, 부드러운 드롭 그림자, 또는 부드러운 색상 그라데이션을 추가하지 마세요; 장식용 충전재 배지나 수다스러운 마케팅 카피를 피하세요; 어두운 캔버스로 전환할 때 검정 잉크나 테두리를 남기지 마세요.
• 데스크톱과 모바일 일관성 확인; 보이는 키보드 포커스(:focus-visible); 로딩, 빈, 비활성화, 오류 및 성공 상태; 모션 감소 동작(prefers-reduced-motion).
• 관련 없는 프로젝트에 스타일별 가정을 주입하지 마세요. 스타일을 결합할 때는 기본 스타일과 차용한 기능을 명시적으로 명명하세요.

범용 안티-슬롭 게이트 (자체 포함)

모든 요소는 그 자리를 얻어야 합니다. 장식보다 콘텐츠. 불확실성을 장식하지 마세요. 균형, 지표, 사용자 평가, 사용자, 로고, 승인, 확인됨/라이브/온라인 상태, 가짜 활동 또는 성공 확인을 만들어내지 마세요; 대신 정직한 빈/로딩/오류 상태를 사용하세요. 데모 데이터는 요청되고 명시적으로 레이블이 지정된 경우에만 허용됩니다.

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

안티-슬롭 카피라이팅: 일반적인 "잠재력을 깨우세요", "미래를 경험하세요", "워크플로우를 강화하세요", "매끄러운" 주장 또는 번역된 동등 표현은 금지. 제목은 실제 콘텐츠를 전달해야 하고, CTA는 행동을 명명해야 하며, 빈/오류/성공 텍스트는 실제 상태와 다음 단계를 설명해야 합니다. 가짜 긴박감, 조작된 숫자, 모호한 AI 과대광고, 무분별한 이모지, 접근 불가능한 전체 대문자 벽을 피하세요. 진실을 바꾸지 않고 이 스타일과 사용자 언어에 맞게 표현을 조정하세요.

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

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

치명적/높은 발견 사항 블록 완료: 조작된 상태/데이터, 깨진 액션, 접근 불가능/잘린 컨트롤, 오해의 소지가 있는 카피, 테마 대비 충돌 또는 심각한 모바일 실패는 반드시 수정해야 합니다. 실제로 확인된 것을 보고하고, 실행되지 않은 테스트를 주장하지 마세요.

미학 거부권이 아님: 표현적인 색상, 그림자, 그라데이션, 카드 레이아웃 또는 장식적 처리는 선택된 미학의 의도적인 일부이고 사용성 검사를 통과한다면 합법적입니다. 조용히 미니멀리즘을 강요하지 마세요.

안티-슬롭: 스타일별

구조적 정직성, 미학적 장난기가 아닙니다.

• 거부: 둥근 알약 모양, 파스텔 악센트, 장식적 그림자 흐림, 장난기 많은 일러스트레이션, 일반 템플릿 카드, 테마 충돌(예: 어두운 브루탈리스트 캔버스에 검정 텍스트가 남아 있는 경우).
• 대신: 무거운 구조적 테두리로 레이아웃 그리드를 노출하고, stark 타입 계층, 즉각적인 상태 전환, 모호하지 않은 대비를 사용하세요.
• 카피 확인: UI 라이팅은 마케팅 전문 용어 없이 간결하고, 직접적이며, 기능적이어야 합니다.
• 감사: 이 스타일의 품질 게이트에 추가로 범용 안티-슬롭 목적, 진실성, 중첩 표면, 카피라이팅, 반응성, 접근성 및 모션 검사를 실행하세요. 의도적이고 접근 가능한 기능