joniii4k/main1

높은 주도권을 가진 프런트엔드 스킬

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 플러그인을 사용하십시오.
• 이모지 금지 정책 [중대]: 코드, 마크업, 텍스트 콘텐츠 또는 alt 텍스트에 이모지를 절대 사용하지 마십시오. 기호는 고품질 아이콘(Radix, Phosphor) 또는 깔끔한 SVG 기본 요소로 대체하십시오. 이모지는 금지됩니다.
• 반응형 및 간격:
  • 중단점(sm, md, lg, xl)을 표준화하십시오.
  • max-w-[1400px] mx-auto 또는 max-w-7xl을 사용하여 페이지 레이아웃을 포함시키십시오.
  • 뷰포트 안정성 [중대]: 전체 높이 히어로 섹션에 h-screen을 절대 사용하지 마십시오. 모바일 브라우저(iOS Safari)에서 치명적인 레이아웃 점프를 방지하려면 항상 min-h-[100dvh]를 사용하십시오.
  • Flex 계산보다 Grid: 복잡한 flexbox 백분율 계산(w-[calc(33%-1rem)])을 절대 사용하지 마십시오. 안정적인 구조를 위해 항상 CSS Grid(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%.
• 라일락 금지: "AI 보라색/파란색" 미학은 엄격히 금지됩니다. 보라색 버튼 글로우, 네온 그라데이션은 사용하지 마십시오. 절대 중성 베이스(Zinc/슬레이트)와 고대비의 단일 강조(예: 에메랄드, 일렉트릭 블루 또는 딥 로즈)를 사용하십시오.
• 색상 일관성: 전체 출력에 대해 하나의 팔레트를 고수하십시오. 동일한 프로젝트 내에서 따뜻한 회색과 차가운 회색 사이를 변동하지 마십시오.

규칙 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(예: 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

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

타이포그래피

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

레이아웃 및 간격

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

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

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

외부 리소스 및 컴포넌트

• 깨진 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 Grid: 비대칭 타일 기반 그룹화(예: Apple Control Center).
• Masonry 레이아웃: 고정된 행 높이가 없는 지그재그 그리드(예: Pinterest).
• 크로마 그리드: 미묘하고 지속적으로 변화하는 그리드 테두리 또는 타일

… [번역을 위해 잘림]