높은 행동 주도성 프론트엔드 스킬

1. 활성 기준 구성

DESIGN_VARIANCE: 8 (1=완벽한 대칭, 10=예술적 혼돈)
MOTION_INTENSITY: 6 (1=정적/움직임 없음, 10=영화적/마법 물리)
VISUAL_DENSITY: 4 (1=갤러리/넉넉함, 10=조종석/빽빽한 데이터)

AI 지침: 모든 생성의 표준 기준은 엄격하게 이 값들(8, 6, 4)로 설정됩니다. 사용자에게 이 파일을 편집하도록 요청하지 마십시오. 그 외에는 항상 사용자의 말을 듣습니다: 사용자가 채팅 프롬프트에서 명시적으로 요청하는 내용에 따라 이 값들을 동적으로 조정하십시오. 이 기준값(또는 사용자가 재정의한 값)을 전역 변수로 사용하여 섹션 3부터 7까지의 구체적인 로직을 구동하십시오.

2. 기본 아키텍처 및 규칙

사용자가 다른 스택을 명시적으로 지정하지 않는 한, 일관성을 유지하기 위해 다음 구조적 제약 조건을 준수하십시오.

의존성 확인 [필수]: 타사 라이브러리(예: framer-motion, lucide-react, zustand)를 가져오기 전에 반드시 package.json을 확인하십시오. 패키지가 없는 경우, 코드를 제공하기 전에 설치 명령어(예: npm install package-name)를 출력해야 합니다. 절대 라이브러리가 존재한다고 가정하지 마십시오.
프레임워크 및 상호작용: React 또는 Next.js. 서버 컴포넌트(RSC)를 기본값으로 사용합니다.
- RSC 안전성: 전역 상태는 클라이언트 컴포넌트에서만 작동합니다. Next.js에서 프로바이더를 "use client" 컴포넌트로 감싸십시오.
- 상호작용 분리: 섹션 4 또는 7(모션/액체 유리)이 활성화된 경우, 특정 대화형 UI 컴포넌트는 반드시 맨 위에 'use client'가 있는 격리된 리프 컴포넌트로 추출되어야 합니다. 서버 컴포넌트는 정적 레이아웃만 독점적으로 렌더링해야 합니다.
상태 관리: 격리된 UI에는 로컬 useState/useReducer를 사용합니다. 깊은 prop 드릴링을 피하기 위해 엄격하게 전역 상태를 사용합니다.
스타일링 정책: 스타일링의 90%에 Tailwind CSS(v3/v4)를 사용합니다.
- TAILWIND 버전 잠금: 먼저 package.json을 확인하십시오. v3 프로젝트에서 v4 구문을 사용하지 마십시오.
- T4 설정 보호: v4의 경우 postcss.config.js에서 tailwindcss 플러그인을 사용하지 마십시오. @tailwindcss/postcss 또는 Vite 플러그인을 사용하십시오.
이모지 금지 정책 [중요]: 코드, 마크업, 텍스트 콘텐츠 또는 대체 텍스트에 절대 이모지를 사용하지 마십시오. 기호를 고품질 아이콘(Radix, Phosphor) 또는 깔끔한 SVG 기본 요소로 대체하십시오. 이모지는 금지됩니다.
반응형 및 간격:
- 중단점(sm, md, lg, xl)을 표준화합니다.
- max-w-[1400px] mx-auto 또는 max-w-7xl을 사용하여 페이지 레이아웃을 포함합니다.
- 뷰포트 안정성 [중요]: 전체 높이 히어로 섹션에 절대 h-screen을 사용하지 마십시오. 모바일 브라우저(iOS Safari)에서 치명적인 레이아웃 점프를 방지하기 위해 항상 min-h-[100dvh]를 사용하십시오.
- Flex 수학보다 그리드: 복잡한 Flexbox 백분율 수학(w-[calc(33%-1rem)])을 절대 사용하지 마십시오. 안정적인 구조를 위해 항상 CSS 그리드(grid grid-cols-1 md:grid-cols-3 gap-6)를 사용하십시오.
아이콘: 반드시 정확히 @phosphor-icons/react 또는 @radix-ui/react-icons를 가져오기 경로로 사용해야 합니다(설치된 버전 확인). 전역적으로 strokeWidth를 표준화하십시오(예: 독점적으로 1.5 또는 2.0 사용).

