프론트엔드 디자인 스킬은(는) 무엇을 하나요?

AI가 생성한 것으로 의심되지 않는 독창적이고 고품질의 프론트엔드 인터페이스를 만듭니다. 모든 결과물은 비싼 디자인 에이전시가 제작한 것처럼 대담하고 의도적이며 기억에 남아야 합니다.

디자인 사고 프로토콜

어떤 코드를 작성하기 전에 이 체크리스트를 완료하세요. 단계를 건너뛰지 마십시오.

1. 목적 — 이 인터페이스는 어떤 문제를 해결합니까? 누가 사용합니까?

2. 톤 — 극단적인 미학 방향 하나를 선택하세요. 이것은 필수입니다. 이름 없는 방향으로 진행하지 마십시오.

다음 중에서 선택하거나(또는 동등한 수준의 구체성을 가진 나만의 것을 고안하세요):

극도로 미니멀 | 맥시멀리스트 혼돈 | 레트로-미래주의 | 유기적/자연적
럭셔리 에디토리얼 | 브루탈리스트/로우 | 아르데코/기하학적 | 소프트/파스텔
산업적/실용적 | 네오-멤피스 | 스위스 모더니스트 | 일본식 미니멀
레트로퓨처 터미널 | 노르딕 평온 | 도쿄 네온 | 사막의 따뜻함

톤을 두 단어로 설명할 수 없다면 결정하지 않은 것입니다. "깔끔한 모던"은 톤이 아닙니다. 그것은 톤의 부재이며, AI 쓰레기를 만듭니다.

3. 제약 조건 — 프레임워크(HTML/React/Vue/Svelte), 브라우저 지원, 성능 예산, 기존 브랜드 키트.

4. 차별화 — 이 페이지에서 사람들이 기억할 '딱 한 가지'는 무엇입니까? 코딩하기 전에 명확히 이름을 붙이세요.

안티-슬롭 선언

이 규칙들은 LLM이 통계적으로 평균적인 출력물(즐겁고, 무해하며, 완전히 잊혀지는)에 수렴하기 때문에 존재합니다. 아래 패턴들은 본질적으로 나쁘기 때문이 아니라, 무차별적으로 사용되는 것이 AI 생성 디자인의 가장 큰 신호이기 때문에 블랙리스트에 올랐습니다.

블랙리스트 폰트

사용자의 명시적인 요청 없이 기본 표시 폰트로 절대 사용하지 마십시오:

폰트	이유	대신 사용할 것
Inter	#1 AI 기본값 (~90%의 LLM UI)	Satoshi, General Sans, 또는 Fraunces와 같은 세리프
Roboto	#2 AI 기본값 (Android/Chrome 생태계)	Outfit, Plus Jakarta Sans (본문만), Karla
Arial / system-ui	타이포그래피 선택의 부재	의도적인 폰트 선택
Open Sans	레거시 AI 기본값 (2022년 이전 학습 데이터)	Source Sans 3, Nunito (본문만)
Poppins	Figma 템플릿 과포화	Figtree, Outfit, DM Sans (본문만)
Space Grotesk	한때는 독특했지만, 지금은 AI의 "괴짜-안전" 기본값	Syne, Anybody, Chakra Petch
Montserrat	과도하게 사용된 기하학적 산세리프	Josefin Sans, Barlow, Jost

규칙: 폰트가 인기순 상위 20개 구글 폰트에 있다면, 사용 이유를 명확히 설명하거나 거부하세요. references/typography-pairings.md에서 톤별로 정리된 20개 이상의 선별된 페어링을 확인하세요.

블랙리스트 색상

명확한 의도 없이 기본 강조색으로 절대 사용하지 마십시오:

