[GDG Seoul X P-typer] D.light Meetup 2018년 7월 28일 발표 자료 입니다. 조은실 개발자(레진엔터테인먼트) : 머터리얼 디자인 테마와 플러터 (부제: 웃으며 협업합시다.) 쇼핑앱 UI 화면을 머터리얼 디자인 테마를 적용하여 개발합니다. 디자이너가 같은 레이아웃에서 디자인 테마를 변경했을 때, 이를 앱에 쉽게 반영, 개발하기 위해 필요한 속성 값에 대해 이야기합니다. 두 세가지 버전의 테마를 앱에 반영하고 변경해가는 개발 과정을 다루고자 합니다. keyword: design-system, material theme editor, flutter

1. 머터리얼 디자인 테마와 플러터
조은실

2. 디자이너 님들
개발자가 다 안 된다고 하니까 힘드시죠?

3. 개발자 님들
디자이너가 듣도 보도 못한 디자인 주니까
힘드시죠?

4. 이 발표를 통해
디자이너 님들
디자인 테마 변경을 위해 어떤 정보를
개발자에게 제공해주면 좋을지

5. 이 발표를 통해
개발자 님들
디자인 테마 변경을 통해 일괄적으로
디자인을 반영하고 개발하는 방법을

6. 함께 고민하고 알아갔으면 좋겠습니다.

7. Material Theme Editor
머터리얼 테마 에디터
나만의 머터리얼 테마를 만들고
색상, 모양 및 타이포그래피 스타일을 적용하여
디자인 라이브러리를 만들어주는 툴

8. 왜 사용했나요?
디자인 전문가가 아니여도
나만의 머터리얼 디자인 테마를
손쉽게 만들수 있어요.
with

9. Flutter
플러터
iOS, 안드로이드에서
고품질 네이티브 인터페이스를 만들기 위한
구글의 모바일 앱 SDK

10. 왜 사용했나요?
제일 많은
머터리얼 디자인 컴포넌트를(MDC-Flutter)
지원해요.
with

11. 더 알고 가기
Google
Material Design Roadmap
https://github.com/material-components/material-components/blob/develop/ROADMAP.md
Flutter
Material Components Widgets
https://flutter.io/widgets/material/

12. 할 일

13. Color Theme
컬러

14. colors.dart
const themePrimary = const Color(0xFFEDE3D0);
const themePrimaryDark = const Color(0xFFAD8D4D);
const themePrimaryLight = const Color(0xFFffffff);
const themeSecondary = const Color(0xFF000000);
const themeSecondaryDark = const Color(0xFF000000);
const themeSecondaryLight = const Color(0xFF434343);
const themeSurface = const Color(0xFFffffff);
const themeSurfaceDark = const Color(0xFFf6f6f6);
const themeSurfaceLight = const Color(0xFFffffff);
const themePrimaryText = const Color(0xFF060606);
const themeSecondaryText = const Color(0xFFffffff);
const themeSurfaceText = const Color(0xFF060606);
const themeErrorRed = const Color(0xFFC5032B);

15. themes.dart
ThemeData buildFirstTheme() {
final ThemeData base = ThemeData.light();
return base.copyWith(
primaryColor: themePrimary,
primaryColorLight: themePrimaryLight,
primaryColorDark: themePrimaryDark,
accentColor: themeSecondary,
buttonColor: themeSecondary,
backgroundColor: themeSurface,
errorColor: themeErrorRed,
);
}
app.dart
final ThemeData firstTheme = buildFirstTheme();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appName,
home: Backdrop(
frontLayer: HomePage(),
backLayer: BackPage(
onTap: _onProductTap,
productItem: _productItem
)
),
...
theme: firstTheme
);
}

16. detail.dart
@override
Widget build(BuildContext context) {
...
return Scaffold(
appBar: AppBar(
title: Text(productItem.hashtag.toUpperCase()),
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
},
)
),
body: Stack(
children: <Widget>[
...
Positioned(
top: 16.0,
right: 16.0,
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.favorite),
),
)
],
)
);
}

17. login.dart
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: themePrimary,
child: ListView(
padding: EdgeInsets.symmetric(horizontal: 24.0, vertical: 24.0),
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
onPressed: () {},
child: Text('Sign up')
)
],
),
...
RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Login')
),
...

18. Typography Theme
타이포그래피
Headline 3 / Gilroy ExtraBold
Headline 4 / Gilroy ExtraBold
Headline 5 / Gilroy ExtraBold
Headline 6 / Gilroy ExtraBold
Body 1 / Gilroy Light
Body 2 / Gilroy Light
Subtitle 1 / Gilroy ExtraBold
BUTTON / Gilroy ExtraBold

19. pubspec.yaml
fonts:
- family: Gilroy
fonts:
- asset: fonts/Gilroy-ExtraBold.otf
- asset: fonts/Gilroy-Light.otf

