협업하는 디자이너 - #4 android

87
DnD 디자이너에서 협업하는 디자이너로! 배우자마자 바로 적용 해볼 수 있는 실전 협업 수업!

Upload: jinkyou-son

Post on 22-Jan-2017

136 views

Category:

Design


1 download

TRANSCRIPT

Page 1: 협업하는 디자이너 - #4 Android

DnD

디자이너에서�협업하는�디자이너로!배우자마자�바로�적용�해볼�수�있는�실전�협업�수업!

Page 2: 협업하는 디자이너 - #4 Android

Index

안드로이드�기초�이론

2.�안드로이드�앱을�수정해봅시다

Android

안드로이드�실습

알아두면�좋은�것들

정리

Page 3: 협업하는 디자이너 - #4 Android

One

안드로이드와�관련된�기본적인�사항들을�배워봅시다

안드로이드�기초�이론

Page 4: 협업하는 디자이너 - #4 Android

#무엇일까요?�Android

안드로이드�안드로이드�하는데,�안드로이드는�무엇일까요?

04

Page 5: 협업하는 디자이너 - #4 Android

#무엇일까요?�Android

macOS,�Windows�같은�‘OS’�입니다�

핸드폰이�작동하기�위한�가장�기본이�되는�프로그램이라고�생각하시면�편해요

05

Page 6: 협업하는 디자이너 - #4 Android

#무엇일까요?�Android

06

Page 7: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

07

갤럭시�S3�720�x�1280�px

갤럭시�S7�Edge�1440�x�2560�px

Page 8: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

08

갤럭시�S3�720�x�1280�px

갤럭시�S7�Edge�1440�x�2560�px

200�x�200�px

Page 9: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

09

갤럭시�S7�Edge�1440�x�2560�px

200�x�200�px

갤럭시�S3�720�x�1280�px

Page 10: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

10

갤럭시�S7�Edge�1440�x�2560�px

200�x�200�px

갤럭시�S3�720�x�1280�px

Page 11: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

11

갤럭시�S7�Edge�1440�x�2560�px

200�x�200�px

갤럭시�S3�720�x�1280�px

Page 12: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

12

갤럭시�S7�Edge�1440�x�2560�px�360�x�640�dp

100�x�100�dp

갤럭시�S3�720�x�1280�px�360�x�640�dp

Page 13: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

13

갤럭시�S7�Edge�1440�x�2560�px�360�x�640�dp

100�x�100�dp

갤럭시�S3�720�x�1280�px�360�x�640�dp

Page 14: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

14

갤럭시�S7�Edge�1440�x�2560�px�360�x�640�dp

100�x�100�dp

갤럭시�S3�720�x�1280�px�360�x�640�dp

Page 15: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

15

mdpi�

hdpi�

xhdpi�

xxhdpi�

xxxhdpi

Page 16: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

16

mdpi�

hdpi�

xhdpi�

xxhdpi�

xxxhdpi

160dpi�

240dpi�

320dpi�

480dpi�

640dpi

Page 17: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

17

mdpi�

hdpi�

xhdpi�

xxhdpi�

xxxhdpi

160dpi�

240dpi�

320dpi�

480dpi�

640dpi

1x�

1.5x�

2x�

3x�

4x

Page 18: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

18

mdpi�

hdpi�

xhdpi�

xxhdpi�

xxxhdpi

160dpi�

240dpi�

320dpi�

480dpi�

640dpi

1x�

1.5x�

2x�

3x�

4x

갤럭시�S3

갤럭시�S4

Page 19: 협업하는 디자이너 - #4 Android

#dp?xhdip?�해상도

디자인은�가로�360�dp�기준으로!�

리소스는�xhdpi,�xxhdpi,�xxxhdpi�에�맞춰 �����������������2x,�������3x,���������4x������로�작업�

sp�는�폰트에서�사용하는�dp

19

Page 20: 협업하는 디자이너 - #4 Android

