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

Post on 22-Jan-2017

136 Views

Category:

Design

1 Downloads

Preview:

Click to see full reader

TRANSCRIPT

DnD

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

Index

안드로이드�기초�이론

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

Android

안드로이드�실습

알아두면�좋은�것들

정리

One

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

안드로이드�기초�이론

#무엇일까요?�Android

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

04

#무엇일까요?�Android

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

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

05

#무엇일까요?�Android

06

#dp?xhdip?�해상도

07

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

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

#dp?xhdip?�해상도

08

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

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

200�x�200�px

#dp?xhdip?�해상도

09

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

200�x�200�px

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

#dp?xhdip?�해상도

10

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

200�x�200�px

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

#dp?xhdip?�해상도

11

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

200�x�200�px

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

#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

#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

#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

#dp?xhdip?�해상도

15

mdpi�

hdpi�

xhdpi�

xxhdpi�

xxxhdpi

#dp?xhdip?�해상도

16

mdpi�

hdpi�

xhdpi�

xxhdpi�

xxxhdpi

160dpi�

240dpi�

320dpi�

480dpi�

640dpi

#dp?xhdip?�해상도

17

mdpi�

hdpi�

xhdpi�

xxhdpi�

xxxhdpi

160dpi�

240dpi�

320dpi�

480dpi�

640dpi

1x�

1.5x�

2x�

3x�

4x

#dp?xhdip?�해상도

18

mdpi�

hdpi�

xhdpi�

xxhdpi�

xxxhdpi

160dpi�

240dpi�

320dpi�

480dpi�

640dpi

1x�

1.5x�

2x�

3x�

4x

갤럭시�S3

갤럭시�S4

#dp?xhdip?�해상도

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

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

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

19

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

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

20

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

LinearLayout�

RelativeLayout�

FrameLayout�

TableLayout�

GridLayout

21

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

22

LinearLayout�

Linear:�직선�모양의�

차곡차곡�쌓습니다

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

23

LinearLayout�

방향�

VertialHorizontal

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

24

RelativeLayout�

Relative:�상대적인�

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

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

25

RelativeLayout�

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

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

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

26

FrameLayout�

Frame:�틀�

자유롭게�놓습니다

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

27

TableLayout�

표를�만들기�좋습니다

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

28

GridLayout�

Grid:�격자�

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

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

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

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

29

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

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

30

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

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

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

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

31

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

32

View�

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

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

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

33

TextView�

텍스트를�보여줍니다�

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

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

34

ImageView�

이미지를�보여줍니다�

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

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

35

Button�

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

text

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

36

EditText�

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

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

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

37

Spinner�

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

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

38

CheckBox�

체크박스�

text

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

39

RadioBox�

라디오박스�

orientationtext

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

40

RatingBar�

별점�

number�of�starsratingstep�size

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

41

Switch�

스위치�

text

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

42

SeekBar�

정도를�나타냅니다�

maxprogress

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

43

SearchView�

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

iconhint

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

44

ProgressBar�

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

maxprogress

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

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

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

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

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

45

Two

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

안드로이드�실습

#안드로이드�실습

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

47

#일단�실행해봅시다

48

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

49

res/layout/content_main.xml

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

50

RelativeLayout

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

51

RelativeLayout�

LinearLayout

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

52

RelativeLayout�

LinearLayout�

ImageView�

View

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

53

RelativeLayout�

TextView�

TextView�

LinearLayout�

ImageView�

View

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

54

RelativeLayout�

TextView�

TextView�

LinearLayout�

ImageView�

View�

LinearLayout

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

55

RelativeLayout�

TextView�

TextView�

LinearLayout�

ImageView�

View�

LinearLayout�

Button�

Button

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

56

res/values/dimens.xml

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

57

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

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

58

res/values/dimens.xml

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

59

res/values/colors.xml

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

60

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

61

JPG�->�PNG

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

62

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

63

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

64

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

65

PNG�->�Vector�Drawable

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

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

66

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

67

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

68

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

69

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

70

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

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

71

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

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

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

72

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

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

Three

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

알아두면�좋은�것들

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

74

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

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

75

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

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

76

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

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

77

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

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

78

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

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

#구글스러움�Material�Design

https://material.google.com/�

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

79

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

80

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

http://potrace.sourceforge.net/�

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

81

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

https://tinypng.com/�

82

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

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

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

https://www.materialpalette.com�

83

Four

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

정리

#정리해봅시다

dp�

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

Layout�

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

View�

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

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

85

#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

E N D

top related