3. 디자인 엔지니어링 지침 (편향 보정)

LLM은 특정 UI 클리셰 패턴에 대한 통계적 편향을 가지고 있습니다. 이러한 엔지니어링된 규칙을 사용하여 프리미엄 인터페이스를 사전에 구축하십시오.

규칙 1: 결정론적 타이포그래피

디스플레이/헤드라인: 기본값은 text-4xl md:text-6xl tracking-tighter leading-none입니다.
- 안티-슬롭: "프리미엄" 또는 "크리에이티브" 분위기를 위해 Inter를 사용하지 마십시오. Geist, Outfit, Cabinet Grotesk 또는 Satoshi를 사용하여 독특한 캐릭터를 강제하십시오.
- 기술 UI 규칙: 대시보드/소프트웨어 UI에는 세리프 글꼴이 엄격히 금지됩니다. 이러한 맥락에서는 고급 산세리프 페어링(Geist + Geist Mono 또는 Satoshi + JetBrains Mono)만 독점적으로 사용하십시오.
본문/단락: 기본값은 text-base text-gray-600 leading-relaxed max-w-[65ch]입니다.

규칙 2: 색상 보정

제약 조건: 최대 1개의 강조 색상. 채도 < 80%.
LILA 금지: "AI 보라색/파란색" 미학은 엄격히 금지됩니다. 보라색 버튼 글로우나 네온 그라데이션이 없어야 합니다. 절대적인 중성 베이스(Zinc/Slate)와 대비가 높은 단일 강조색(예: 에메랄드, 일렉트릭 블루, 딥 로즈)을 사용하십시오.
색상 일관성: 전체 출력에 대해 하나의 팔레트를 고수하십시오. 동일한 프로젝트 내에서 따뜻한 회색과 차가운 회색 사이를 오가지 마십시오.

규칙 3: 레이아웃 다양화

중앙 편향 방지: DESIGN_VARIANCE > 4일 때 중앙 정렬 히어로/H1 섹션은 엄격히 금지됩니다. "분할 화면"(50/50), "왼쪽 정렬 콘텐츠/오른쪽 정렬 자산" 또는 "비대칭 여백" 구조를 강제하십시오.

규칙 4: 물질성, 그림자 및 "카드 과용 방지"

대시보드 강화: VISUAL_DENSITY > 7인 경우 일반 카드 컨테이너는 엄격히 금지됩니다. border-t, divide-y 또는 순수한 음의 공간을 사용하여 논리 그룹화를 수행하십시오. 데이터 메트릭은 상자에 갇히지 않고 숨 쉴 수 있어야 합니다. 단, 고도(z-index)가 기능적으로 필요한 경우는 예외입니다.
실행: 고도가 계층 구조를 전달할 때만 카드를 사용하십시오. 그림자를 사용할 때는 배경 색조에 맞게 착색하십시오.

규칙 5: 대화형 UI 상태

필수 생성: LLM은 자연스럽게 "정적" 성공 상태를 생성합니다. 전체 상호작용 주기를 구현해야 합니다.
- 로딩: 레이아웃 크기와 일치하는 스켈레톤 로더(일반적인 원형 스피너는 피하십시오).
- 빈 상태: 데이터를 채우는 방법을 나타내는 아름답게 구성된 빈 상태.
- 오류 상태: 명확한 인라인 오류 보고(예: 양식).
- 촉각적 피드백: :active에서 -translate-y-[1px] 또는 scale-[0.98]을 사용하여 성공/동작을 나타내는 물리적 누름을 시뮬레이션하십시오.

규칙 6: 데이터 및 양식 패턴

양식: 레이블은 반드시 입력 위에 있어야 합니다. 도움말 텍스트는 선택 사항이지만 마크업에 존재해야 합니다. 오류 텍스트는 입력 아래에 있습니다. 입력 블록에 표준 gap-2를 사용하십시오.

4. 창의적 사전 대응 (슬롭 방지 구현)

일반적인 AI 디자인에 적극적으로 대응하기 위해 다음과 같은 고급 코딩 개념을 기준으로 체계적으로 구현하십시오.

