Material UI 기반 디자인 진행 순서

1. 요구사항 & UX 리서치

• 서비스 목표·주요 유저 시나리오 정의
• 어떤 기능/화면이 필요한지 플로우 정리 (로그인, 대시보드, 설정 등)
• 경쟁 서비스 벤치마킹 (UX 패턴 참고 → MUI 컴포넌트 맵핑 가능)

---

2. 정보 구조 & 와이어프레임

• 페이지 플로우 / IA: 어떤 페이지들이 있고, 어떤 경로로 이동하는지 결정
• 와이어프레임: 흑백 박스 수준에서 구조만 정의
  • 예: 상단바(Header), 좌측 네비게이션, 메인 콘텐츠, 버튼 위치
  • 이때부터 MUI 기본 컴포넌트(Button, AppBar, Grid 등)로 대응할 수 있음

---

3. 디자인 토큰 확정 (MUI Theme Mapping)

• 브랜드 컬러 → theme.palette.primary / secondary
• 폰트/글자 크기 → theme.typography
• 간격/라운드 값 → theme.spacing, theme.shape.borderRadius
• 브레이크포인트 → theme.breakpoints
  • 여기서 팀 공통 디자인 규칙(Design Tokens)을 코드로 연결할 수 있음

---

4. UI 디자인 (High-Fidelity Mockup)

• Figma 등에서 실제 색상, 폰트, 아이콘, MUI 컴포넌트 스타일링 반영
• MUI의 컴포넌트 카탈로그를 기준으로 화면 설계
  • 버튼 → Button
  • 폼 → TextField, Select, Checkbox
  • 데이터 표시 → Card, Table, Chip
• 필요 시 컴포넌트 변형(Variants) 정의

---

5. 프로토타이핑

• Figma에서 실제 MUI 컴포넌트에 가까운 프로토타입 제작
• 사용자 테스트 → 피드백 반영

---

6. 검증 & 개발 핸드오프

• 최종 디자인 시안 + 토큰 정의를 개발자에게 전달
• Figma Inspect 또는 Storybook 기반 문서로 컴포넌트-디자인 매핑 공유
• 개발자는 ThemeProvider와 sx/styled를 이용해 빠르게 코드화