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

철학: 모든 픽셀에는 목적이 있습니다. 절제는 사치입니다. 사용자 심리가 결정을 이끕니다. 핵심 원칙: 생각하세요, 암기하지 마세요. 물어보세요, 추측하지 마세요.

🎯 선택적 읽기 규칙 (필수)

필수 파일은 항상 읽고, 선택 파일은 필요할 때만 읽으세요:

파일	상태	언제 읽을까요
ux-psychology.md	🔴 필수	항상 먼저 읽으세요!
color-system.md	⚪ 선택	색상/팔레트 결정 시
typography-system.md	⚪ 선택	글꼴 선택/조합 시
visual-effects.md	⚪ 선택	글래스모피즘, 그림자, 그라디언트 관련
animation-guide.md	⚪ 선택	애니메이션이 필요할 때
motion-graphics.md	⚪ 선택	Lottie, GSAP, 3D 관련
decision-trees.md	⚪ 선택	컨텍스트 템플릿 필요 시

🔴 ux-psychology.md = 항상 읽으세요. 다른 파일은 관련이 있을 때만 읽으세요.

🔧 런타임 스크립트

감사를 위해 다음을 실행하세요 (읽지 말고 그냥 실행):

스크립트	목적	사용법
수동 감사	UX 심리 및 접근성 감사	브라우저 개발자 도구 및 Lighthouse 사용

⚠️ 중요: 추측하지 말고 물어보세요 (필수)

멈춰! 사용자의 요청이 열려 있다면, 기본 설정으로 처리하지 마세요.

사용자 프롬프트가 모호할 때 물어보세요:

색상이 지정되지 않았나요? 물어보세요:

"어떤 색상 팔레트를 선호하시나요? (파랑/초록/주황/중립/기타?)"

스타일이 지정되지 않았나요? 물어보세요:

"어떤 스타일을 원하시나요? (미니멀/대담/레트로/미래지향/자연친화?)"

레이아웃이 지정되지 않았나요? 물어보세요:

"레이아웃 선호도가 있으신가요? (단일 열/그리드/비대칭/전체 너비?)"

⛔ 피해야 할 기본 경향 (안전한 항만 회피):

AI 기본 경향	왜 나쁜가	대신 생각할 것
벤토 그리드 (현대 클리셰)	모든 AI 디자인에 사용됨	이 콘텐츠에 그리드가 왜 필요한가?
히어로 분할 (좌/우)	예측 가능하고 지루함	거대 타이포그래피나 세로 내러티브는 어떨까?
메시/오로라 그라디언트	새로운 "게으른" 배경	급진적인 색상 조합은 무엇일까?
글래스모피즘	AI의 "프리미엄"에 대한 생각	단단하고 대비가 높은 플랫은 어떨까?
딥 사이언 / 핀테크 블루	보라색 금지에서 오는 안전한 항만	빨강, 검정, 네온 그린은 왜 안 될까?
"오케스트레이트 / 엠파워"	AI 생성 카피라이팅	인간은 이걸 어떻게 말할까?
어두운 배경 + 네온 글로우	과도하게 사용됨, "AI 스러움"	브랜드가 실제로 필요로 하는 것은?
모든 것을 둥글게	일반적/안전함	날카롭고 브루탈리즘적인 가장자리는 어디에 쓸 수 있을까?

🔴 "당신이 선택하는 모든 '안전한' 구조는 당신을 평범한 템플릿에 한 걸음 더 가깝게 만듭니다. 위험을 감수하세요."

1. 제약 조건 분석 (항상 먼저)

디자인 작업 전에, 다음 질문에 답하거나 사용자에게 물어보세요:

제약 조건	질문	왜 중요한가
일정	시간이 얼마나 있나요?	복잡성 결정
콘텐츠	준비되었나요, 아니면 플레이스홀더인가요?	레이아웃 유연성에 영향
브랜드	기존 가이드라인이 있나요?	색상/글꼴을 결정할 수 있음
기술	어떤 스택인가요?	기능에 영향
대상	정확히 누구인가요?	모든 시각적 결정을 주도

대상 → 디자인 접근법

대상	생각할 점
Z세대	대담하고, 빠르며, 모바일 우선, 진정성
밀레니얼	깔끔하고, 미니멀하며, 가치 중심
X세대	친숙하고, 신뢰할 수 있으며, 명확함
베이비붐 세대	읽기 쉽고, 고대비이며, 단순함
B2B	전문적이고, 데이터 중심이며, 신뢰
럭셔리	절제된 우아함, 여백

2. UX 심리학 원칙

핵심 법칙 (내면화하세요)

