Material UI 2

Material UI 기반 디자인 진행 순서

1. 요구사항 & UX 리서치서비스 목표·주요 유저 시나리오 정의어떤 기능/화면이 필요한지 플로우 정리 (로그인, 대시보드, 설정 등)경쟁 서비스 벤치마킹 (UX 패턴 참고 → MUI 컴포넌트 맵핑 가능)2. 정보 구조 & 와이어프레임페이지 플로우 / IA: 어떤 페이지들이 있고, 어떤 경로로 이동하는지 결정와이어프레임: 흑백 박스 수준에서 구조만 정의예: 상단바(Header), 좌측 네비게이션, 메인 콘텐츠, 버튼 위치이때부터 MUI 기본 컴포넌트(Button, AppBar, Grid 등)로 대응할 수 있음3. 디자인 토큰 확정 (MUI Theme Mapping)브랜드 컬러 → theme.palette.primary / secondary폰트/글자 크기 → theme.typography간격/라운드 값 →..

WEB FE Repository 2025.10.03

FE 작업 순서 (Material UI + 일반 Webapp 기준)

0) 킥오프 · 요구사항 정리화면 목록/유스케이스/권한/네비게이션 플로우 확정API 스펙 합의(가능하면 OpenAPI/Swagger 문서로 고정)디자인 산출물(Figma) 수령 및 컴포넌트 카탈로그 확정1) 디자인 → 디자인 토큰화 (MUI 테마 맵핑)브랜드 컬러/중립 컬러 → theme.palette타이포 시스템(폰트/크기/행간) → theme.typography라운드/간격 → theme.shape.borderRadius, spacing 스케일브레이크포인트 → theme.breakpoints→ 산출물: “디자인-토큰 치환표(맵핑표)” 1장토큰이란, 색상, 글꼴, 크기, 간격, 그림자 같은 디자인 속성들을 재사용 가능한 변수로 추상화한 것을 의미한다. const theme = createTheme({ ..

WEB FE Repository 2025.10.03