tasteskill: 반(반)템플릿 프론트엔드 스킬은(는) 무엇을 하나요?
랜딩 페이지, 포트폴리오, 리디자인. 대시보드, 데이터 테이블, 다단계 제품 UI는 대상이 아닙니다. 아래의 모든 규칙은 상황에 따라 적용됩니다. 자동으로 발동하지 않습니다. 먼저 브리핑을 읽은 후, 적합한 규칙만 골라 사용하세요.
0. 브리핑 추론 (코드 작성 전에 상황 파악)
코드를 건드리거나 설정을 변경하기 전에, 사용자가 실제로 원하는 것이 무엇인지 추론하세요. 대부분의 LLM 디자인 결과물이 나쁜 이유는 모델이 상황을 읽지 않고 기본 미학으로 바로 뛰어들기 때문입니다.
0.A 먼저 이 신호들을 읽으세요
- 페이지 종류 - 랜딩(SaaS / 소비자 / 에이전시 / 이벤트), 포트폴리오(개발자 / 디자이너 / 크리에이티브 스튜디오), 리디자인(보존 vs 개편), 에디토리얼 / 블로그.
- 사용자가 사용한 분위기 단어 - "미니멀", "차분한", "Linear 스타일", "Awwwards", "브루탈리즘", "프리미엄 소비자", "Apple 스러운", "장난기 있는", "진지한 B2B", "에디토리얼", "에이전시 스러운", "글라시", "다크 테크".
- 참조 신호 - 사용자가 링크한 URL, 붙여넣은 스크린샷, 언급한 제품, 경쟁하는 브랜드.
- 대상 - B2B 조달 패널 vs. 디자인에 민감한 소비자 vs. 포트폴리오를 훑어보는 채용 담당자. 대상이 미학을 결정하며, 당신의 취향이 아닙니다.
- 이미 존재하는 브랜드 자산 - 로고, 색상, 서체, 사진. 리디자인의 경우 이들은 선택적 입력이 아닌 출발 재료입니다(11장 참조).
- 조용한 제약 - 접근성 중심 대상, 공공 부문, 규제 산업, 신뢰 우선 커머스, 어린이 제품. 이러한 제약은 미적 선호를 재정의(OVERRIDE) 합니다.
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 Theming을 통해 테마 가능 |
| 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; 브랜드 변형은 마케팅용 |
| 공공 부문 영국 서비스 | 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에 대한 단색 채움 대체 제공 |
| Bento (Apple 스타일 타일 그리드) | 혼합 셀 크기를 가진 CSS Grid. 단일 라이브러리가 소유하지 않음 |
| 브루탈리즘 | 네이티브 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"컴포넌트로 감싸세요. - 상호작용성 격리: 모션, 스크롤 리스너 또는 포인터 물리를 사용하는 모든 컴포넌트는 최상단에
'use client'가 있는 격리된 리프(leaf)여야 합니다. 서버 컴포넌트는 정적 레이아웃만 렌더링합니다.
- 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 context.
- 절대
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 주소 표시줄)에서 레이아웃 점프를 방지하세요. - Flex 계산보다 Grid: 복잡한 flexbox 백분율 수학(
w-[calc(33%-1rem)])을 절대 사용하지 마세요. 항상 CSS Grid를 사용하세요 (grid grid-cols-1 md:grid-cols-3 gap-6).
3.F 종속성 확인 (필수)
제3자 라이브러리를 가져오기 전에 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