20. themes.dart
TextTheme _buildTextTheme(TextTheme base, Color themeTextColor) {
return base.copyWith(
display2: base.display2.copyWith(
fontSize: 48.0,
fontWeight: FontWeight.bold
),
display1: base.display1.copyWith(
fontSize: 40.0,
fontWeight: FontWeight.bold
),
headline: base.headline.copyWith(
fontSize: 24.0,
fontWeight: FontWeight.bold
),
title: base.title.copyWith(
fontSize: 20.0,
fontWeight: FontWeight.bold
),
subhead: base.subhead.copyWith(
fontSize: 16.0,
fontWeight: FontWeight.bold
),
body2: base.body2.copyWith(
fontSize: 16.0
),
body1: base.body1.copyWith(
fontSize: 14.0
),
button: base.button.copyWith(
fontSize: 20.0,
fontWeight: FontWeight.bold
),
).apply(
fontFamily: 'Gilroy',
displayColor: themeTextColor,
bodyColor: themeTextColor
);
}

21. themes.dart
ThemeData buildAppTheme() {
final ThemeData base = ThemeData.light();
return base.copyWith(
...
textTheme: _buildTextTheme(base.textTheme, themeSurfaceText),
primaryTextTheme: _buildTextTheme(base.primaryTextTheme, themePrimaryText),
accentTextTheme: _buildTextTheme(base.accentTextTheme, themeSecondaryText)
);
}

22. product_item_list.dart
Text(
title,
style: themeData.primaryTextTheme.headline,
),
product_item_card.dart
Text(
productItem.title.toUpperCase(),
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: theme.textTheme.subhead,
),
...
Text(
productItem.subTitle,
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: theme.textTheme.body1,
),
...
child: Text(
'# ${productItem.hashtag}',
style: theme.accentTextTheme.headline,
),

23. detail.dart
Text(
productItem.title,
style: theme.primaryTextTheme.headline,
),
...
Text(
formatter.format(productItem.price),
style: theme.textTheme.display1,
),
Text(
'원',
style: theme.textTheme.title,
)
...
Text(
productItem.gender + 'n' +
'착용 모델 사이즈 : ${productItem.modelSize}' + 'n' +
'착용 사이즈 : ${productItem.size}' + 'n' +
'디테일 핏 : 루즈',
style: theme.textTheme.body2,
),
...
Text(
productItem.description,
style: theme.textTheme.body2,
)
...
RaisedButton(
onPressed: () {},
child: Text(
'BUY',
style: theme.accentTextTheme.button
)
),

24. home.dart
Text(
productItem.title.replaceAll(' ', 'n'),
textAlign: textAlign,
style: theme.primaryTextTheme.display2
),
...
child: RaisedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
DetailPage(
productItem: productItem
),
),
);
},
child: Text(
'BUY',
style: theme.accentTextTheme.button
),
),
...

25. Icon, Button Theme
아이콘, 버튼 테마

26. themes.dart
ThemeData buildAppTheme() {
final ThemeData base = ThemeData.light();
return base.copyWith(
...
buttonColor: themeSecondary,
...
primaryIconTheme: _buildIconTheme(base.iconTheme, themeSecondary),
buttonTheme: _buildButtonTheme(base.buttonTheme, 48.0),
);
}
...
IconThemeData _buildIconTheme(IconThemeData base, Color color) {
return base.copyWith(color: color, opacity: 0.5);
}
ButtonThemeData _buildButtonTheme(ButtonThemeData base, double height) {
return base.copyWith(height: height);
}

27. Shape
모양

28. themes.dart
ShapeBorder buildButtonShapeBorder() {
return BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0))
);
}
login.dart
RaisedButton(
onPressed: () {
Navigator.pop(context);
},
shape: buildButtonShapeBorder(),
child: Text(
'Login',
style: theme.accentTextTheme.button
)
),
home.dart
child: RaisedButton(
...
color: themeSecondary_50,
shape: buildButtonShapeBorder(),
child: Text(
'BUY',
style: theme.accentTextTheme.button
),
),

29. backdrop.dart
@override
Widget build(BuildContext context) {
return Material(
elevation: 8.0,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.only(topLeft: Radius.circular(24.0))
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: child,
),
],
),
);
}

30. Second Theme
두번째 테마

31. Color Theme & Shape
컬러 / 모양

32. colors.dart
const themePrimary = const Color(0xFFd1c4e9);
const themePrimaryDark = const Color(0xFF9078c8);
const themePrimaryLight = const Color(0xFFece8f5);
const themeSecondary = const Color(0xFFf8bbd0);
const themeSecondaryDark = const Color(0xFFe06b92);
const themeSecondaryLight = const Color(0xFFf8e5ec);
const themeSurface = const Color(0xFFffffff);
const themeSurfaceDark = const Color(0xFFf6f6f6);
const themeSurfaceLight = const Color(0xFFffffff);
const themePrimaryText = const Color(0xFF040404);
const themeSecondaryText = const Color(0xFF040404);
const themeSurfaceText = const Color(0xFF040404);
const themeSecondary_50 = const Color(0x50f8bbd0);
themes.dart
ThemeData buildAppTheme() {
final ThemeData base = ThemeData.light();
return base.copyWith(
...
primaryIconTheme: _buildIconTheme(base.iconTheme, Colors.black54),
accentIconTheme: _buildIconTheme(base.iconTheme, Colors.black),
...
);
}
ShapeBorder buildButtonShapeBorder() {
return RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(18.0))
);
}

