협업하는 디자이너 - #4 android
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%�정도�줄여줍니다�
이미지를�전달하기�전에�필수!
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