Flutter에서 디자인 일관성 잡는 법

결론부터

1. PRD 기반으로 프로토타입 만들고 (hot reload로 빠르게)
2. Theme 시스템으로 색상/폰트 통일하고
3. Widgetbook 또는 데모 페이지로 컴포넌트 정리하면

→ 디자인 일관성 유지 + Claude한테 보여주기 좋음

웹 버전은 데모 페이지로 컴포넌트 일관성 지키기 참고.

전체 흐름

PRD (뭘 만들지)
    ↓
Flutter 프로토타입 (hot reload로 빠르게 확인)
    ↓
Theme 시스템 구축 (ColorScheme, TextTheme)
    ↓
컴포넌트 데모 페이지 (Widgetbook 또는 자체)
    ↓
실제 구현

웹이랑 다른 점: | 웹 | Flutter | |—|———| | V0로 AI가 UI 뽑아줌 | V0 같은 게 약함. 대신 hot reload가 있음 | | 디자인 기반 없음 | Material Design이 기본 | | shadcn 복붙 문화 | 직접 만드는 게 일반적 |

Flutter는 hot reload가 있어서 직접 만들면서 바로바로 확인하는 게 빠름. 저장하면 0.5초 안에 화면 반영됨.

Material Design이 뭔데?

구글이 만든 디자인 시스템임. “버튼은 이렇게 생겨야 하고, 색상은 이렇게 쓰고, 간격은 이만큼” 같은 규칙 모음.

왜 알아야 함?

Flutter는 Material Design을 기본으로 씀. ElevatedButton, TextField, Card 같은 위젯이 다 Material Design 규칙 따라 만들어져 있음.

// 이 버튼이 둥글고, 그림자 있고, 눌렀을 때 물결 효과 나는 이유?
// → Material Design 규칙을 따르기 때문
ElevatedButton(
  onPressed: () {},
  child: Text('버튼'),
)

Material Design 버전