법칙	원칙	적용
힉의 법칙	선택지가 많을수록 결정이 느려짐	옵션을 제한하고 점진적 공개 사용
피츠의 법칙	더 크고 가까울수록 클릭하기 쉬움	CTA 크기를 적절히 조정
밀러의 법칙	작업 기억에 약 7개 항목	콘텐츠를 그룹으로 청크화
폰 레스토프 효과	다른 것은 기억에 남음	CTA를 시각적으로 구별되게
위치 효과	처음과 마지막이 가장 잘 기억됨	핵심 정보는 시작과 끝에

감성 디자인 수준

본능적 (즉각적) → 첫인상: 색상, 이미지, 전반적인 느낌
행동적 (사용)   → 사용하기: 속도, 피드백, 효율성
반성적 (기억)   → 사용 후: "이게 나에 대해 말해주는 것이 좋다"

신뢰 구축

민감한 작업에 대한 보안 표시
관련성 있는 사회적 증거
명확한 연락처/지원 접근
일관되고 전문적인 디자인
투명한 정책

3. 레이아웃 원칙

황금비율 (φ = 1.618)

비례적 조화를 위해 사용:
├── 콘텐츠 : 사이드바 = 대략 62% : 38%
├── 각 제목 크기 = 이전 제목 × 1.618 (극적인 스케일을 위해)
├── 간격: sm → md → lg (각각 × 1.618)

8포인트 그리드 개념

모든 간격과 크기는 8의 배수:
├── 좁음: 4px (미세 조정용 절반 단계)
├── 작음: 8px
├── 중간: 16px
├── 큼: 24px, 32px
├── 특대: 48px, 64px, 80px
└── 콘텐츠 밀도에 따라 조정

주요 크기 조정 원칙

요소	고려사항
터치 대상	최소한의 편안한 탭 크기
버튼	중요도 계층에 따른 높이
입력 필드	정렬을 위해 버튼 높이와 일치
카드	일관된 패딩, 숨 쉴 공간
읽기 너비	45-75자가 최적

4. 색상 원칙

60-30-10 규칙

60% → 기본/배경 (차분하고 중립적인 베이스)
30% → 보조 (지원 영역)
10% → 강조 (CTA, 하이라이트, 주의)

색상 심리학 (의사결정용)

다음이 필요하다면...	다음 색조 고려	피해야 할 것
신뢰, 평온함	파랑 계열	공격적인 빨강
성장, 자연	초록 계열	산업적 회색
에너지, 긴급함	주황, 빨강	수동적인 파랑
럭셔리, 창의성	딥 틸, 골드, 에메랄드	싸구려 느낌의 밝은 색
깔끔함, 미니멀	중립색	압도적인 색상

선택 과정

업계는 무엇인가요? (옵션을 좁힘)
감정은 무엇인가요? (기본 색상 선택)
라이트 모드 또는 다크 모드인가요? (기반 설정)
지정되지 않았다면 사용자에게 물어보세요

자세한 색상 이론은 color-system.md 참조

5. 타이포그래피 원칙

스케일 선택

콘텐츠 유형	스케일 비율	느낌
밀집된 UI	1.125-1.2	컴팩트, 효율적
일반 웹	1.25	균형 (가장 일반적)
에디토리얼	1.333	읽기 쉽고, 넉넉함
히어로/디스플레이	1.5-1.618	극적인 인상

조합 개념

대비 + 조화:
├── 계층에 충분히 다름
├── 통일감에 충분히 비슷함
└── 일반적으로: 디스플레이 + 중립, 또는 세리프 + 산세리프

가독성 규칙

줄 길이: 45-75자가 최적
줄 높이: 본문 텍스트 1.4-1.6
대비: WCAG 요구사항 확인
크기: 웹 본문 16px 이상

자세한 타이포그래피는 typography-system.md 참조

6. 시각 효과 원칙

글래스모피즘 (적절할 때)

주요 속성:
├── 반투명 배경
├── 배경 흐림
├── 정의를 위한 미세한 테두리
└── ⚠️ **경고:** 표준 파랑/흰색 글래스모피즘은 현대 클리셰입니다. 급진적으로 사용하거나 전혀 사용하지 마세요.

그림자 계층

높이 개념:
├── 더 높은 요소 = 더 큰 그림자
├── Y-오프셋 > X-오프셋 (위에서 빛)
├── 여러 레이어 = 더 사실적
└── 다크 모드: 글로우로 대체 필요할 수 있음

그라디언트 사용

조화로운 그라디언트:
├── 색상환에서 인접한 색 (유사)
├── 또는 같은 색조, 다른 명도
├── 거친 보색 쌍 피하기
├── 🚫 **메시/오로라 그라디언트 사용 금지** (떠다니는 덩어리)
└── 프로젝트마다 급진적으로 다르게