"액체 유리" 리프랙션: 유리 효과가 필요할 때 backdrop-blur를 넘어서십시오. 1px 내부 테두리(border-white/10)와 미묘한 내부 그림자(shadow-[inset_0_1px_0_rgba(255,255,255,0.1)])를 추가하여 물리적 가장자리 굴절을 시뮬레이션하십시오.
마그네틱 마이크로 물리 (MOTION_INTENSITY > 5인 경우): 마우스 커서 방향으로 약간 끌리는 버튼을 구현하십시오. 중요: 마그네틱 호버 또는 연속 애니메이션에 React useState를 절대 사용하지 마십시오. 모바일에서 성능 저하를 방지하기 위해 React 렌더링 주기 외부에서 Framer Motion의 useMotionValue 및 useTransform을 독점적으로 사용하십시오.
영구 마이크로 인터랙션: MOTION_INTENSITY > 5인 경우 표준 컴포넌트(아바타, 상태 점, 배경)에 연속적이고 무한한 마이크로 애니메이션(펄스, 타자기, 플로트, 샤이머, 캐러셀)을 포함시키십시오. 모든 대화형 요소에 프리미엄 스프링 물리(type: "spring", stiffness: 100, damping: 20)를 적용하십시오. 선형 이징은 사용하지 마십시오.
레이아웃 전환: 상태 변경 전반에 걸쳐 원활한 재정렬, 크기 조정 및 공유 요소 전환을 위해 항상 Framer Motion의 layout 및 layoutId props를 활용하십시오.
지연 오케스트레이션: 목록이나 그리드를 즉시 마운트하지 마십시오. staggerChildren(Framer) 또는 CSS 캐스케이드(animation-delay: calc(var(--index) * 100ms))를 사용하여 순차적인 폭포수 효과를 만드십시오. 중요: staggerChildren의 경우 부모(variants)와 자식은 동일한 클라이언트 컴포넌트 트리에 있어야 합니다. 데이터가 비동기적으로 가져와지는 경우 데이터를 props로 중앙 집중식 부모 모션 래퍼에 전달하십시오.

5. 성능 가드레일

DOM 비용: 그레인/노이즈 필터는 고정된 pointer-events-none 의사 요소(예: fixed inset-0 z-50 pointer-events-none)에만 독점적으로 적용하고 스크롤 컨테이너에는 절대 적용하지 마십시오. 지속적인 GPU 리페인트 및 모바일 성능 저하를 방지하기 위함입니다.
하드웨어 가속: top, left, width 또는 height를 애니메이션화하지 마십시오. transform 및 opacity를 통해서만 독점적으로 애니메이션화하십시오.
Z-인덱스 제한: 요청되지 않은 임의의 z-50 또는 z-10을 절대 남발하지 마십시오. 시스템 계층 컨텍스트(고정 네비게이션 바, 모달, 오버레이)를 위해서만 z-인덱스를 사용하십시오.

6. 기술 참조 (다이얼 정의)

DESIGN_VARIANCE (레벨 1-10)

1-3 (예측 가능): Flexbox justify-center, 엄격한 12열 대칭 그리드, 동일한 패딩.
4-7 (오프셋): margin-top: -2rem 오버랩, 다양한 이미지 종횡비(예: 4:3 옆에 16:9), 중앙 정렬 데이터 위에 왼쪽 정렬 헤더 사용.
8-10 (비대칭): Masonry 레이아웃, 분수 단위의 CSS 그리드(예: grid-template-columns: 2fr 1fr 1fr), 거대한 빈 영역(padding-left: 20vw).
모바일 재정의: 레벨 4-10의 경우 md: 이상의 비대칭 레이아웃은 뷰포트가 < 768px일 때 가로 스크롤 및 레이아웃 파손을 방지하기 위해 엄격한 단일 열 레이아웃(w-full, px-4, py-8)으로 적극적으로 대체되어야 합니다.

MOTION_INTENSITY (레벨 1-10)

1-3 (정적): 자동 애니메이션 없음. CSS :hover 및 :active 상태만 사용.
4-7 (유동 CSS): transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) 사용. 로드인을 위해 animation-delay 캐스케이드를 사용하십시오. transform 및 opacity에 엄격히 집중하십시오. will-change: transform을 드물게 사용하십시오.
8-10 (고급 안무): 복잡한 스크롤 트리거 리빌 또는 패럴랙스. Framer Motion 훅을 사용하십시오. 절대 window.addEventListener('scroll')을 사용하지 마십시오.

VISUAL_DENSITY (레벨 1-10)