33. backdrop.dart
@override
Widget build(BuildContext context) {
return Material(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24.0), topRight: Radius.circular(24.0)
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: child,
),
],
),
);
}

34. Second Theme
두번째 테마

35. Third Theme
세번째 테마

36. Color & Typography Theme
컬러 / 타이포그래피
Headline 3 / Nanum ExtraBold
Headline 4 / Nanum ExtraBold
Headline 5 / Nanum ExtraBold
Headline 6 / Nanum ExtraBold
Body 1 / Nanum Light
Body 2 / Nanum Light
Subtitle 1 / Nanum ExtraBold
BUTTON / Nanum ExtraBold

37. pubspec.yaml
fonts:
- family: Nanum
fonts:
- asset: fonts/NanumSquareRoundEB.ttf
- asset: fonts/NanumSquareRoundL.ttf

38. colors.dart
const themePrimary = const Color(0xFF003a71);
const themePrimaryDark = const Color(0xFF072151);
const themePrimaryLight = const Color(0xFF244a80);
const themeSecondary = const Color(0xFFcc60fd);
const themeSecondaryDark = const Color(0xFFa02be9);
const themeSecondaryLight = const Color(0xFFe3c1fa);
const themeSurface = const Color(0xFF0d1a2a);
const themeSurfaceDark = const Color(0xFF000000);
const themeSurfaceLight = const Color(0xFF303e53);
const themePrimaryText = const Color(0xFFffffff);
const themeSecondaryText = const Color(0xFFffffff);
const themeSurfaceText = const Color(0xFFffffff);
const themeSecondary_50 = const Color(0x50cc60fd);
themes.dart
ThemeData buildAppTheme() {
final ThemeData base = ThemeData.dark();
return base.copyWith(
...
scaffoldBackgroundColor: themeSurface,
...
primaryIconTheme: _buildIconTheme(base.iconTheme, Colors.white70),
accentIconTheme: _buildIconTheme(base.iconTheme, Colors.white),
...
);
}

39. themes.dart
TextTheme _buildTextTheme(TextTheme base, Color themeTextColor) {
return base.copyWith(
display2: base.display2.copyWith(
fontSize: 48.0,
fontWeight: FontWeight.bold
),
display1: base.display1.copyWith(
fontSize: 40.0,
fontWeight: FontWeight.bold
),
headline: base.headline.copyWith(
fontSize: 24.0,
fontWeight: FontWeight.bold
),
title: base.title.copyWith(
fontSize: 20.0,
fontWeight: FontWeight.bold
),
subhead: base.subhead.copyWith(
fontSize: 16.0,
fontWeight: FontWeight.bold
),
body2: base.body2.copyWith(
fontSize: 16.0
),
body1: base.body1.copyWith(
fontSize: 14.0
),
button: base.button.copyWith(
fontSize: 20.0,
fontWeight: FontWeight.bold
),
).apply(
fontFamily: 'Nanum',
displayColor: themeTextColor,
bodyColor: themeTextColor
);
}

40. Third Theme
세번째 테마

41. 이 발표를 통해
디자이너 님들
메인 디자인 컬러와 타이포그래피를 정하고,
파생시킨 공통적인 테마 요소를
개발자에게 공유해주세요.

42. 이 발표를 통해
개발자 님들
더이상 각 화면마다
컬러나 폰트를 지정하지 마세요.
공통적인 테마를 정의하고
컴포넌트들에 스타일을 적용하여
1분 만에 디자인을 변경하고 퇴근하세요.

43. 추가로
포인트 디자인
디자이너 님들 욕심 내세요.
개발자 님들 개발 해주세요.

44. 추가로
협업
사전적 의미
많은 사람이 일정한 계획 아래 노동을 분담하여
협동적, 조직적으로 일하는 것
나의 의미
서로가 어떤 것을 필요로 하는지
궁금해하고 알아가는 과정으로
좋은 결과물이 탄생되는 것

45. 웃으며 협업합시다. J

46. 샘플 소스
https://github.com/EunsilJo/flutter_sample

47. 이미지 참조
https://material.io/tools/, Google
https://www.sketchapp.com, Sketch
https://www.emanprague.com/en/blog/lets-develop-a-mobile-app-in-flutter-13/, Filip Šmíd
https://ko.wikipedia.org/wiki/안드로이드_스튜디오, Wikipedia
https://unsplash.com/@hustwilson, Hust Wilson

48. 김태훈 디자이너님
https://www.facebook.com/abcdeha
감사합니다.