이 스킬은 사용자가 명시적으로 선택하거나 확인된 프로젝트 설정이 지정한 경우에만 사용하십시오. 설명되지 않은 새로운 UI 요청의 경우 사용자의 취향을 여기서 결정하는 대신 스타일 선택기(예: taste-style)를 사용하십시오. 기존 브랜드, 접근성 및 사용자 재정의는 아래 모든 예시보다 우선합니다. 다음 스타일 가이드는 스타일 선택 전에 UI 코딩을 시작할 수 있는 권한이 아닙니다.
스타일 팩: 스큐어모피즘
ID: skeuomorphism
시그니처: 디지털 컨트롤이 물리적 물체, 산업 기계, 아날로그 하드웨어의 촉각적 디자인 언어를 차용합니다.
이는 스타일 팩이지, 필수 기본값이 아닙니다. 명시적인 선택 또는 확인된 프로젝트 스타일 이후에만 로드하십시오. 프로젝트 지침은 개별 선택을 재정의할 수 있습니다. 접근성, 유용성 및 브랜드 제약 조건을 유지하십시오. 글꼴은 제안 사항이며 필수 종속성이 아닙니다. 미묘한 그라데이션이 있는 플랫 카드는 스큐어모피즘으로 간주되지 않습니다.
적합성 / 트레이드오프
- 잘 작동하는 경우: 음악 제작 및 신디사이저 소프트웨어, 오디오 장비 도구, 특수 시뮬레이터, 촉각적 대시보드 위젯, 창의적인 디지털 악기, 재미있는 촉각적 경험.
- 주의해야 할 경우: 복잡한 트랜잭션 데이터 테이블이나 모바일 엔터프라이즈 폼에서 화려한 물리적 하드웨어 텍스처가 시각적 혼란을 일으키는 경우.
- 참고 방향:
- 브러시드 인더스트리얼 알루미늄 / 스튜디오 하드웨어: 가공된 은색 또는 건메탈 샤시에 방사형 금속 반사, 널링(knurled) 다이얼, 움푹 들어간 표시기 웰, 선명한 기계식 토글 스위치.
- 프리시전 매트 인스트루먼트: 짙은 흑연 / 무광 복합 베이스에 새겨진 흰색 판독 타이포그래피, LED 보석 상태 표시기, 물리적 로커 스위치.
스큐어모픽 재질 충실도 게이트 — 필수
스큐어모픽 페이지가 완료되었다고 판단하기 전에, 열리는 뷰포트가 물리적이고 만질 수 있는 기기 또는 하드웨어 인터페이스로 명확하게 읽혀야 합니다. 사용자가 이 스타일을 선택했다면, 표준 둥근 모서리와 단일 그라데이션이 있는 플랫 카드는 CSS 클래스에 skeuo가 포함되어 있더라도 실패입니다.
성공적인 스큐어모픽 구현은 다음 모든 항목을 입증해야 합니다:
- 광원 모델 방향 및 정반사 하이라이트: 표면은 일관된 단일 광원(일반적으로 위에서 아래)을 따릅니다. 위쪽 가장자리는 선명한 1px 정반사 하이라이트(
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35))를 포착하고, 아래쪽 가장자리는 물리적 그림자를 드리웁니다. - 다중 중단 반사 재질 표면: 노브, 페이스플레이트, 로커 스위치는 브러시드 알루미늄, 무광 플라스틱 또는 아노다이즈드 메탈을 시뮬레이션하는 다중 중단 선형 또는 방사형 그라데이션을 사용합니다. 단일 색상 채우기는 실패합니다.
- 음각 또는 움푹 들어간 극성: 텍스트 디스플레이, 슬라이더, 미터 웰은 깊은 내부 그림자(
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6))를 사용하여 샤시 안으로 시각적으로 움푹 들어가게 만들고, 움직이는 컨트롤과 이를 담는 컨테이너를 명확히 구분합니다. - 인터랙션 시 기계적 이동: 버튼은 클릭 시 샤시 안으로 물리적으로 눌려 들어갑니다(
transform: translateY(1.5px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);), 실제 스프링 장착 스위치 메커니즘을 모방합니다. - 읽기 쉬운 아날로그 어포던스: 물리적 다이얼과 슬라이더에는 명확한 디지털 판독값 또는 레이블이 지정된 숫자 눈금 표시가 포함되어 키보드 접근성과 정확한 데이터 입력을 보장합니다.
첫 번째 뷰포트 테스트: 데스크톱 스크린샷에서 페이지 제목을 읽지 않고 물리적 샤시, 정반사 베벨 하이라이트, 움푹 들어간 웰, 촉각적 하드웨어 컨트롤을 식별하십시오. 순수하게 디지털적이고 평평해 보인다면 그라데이션 반사와 베벨 하이라이트를 강화하십시오.
명시적 스큐어모픽 재질 예외 — 하드웨어 반사 허용
스큐어모피즘 특정 재정의: 장식적 그라데이션, 텍스처 또는 그림자에 대한 보편적인 안티-슬롭 주의는 여기서 다중 중단 재질 그라데이션, 금속 반사, 베벨 처리된 테두리 또는 물리적 이동을 금지하는 것으로 해석되어서는 안 됩니다. 이는 재질을 가능하게 하는 속성이며, 기계적 어포던스를 전달하는 데 필수적입니다.
- 허용되는 재질 처리: 다중 중단 금속 선형/방사형 그라데이션, 1px 하이라이트 베벨, 움푹 들어간 웰 채널, 널링(knurled) 노브 테두리, 보석 LED 상태 표시등.
- 안티-슬롭 경계: 모든 기계적 은유는 실제 작동하는 동작에 대응해야 합니다. 가짜 나사, 회전하지 않는 장식용 노브, 조작된 측정값을 표시하는 정적 미터로 화면을 장식하지 마십시오.
- 안티-슬롭 해석: 촉각적 어포던스, 기능적 유용성 및 가독성으로 스큐어모픽 세부 사항을 평가하고, 그라데이션 색상 중단점 수를 세지 마십시오. 일반적인 플랫 휴리스틱을 충족시키기 위해 물리적 베벨을 제거하는 것은 디자인 퇴행입니다.
타이포그래피 및 타자체
실용적인 기술 산세리프 또는 디스플레이 모노: IBM Plex Sans, DIN Next, Roboto Mono 또는 시스템 산세리프. 컨트롤 레이블: 11–13px 대문자에 자간(letter-spacing: 0.08em); 디스플레이 미터: 고대비 LCD/LED 모노 (16–24px). 어두운 페이스플레이트에 대한 고대비(최소 4.5:1).
색상 방향
- 다크 모드 (아노다이즈드 건메탈 다크 샤시):
- 샤시 베이스: 가공된 슬레이트 / 아노다이즈드 건메탈 그라데이션 (
linear-gradient(180deg, #323741 0%, #262A32 100%)). - 표면 하이라이트: 정반사 흰색 가는 선 (
rgba(255, 255, 255, 0.40)). - 움푹 들어간 인셋 웰: 깊은 캐비티 블랙 (
#141619to#181A1E). - 컨트롤 레이블: 선명한 음각 흰색/은색 타이포그래피 (
#F3F4F6).
- 샤시 베이스: 가공된 슬레이트 / 아노다이즈드 건메탈 그라데이션 (
- 라이트 모드 (브러시드 알루미늄 / 실버 샤시):
- 샤시 베이스: 가공된 알루미늄 / 실버 그라데이션 (
linear-gradient(180deg, #F5F7FA 0%, #E4E7EB 100%)). - 표면 하이라이트: 정반사 흰색 가는 선 (
rgba(255, 255, 255, 0.85)). - 움푹 들어간 인셋 웰: 부드러운 움푹 들어간 슬레이트 캐비티 (
#D1D5DB+ 인셋 그림자). - 컨트롤 레이블: 깊은 음각 차콜 잉크 (
#1F2937or#111827).
- 샤시 베이스: 가공된 알루미늄 / 실버 그라데이션 (
- 물리적 악센트: 시그널 앰버 (
#FFAE00), 에비에이션 그린 (#10B981), 또는 스튜디오 코발트 (#2563EB). - LED 표시기: 활성 상태의 선명한 광채와 비활성 상태의 어두운 모습이 구분되는 선명한 보석 색상.
- 테마 결합 및 충돌 방지 규칙: 라이트 스큐어모픽 샤시 모드에서 음각 레이블과 컨트롤 텍스트는 반드시 진한 차콜(
#1F2937)로 전환되어야 합니다. 브러시드 실버/알루미늄 샤시에 흰색 레이블을 남기면 보이지 않는 텍스트가 생성되며 엄격히 금지됩니다.
레이아웃 및 기하학
컴포넌트 모양은 물리적 은유(회전 다이얼, 촉각적 푸시 버튼, 로커 스위치, 세그먼트 미터)에 엄격하게 매핑됩니다. 패널은 4–12px 모서리 반경; 노브는 원형 반경. 일반 텍스트 단락에 하드웨어 스킨을 적용하지 마십시오.
표면, 깊이, 텍스처
- 샤시 패널: 다중 중단 선형 그라데이션 (
linear-gradient(180deg, #323741 0%, #262A32 100%)) + 1px 상단 하이라이트 및 하단 드롭 그림자. - 물리적 푸시 버튼: 상단 하이라이트가 있는 베벨 테두리, 방사형 버튼 표면, 선명한 활성 눌림 상태.
- 움푹 들어간 웰 / 디스플레이:
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.15);
컴포넌트 해부 및 인터랙션
- 촉각적 푸시 버튼: 가공된 알루미늄 마감, 흰색 음각 레이블, 릴리스 시 기계적 스프링백.
- 로커 / 토글 스위치: 활성 측에 가시적인 그림자가 있는 이중 상태 물리적 토글.
- 움푹 들어간 LCD / 데이터 판독: 모노스페이스 값, 미묘한 래스터 그리드, 고대비가 있는 움푹 들어간 화면.
- 회전 다이얼 / 슬라이더: ARIA 슬라이더 의미론과 키보드 화살표 키 지원이 있는 촉각적 위치 표시기.
- LED 상태 표시등: 활성화 시 빛나는 광채(
box-shadow: 0 0 8px currentColor)가 있는 작은 원형 보석 렌즈.
모션
140–200 ms 기계적 응답. 클릭 시 직접적인 1–2px 물리적 눌림. 튀는 만화 같은 오버슈트 금지; 움직임은 무겁고 감쇠된 느낌이어야 합니다.
선택적 Anime.js v4 레시피
- 모션 결정: 감쇠 스프링 또는 선형 기계적 눌림(누를 때); 다이얼의 경우 정밀 회전.
- 시작 지속 시간: 160ms (0 = 즉시); 작업 및 사용자 선호도에 따라 조정.
- 피할 것: 영구 진동, 요청되지 않은 바늘 흔들림, 떠 있는 요소.
- 종속성: 기본적으로 CSS/네이티브. 요청된 인터랙션이 정당화하는 경우에만 Anime.js v4 사용. 가능한 경우 Taste Engine
references/motion-engine.md를 따르고; 독립형 스킬은 위의 reduced-motion 및 no-decorative-loop 원칙을 따릅니다.
UI 작성 및 마이크로카피
기술적이고 정확하며 간결합니다. 예: "Master Output", "Bypass", "Channel 01", "Gain: +3.5 dB". 계기판에서 수다스러운 마케팅 전문 용어를 피하십시오.
스타터 토큰 (제안 사항, 완전한 테마는 아님)
| 토큰 | 다크 샤시 기본값 | 라이트 샤시 기본값 |
|---|---|---|
--taste-skeuo-chassis-bg | linear-gradient(180deg, #323741 0%, #262a32 100%) | linear-gradient(180deg, #f5f7fa 0%, #e4e7eb 100%) |
--taste-skeuo-chassis-border | 1px solid rgba(0, 0, 0, 0.8) | 1px solid rgba(0, 0, 0, 0.15) |
--taste-skeuo-chassis-highlight | inset 0 1px 0 rgba(255, 255, 255, 0.25) | inset 0 1px 0 rgba(255, 255, 255, 0.90) |
--taste-skeuo-text | #f3f4f6 | #1f2937 |
--taste-skeuo-btn-bg | linear-gradient(180deg, #3c424f 0%, #2a2e37 100%) | linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) |
--taste-skeuo-btn-bevel | inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(0, 0, 0, 0.50) | inset 0 1px 0 rgba(255, 255, 255, 0.80), inset 0 -1px 0 rgba(0, 0, 0, 0.20) |
--taste-skeuo-btn-shadow | 0 4px 8px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40) | 0 4px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) |
--taste-skeuo-well-inset | inset 0 3px 6px rgba(0, 0, 0, 0.70), 0 1px 0 rgba(255, 255, 255, 0.12) | inset 0 3px 6px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.80) |
--taste-skeuo-led-active | #10b981 | #059669 |
--taste-skeuo-led-glow | 0 0 10px rgba(16, 185, 129, 0.75) | 0 0 8px rgba(5, 150, 105, 0.45) |
--taste-skeuo-radius-panel | 12px | 12px |
--taste-skeuo-font-mono | IBM Plex Mono, ui-monospace, monospace | IBM Plex Mono, ui-monospace, monospace |
--taste-skeuo-motion-duration | 160ms | 160ms |
토큰은 방향을 나타내며 모든 팔레트/플랫폼에 대해 복사-붙여넣기로 보장되지 않습니다. 프로젝트 수준에서 --taste-skeuo-*를 정의하고, 색상 대비를 확인하며, 리터럴 값을 흩뿌리는 대신 테마 토큰을 통해 조정하십시오.
히어로 구성 (전체 첫 번째 뷰포트)
퍼블릭 포트폴리오/랜딩/홈페이지에 히어로가 있는 경우: 하나의 가시 화면 헤더+히어로 구성을 사용하십시오. 기본 높이는 100vh 폴백과 함께 min-height: 100svh를 기준으로 하고, 헤더가 일반 흐름에 있을 때에만 실제 헤더를 뺍니다; 접근성과 짧은 모바일 화면을 위해 히어로가 확장되도록 하십시오. 비공개 대시보드나 기타 작업 화면에는 적용하지 마십시오; 사용자 직접 재정의가 우선합니다. 스타일별 방향: 첫 번째 뷰포트를 진정한 마스터 컨트롤 콘솔 또는 시그니처 계기판 페이스플레이트로 취급하십시오; 작동 컨트롤과 명확한 기본 CTA를 제공하십시오. 기능하지 않는 나사, 장식용 케이블, 연결되지 않은 아날로그 미터로 캔버스를 어지럽히지 마십시오. 라우터 references/hero-layout.md가 있는 경우 이를 따르십시오. 독립형 사용은 동일한 반응형 및 안티-슬롭 원칙을 따릅니다.
스타일별 품질 게이트
- 해야 할 것: 모든 컨트롤에서 일관된 위에서 아래로의 정반사 하이라이트 확인; 기계적 누름 상태가 부드럽게 눌리는지 확인; 다이얼/슬라이더 옆에 숫자 판독값 제공; 키보드 포커스 테스트; 다크/라이트 모드 전환 확인(샤시, 베벨 하이라이트, 웰, 레이블 타이포그래피가 쌍으로 적응).
- 하지 말아야 할 것: 평범한 다크 테마를 스큐어모픽으로 취급하지 마십시오; 실제 데이터에 연결되지 않은 비기능적 장식 나사나 가짜 아날로그 바늘을 추가하지 마십시오; 어두운 페이스플레이트에서 읽을 수 없는 저대비 텍스트나 실버 라이트 페이스플레이트에서 흰색 레이블을 피하십시오.
- 데스크톱 및 모바일 일관성 확인; 가시적인 키보드 포커스 (
:focus-visible); 로딩, 빈, 비활성화, 오류 및 성공 상태; reduced-motion 동작 (prefers-reduced-motion). - 관련 없는 프로젝트에 스타일별 가정을 주입하지 마십시오. 스타일을 결합할 때는 기본 스타일과 차용한 기능을 명시적으로 명명하십시오.
보편적 안티-슬롭 게이트 (자체 포함)
모든 요소는 그 위치를 정당화해야 합니다. 내용이 장식보다 우선합니다. 불확실성을 장식하지 마십시오. 잔액, 지표, 사용후기, 사용자, 로고, 승인, 확인/라이브/온라인 상태, 가짜 활동 또는 성공 확인을 만들어 내지 마십시오; 대신 정직한 빈/로딩/오류 상태를 사용하십시오. 데모 데이터는 요청되고 명시적으로 레이블이 지정된 경우에만 허용됩니다.
장식적인 카드-속-카드 레이어를 추가하지 마십시오: 중첩된 표면은 별개의 상호작용 또는 정보 경계를 나타내야 합니다. 자동 생성된 3-기능 그리드, 4-통계 대시보드, 가짜 히어로 주장, 목적 없는 차트, 배지/칩/아이콘 스팸, 관련 없는 장식 예술, 뷰포트를 채우기 위한 무작위 루프를 피하십시오. 타이포그래피, 간격, 정렬 및 구분선을 사용하여 그룹화하는 것을 선호하십시오. 동등한 항목은 의도적인 시각적 균형이 필요합니다.
안티-슬롭 카피라이팅: 일반적인 "잠재력 발휘", "미래 경험", "워크플로우 강화", "완벽한" 주장 또는 번역된 동의어는 사용하지 마십시오. 제목은 실제 내용을 전달해야 하고, CTA는 작업 이름을 지정해야 하며, 빈/오류/성공 텍스트는 실제 상태와 다음 단계를 설명해야 합니다. 가짜 긴박감, 만들어진 숫자, 모호한 AI 과장, 불필요한 이모지, 접근 불가능한 전체 대문자 벽을 피하십시오. 진실을 변경하지 않고 문구를 이 스타일과 사용자 언어에 맞게 조정하십시오.
테마 및 모드 대비 무결성: 사용자가 다크 모드 또는 라이트 모드를 요청하거나(테마 전환기 구축), 배경 및 전경 색상은 모든 표면, 텍스트, 테두리, 입력, 의미론적 배지에서 동기화된 쌍으로 전환되어야 합니다. 어두운 배경에 검은색 텍스트, 흰색 배경에 흰색 텍스트 또는 읽을 수 없는 저대비 상태 표시를 남기지 마십시오. 모든 상태는 WCAG AA 대비(본문/일반 텍스트의 경우 최소 4.5:1, 큰 제목 및 대화형 경계의 경우 3:1)를 충족해야 합니다.
반응형 및 모션: 모바일을 의도적으로 구성하고, 긴 레이블 확인, 초점 초점 영역을 확인하고, 터치 대상이 충분히 큰지 확인하고, 모션 선호도를 존중하십시오.
버전 기록
- v1 — 초기 스타일 팩 스큐어모피즘