색상	Hex	이유
Tailwind indigo-500	`#6366f1`	원조 AI 색상. 단일 Tailwind 문서 결정으로 추적 가능.
Tailwind violet-500	`#8b5cf6`	두 번째로 흔한 AI 강조색.
Tailwind purple-500	`#a855f7`	indigo→purple 그라데이션의 끝점.
Tailwind blue-500	`#3b82f6`	보라색에 대한 "엔터프라이즈" AI 대안.
AI 그라데이션	`from-indigo-500 to-purple-600`	정식 AI 그라데이션 및 모든 변형.
평평한 흰색 배경	`#ffffff`, `#f9fafb`, `#f8fafc`	AI는 절대 어두운 테마, 어스 톤, 또는 분위기 있는 깊이를 탐구하지 않습니다.

규칙: 팔레트가 npx create-next-app + Tailwind 기본값으로 재현될 수 있다면, 처음부터 다시 시작하세요. references/color-systems.md에서 15개 이상의 선별된 팔레트를 확인하세요.

블랙리스트 레이아웃

절대 다음 구조를 생성하지 마십시오:

9-섹션 AI 템플릿: 히어로 → 로고 바 → 3열 기능 → "작동 방식" 단계 → 추천사 캐러셀 → 가격표 → FAQ 아코디언 → CTA 배너 → 4열 바닥글. 이 정확한 순서는 모든 AI 생성 SaaS 페이지에서 재현됩니다.
대칭형 3열 카드 그리드를 기본 콘텐츠 구조로 사용.
모든 것을 중앙에 배치 — 모든 섹션에 text-center, 모든 컨테이너에 mx-auto, 공간적 긴장감 없음.
모든 것을 카드로 처리 — 콘텐츠 블록이 카드 처리가 필요한지 여부와 관계없이 모든 것에 rounded-xl shadow-lg p-6.

규칙: 모든 레이아웃에는 최소한 하나의 그리드를 깨는 요소(비대칭, 오버랩, 풀-블리드, 대각선 흐름, 또는 예상치 못한 여백)가 있어야 합니다. references/layout-patterns.md에서 와이어프레임을 확인하세요.

블랙리스트 애니메이션

IntersectionObserver를 통한 모든 요소의 fade-in-up (보편적인 AI 스크롤 나타나기)
모든 카드의 hover:-translate-y-1 hover:shadow-xl
무차별적으로 적용되는 transition-all duration-300
그라데이션 색상 순환 애니메이션
모든 것에 적용되는 일반적인 시차 효과

규칙: 페이지당 최대 2-3개의 의도적인 모션. 각각은 계층 구조나 분위기를 제공해야 합니다. references/motion-recipes.md에서 12개 이상의 독특한 대안을 확인하세요.

블랙리스트 카피

다음 문구는 절대 작성하지 마십시오:

"워크플로우를 혁신하세요" / "당신의...를 변화시키세요"
"...의 힘을 해제하세요" / "원활하게 통합하세요"
"현대를 위해 구축된" / "당신의...를 강화하세요"
"당신의 X를 다음 단계로" / "당신이 필요로 하는 모든 것"
"[고통점]에 작별 인사를" / "최첨단 기술로 구동"

금지어 (사용자를 인용하는 경우 제외): 완벽한, 레버리지, 최첨단, 강력한, 확장 가능한, 권한 부여, 게임 체인저, 차세대, 전체론적인, 혁신적인, 최신식의, 깊이 파고들다

카피 규칙: 헤드라인은 구체적인 의미를 전달합니다. 섹션당 하나의 짧은 보조 문장. "30%를 삭제하는 것이 페이지를 개선한다면, 계속 삭제하세요."

블랙리스트 컴포넌트

그라데이션 CTA 버튼 (bg-gradient-to-r from-indigo-500 to-purple-600)
기본값으로 블러 처리된 배경 네비게이션 바 (backdrop-blur-md bg-white/80)
3열 그리드의 아이콘 + 제목 + 문단 (보편적인 기능 블록)
히어로 이미지 위의 떠 있는 배지/알약
원형 아바타와 별점이 있는 추천사 캐러셀
가로 스트립의 "신뢰하는" 로고 구름
일반적인 가격표 (무료 / 프로 / 엔터프라이즈 + "가장 인기" 배지)

