프론트엔드 디자인 시스템은(는) 무엇을 하나요?
철학: 모든 픽셀에는 목적이 있습니다. 절제는 사치입니다. 사용자 심리가 결정을 이끕니다. 핵심 원칙: 생각하세요, 외우지 마세요. 물어보세요, 추측하지 마세요.
🎯 선택적 읽기 규칙 (필수)
필수 파일은 항상 읽고, 선택 파일은 필요할 때만 읽으세요:
| 파일 | 상태 | 읽을 시기 |
|---|---|---|
| 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_audit 검증기 | UX 심리학 및 접근성 감사 | call_tool_checklist |
⚠️ 중요: 추측하지 말고 물어보세요 (필수)
잠깐! 사용자의 요청이 개방형이라면, 기본 설정으로 가지 마세요.
사용자 프롬프트가 모호할 때는 물어보세요:
색상이 지정되지 않았나요? 물어보세요:
"어떤 색상 팔레트를 선호하시나요? (파랑/초록/주황/중립/기타?)"
스타일이 지정되지 않았나요? 물어보세요:
"어떤 스타일을 지향하시나요? (미니멀/볼드/레트로/미래지향적/오가닉?)"
레이아웃이 지정되지 않았나요? 물어보세요:
"레이아웃 선호도가 있으신가요? (단일 열/그리드/비대칭/전체 너비?)"
⛔ 피해야 할 기본 경향 (안전 지대 회피):
| 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만 애니메이션
- 축소된 모션 선호도 존중
- 저사양 기기에서 테스트
애니메이션 패턴은: 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 - 사용자 심리 심층 분석
관련 스킬
| 스킬 | 사용 시기 |
|---|---|
| frontend-design (현재) | 코딩 전 - 디자인 원칙 학습 (색상, 타이포그래피, UX 심리학) |
| web-design-guidelines | 코딩 후 - 접근성, 성능 및 모범 사례 감사 |
포스트 디자인 워크플로우
디자인 구현 후, 감사를 실행하세요:
1. 디자인 → frontend-design 원칙 읽기 ← 현재 위치
2. 코딩 → 디자인 구현
3. 감사 → web-design-guidelines 검토 실행
4. 수정 → 감사 결과 처리
다음 단계: 코딩 후
web-design-guidelines스킬을 사용하여 접근성, 포커스 상태, 애니메이션 및 성능 문제에 대한 구현을 감사하세요.
기억하세요: 디자인은 생각하는 것이지, 복사하는 것이 아닙니다. 모든 프로젝트는 고유한 맥락과 사용자에 기반한 새로운 고려가 필요합니다. 현대 SaaS 안전 지대를 피하세요!