1-3 (갤러리 모드): 많은 여백. 큰 섹션 간격. 모든 것이 매우 고급스럽고 깔끔하게 느껴집니다.
4-7 (일반 앱 모드): 표준 웹 앱을 위한 일반적인 간격.
8-10 (조종석 모드): 작은 패딩. 카드 박스 없음; 데이터를 구분하는 1px 선만 있습니다. 모든 것이 빽빽합니다. 필수: 모든 숫자에 고정폭(font-mono)을 사용하십시오.

7. AI 특성 (금지 패턴)

프리미엄이고 일반적이지 않은 출력을 보장하기 위해 명시적으로 요청되지 않는 한 이러한 일반적인 AI 디자인 시그니처를 엄격히 피해야 합니다.

시각 및 CSS

NO 네온/외부 글로우: 기본 box-shadow 글로우 또는 자동 글로우를 사용하지 마십시오. 내부 테두리 또는 미묘한 착색 그림자를 사용하십시오.
NO 순수 블랙: 절대 #000000을 사용하지 마십시오. 오프 블랙, Zinc-950 또는 차콜을 사용하십시오.
NO 과포화 강조: 중성색과 우아하게 어울리도록 강조색의 채도를 낮추십시오.
NO 과도한 그라데이션 텍스트: 큰 헤더에 텍스트 채우기 그라데이션을 사용하지 마십시오.
NO 사용자 정의 마우스 커서: 구식이며 성능/접근성을 망칩니다.

타이포그래피

NO Inter 폰트: 금지됩니다. Geist, Outfit, Cabinet Grotesk 또는 Satoshi를 사용하십시오.
NO 과도하게 큰 H1: 첫 번째 제목이 너무 커서는 안 됩니다. 단순히 큰 크기가 아니라 두께와 색상으로 계층 구조를 제어하십시오.
세리프 제약 조건: 창의적/편집 디자인에만 세리프 글꼴을 사용하십시오. 절대 깔끔한 대시보드에 세리프를 사용하지 마십시오.

레이아웃 및 간격

완벽하게 정렬 및 간격: 패딩과 마진이 수학적으로 완벽해야 합니다. 어색한 간격으로 떠 있는 요소를 피하십시오.
NO 3열 카드 레이아웃: 일반적인 "수평으로 3개의 동일한 카드" 기능 행은 금지됩니다. 대신 2열 지그재그, 비대칭 그리드 또는 가로 스크롤 방식을 사용하십시오.

콘텐츠 및 데이터 ("Jane Doe" 효과)

NO 일반적인 이름: "John Doe", "Sarah Chan" 또는 "Jack Su"는 금지됩니다. 매우 창의적이고 현실적으로 들리는 이름을 사용하십시오.
NO 일반 아바타: 아바타에 표준 SVG "달걀" 또는 Lucide 사용자 아이콘을 사용하지 마십시오. 창의적이고 신뢰할 수 있는 사진 플레이스홀더 또는 특정 스타일링을 사용하십시오.
NO 가짜 숫자: 예측 가능한 출력(예: 99.99%, 50% 또는 기본 전화번호(1234567))을 피하십시오. 유기적이고 지저분한 데이터(47.2%, +1 (312) 847-1928)를 사용하십시오.
NO 스타트업 슬롭 이름: "Acme", "Nexus", "SmartFlow". 프리미엄하고 문맥에 맞는 브랜드 이름을 고안하십시오.
NO 채우기 단어: "Elevate", "Seamless", "Unleash" 또는 "Next-Gen"과 같은 AI 카피라이팅 클리셰를 피하십시오. 구체적인 동사를 사용하십시오.

외부 리소스 및 컴포넌트

NO 끊어진 Unsplash 링크: Unsplash를 사용하지 마십시오. https://picsum.photos/seed/{random_string}/800/600 또는 SVG UI 아바타와 같은 절대적이고 신뢰할 수 있는 플레이스홀더를 사용하십시오.
shadcn/ui 사용자 정의: shadcn/ui를 사용할 수 있지만, 기본 상태로는 절대 사용하지 마십시오. 반드시 모서리, 색상 및 그림자를 고급 프로젝트 미학에 맞게 사용자 정의해야 합니다.
프로덕션 준비 완료 청결: 코드는 매우 깨끗하고, 시각적으로 인상적이며, 기억에 남고, 모든 세부 사항이 세심하게 정제되어야 합니다.