타이포그래피 시스템

모든 프로젝트는 의도적인 타이포 시스템을 구축해야 합니다:

디스플레이 + 본문 페어링 — 두 개의 개별적인 서체 패밀리. 디스플레이 = 개성 있음, 본문 = 가독성 좋음. 둘 다에 같은 폰트를 사용하지 마십시오.
CSS 변수 — --font-display, --font-body, --font-accent (선택사항인 모노스페이스)
모듈러 스케일 — 비율을 선택하고(1.25 장3도, 1.333 완전4도, 1.5 증4도) 일관되게 적용하십시오.
무게 대비 — 의도적인 대비를 가진 최소 3개의 웨이트를 사용하십시오 (예: 본문 300, 부제목 600, 디스플레이 900).
크기 드라마 — 디스플레이 제목은 본문 크기의 3배 이상이어야 합니다. 수상작은 12:1 비율(180px 디스플레이 / 14px 본문)을 사용합니다. AI는 기본적으로 소심한 4:1 비율을 사용합니다.

references/typography-pairings.md에서 미학적 톤별로 정리된 20개 이상의 복사-붙여넣기 준비된 페어링을 확인하세요.

색상 시스템

주도 + 강조 모델 — 하나의 주요 색상군과 하나의 선명한 대비 강조색. 고르게 분포된 팔레트는 소심합니다.
CSS 사용자 정의 속성 — 최소한 다음을 정의하십시오: --color-surface, --color-text, --color-accent, --color-accent-contrast, --color-muted
분위기 있는 배경 — 절대 평평한 흰색을 사용하지 마십시오. 미묘한 그라데이션, 노이즈 텍스처, 또는 착색된 표면을 사용하십시오. 배경에는 깊이가 있어야 합니다.
어두움/밝음을 의도적인 선택으로 — 톤에 따라 하나를 기본값으로 선택하십시오. 체크박스 기능으로 다크 모드를 추가하지 마십시오.

references/color-systems.md에서 CSS 변수 블록이 포함된 15개 이상의 선별된 팔레트를 확인하세요.

공간 구성

그리드 깨기는 필수 — 페이지당 최소 하나의 요소가 그리드를 깨야 합니다: 오버랩, 블리드, 비대칭 배치, 대각선 흐름.
비대칭 레이아웃 — 7/12 + 5/12 열 분할, 다양한 거터(24px vs 64px), 균일하지 않은 패딩.
풀-블리드 히어로 — 상속된 거터나 공유된 최대 너비 제약 없이 가장자리에서 가장자리까지의 이미지.
디자인으로서의 여백 — 넉넉한 흰 공간은 의도적이며, 비어 있는 것이 아닙니다. 비대칭 여백(상단 120px, 하단 80px)은 리듬을 더합니다.
"모든 섹션은 하나의 역할을 가집니다" — 하나의 헤드라인, 하나의 보조 문장, 하나의 목적. 어떤 섹션도 두 가지 일을 하려고 하지 않습니다.
상호작용을 위한 카드만 — 콘텐츠가 기능하기 위해 테두리/그림자가 필요하지 않다면, 카드가 필요하지 않습니다.

references/layout-patterns.md에서 CSS Grid 코드가 포함된 6개의 랜딩 페이지 + 3개의 대시보드 레이아웃 와이어프레임을 확인하세요.

모션 및 애니메이션

정확히 2-3개의 의도적인 모션을 제공하십시오:

하나의 히어로 진입 — 스케일 + 페이드, 클립-패스 공개, 텍스트 분할 스태거, 또는 카운터 스크롤 패럴랙스.
하나의 스크롤 연결 효과 — 섹션 공개, 고정 패럴랙스 이미지, 진행 기반 변환, 또는 가로 스크롤 갤러리.
하나의 호버/공개 상호작용 — 자기 마우스 커서, 카드 원근 기울기, 밑줄 확장, 또는 색상 필드 이동.