#화면�속�보이지�않는�울타리�Layout

복잡한�안드로이드�뷰를�체계적으로�구성하기�위해Layout�이라는�울타리를�만듭니다

20

Page 21: 협업하는 디자이너 - #4 Android

#화면�속�보이지�않는�울타리�Layout

LinearLayout�

RelativeLayout�

FrameLayout�

TableLayout�

GridLayout

21

Page 22: 협업하는 디자이너 - #4 Android

#화면�속�보이지�않는�울타리�Layout

22

LinearLayout�

Linear:�직선�모양의�

차곡차곡�쌓습니다

Page 23: 협업하는 디자이너 - #4 Android

#화면�속�보이지�않는�울타리�Layout

23

LinearLayout�

방향�

VertialHorizontal

Page 24: 협업하는 디자이너 - #4 Android

#화면�속�보이지�않는�울타리�Layout

24

RelativeLayout�

Relative:�상대적인�

다른�뷰들을�기준으로위치를�정합니다

Page 25: 협업하는 디자이너 - #4 Android

#화면�속�보이지�않는�울타리�Layout

25

RelativeLayout�

뷰1을�기준으로�뷰2를�

뷰2를�기준으로�뷰3을�

Page 26: 협업하는 디자이너 - #4 Android

#화면�속�보이지�않는�울타리�Layout

26

FrameLayout�

Frame:�틀�

자유롭게�놓습니다

Page 27: 협업하는 디자이너 - #4 Android

#화면�속�보이지�않는�울타리�Layout

27

TableLayout�

표를�만들기�좋습니다

Page 28: 협업하는 디자이너 - #4 Android

#화면�속�보이지�않는�울타리�Layout

28

GridLayout�

Grid:�격자�

격자로�나뉜�공간을자유롭게�배치합니다

Page 29: 협업하는 디자이너 - #4 Android

#화면�속�보이지�않는�울타리�Layout

앞의�요소들을�자유롭게�조합하여�원하는�화면�구조를�만듭니다�

LinearLayout,�RelativeLayout�가�가장�많이�쓰입니다

29

Page 30: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

안드로이드에서는�화면에�아무거나�다�만들�수�있을까요?

30

https://dribbble.com/shots/2736160-GIF-Animation-for-Recipes-and-Cooking

Page 31: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

네!시간이�무한정�있다면요…�

빠른�작업을�위해서는�이미�있는�뷰를�주로�사용해야�합니다!

31

Page 32: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

32

View�

모든�뷰의�공통�속성�

widthheight(match_parent,�wrap_content,�20dp)background�color�

Page 33: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

33

TextView�

텍스트를�보여줍니다�

texttext�colortext�style�(bold,�italic,�..)

Page 34: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

34

ImageView�

이미지를�보여줍니다�

image�sourcescale�type(화면�크기와�안맞을�경우�어떻게�보여줄�것인가)

Page 35: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

35

Button�

누를�수�있는�버튼입니다�

text

Page 36: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

36

EditText�

텍스트를�입력�받습니다�

hintinput�type�(single�line,�multi�line,�…)

Page 37: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

37

Spinner�

펼침�상자에서�값을�고릅니다

Page 38: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

38

CheckBox�

체크박스�

text

Page 39: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

39

RadioBox�

라디오박스�

orientationtext

Page 40: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

40

RatingBar�

별점�

number�of�starsratingstep�size

Page 41: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

41

Switch�

스위치�

text

Page 42: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

42

SeekBar�

정도를�나타냅니다�

maxprogress

Page 43: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

43

SearchView�

검색값을�입력�받습니다�

iconhint

Page 44: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

44

ProgressBar�

진행�정도를�보여줍니다�

maxprogress

Page 45: 협업하는 디자이너 - #4 Android

#화면을�이루는�요소�View

위의�요소들을�커스텀화�해서�사용할�수�있습니다자세한건�개발자에게!�

이왕이면�새로�만들기�보다는�남이�만든�것을�씁시다�

Android�Arsenalhttps://android-arsenal.com/�

Awesome�Android�UIhttps://github.com/wasabeef/awesome-android-ui

45

Page 46: 협업하는 디자이너 - #4 Android

Two

배운�것을�기초로�직접�수정해봅시다

안드로이드�실습

Page 47: 협업하는 디자이너 - #4 Android

#안드로이드�실습

안드로이드�스튜디오는�다�띄워보셨죠?

47

Page 48: 협업하는 디자이너 - #4 Android

#일단�실행해봅시다

48

Page 49: 협업하는 디자이너 - #4 Android

#뷰�구조를�파악해봅시다�xml

49

res/layout/content_main.xml

Page 50: 협업하는 디자이너 - #4 Android

#뷰�구조를�파악해봅시다�xml

50

RelativeLayout

Page 51: 협업하는 디자이너 - #4 Android

#뷰�구조를�파악해봅시다�xml

51

RelativeLayout�

LinearLayout

Page 52: 협업하는 디자이너 - #4 Android

#뷰�구조를�파악해봅시다�xml

52

RelativeLayout�

LinearLayout�

ImageView�

View

Page 53: 협업하는 디자이너 - #4 Android

#뷰�구조를�파악해봅시다�xml

53

RelativeLayout�

TextView�

TextView�

LinearLayout�

ImageView�

View

Page 54: 협업하는 디자이너 - #4 Android

#뷰�구조를�파악해봅시다�xml

54

RelativeLayout�

TextView�

TextView�

LinearLayout�

ImageView�

View�

LinearLayout

Page 55: 협업하는 디자이너 - #4 Android

#뷰�구조를�파악해봅시다�xml

55

RelativeLayout�

TextView�

TextView�

LinearLayout�

ImageView�

View�

LinearLayout�

Button�

Button

Page 56: 협업하는 디자이너 - #4 Android

#치수를�변경해봅시다�dimens.xml

56

res/values/dimens.xml

Page 57: 협업하는 디자이너 - #4 Android

#치수를�변경해봅시다�dimens.xml

57

디자인�할�때치수는�최대한�통일하세요

Page 58: 협업하는 디자이너 - #4 Android

#텍스트�속성을�변경해봅시다�dimens.xml�colors.xml

58

res/values/dimens.xml

Page 59: 협업하는 디자이너 - #4 Android

#텍스트�속성을�변경해봅시다�dimens.xml�colors.xml

59

res/values/colors.xml

Page 60: 협업하는 디자이너 - #4 Android

#버튼�위치를�변경해봅시다�Layout

60

Page 61: 협업하는 디자이너 - #4 Android

#로고�이미지를�변경해봅시다�drawable

61

JPG�->�PNG

Page 62: 협업하는 디자이너 - #4 Android

#로고�이미지를�변경해봅시다�drawable

62

Page 63: 협업하는 디자이너 - #4 Android

#로고�이미지를�변경해봅시다�drawable

63

Page 64: 협업하는 디자이너 - #4 Android

#로고�이미지를�변경해봅시다�drawable

64

Page 65: 협업하는 디자이너 - #4 Android

#로고�이미지를�변경해봅시다�drawable

65

PNG�->�Vector�Drawable

Page 66: 협업하는 디자이너 - #4 Android

#로고�이미지를�변경해봅시다�drawable

SVG�->�Vector�Drawable�변환http://a-student.github.io/SvgToVectorDrawableConverter.Web/�

66

Page 67: 협업하는 디자이너 - #4 Android

#로고�이미지를�변경해봅시다�drawable

67

Page 68: 협업하는 디자이너 - #4 Android

#로고�이미지를�변경해봅시다�drawable

68

Page 69: 협업하는 디자이너 - #4 Android

#로고�이미지를�변경해봅시다�drawable

69

Page 70: 협업하는 디자이너 - #4 Android