8. 창의적 무기고 (고급 영감)

기본적인 UI에 의존하지 마십시오. 이 고급 개념 라이브러리에서 가져와 출력물이 시각적으로 인상적이고 기억에 남도록 하십시오. 적절한 경우 기본 CSS 모션 대신 복잡한 스크롤텔링을 위해 GSAP(ScrollTrigger/Parallax) 또는 3D/Canvas 애니메이션을 위해 ThreeJS/WebGL을 활용하십시오. 중요: 동일한 컴포넌트 트리에서 GSAP/ThreeJS와 Framer Motion을 절대 혼합하지 마십시오. UI/Bento 상호작용에는 Framer Motion을 기본값으로 사용하십시오. GSAP/ThreeJS는 엄격한 useEffect 정리 블록으로 래핑된 격리된 전체 페이지 스크롤텔링 또는 캔버스 배경에만 독점적으로 사용하십시오.

표준 히어로 패러다임

어두운 이미지 위에 중앙 정렬 텍스트를 배치하는 것을 중단하십시오. 비대칭 히어로 섹션을 시도하십시오: 텍스트를 왼쪽이나 오른쪽에 깔끔하게 정렬하십시오. 배경에는 고품질의 관련 이미지와 미묘한 스타일리시 페이드(라이트/다크 모드에 따라 배경색으로 우아하게 어두워지거나 밝아짐)가 있어야 합니다.

내비게이션 및 메뉴

Mac OS Dock 배율: 가장자리의 내비게이션 바; 호버 시 아이콘이 유연하게 확대됩니다.
마그네틱 버튼: 커서 방향으로 물리적으로 끌리는 버튼.
끈적한 메뉴: 하위 항목이 점성 액체처럼 주 버튼에서 분리됩니다.
다이나믹 아일랜드: 상태/알림을 표시하도록 변형되는 알약 모양 UI 컴포넌트.
상황별 방사형 메뉴: 클릭 좌표에서 정확히 확장되는 원형 메뉴.
플로팅 스피드 다이얼: 2차 동작의 곡선 라인으로 튀어나오는 FAB.
메가 메뉴 리빌: 복잡한 콘텐츠를 지연 페이드인하는 전체 화면 드롭다운.

레이아웃 및 그리드

Bento 그리드: 비대칭, 타일 기반 그룹화(예: Apple 제어 센터).
Masonry 레이아웃: 고정된 행 높이가 없는 계단식 그리드(예: Pinterest).
Chroma 그리드: 미묘하고 연속적인 색상 변화를 보여주는 그리드 테두리 또는 타일.

마이크로 인터랙션

페이지네이션 및 드래그 (Carousel & Swiper):embla-carousel-react를 사용하여 제스처 기반 캐러셀을 구축하고 기본 드래그 가능한 페이지네이션을 구현하여 사용자 데이터 간 탐색을 자연스럽게 만듭니다.

로딩 상태

신문 로더: 실제 신문 레이아웃처럼 보이는 스켈레톤 UI. 집중된 로딩 상태.
진행률 로더: 박자에 맞춰 채워지는 막대.
스켈레톤 화면: 전체 페이지 스켈레톤은 섹션 3에 정의된 것과 동일한 타이포그래피/레이아웃 규칙을 준수해야 합니다.

배경

입자 텍스처: SVG 필터(feTurbulence)로 생성된 미묘한 노이즈 오버레이.
스크롤 기반 그래디언트: 스크롤 위치에 따라 변하는 배경 그라데이션.
반응형 그리드: 화면 크기에 따라 동적으로 다시 그려지는 CSS 그리드 패턴.

이달의 독점 제공 (2024-07: 프리미엄 아코디언)

고급 아코디언 시스템: 어떤 개념 증명, 일반 UI에서도 기능적이고, 아름답고, 부드럽고, 공개적으로 문서화 및 제공됩니다.

9. 스킬 메타데이터 및 진화

버전: 1.0.0 (원본 v1 테이스트 스킬) 유지 관리자: @moulkefta 상태: 레거시 — 하위 호환성만 지원됩니다. 새로운 개발은 design-taste-frontend(v2)를 사용해야 합니다. 범위:

React / Next.js
Tailwind CSS
shadcn/ui (사용자 정의됨)
Framer Motion

moulkefta/Claude-Skills

Claude-Skills란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서