구현: 일반 HTML의 경우 CSS 전용. React의 경우 Framer Motion. Vue/Svelte의 경우 내장 전환. 영향력이 큰 순간에 집중하세요 — 잘 짜여진 한 번의 페이지 로드가 흩어진 마이크로 인터랙션보다 낫습니다.

references/motion-recipes.md에서 CSS 및 Framer Motion 버전이 포함된 12개 이상의 복사-붙여넣기 레시피를 확인하세요.

배경 및 텍스처

절대 평평한 단색을 기본값으로 사용하지 마십시오. 분위기를 만드세요:

SVG 노이즈 — 그라데이션 위에 유기적인 그레인 텍스처를 위한 feTurbulence 필터.
그라데이션 메시 — 깊이를 위한 4-6개의 겹치는 방사형 그라데이션 (선형 그라데이션이 아님).
기하학적 패턴 — CSS radial-gradient 또는 linear-gradient를 통한 점 격자, 선 격자, 크로스-해칭.
필름 그레인 — 3-5% 불투명도의 노이즈 텍스처를 가진 의사 요소.
느리게 움직이는 앰비언트 애니메이션 — 배경에서 30초 이상 지속되는 오로라/블롭 키프레임.

references/background-textures.md에서 복사-붙여넣기 SVG 및 CSS 레시피를 확인하세요.

"인간의 손길" — 비싼 디자이너가 추가하는 것

모든 프로젝트에 이 중 최소 2개를 포함시키세요:

사용자 정의 커서 — 150ms lerp 지연으로 마우스를 따라가고 호버 시 확장되는 원형 div (20px).
비대칭 여백 — 균일하지 않은 패딩 (120px 8% 80px 12%), 다양한 섹션 여백.
하나의 규칙을 깨는 요소 — 2도 회전된 카드, 뷰포트 밖으로 흘러나오는 이미지, 색상이 반전된 섹션.
콘텐츠에 반응하는 타이포그래피 — 거터에 있는 인용문, 드롭 캡, 여백 인덱스, 중요도에 따른 가중치 스케일링.
스크롤 트리거 색상 이동 — 섹션 배경색이 콘텐츠의 감정적 톤과 일치하도록 변경.
가변 폰트 애니메이션 — 스크롤이나 호버 시 가중치를 애니메이션하는 font-variation-settings.

출력 유형 프로토콜

랜딩 페이지

구조: 히어로 → 지원 → 상세 → 최종 CTA (4개 섹션, 9개가 아님)

히어로: 풀-블리드, 브랜드 + 헤드라인 + 한 문장 + CTA + 지배적인 비주얼. 떠 있는 배지, 여러 CTA 없음.
지원: 하나의 구체적인 기능, 제안, 또는 증거 포인트.
상세: 분위기, 워크플로우 깊이, 또는 스토리.
최종 CTA: 단일 전환 행동.
뷰포트 예산: 헤더 + 히어로 콘텐츠가 초기 뷰포트에 맞아야 함.

대시보드 / 앱 UI

**"Linear 스타일의 절제"**를 따르세요:

강력한 타이포그래피와 간격을 갖춘 차분한 표면 계층 구조.
최소한의 색상 팔레트 (최대 2-3색).
밀도 높지만 읽기 쉬운 정보 아키텍처.
CSS Grid grid-template-areas를 통한 사이드바 (240px) + 메인 + 선택적 인스펙터 (320px).
단일 선명한 강조색. 카드 모자이크 없음, 제품 UI 뒤의 장식용 그라데이션 없음.

컴포넌트 라이브러리

먼저 디자인 토큰을 설정하세요 (CSS 사용자 정의 속성).
모든 컴포넌트의 다크 + 라이트 변형을 보여주세요.
원자적: 토큰 → 요소 → 컴포넌트 → 구성.
각 컴포넌트는 독립적으로 그리고 구성에서도 작동해야 합니다.

