tasteskill: 안티-슬롭 프론트엔드 스킬
랜딩 페이지, 포트폴리오, 리디자인. 대시보드, 데이터 테이블, 다단계 제품 UI는 대상이 아닙니다. 아래의 모든 규칙은 상황에 따라 적용됩니다. 어떤 것도 자동으로 실행되지 않습니다. 먼저 브리핑을 읽고, 적합한 것만 가져다 사용하세요.
0. 브리핑 추론 (무엇보다 먼저 상황 파악)
코드를 건드리거나 다이얼을 조정하기 전에, 사용자가 실제로 원하는 것이 무엇인지 추론하세요. 대부분의 LLM 디자인 결과물이 나쁜 이유는 모델이 기본 미학으로 바로 뛰어들기 때문입니다.
0.A 먼저 다음 신호를 읽으세요
- 페이지 종류 - 랜딩(SaaS / 소비자 / 에이전시 / 이벤트), 포트폴리오(개발자 / 디자이너 / 크리에이티브 스튜디오), 리디자인(보존 vs 개편), 에디토리얼 / 블로그.
- 사용자가 사용한 '바이브' 단어 - "미니멀리스트", "차분한", "Linear 스타일", "Awwwards", "브루탈리스트", "프리미엄 소비자", "Apple 스러운", "장난기 있는", "진지한 B2B", "에디토리얼", "에이전시 스러운", "유리 같은", "다크 테크".
- 참조 신호 - 사용자가 링크한 URL, 붙여넣은 스크린샷, 언급한 제품, 경쟁하는 브랜드.
- 대상 청중 - B2B 조달 패널 vs 디자인에 민감한 소비자 vs 포트폴리오를 훑는 채용 담당자. 청중이 미학을 결정하며, 당신의 취향이 아닙니다.
- 이미 존재하는 브랜드 자산 - 로고, 색상, 서체, 사진. 리디자인의 경우, 이것들은 선택적 입력이 아니라 시작 재료입니다(11장 참조).
- 조용한 제약 조건 - 접근성 우선 청중, 공공 부문, 규제 산업, 신뢰 우선 커머스, 아동용 제품. 이러한 제약 조건은 미학적 선호도를 무시합니다.
0.B 코드를 생성하기 전에 한 줄짜리 "디자인 해석"을 출력하세요
코드 생성 전에, 한 줄로 다음을 명시하세요: "다음과 같이 읽습니다: <페이지 종류>, <대상 청중> 대상, <바이브> 언어, <디자인 시스템 또는 미학 계열> 쪽으로 기울임."
예시 해석:
- "다음과 같이 읽습니다: 기술 구매자를 위한 B2B SaaS 랜딩, Linear 스타일 미니멀리즘 언어, Tailwind 유틸리티 + Geist + 절제된 모션 쪽으로 기울임."
- "다음과 같이 읽습니다: 채용 담당자를 위한 단독 디자이너 포트폴리오, 에디토리얼 / 운동 타이포그래피 언어, 네이티브 CSS + 스크롤 기반 애니메이션 + 커스텀 타이포그래피 쪽으로 기울임."
- "다음과 같이 읽습니다: 공공 부문 서비스 사이트 리디자인, 신뢰 우선 언어, GOV.UK Frontend 또는 USWDS 쪽으로 기울임."
0.C 브리핑이 모호하다면, 추측하지 말고 하나의 질문을 하세요
정확히 하나의 명확한 질문을 하세요. 절대 여러 질문을 한꺼번에 던지지 말고, 디자인 해석이 진정으로 갈릴 때만 사용하세요. 예: "이것이 Linear-깔끔함과 Awwwards-실험적 중 어느 쪽에 더 가까워야 할까요?"
컨텍스트에서 자신 있게 추론할 수 있다면, 질문하지 마세요. 디자인 해석을 선언하고 진행하세요.
0.D 안티-기본값 훈련
다음으로 기본 설정하지 마세요: AI-보라색 그라데이션, 어두운 메쉬 위의 중앙 히어로, 세 개의 동일한 기능 카드, 모든 것에 제네릭 글래스모피즘, 모든 곳에 무한 루프 마이크로 애니메이션, Inter + slate-900. 이것들은 LLM 기본값입니다. 디자인 해석에 따라 의도적으로 이것들을 넘어서세요.
1. 세 개의 다이얼 (핵심 구성)
디자인 해석 후, 세 개의 다이얼을 설정합니다. 아래의 모든 레이아웃, 모션 및 밀도 결정은 이 다이얼에 의해 제어됩니다.
DESIGN_VARIANCE: 8- 1 = 완벽한 대칭, 10 = 예술적 혼란MOTION_INTENSITY: 6- 1 = 정적, 10 = 영화적 / 물리 기반VISUAL_DENSITY: 4- 1 = 아트 갤러리 / 공기 가득, 10 = 조종석 / 데이터 빽빽
기준값: 8 / 6 / 4. 디자인 해석이 이를 재정의하지 않는 한 사용하세요. 사용자에게 이 파일을 편집하도록 요청하지 마세요. 재정의는 대화식으로 이루어집니다.
1.A 다이얼 추론 (디자인 해석 → 다이얼 값)
| 신호 | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| "미니멀리스트 / 깔끔한 / 차분한 / 에디토리얼 / Linear 스타일" | 5-6 | 3-4 | 2-3 |
| "프리미엄 소비자 / Apple 스러운 / 럭셔리 / 브랜드" | 7-8 | 5-7 | 3-4 |
| "장난기 있는 / 자유분방한 / Dribbble / Awwwards / 실험적 / 에이전시" | 9-10 | 8-10 | 3-4 |
| "랜딩 페이지 / 포트폴리오 / 마케팅 사이트 (기본)" | 7-9 | 6-8 | 3-5 |
| "신뢰 우선 / 공공 부문 / 규제 / 접근성 중요" | 3-4 | 2-3 | 4-5 |
| "리디자인 - 보존" | 기존과 일치 | +1 | 기존과 일치 |
| "리디자인 - 개편" | +2 | +2 | 기존과 일치 |
1.B 사용 사례 프리셋
| 사용 사례 | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| 랜딩 (SaaS, 주류) | 7 | 6 | 4 |
| 랜딩 (에이전시 / 크리에이티브) | 9 | 8 | 3 |
| 랜딩 (프리미엄 소비자) | 7 | 6 | 3 |
| 포트폴리오 (디자이너 / 스튜디오) | 8 | 7 | 3 |
| 포트폴리오 (개발자) | 6 | 5 | 4 |
| 에디토리얼 / 블로그 | 6 | 4 | 3 |
| 공공 부문 서비스 | 3 | 2 | 5 |
| 리디자인 - 보존 | 일치 | 일치+1 | 일치 |
| 리디자인 - 개편 | +2 | +2 | 일치 |
1.C 다이얼이 출력을 주도하는 방법
이 값(또는 사용자가 재정의한 값)을 전역 변수로 사용하세요. 이 문서 전체의 상호 참조는 이러한 정확한 변수 이름을 참조합니다. LAYOUT_VARIANCE 또는 ANIM_LEVEL과 같은 별칭을 절대 발명하지 마세요.
2. 브리핑 → 디자인 시스템 매핑
디자인 해석(0장)과 다이얼(1장)이 준비되면, 올바른 기반을 선택하세요. 공식 패키지가 있는 것들에 대해 CSS를 발명하지 마세요. 미학적 트렌드가 공식 시스템인 척하지 마세요.
2.A 실제 디자인 시스템에 도달해야 하는 경우 (공식 패키지 사용)
| 브리핑이 다음과 같이 읽히면… | 도달 대상 | 이유 |
|---|---|---|
| Microsoft / 엔터프라이즈 SaaS / 대시보드 | @fluentui/react-components 또는 @fluentui/web-components | 공식 Fluent UI, Microsoft 토큰, 접근성 완료 |
| Google 스러운 UI, Material 스타일 제품 | @material/web + Material 3 토큰 | 공식, Material 테마를 통해 테마 가능 |
| IBM 스타일 B2B / 엔터프라이즈 분석 | @carbon/react + @carbon/styles | 공식 Carbon, 성숙한 데이터 밀도 패턴 |
| Shopify 앱 표면 | polaris.js 웹 컴포넌트 / Polaris React | Shopify 관리자 UI에 필요 |
| Atlassian / Jira 스타일 제품 | @atlaskit/* + @atlaskit/tokens | 공식 Atlassian DS |
| GitHub 스타일 개발 도구 / 커뮤니티 페이지 | @primer/css 또는 @primer/react-brand | 공식 Primer; 마케팅용 Brand 변형 |
| 공공 부문 영국 서비스 | govuk-frontend | 법적 / 규제적으로 예상됨 |
| 미국 공공 부문 / 신뢰 우선 | uswds | 동일 |
| 빠른 지역 비즈니스 / 에이전시 MVP | Bootstrap 5.3 | 지루하고, 빠르며, 작동함 |
| 현대적인 접근 가능한 React 기반 | @radix-ui/themes | 기본 요소 + 세련된 테마 |
| 구성 요소를 직접 소유하는 현대적인 SaaS | shadcn/ui (npx shadcn@latest add ...) | 코드를 직접 소유하고, 커스터마이즈하기 쉬움; 기본 상태로 절대 배포하지 마세요 |
| Tailwind 기반 현대 SaaS / AI 마케팅 | Tailwind v4 유틸리티 + dark: 변형 | 인디 및 소규모 팀 빌드의 기본값 |
정직 규칙: 브리핑이 위 시스템 중 하나로 읽히면, 공식 패키지를 설치하고 사용하세요. CSS를 수동으로 재현하지 마세요. 시스템의 토큰을 가져온 다음 90%를 재정의하지 마세요.
프로젝트당 하나의 시스템. 동일한 트리에 Fluent React와 Carbon을 혼합하지 마세요. Material 3 앱에 shadcn/ui 구성 요소를 가져오지 마세요.
2.B 브리핑이 시스템이 아닌 미학일 때
이러한 방향의 경우 단일 공식 패키지가 없습니다. 네이티브 CSS + Tailwind + 유지 관리되는 구성 요소 라이브러리로 구축하세요. 코드 주석에서 빌린 영감과 공식 자료를 정직하게 구분하세요.
| 미학 | 정직한 구현 |
|---|---|
| 글래스모피즘 / "서리 낀 유리" | backdrop-filter, 레이어 경계선, 하이라이트 오버레이. prefers-reduced-transparency를 위한 단색 채우기 대체 제공. |
| 벤토 (Apple 스타일 타일 그리드) | 혼합 셀 크기의 CSS 그리드. 이것을 소유한 단일 라이브러리는 없습니다. |
| 브루탈리즘 | 네이티브 CSS, 고정폭, 날것의 테두리. 라이브러리 없음. |
| 에디토리얼 / 잡지 | 세리프 서체, 비대칭 그리드, 넉넉한 여백. 라이브러리 없음. |
| 다크 테크 / 해커 | 모노 + 악센트 네온, 터미널 모티프. 라이브러리 없음. |
| 오로라 / 메쉬 그라데이션 | SVG 또는 레이어 방사형 그라데이션. 라이브러리 없음. |
| 운동 타이포그래피 | 네이티브 CSS 애니메이션, 스크롤 기반 애니메이션, 하이재킹용 GSAP. 라이브러리 없음. |
| Apple Liquid Glass | Apple은 Apple 플랫폼 전용으로 이를 문서화합니다. 공식 liquid-glass.css는 없습니다. 웹 구현은 backdrop-filter + 레이어 경계선 + 하이라이트를 사용한 근사치입니다. 근사치로 명확히 표시하세요. |
3. 기본 아키텍처 및 규칙
디자인 해석이 실제 디자인 시스템(2.A장)을 선택하지 않는 한, 다음이 기본값입니다:
3.A 스택
- 프레임워크: React 또는 Next.js. 서버 컴포넌트(RSC)가 기본입니다.
- RSC 안전: 전역 상태는 클라이언트 컴포넌트에서만 작동합니다. Next.js에서는
"use client"컴포넌트 내부에 프로바이더를 래핑하세요. - 상호작용성 격리: Motion, 스크롤 리스너 또는 포인터 물리학을 사용하는 모든 컴포넌트는 최상위에
'use client'가 있는 격리된 리프여야 합니다. 서버 컴포넌트는 정적 레이아웃만 렌더링합니다.
- RSC 안전: 전역 상태는 클라이언트 컴포넌트에서만 작동합니다. Next.js에서는
- 스타일링: Tailwind v4 (기본). 기존 프로젝트에서 요구하는 경우에만 Tailwind v3.
- v4의 경우:
postcss.config.js에서tailwindcss플러그인을 사용하지 마세요.@tailwindcss/postcss또는 Vite 플러그인을 사용하세요.
- v4의 경우:
- 애니메이션: Motion (이전 명칭 Framer Motion).
motion/react에서 가져오기(import { motion } from "motion/react").framer-motion패키지는 여전히 레거시 별칭으로 작동합니다. 새 코드에서는motion/react를 선호하세요. - 폰트: 항상
next/font(Next.js)를 사용하거나@font-face+font-display: swap으로 자체 호스팅하세요. 프로덕션에서<link>를 통해 Google Fonts를 연결하지 마세요.
3.B 상태
- 격리된 UI를 위한 로컬
useState/useReducer. - 깊은 prop 드릴링 방지를 위해서만 전역 상태 사용 - Zustand, Jotai 또는 React 컨텍스트.
- 절대
useState를 사용하여 사용자 입력(마우스 위치, 스크롤 진행률, 포인터 물리학, 자기 호버)에 의해 구동되는 연속 값을 추적하지 마세요. Motion의useMotionValue/useTransform/useScroll을 사용하세요.useState는 모든 변경 시 React 트리를 다시 렌더링하고 모바일에서 붕괴됩니다.
3.C 아이콘
- 허용된 라이브러리 (우선순위 순):
@phosphor-icons/react,hugeicons-react,@radix-ui/react-icons,@tabler/icons-react. - 권장하지 않음:
lucide-react. 사용자가 명시적으로 요청하거나 프로젝트가 이미 의존하는 경우에만 허용됩니다. - 절대 SVG 아이콘을 직접 만들지 마세요. 글리프가 누락된 경우, 두 번째 라이브러리를 설치하거나 기본 요소로 구성하세요. 처음부터 아이콘 경로를 그리지 마세요.
- 프로젝트당 하나의 패밀리. 동일한 컴포넌트 트리에서 Phosphor와 Lucide를 혼합하지 마세요.
strokeWidth를 전역적으로 표준화하세요 (예:1.5또는2.0).
3.D 이모지 정책
코드, 마크업 및 표시 텍스트에서 기본적으로 권장되지 않습니다. 기호를 아이콘 라이브러리 글리프로 대체하세요. 재정의: 사용자가 명시적으로 장난기 / 채팅 스타일 / 소셜 네이티브 분위기를 요청하는 경우에만 이모지를 허용하며, 그때도 의도적으로 절제해서 사용하세요.
3.E 반응형 및 레이아웃 메커니즘
- 중단점 표준화 (
sm 640,md 768,lg 1024,xl 1280,2xl 1536). max-w-[1400px] mx-auto또는max-w-7xl을 사용하여 페이지 레이아웃을 제한하세요.- 뷰포트 안정성: 전체 높이 히어로 섹션에
h-screen을 절대 사용하지 마세요. 항상min-h-[100dvh]를 사용하여 모바일(iOS Safari 주소 표시줄)에서 레이아웃 점프를 방지하세요. - 플렉스 수학보다 그리드: 복잡한 플렉스박스 백분율 수학(
w-[calc(33%-1rem)])을 절대 사용하지 마세요. 항상 CSS 그리드(grid grid-cols-1 md:grid-cols-3 gap-6)를 사용하세요.
3.F 종속성 확인 (필수)
타사 라이브러리를 가져오기 전에 package.json을 확인하세요. 패키지가 없으면 먼저 설치 명령어를 출력하세요. 절대 라이브러리가 존재한다고 가정하지 마세요.
4. 디자인 엔지니어링 지침 (편향 교정)
LLM은 클리셰를 기본값으로 사용합니다. 사전에 이러한 기본값을 재정의하세요. 각 규칙에는 상황 인식 재정의 경로가 있습니다.
4.1 타이포그래피
-
디스플레이 / 헤드라인: 기본
text-4xl md:text-6xl tracking-tighter leading-none. -
본문 / 단락: 기본
text-base text-gray-600 leading-relaxed max-w-[65ch]. -
산세리프 폰트 선택:
- 기본값으로 권장하지 않음:
Inter. 먼저Geist,Outfit,Cabinet Grotesk,Satoshi또는 브랜드에 적합한 세리프체를 선택하세요. - 재정의: 사용자가 명시적으로 중립적 / 표준 / Linear 스타일 느낌을 요청하거나, 브리핑이 공공 부문 / 접근성 우선 사이트인 경우 Inter가 허용됩니다.
- 기본값으로 권장하지 않음:
-
알아야 할 페어링:
Geist+Geist Mono,Satoshi+JetBrains Mono,Cabinet Grotesk+Inter Tight,GT America+IBM Plex Mono. -
세리프 규율 (기본값으로 매우 권장되지 않음):
- 세리프는 어떤 프로젝트의 기본 폰트로서 매우 권장되지 않습니다. "크리에이티브 / 프리미엄 / 에디토리얼 느낌이 든다"는 세리프에 도달할 이유가 아닙니다. '크리에이티브 브리핑 = 세리프'라는 에이전트의 기본 정신 모델은 프로덕션 라운드에서 가장 많이 테스트된 AI 특성입니다.
- 세리프는 다음 중 하나가 명시적으로 참일 때만 허용됩니다:
- 브랜드 브리핑이 문자 그대로 세리프 폰트를 명명한 경우, 또는
- 미학 계열이 진정으로 에디토리얼 / 럭셔리 / 출판 / 원고 / 헤리티지 / 빈티지이고, 이 특정 세리프가 이 특정 브랜드에 적합한 이유를 설명할 수 있는 경우
- 그 외 모든 것(크리에이티브 에이전시, 디자인 스튜디오, 현대 브랜드, 프리미엄 소비자, 포트폴리오, 라이프스타일)에 대해서는 기본 산세리프 디스플레이 (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). 산세리프 디스플레이 폰트는 "지루하지" 않습니다. 패션에서 검은색이 기본인 것과 같은 이유로 기본입니다.
- 강조 규칙 (관련): 헤드라인 내에서 단어를 강조하고 싶을 때(운동적인 "그리고
공간적디자인" 유형의 움직임), 동일한 폰트의 이탤릭 또는 볼드를 사용하세요. 시각적 흥미를 더하기 위해 산세리프 헤드라인에 무작위 세리프 단어를 주입하지 마세요(또는 그 반대). 혼합 패밀리 강조는 아마추어입니다. 동일 패밀리 내 이탤릭/볼드 강조가 올바른 움직임입니다. - 특히 기본값으로 금지됨:
Fraunces및Instrument_Serif(LLM이 가장 선호하는 두 가지 디스플레이 세리프). - 세리프가 정당화되는 경우(위 기준에 따라 드물게), 이 풀에서 순환 사용하고 연속된 프로젝트에서 동일한 세리프를 재사용하지 마세요: PP Editorial New, GT Sectra Display, Cardinal Grotesque, Reckless Neue, Tiempos Headline, Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, IvyPresto, Migra, Editorial Old, Saol Display, Söhne Breit Kursiv, Domaine Display, Canela, Schnyder, Tobias, NB Architekt, I
…
[문서가 잘렸습니다]