디자인 가이드

📍 중앙 집중식 설정

일도-guide 모든 디자인 설정은 lib/design_config.dart에서 관리합니다.

class DesignConfig {
  static final notification = NotificationDesign();
  static final toast = ToastDesign();
  static final widget = WidgetDesign();
  static final splash = SplashDesign();
}

📢 알림 디자인

알림 색상

class NotificationDesign {
  Color get accentColor => Color(0xFF667EEA);
  Color get backgroundColor => Colors.white;
  Color get textColor => Colors.black87;
}

알림 아이콘

// android/app/src/main/res/drawable/
notification_icon.png  // 기본 아이콘
notification_small.png // 작은 아이콘

알림 사운드

// android/app/src/main/res/raw/
notification_sound.mp3

💬 Toast 디자인

배경 색상

class ToastDesign {
  Color get backgroundColor => Colors.black87;
  Color get textColor => Colors.white;
  double get fontSize => 16.0;
}

위치 설정

ToastGravity get position => ToastGravity.BOTTOM;
int get duration => Toast.LENGTH_SHORT;

🏠 홈 위젯 디자인

레이아웃 템플릿

android_widget_templates/widget_layout.xml

<LinearLayout
    android:background="@drawable/widget_background"
    android:padding="16dp">
    
    <TextView
        android:id="@+id/widget_title"
        android:textSize="18sp"
        android:textColor="#FFFFFF" />
    
    <TextView
        android:id="@+id/widget_value"
        android:textSize="32sp"
        android:textColor="#667EEA" />
</LinearLayout>

배경 디자인

android_widget_templates/widget_background.xml

<shape xmlns:android="...">
    <solid android:color="#FFFFFF" />
    <corners android:radius="16dp" />
    <padding android:left="16dp" />
</shape>

🎨 스플래시 화면

배경 색상

android_splash_templates/colors.xml

<color name="splash_background">#667EEA</color>
<color name="splash_logo">#FFFFFF</color>

로고 이미지

// android/app/src/main/res/
drawable/splash_logo.png      // 일반 해상도
drawable-hdpi/splash_logo.png // 고해상도

🎯 프리셋

다크 모드

class DarkTheme {
  static final notification = NotificationDesign(
    accentColor: Color(0xFF667EEA),
    backgroundColor: Color(0xFF1A202C),
    textColor: Colors.white,
  );
}

라이트 모드

class LightTheme {
  static final notification = NotificationDesign(
    accentColor: Color(0xFF667EEA),
    backgroundColor: Colors.white,
    textColor: Colors.black87,
  );
}

💡 커스터마이징 팁

• 일관성: 모든 컴포넌트에 동일한 색상 팔레트 사용
• 가독성: 충분한 대비(Contrast) 유지
• 브랜딩: 회사 브랜드 색상 적용
• 접근성: WCAG 가이드라인 준수
• 일관된 폰트: 모든 텍스트에 동일한 폰트 패밀리

📁 파일 위치

• lib/design_config.dart - Dart 설정
• android_widget_templates/ - 위젯 템플릿
• android_splash_templates/ - 스플래시 템플릿
• android/app/src/main/res/ - 리소스 파일

디자인 설정 후 Flutter 앱을 다시 빌드하세요!
flutter run