포스터 / 마케팅

단일 초점, 극적인 타이포그래피 스케일 (100px+ 헤드라인).
고대비 색상, 인쇄 품질 레이아웃.
포스터 콘텐츠가 있는 웹 페이지가 아닌 디지털 포스터를 디자인하세요.

웹 앱

기능적 우아함: 키보드 우선, 명확한 정보 계층 구조.
UI에 표시되는 상태 관리 (로딩, 빈 상태, 오류, 성공 상태).
넉넉한 마케팅 레이아웃이 아닌, 밀도 높은 정보 표시.

검증 리트머스 테스트

결과물을 제공하기 전에 다음 질문에 대해 자체 점검하세요. 2개 이상의 답변이 "아니오"라면, 사용자에게 보여주기 전에 반복하세요.

첫 번째 뷰포트에서 브랜드/제품이 명백하게 식별 가능합니까?
하나의 강력한 시각적 앵커가 있습니까? (여러 경쟁 요소가 아닌)
헤드라인만 스캔하여 페이지를 이해할 수 있습니까?
각 섹션은 정확히 하나의 역할을 수행합니까?
카드가 실제로 필요한가요, 아니면 게으른 기본값인가요?
디자인에 이름을 붙일 수 있는 미학적 방향이 있습니까? ("깔끔한 모던"이 아닌)
모든 장식용 그림자를 제거해도 프리미엄처럼 보입니까?
디자이너가 "나는 그걸 생각하지 못했을 텐데"라고 말할 만한 요소가 하나 이상 있습니까?
다른 AI 생성 페이지처럼 보입니까? 그렇다면 재설계하세요.

자세한 20점 평가 기준은 references/anti-slop-checklist.md를 참조하세요.

기술 적응

프레임워크	타이포그래피	모션	스타일링
일반 HTML/CSS	Google Fonts `@import`	CSS `@keyframes` + `animation-timeline`	CSS 사용자 정의 속성 + Grid/Flexbox
React / Next.js	`next/font` 또는 Google Fonts	Framer Motion (`motion` 컴포넌트)	Tailwind (매우 사용자 정의된 설정) 또는 CSS Modules
Vue	`index.html`의 Google Fonts	`<Transition>` 컴포넌트	Tailwind (사용자 정의) 또는 범위 지정 스타일
Svelte	`app.html`의 Google Fonts	내장 `transition:` 지시문	CSS 사용자 정의 속성을 사용한 범위 지정 `<style>`

Tailwind 규칙: Tailwind를 사용한다면 반드시 tailwind.config를 사용자 정의하세요 — 색상, 폰트, 테두리 반경, 그림자를 재정의하세요. 기본 Tailwind 설정은 AI 쓰레기를 만듭니다. 기본값을 사용하지 말고 확장하세요.

엣지 케이스

시나리오	응답
사용자가 디자인 방향을 제공하지 않음	대담한 톤을 선택하고, 선택을 설명하고, 진행합니다.
사용자가 "깔끔하고 심플하게"라고 말함	일반적이 아닌 스위스 모더니스트 미니멀리즘으로 해석합니다.
사용자가 브랜드 가이드라인을 제공함	이를 존중하지만, 한 단계 더 높이세요 — 분위기 있는 깊이, 의도적인 모션을 추가합니다.
사용자가 "Apple/Linear처럼"이라고 말함	구체적인 원칙(절제, 밀도, 타이포그래피)을 연구하세요 — 표면적인 미학을 복사하지 마십시오.
모호한 "예쁘게 만들어 줘"	문맥이 달리 제안하지 않는 한, 럭셔리 에디토리얼 톤의 랜딩 페이지로 취급합니다.
매우 빠른 요청	`scripts/init_frontend.py`를 사용하여 스캐폴딩하고, 이후 단계에서 세부 사항을 반복합니다.

프론트엔드 디자인 스킬