#로고�이미지를�변경해봅시다�drawable

70

아닛!로고의�상태가?!

Page 71: 협업하는 디자이너 - #4 Android

#로고�이미지를�변경해봅시다�drawable

71

아닛!로고의�상태가?!�

path�만�지원rect,�circle�등은�그래도�잘�변환되지만text�는�잘�안됩니다

Page 72: 협업하는 디자이너 - #4 Android

#로고�이미지를�변경해봅시다�drawable

72

‘Convert�to�Outline’�기능을�이용해서�SVG�를�만들고�

그것을�변환해서�사용하세요

Page 73: 협업하는 디자이너 - #4 Android

Three

해보지는�못했지만�알아두면�좋아요

알아두면�좋은�것들

Page 74: 협업하는 디자이너 - #4 Android

#폰에서�앱을�돌려봅시다

74

[설정]�-�[디바이스�정보]�클릭

Page 75: 협업하는 디자이너 - #4 Android

#폰에서�앱을�돌려봅시다

75

빌드번호�광클!�‘개발자�모드를�실행하였습니다’�라고�나오면�성공

Page 76: 협업하는 디자이너 - #4 Android

#폰에서�앱을�돌려봅시다

76

[개발자�옵션]이�생겼을�것입니다�[개발자�옵션]�클릭

Page 77: 협업하는 디자이너 - #4 Android

#폰에서�앱을�돌려봅시다

77

USB�디버깅을�체크해주세요

Page 78: 협업하는 디자이너 - #4 Android

#폰에서�앱을�돌려봅시다

78

이제�USB�로�컴퓨터와�연결하고�안드로이드�스튜디오에서�[Run�App]�을�하면�

폰에서도�앱을�돌려보실�수�있습니다!

Page 79: 협업하는 디자이너 - #4 Android

#구글스러움�Material�Design

https://material.google.com/�

구글스럽게�디자인해야�Play�Store�에�‘에디터�추천’�으로�올라갈�수�있습니다

79

Page 80: 협업하는 디자이너 - #4 Android

#이미지�포맷�선택하기

80

Page 81: 협업하는 디자이너 - #4 Android

#비트맵�이미지를�벡터�이미지로�Potrace

http://potrace.sourceforge.net/�

Potrace�를�구현한�웹�서비스http://www.vectorization.org/�

81

Page 82: 협업하는 디자이너 - #4 Android

#이미지�용량�줄이기�TinyPNG

https://tinypng.com/�

82

PNG/JPG�이미지�용량을50~70%�정도�줄여줍니다�

이미지를�전달하기�전에�필수!

Page 83: 협업하는 디자이너 - #4 Android

#머티리얼�색�조합�material�palette

https://www.materialpalette.com�

83

Page 84: 협업하는 디자이너 - #4 Android

Four

오늘�배운�것을�정리해봅시다

정리

Page 85: 협업하는 디자이너 - #4 Android

#정리해봅시다

dp�

해상도가�다른�폰들에서도�비슷하게�보이도록�해주는�단위�

Layout�

보이지는�않지만�뷰의�구조를�잡아주는�울타리�

View�

안드로이드에�있는�View�들을�꼭�알아둡시다!�

실습은�따로�복습해보세요�ㅎ_ㅎ

85

Page 86: 협업하는 디자이너 - #4 Android

#References

이해하기�쉬운�픽셀�밀도�by�이상용 https://brunch.co.kr/@ultra0034/23�

GIF�Animation�for�Recipes�and�Cooking�by�Sergey�Valiukhhttps://dribbble.com/shots/2736160-GIF-Animation-for-Recipes-and-Cooking�

Common�Android�Views�by�Udacityhttp://labs.udacity.com/images/Common-Android-Views-Cheat-Sheet.pdf�

Image�compression�for�Android�developers�-�Google�I/O�2016https://youtu.be/r_LpCi6DQME�

86

Page 87: 협업하는 디자이너 - #4 Android

E N D