고에이전시 프론트엔드 스킬

1. 활성 기준 설정

DESIGN_VARIANCE: 8 (1=완벽 대칭, 10=예술적 혼란)
MOTION_INTENSITY: 6 (1=정적/움직임 없음, 10=시네마틱/마법 물리)
VISUAL_DENSITY: 4 (1=갤러리/통풍, 10=조종석/데이터 빽빽)

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

언어 보존 [중요]: 사용자 프로젝트의 원래 언어를 반드시 보존해야 합니다. 기존 코드베이스가 UI 텍스트, 레이블, 제목, 설명 또는 사용자 대상 콘텐츠에 중국어(中文)를 사용하는 경우 모든 콘텐츠를 중국어로 유지해야 합니다. 기존 중국어 텍스트를 영어로 대체하거나 번역하지 마십시오. 이 규칙은 생성된 모든 코드(새 구성 요소, 페이지 및 기존 파일 수정 포함)에 적용됩니다.

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 VERSION LOCK: 먼저 package.json을 확인하십시오. v3 프로젝트에서 v4 구문을 사용하지 마십시오.
- T4 CONFIG GUARD: v4의 경우 postcss.config.js에서 tailwindcss 플러그인을 사용하지 마십시오. 대신 @tailwindcss/postcss 또는 Vite 플러그인을 사용하십시오.
안티-이모지 정책 [중요]: 코드, 마크업, 텍스트 콘텐츠 또는 대체 텍스트에 이모지를 절대 사용하지 마십시오. 기호는 고품질 아이콘(Radix, Phosphor) 또는 깔끔한 SVG 기본 요소로 대체하십시오. 이모지는 금지됩니다.
반응형 및 간격:
- 중단점 표준화(sm, md, lg, xl).
- max-w-[1400px] mx-auto 또는 max-w-7xl을 사용하여 페이지 레이아웃을 제한하십시오.
- 뷰포트 안정성 [중요]: 전체 높이 Hero 섹션에 h-screen을 절대 사용하지 마십시오. 모바일 브라우저(iOS Safari)에서 치명적인 레이아웃 점프를 방지하려면 항상 min-h-[100dvh]를 사용하십시오.
- Flex-Math보다 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%.
LILA 금지: "AI 보라색/파란색" 미학은 엄격히 금지됩니다. 보라색 버튼 글로우나 네온 그라데이션은 사용하지 마십시오. 절대적인 중립 베이스(Zinc/Slate)와 고대비의 단일 강조색(예: Emerald, Electric Blue, Deep Rose)을 사용하십시오.
색상 일관성: 전체 출력에 대해 하나의 팔레트를 고수하십시오. 동일한 프로젝트 내에서 따뜻한 회색과 차가운 회색 사이를 오가지 마십시오.

규칙 3: 레이아웃 다양화

안티-센터 편향: LAYOUT_VARIANCE > 4인 경우 중앙 정렬 Hero/H1 섹션은 엄격히 금지됩니다. "분할 화면"(50/50), "왼쪽 정렬 콘텐츠/오른쪽 정렬 에셋" 또는 "비대칭 공백" 구조를 강제하십시오.

규칙 4: 질감, 그림자 및 "카드 남용 방지"

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

규칙 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인 경우 표준 컴포넌트(아바타, 상태 표시 점, 배경)에 지속적이고 무한한 미세 애니메이션(펄스, 타자기, 플로트, 샤이머, 캐러셀)을 포함시키십시오. 모든 대화형 요소에 프리미엄 Spring 물리(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-event-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 (비대칭): 메이슨리 레이아웃, 분수 단위의 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. 100가지 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 "egg" 또는 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 정리 블록으로 감싸서 격리된 전체 페이지 스크롤텔링 또는 캔버스 배경에만 독점적으로 사용하십시오.

표준 Hero 패러다임

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

네비게이션 및 메뉴

Mac OS Dock 확대: 가장자리의 네비게이션 바; 호버 시 아이콘이 유동적으로 확대됩니다.
자기 버튼: 커서 방향으로 물리적으로 당겨지는 버튼.
끈적한 메뉴: 하위 항목이 점성 액체처럼 기본 버튼에서 분리됩니다.
다이나믹 아일랜드: 상태/알림을 표시하도록 변형되는 알약 모양의 UI 구성 요소.
상황별 방사형 메뉴: 클릭 지점에서 정확히 확장되는 원형 메뉴.

고에이전시 프론트엔드 기술