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

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에서는 Provider를 "use client" 컴포넌트로 래핑하십시오.
- 상호작용 격리: 섹션 4 또는 7(모션/리퀴드 글라스)이 활성화된 경우, 특정 대화형 UI 컴포넌트는 맨 위에 'use client'를 포함하는 격리된 리프(leaf) 컴포넌트로 추출되어야 합니다. 서버 컴포넌트는 정적 레이아웃만 독점적으로 렌더링해야 합니다.
상태 관리: 격리된 UI에는 로컬 useState/useReducer를 사용하십시오. 깊은 prop-drilling 방지를 위해서만 엄격하게 전역 상태를 사용하십시오.
스타일링 정책: 스타일링의 90%는 Tailwind CSS(v3/v4)를 사용하십시오.
- TAILWIND VERSION LOCK: 먼저 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을 사용하여 제한하십시오.
- 뷰포트 안정성 [중요]: 전체 높이 Hero 섹션에 절대 h-screen을 사용하지 마십시오. 모바일 브라우저(iOS Safari)에서 치명적인 레이아웃 점프를 방지하기 위해 항상 min-h-[100dvh]를 사용하십시오.
- 플렉스 수학보다 그리드: 복잡한 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에는 Serif 글꼴이 엄격히 금지됩니다. 이러한 컨텍스트에서는 고급 산세리프 페어링(Geist + Geist Mono 또는 Satoshi + JetBrains Mono)만 독점적으로 사용하십시오.
본문/단락: 기본값은 text-base text-gray-600 leading-relaxed max-w-[65ch]입니다.

규칙 2: 색상 보정

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

규칙 3: 레이아웃 다양화

안티-센터 편향: DESIGN_VARIANCE > 4일 때 중앙 정렬 Hero/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인 경우, 표준 컴포넌트(아바타, 상태 점, 배경)에 지속적이고 무한한 마이크로 애니메이션(펄스, 타자기, 플로트, 샤이머, 캐러셀)을 내장하십시오. 모든 대화형 요소에 프리미엄 Spring 물리학(type: "spring", stiffness: 100, damping: 20)을 적용하고 선형 이징은 사용하지 마십시오.
레이아웃 전환: 상태 변경 전반에 걸친 부드러운 재정렬, 크기 조정 및 공유 요소 전환을 위해 항상 Framer Motion의 layout 및 layoutId props를 활용하십시오.
지연 오케스트레이션: 리스트나 그리드를 즉시 마운트하지 마십시오. staggerChildren(Framer) 또는 CSS 캐스케이드(animation-delay: calc(var(--index) * 100ms))를 사용하여 순차적인 폭포식 나타남을 생성하십시오. 중요: staggerChildren의 경우, 부모(variants)와 자식은 동일한 클라이언트 컴포넌트 트리에 있어야 합니다. 데이터가 비동기적으로 가져오기되는 경우 중앙 집중식 부모 Motion 래퍼에 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-index를 사용하십시오.

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 선만. 모든 것이 빽빽하게 채워집니다. 필수: 모든 숫자에 Monospace(font-mono)를 사용하십시오.

7. AI 틸 (금지 패턴)

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

시각 및 CSS

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

타이포그래피

Inter 글꼴 금지: 금지. Geist, Outfit, Cabinet Grotesk 또는 Satoshi를 사용하십시오.
과도하게 큰 H1 금지: 첫 번째 제목이 비명을 지르면 안 됩니다. 단순히 거대한 크기뿐만 아니라 두께와 색상으로 계층 구조를 제어하십시오.
Serif 제약: Serif 글꼴은 창의적/편집 디자인에만 사용하십시오. 깔끔한 대시보드에는 절대 Serif를 사용하지 마십시오.

레이아웃 및 간격

완벽하게 정렬 및 간격: 패딩과 마진이 수학적으로 완벽한지 확인하십시오. 어색한 간격으로 떠 있는 요소를 피하십시오.
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/캔버스 애니메이션을 위해 ThreeJS/WebGL을 활용하십시오. 중요: 동일한 컴포넌트 트리에서 GSAP/ThreeJS를 Framer Motion과 혼합하지 마십시오. UI/Bento 상호 작용에는 Framer Motion을 기본값으로 사용하십시오. GSAP/ThreeJS는 격리된 전체 페이지 스크롤텔링 또는 캔버스 배경에 독점적으로 사용하고, 엄격한 useEffect 정리 블록으로 래핑하십시오.

표준 히어로 패러다임

어두운 이미지 위에 중앙 정렬 텍스트를 사용하지 마십시오. 비대칭 히어로 섹션을 시도하십시오: 텍스트를 왼쪽이나 오른쪽으로 깔끔하게 정렬하십시오. 배경에는 고품질의 관련 이미지를 미묘한 스타일리시 페이드(라이트/다크 모드에 따라 배경색으로 우아하게 어둡게 또는 밝게)와 함께 사용하십시오.

내비게이션 및 메뉴

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

레이아웃 및 그리드

벤토 그리드: 비대칭, 타일 기반 그룹화(예: Apple 제어 센터).
매소닉 레이아웃: 고정 행 높이 없이 엇갈린 그리드(예: Pinterest).
크로마 그리드: 그리드 테두리 또는 타일이 미묘하고 연속적인 [잘림]

rn8mwsb6pf-alt/tim-studio

tim-studio란 무엇인가요?

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

문서