← ClaudeAtlas

frontend-designlisted

UI/UX 디자인 원칙 가이드
U2SY26/u2dia-kanban · ★ 3 · Web & Frontend · score 72
Install: claude install-skill U2SY26/u2dia-kanban
# Frontend Design — UI/UX 원칙 ## 사용 시기 - "UI 디자인", "랜딩 페이지", "대시보드", "컴포넌트 디자인" 요청 시 ## 디자인 헌법 1. **사용자 중심** — 기능보다 사용자 경험 우��� 2. **일관성** — 색상, 타이포그래피, 간격, 컴포넌트 스타일 통일 3. **접근성** — 대비율, 키보드 네비게이션, 스크린 리더 고려 4. **반응형** — 모바일 → 태블릿 → 데스크톱 적응 5. **성능** — 초기 로딩 최소화, 지연 로딩, 불필요한 렌더링 제거 ## 시각적 원칙 - **계층(Hierarchy)**: 크기/색상/위치로 정보 우선순위 표현 - **여백(Whitespace)**: 충분한 여백으로 가독성 확보 - **대비(Contrast)**: 텍스트와 배경의 명확한 대비 - **정렬(Alignment)**: 그리드 시스템 기반 정렬 ## e커머스 특화 - **대시보드**: 매출/재고/주문을 한 눈에 파악 가능한 레이아웃 - **차트**: Recharts/D3.js로 전문적 도표 — 인터랙티브, 반응형 - **테이블**: 대량 데이터 — ag-grid 또는 가상화 테이블 사용 - **컬러**: 상승(초록), 하락(빨강), 경고(노랑) 등 데이터 시각화 컬러 규칙 ## 금지 사항 없음 > 특정 프레임워크나 라이브러리를 강제하지 않는다. > 프로젝트에 최적인 도구를 자유롭게 선택한다.