프론트엔드 디자인 시스템은(는) 무엇을 하나요?
철학: 모든 픽셀에는 목적이 있습니다. 절제는 사치입니다. 사용자 심리가 결정을 주도합니다. 핵심 원칙: 외우지 말고 생각하세요. 추정하지 말고 질문하세요.
🎯 선택적 읽기 규칙 (필수)
필수 파일은 항상 읽고, 선택 파일은 필요할 때만 읽으세요:
| 파일 | 상태 | 읽어야 할 때 |
|---|---|---|
| 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 = 항상 읽기. 나머지는 관련될 때만 읽으세요.
🔧 런타임 스크립트
감사를 위해 실행하세요 (읽지 말고 실행만):
| 스크립트 | 목적 | 사용법 |
|---|---|---|
scripts/ux_audit.py | UX 심리 및 접근성 감사 | python scripts/ux_audit.py <프로젝트 경로> |
⚠️ 중요: 추정하지 말고 질문하세요 (필수)
멈춤! 사용자의 요청이 열린 질문이라면, 자신의 선호를 기본값으로 사용하지 마세요.
사용자 프롬프트가 모호할 때 질문하세요:
색상이 지정되지 않음? 질문:
"어떤 색상 팔레트를 선호하시나요? (파랑/초록/주황/중립/기타?)"
스타일이 지정되지 않음? 질문:
"어떤 스타일을 원하시나요? (미니멀/대담/레트로/미래적/오가닉?)"
레이아웃이 지정되지 않음? 질문:
"레이아웃 선호도가 있으신가요? (단일 열/그리드/비대칭/전체 너비?)"
⛔ 피해야 할 AI 기본 경향 (안전 지대 금지):
| 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 | 부드럽고 의도적 |
| 장난스러움 | 바운스 | 재미, 활기참 |
성능
- 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 - 사용자 심리 심층 분석
관련 스킬
| 스킬 | 사용 시기 |
|---|---|
| frontend-design (현재) | 코딩 전 - 디자인 원칙 학습 (색상, 타이포그래피, UX 심리) |
| web-design-guidelines | 코딩 후 - 접근성, 성능 및 모범 사례 감사 |
디자인 후 워크플로우
디자인을 구현한 후 감사를 실행하세요:
1. 디자인 → frontend-design 원칙 읽기 ← 여기 있습니다
2. 코드 → 디자인 구현
3. 감사 → web-design-guidelines 검토 실행
4. 수정 → 감사 결과 처리
다음 단계: 코딩 후
web-design-guidelines스킬을 사용하여 접근성, 포커스 상태, 애니메이션 및 성능 문제에 대한 구현을 감사하세요.
기억하세요: 디자인은 생각하는 것이지, 복사하는 것이 아닙니다. 모든 프로젝트는 고유한 맥락과 사용자에 기반한 새로운 고려가 필요합니다. 현대 SaaS 안전 지대를 피하세요!