DESIGN SYSTEM

UXUI 컴포넌트 시스템

시각 스타일을 넘어서, 사용자 행동을 유도하는 인터랙션 규칙까지 포함한 포트폴리오용 시스템 문서입니다.

핵심 컴포넌트 매핑 (구현 + 경험)

컴포넌트프론트엔드 관점UXUI 관점
Navigation Pattern상단 글로벌 네비 + 좌측 섹션 네비를 구조적으로 분리현재 위치와 다음 행동을 동시에 인지할 수 있게 함
Insight Card공통 카드 레이아웃과 타이포 계층을 컴포넌트 단위로 통일요약-근거-액션 흐름을 짧은 시선 이동으로 읽게 함
Feedback Chips토글 버튼 패턴과 상태 스타일(active/hover/disabled) 정의감정 표현을 저마찰 입력으로 전환해 반응 수집률 개선
Data Visualization Blocks차트 컨테이너의 크기/여백/축 스타일을 규칙화추세 비교 시 인지 부담을 줄이도록 시각 노이즈 최소화

디자인 토큰/패턴 규칙

Color
의미 중심 팔레트: 강조(gold), 경고(red), 보조(muted)
Radius
컴포넌트 모서리 반경을 12/16px 기준으로 통일
Spacing
8pt scale 기반으로 카드 내부 여백 리듬 유지
Typography
헤드라인(강조) / 본문(가독) 역할을 분리
Motion
정보 전달을 방해하지 않는 200~500ms 범위만 사용
A11y
텍스트 대비와 클릭 타겟(최소 40px) 기준 유지

주요 산출물

IA

대시보드/리포트/피드백 흐름의 정보 구조 정의

Component Spec

상태별 스타일, 크기, 인터랙션, 사용 맥락을 문서화

Prototype Rule

모션 타이밍/전환 규칙으로 화면 간 일관성 확보