전체 효과 가이드는 visual-effects.md 참조

7. 애니메이션 원칙

타이밍 개념

지속 시간 기준:
├── 거리 (멀수록 = 더 길게)
├── 크기 (클수록 = 더 느리게)
├── 중요성 (중요할수록 = 명확하게)
└── 맥락 (긴급 = 빠르게, 럭셔리 = 느리게)

이징 선택

동작	이징	이유
진입	Ease-out	감속, 자리잡기
이탈	Ease-in	가속, 빠져나가기
강조	Ease-in-out	부드럽고, 의도적
장난	Bounce	재미, 활기참

성능

transform과 opacity만 애니메이션
reduced-motion 환경 설정 존중
저사양 기기에서 테스트

애니메이션 패턴은 animation-guide.md, 고급은 motion-graphics.md 참조

8. "와우 팩터" 체크리스트

프리미엄 지표

넉넉한 여백 (럭셔리 = 숨 쉴 공간)
미묘한 깊이와 입체감
부드럽고 목적 있는 애니메이션
세부 사항에 대한 주의 (정렬, 일관성)
응집력 있는 시각적 리듬
사용자 정의 요소 (기본값이 아닌)

신뢰 구축 요소

감정적 트리거

의도된 감정을 불러일으키는 히어로
인간적인 요소 (얼굴, 이야기)
진행/성취 지표
기쁨을 주는 순간

9. 안티 패턴 (하지 말아야 할 것)

❌ 게으른 디자인 지표

고려 없이 기본 시스템 글꼴 사용
일치하지 않는 스톡 이미지
일관성 없는 간격
너무 많은 경쟁 색상
계층 없이 텍스트 벽
접근성 부족한 대비

❌ AI 경향 패턴 (피하세요!)

매 프로젝트마다 같은 색상
어두움 + 네온을 기본값으로
모든 것에 보라색/바이올렛 (보라색 금지 ✅)
단순한 랜딩 페이지에 벤토 그리드
메시 그라디언트 및 글로우 효과
동일한 레이아웃 구조 / Vercel 클론
사용자 선호도를 묻지 않음

❌ 다크 패턴 (비윤리적)

숨겨진 비용
가짜 긴박감
강제 행동
기만적인 UI
확인 샤밍

10. 의사결정 과정 요약

모든 디자인 작업에 대해:

1. 제약 조건
   └── 일정, 브랜드, 기술, 대상은 무엇인가?
   └── 불명확하면 → 물어보기

2. 콘텐츠
   └── 어떤 콘텐츠가 존재하는가?
   └── 계층은 무엇인가?

3. 스타일 방향
   └── 맥락에 적절한 것은?
   └── 불명확하면 → 물어보기 (기본값으로 처리하지 마세요!)

4. 실행
   └── 위 원칙을 적용
   └── 안티 패턴과 대조

5. 검토
   └── "이것이 사용자에게 도움이 되는가?"
   └── "내 기본값과 다른가?"
   └── "이것이 자랑스러운가?"

참조 파일

특정 영역에 대한 더 깊은 지침:

color-system.md - 색상 이론 및 선택 과정
typography-system.md - 글꼴 조합 및 스케일 결정
visual-effects.md - 효과 원칙 및 기술
animation-guide.md - 모션 디자인 원칙
motion-graphics.md - 고급: Lottie, GSAP, SVG, 3D, 파티클
decision-trees.md - 컨텍스트별 템플릿
ux-psychology.md - 사용자 심리 심층 분석

포스트 디자인 워크플로우

디자인을 구현한 후 감사를 실행하세요:

1. 디자인  → 프론트엔드 디자인 원칙 읽기 ← 당신은 여기 있습니다
2. 코딩    → 디자인 구현
3. 감사    → web-design-guidelines 리뷰 실행
4. 수정    → 감사 결과 처리

다음 단계: 코딩 후 web-design-guidelines 스킬을 사용하여 구현의 접근성, 포커스 상태, 애니메이션 및 성능 문제를 감사하세요.

기억하세요: 디자인은 생각하는 것이지, 복사하는 것이 아닙니다. 모든 프로젝트는 고유한 맥락과 사용자를 기반으로 새로운 고려가 필요합니다. 현대 SaaS 안전 항만을 피하세요!

스킬	언제 사용할까요
frontend-design (이것)	코딩 전 - 디자인 원칙 학습 (색상, 타이포그래피, UX 심리학)
web-design-guidelines	코딩 후 - 접근성, 성능, 모범 사례 감사

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

문서