이 스킬은 사용자가 명시적으로 선택하거나 확인된 프로젝트 구성에서 지정한 경우에만 사용하세요. 설명되지 않은 새로운 UI 요청의 경우, 여기서 사용자의 취향을 결정하는 대신 스타일 선택기(예: )를 사용하세요. 기존 브랜드, 접근성 및 사용자 재정의는 아래 예시보다 우선합니다. 다음 스타일 가이드는 스타일 선택 전에 UI 코딩을 시작할 수 있는 권한이 아닙니다.
스타일 팩: 클레이모피즘 (Claymorphism)
ID: claymorphism
시그니처: 성형된, 촉각적인, 조각된 표면. 이중 내부 그림자로 입체감을 만들고, 부드러운 주변 드롭 섀도우와 친근한 물리적 존재감을 더합니다.
이는 스타일 팩이지, 필수 기본값이 아닙니다. 명시적 선택 또는 확인된 프로젝트 스타일 후에만 로드하세요. 프로젝트 지침이 개별 선택을 재정의할 수 있습니다. 접근성, 유용성 및 브랜드 제약 조건을 유지하세요. 폰트는 제안 사항이며 필수 종속성이 아닙니다. 둥근 모서리와 1px 테두리를 가진 플랫 카드는 클레이모피즘으로 간주되지 않습니다.
적합성 및 트레이드오프
- 잘 맞는 경우: 장난기 있는 소비자 경험, 창의적인 도구, 개인 대시보드, 인터랙티브 위젯, 촉각적 웹 앱, 현대적인 교육 또는 디자인 플랫폼.
- 주의해야 할 경우: 매우 조밀한 표 형식 데이터, 긴 법률 문서 읽기, 또는 과도한 그림자 계산이 성능을 저하시킬 수 있는 저전력 기기.
- 참고 방향:
- 포화된 프라이머리 클레이: 풍부하고 생생한 바이올렛/퍼플(
#813FFC) 성형 표면. 밝은 흰색 내부 하이라이트가 왼쪽 위에, 깊은 색조 형태 그림자가 오른쪽 아래에 있으며, 선명한 타이포그래피. - 라이트 포슬린 클레이: 부드러운 오프화이트(
#ECEBF5) 성형 표면. 순수한 흰색 왼쪽 위 내부 하이라이트, 부드러운 회색-라벤더 오른쪽 아래 형태 그림자, 진한 슬레이트-퍼플 타이포그래피. - 함몰된 인셋 웰(Recessed Input Wells): 선명한 흰색 릴리프 테두리(
3px solid rgba(255, 255, 255, 0.85))로 둘러싸인 함몰된 폼 입력 필드. 반전된 내부 그림자와 접근 가능한 플레이스홀더 레이블.
- 포화된 프라이머리 클레이: 풍부하고 생생한 바이올렛/퍼플(
클레이 재료 충실도 관문 — 필수
클레이모피즘 페이지를 완료라고 부르기 전에, 열리는 뷰포트가 조각된 클레이 구성으로 명확히 읽혀야 합니다. 사용자가 이 스타일을 선택했다면, 둥근 모서리와 1px 테두리를 가진 플랫 카드는 실패입니다. CSS 변수 이름이 clay라 하더라도 마찬가지입니다.
성공적인 클레이모피즘 구현은 다음 모두를 입증해야 합니다:
- 입체적 이중 내부 그림자 (하이라이트 + 섀도우): 클레이 표면은 반드시 반대편 이중 내부 그림자를 가져야 합니다. 입사광을 시뮬레이션하는 왼쪽 위 내부 하이라이트(
inset 3px 4px 6px rgba(255,255,255,...))와 입체 두께를 시뮬레이션하는 오른쪽 아래 내부 형태 그림자(inset -4px -6px 8px rgba(어두운-색조,...))입니다. 단일 플랫 하이라이트 라인이나 일반적인 베벨은 실패입니다. - 부드러운 착색 주변 드롭 섀도우: 표면은 부드럽고 방향성이 있으며 착색된 드롭 섀도우(
8px 16px 24px rgba(..., 0.20–0.35))를 드리워서, 단단한 검은 드롭 섀도우 대신, 착색된 캔버스 위에 가단성 있는 재료가 떠 있거나 놓여 있는 느낌을 줍니다. - 푹신한 스퀴클 및 필 지오메트리: 넉넉한 곡률(카드
24px–32px, 버튼20px–26px, 필 또는 원9999px, 스퀴클 체크박스14px). 날카로운 90도 모서리는 실패입니다. - 함몰 대 돌출 극성: 상호작용 가능한 컴포넌트(버튼, 배지, 토글 썸, 카드)는 바깥쪽으로 돌출됩니다. 컨테이너 웰(입력 필드, 비활성 스위치 채널)은 반전된 내부 그림자와 선택적 흰색 릴리프 테두리로 안쪽으로 함몰됩니다.
- 상호작용 시 촉각적 압축: 호버, 포커스 및 클릭 시 컨트롤은 약간의 축소(
scale(0.97–0.98)또는translateY(1–2px))와 조여진 그림자로 물리적으로 반응하여, 손가락으로 누르는 실제 가단성 있는 클레이처럼 느껴져야 합니다.
첫 뷰포트 테스트: 데스크톱 스크린샷에서 페이지 제목을 읽지 않고 돌출된 조각 버튼, 이중 내부 하이라이트/섀도우, 함몰된 입력 웰을 식별하세요. 플랫하거나 단순히 둥글게 보인다면, 콘텐츠를 더 추가하기 전에 그림자 토큰을 수정하세요.
카드 개수 규칙이 아닙니다: 전체 화면을 중첩된 풍선 카드로 덮을 필요 없이, 초점을 맞춘 컴포넌트 쇼케이스(예: 기본 "제출" 필, 보조 "돌아가기" 필, 원형 액션 버튼, 촉각적 토글 스위치, 체크박스 및 함몰된 입력 필드)만으로도 진정한 재료 충실도를 확립하기에 충분합니다.
명시적 클레이 깊이 예외 — 클레이는 입체적 깊이를 가질 수 있습니다
클레이모피즘 특화 재정의: 과도한 그림자, 광택 효과 또는 네모픽 블러에 대한 보편적인 안티-슬롭 주의사항은 여기서 이중 내부 그림자, 부드러운 주변 드롭 섀도우 또는 흰색 릴리프 외곽선을 금지하는 것으로 해석되어서는 안 됩니다. 이들은 재료를 가능하게 하는 속성이며, 촉각적 물리적 존재감에 필수적입니다.
- 허용되는 재료 처리: 이중 내부 그림자(반대 광/암), 부드러운 다중 정지 착색 주변 그림자, 흰색 릴리프 테두리(
3px solid rgba(255,255,255,0.85)), 촉각적 프레스 변환(scale(0.97)). 이는 필수적인 촉각적 깊이와 물리적 존재감을 만듭니다. 정적 CSS는 애니메이션 라이브러리 오버헤드 없이 완전한 재료 충실도를 제공합니다. - 색상 대비 규율: 포화된 프라이머리 클레이 버튼은 순수한 흰색 텍스트(
#FFFFFF)가 필요하며 최소 4.5:1 대비를 유지해야 합니다. 라이트 포슬린 클레이 표면은 진한 어두운 텍스트(#28233D또는#1D1735)가 필요합니다. 함몰된 웰은 명확하고 접근 가능한 플레이스홀더 텍스트(#7C739E또는 더 어두운)가 필요합니다. - 안티-슬롭 해석: 클레이 깊이는 재료 목적, 물리적 일관성 및 가독성에 따라 평가해야 하며, CSS 그림자 선언 개수로 평가하지 마십시오. 일반적인 최소 휴리스틱을 만족시키기 위해 이중 내부 그림자를 제거하는 것은 디자인 퇴보입니다.
시작 구현은 examples/claymorphism/sculpted-surfaces.css를, 시각적 승인 기준은 tests/claymorphism-visual.md를 참조하세요.
타이포그래피 및 타자체
친근한 휴머니스트 또는 기하학적 산스체: Manrope, Nunito Sans 또는 시스템 산스체. 레이블에 가중치 500/600/700, 제목에 700/800. 스케일 14/16/20/26/34 px; 줄 높이 1.45–1.6. 문장 케이스와 간결하고 인간적인 레이블을 선호합니다. 입체적 표면 위에서 허약해 보이는 얇은 디스플레이 폰트는 피하세요.
색상 방향
응집력 있는 파스텔 및 포화 팔레트를 선택하세요:
- 라이트 모드 (라이트 포슬린 클레이):
- 캔버스 베이스: 부드러운 파스텔 라일락/라벤더(
#D7D1F1또는--taste-clay-bg: #d7d1f1). - 프라이머리 포화 클레이: 생생한 바이올렛/퍼플(
#813FFC)과 흰색 텍스트(#FFFFFF), 밝은 왼쪽 위 흰색 하이라이트, 깊은 보라색 오른쪽 아래 형태 그림자. - 세컨더리 라이트 클레이: 부드러운 오프화이트 포슬린(
#ECEBF5/#F0EFF7)과 진한 잉크(#28233D), 밝은 왼쪽 위 하이라이트, 부드러운 라벤더 오른쪽 아래 형태 그림자. - 함몰된 입력 웰: 캔버스 색조 웰(
#D7D1F1)이 선명한 흰색 릴리프 테두리(3px solid rgba(255, 255, 255, 0.85))로 둘러싸여 있고, 함몰된 내부 그림자, 가독성 있는 플레이스홀더(#8F87B0).
- 캔버스 베이스: 부드러운 파스텔 라일락/라벤더(
- 다크 모드 (딥 나이트 조각 클레이):
- 캔버스 베이스: 무드 있는 흑요석-인디고(
#161326). - 프라이머리 포화 클레이: 생생한 바이올렛/퍼플(
#813FFC)과 순수한 흰색 텍스트(#FFFFFF), 왼쪽 위 하이라이트, 어두운 보라색 형태 그림자. - 세컨더리 클레이 표면: 풍부한 조각 자두/슬레이트(
#26203D)와 선명한 옅은 포슬린 텍스트(#F3F0FA), 부드러운 반투명 왼쪽 위 하이라이트(rgba(255, 255, 255, 0.15)), 깊고 검은 오른쪽 아래 형태 그림자(rgba(10, 5, 25, 0.60)). - 함몰된 입력 웰: 깊은 함몰 웰(
#1E1A33)이 미묘한 릴리프 테두리(3px solid rgba(255, 255, 255, 0.20))로 둘러싸여 있고, 함몰된 내부 그림자, 가독성 있는 플레이스홀더(#A49BBF).
- 캔버스 베이스: 무드 있는 흑요석-인디고(
- 테마 대비 결합: 다크 모드로 전환할 때, 세컨더리 클레이 표면의 텍스트는 반드시 진한 잉크(
#28233D)에서 옅은 포슬린(#F3F0FA)으로 전환되어야 합니다. 진한 잉크 텍스트를 어두운 클레이 위에 남겨두면 즉시 대비 실패가 발생합니다. 포화 프라이머리 버튼은 두 모드 모두에서 순수한 흰색 텍스트(#FFFFFF)와 4.5:1+ 대비를 유지합니다.
레이아웃 및 지오메트리
카드 반경 24–32 px, 버튼 20–26 px, 전체 필 또는 원 9999px, 스퀴클 배지 및 체크박스 14–16 px. 일관된 8 px 리듬과 편안한 거터를 유지하세요. 의미론적 상호작용이 없는 임의의 원은 피하세요.
표면, 깊이, 텍스처
표면은 물리적 무광택 클레이로 성형된 느낌이어야 합니다:
- 프라이머리 클레이 (돌출):
box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40), 8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20); - 라이트 포슬린 클레이 (돌출):
box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35), 8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12); - 함몰된 웰 (함몰):
box-shadow: inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70);border: 3px solid rgba(255, 255, 255, 0.85);로 둘러싸임.
컴포넌트 해부학 및 상호작용
- 프라이머리 버튼 ("제출 >"): 포화된 보라색 필, 흰색 굵은 텍스트, 방향성 쉐브론, 클릭 시 촉각적 압축.
- 세컨더리 버튼 ("돌아가기 ↶"): 라이트 포슬린 필, 진한 잉크 텍스트, 뒤로 가기 화살표 아이콘, 클릭 시 촉각적 압축.
- 원형 액션 버튼: 50% 테두리 반경 원형 버튼 (예: 일시정지
❚❚), 포화 클레이, 중앙 아이콘. - 토글 스위치: 필 모양 트랙과 부드러운 클레이 썸 구; 라이트 트랙/보라색 썸과 보라색 트랙/흰색 썸 사이를 토글합니다.
- 체크박스: 이중 내부 그림자가 있는 스퀴클 컨테이너와 생생한 보라색 체크 표시(
✓). - 입력 필드: 왼쪽 아이콘이 있는 함몰된 웰, 가독성 있는 플레이스홀더, 흰색 릴리프 테두리.
모션
140–200 ms 부드러운 이즈-아웃. 프레스 시 촉각적 압축(scale(0.97) 또는 translateY(2px))과 그림자 조임. 바운스, 오버슈트, 또는 연속적인 떠다니는 루프는 절대 안 됩니다.
선택적 Anime.js v4 레시피
- 모션 결정: 1–2% 압축과 짧은 복귀가 있는 누른 버튼; 기존 조각 음영 유지.
- 시작 지속 시간: 180ms (0 = 즉시); 작업 및 사용자 선호도에 따라 조정.
- 피해야 할 것: 바운스, 오버슈트, 떠다니는 루프.
- 종속성: 기본적으로 CSS/네이티브. Anime.js v4는 요청된 상호작용이 정당화하는 경우에만 사용하세요. 가능할 때 Taste Engine
references/motion-engine.md를 따르세요; 독립 실행형 스킬은 위의 감소된 모션 및 장식적 루프 금지 원칙을 따릅니다.
UI 작성 및 마이크로카피
따뜻하고 구체적. 예: "제출", "돌아가기", "사용자 이름 입력", "임시보관함에 저장". 달콤한 AI 슬로건이나 가짜 마케팅 과대광고는 피하세요.
시작 토큰 (제안 사항, 완전한 테마가 아님)
| 토큰 | 라이트 모드 기본값 | 다크 모드 기본값 |
|---|---|---|
--taste-clay-bg | #d7d1f1 | #161326 |
--taste-clay-primary | #813ffc | #813ffc |
--taste-clay-light | #ecebf5 | #26203d |
--taste-clay-text | #28233d | #f3f0fa |
--taste-clay-muted | #7c739e | #a49bbf |
--taste-clay-shadow-primary | 8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20) | 8px 16px 24px rgba(10, 5, 25, 0.50), 2px 4px 8px rgba(10, 5, 25, 0.30) |
--taste-clay-inner-primary | inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40) | inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.50) |
--taste-clay-shadow-light | 8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12) | 8px 16px 24px rgba(0, 0, 0, 0.45), 2px 4px 8px rgba(0, 0, 0, 0.25) |
--taste-clay-inner-light | inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35) | inset 3px 4px 6px rgba(255, 255, 255, 0.15), inset -4px -6px 8px rgba(10, 5, 25, 0.60) |
--taste-clay-inner-well | inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70) | inset 3px 4px 8px rgba(0, 0, 0, 0.50), inset -2px -2px 6px rgba(255, 255, 255, 0.15) |
--taste-clay-well-rim | 3px solid rgba(255, 255, 255, 0.85) | 3px solid rgba(255, 255, 255, 0.20) |
--taste-clay-radius-pill | 9999px | 9999px |
--taste-clay-radius-btn | 24px | 24px |
--taste-clay-radius-card | 28px | 28px |
--taste-clay-radius-squircle | 14px | 14px |
--taste-font-body | Manrope, system-ui, sans-serif | Manrope, system-ui, sans-serif |
--taste-motion-duration | 180ms | 180ms |
토큰은 방향을 나타내며 모든 팔레트/플랫폼에 대해 복사-붙여넣기로 보장되지 않습니다. 프로젝트 수준에서 --taste-clay-*를 정의하고, 색상 대비를 확인하며, 리터럴 값을 흩뿌리는 대신 테마 토큰을 통해 적용하세요.
히어로 구성 (전체 첫 뷰포트)
퍼블릭 포트폴리오/랜딩/홈페이지에 히어로가 있는 경우: 하나의 보이는 화면 헤더+히어로 구성을 사용하세요. 기본 높이는 min-height: 100svh와 100vh 폴백으로 설정하고, 헤더가 일반 흐름에 있을 때만 실제 헤더를 뺍니다; 접근성과 짧은 모바일 화면을 위해 히어로가 확장되도록 합니다. 프라이빗 대시보드나 다른 작업 화면에는 적용하지 마십시오; 직접적인 사용자 재정의가 우선합니다. 스타일별 방향: 하나의 조각된 히어로 표면이나 신중하게 균형 잡힌 부드러운 재료 환경을 사용하세요; 실제 포트폴리오 소개와 CTA를 첫 화면 구성에 배치하세요. 100svh를 채우기 위해 푹신한 카드를 중첩하지 마세요. 클레이 깊이는 미묘하고 방향성이 유지되어야 하며, 상당한 플랫 공간이 있어야 합니다. 라우터 references/hero-layout.md가 있을 경우 따르세요. 독립 실행형 사용은 동일한 반응형 및 안티-슬롭 원칙을 따릅니다.
스타일별 품질 관문
- 해야 할 것: 촉각적 이중 내부 그림자가 보이도록 보장; 일관된 광원 방향 유지(왼쪽 위에서 오른쪽 아래로); 촉각적 활성/누름 상태 제공; 프라이머리 클레이와 라이트 클레이 모두에서 WCAG AA 대비 확인; 다크/라이트 모드 전환 확인하여 텍스트와 표면 색상이 결합된 쌍으로 적용되도록 함(예: 어두운 클레이 위 옅은 포슬린 텍스트, 밝은 클레이 위 진한 잉크 텍스트).
- 하지 말아야 할 것: 단순한 둥근 모서리를 클레이로 처리하지 마십시오; 풍선 그림자, 과도한 광택 헤일로, 읽을 수 없는 밝음-위-밝음 레이블, 장식용 배지, 어두운 텍스트가 어두운 클레이 위에 남는 다크/라이트 모드 충돌을 피하세요.
- 데스크톱과 모바일 일관성 확인; 시각적 회귀 검토.