blob: 31992fab666fe67899352b5dcfceb7101ccb2818 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
page.title=머티어리얼 디자인
page.tags=Material,design
page.type=design
page.image=design/material/images/MaterialLight.png
@jd:body
<!-- developer docs box -->
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
<div>
<h3>개발자 문서</h3>
<p>머티어리얼 디자인으로 앱 생성</p>
</div>
</a>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
<div>
<h3>비디오</h3>
<p>머티어리얼 디자인 소개</p>
</div>
</a>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
<div>
<h3>비디오</h3>
<p>종이와 잉크: 중요한 머티어리얼</p>
</div>
</a>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
<div>
<h3>비디오</h3>
<p>Google I/O 앱 내 머티어리얼 디자인</p>
</div>
</a>
<p itemprop="description">머티어리얼 디자인은 플랫폼 및 기기 전반의 표현 방식, 모션 및
상호 작용 디자인에 대한 종합적인 지침입니다. Android에는 이제
머티어리얼 디자인 앱에 대한 지원이 포함되었습니다. Android 앱에서 머티어리얼 디자인을 사용하려면 <a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a>에
규정되어 있는 지침을 따르세요. 또한 Android 5.0(API 레벨 21) 이상에서 제공하는
새 구성 요소 및 기능을 사용하세요.</p>
<p>Android는 머티어리얼 디자인 앱을 구축하는 데 사용할 수 있는 다음 요소를 제공합니다.</p>
<ul>
<li>새로운 테마</li>
<li>복잡한 뷰를 위한 새로운 위젯</li>
<li>사용자 지정 그림자 및 애니메이션을 위한 새로운 API</li>
</ul>
<p>Android에서 머티어리얼 디자인을 구현하는 방법에 대한 자세한 내용은
<a href="{@docRoot}training/material/index.html">머티어리얼 디자인으로 앱 생성</a>을 참조하세요.</p>
<h3>머티어리얼 테마</h3>
<p>머티어리얼 테마는 앱에 사용할 수 있는 새로운 스타일, 색상표를
설정할 수 있는 시스템 위젯, 그리고 터치 피드백 및 액티비티 전환을 위한 기본 애니메이션을 제공합니다.</p>
<!-- two columns -->
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
<div style="width:140px;margin:0 auto">
<p style="margin-top:8px">어두운 머티어리얼 테마</p>
</div>
</div>
<div style="float:left;width:250px;margin-right:0px;">
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
<div style="width:140px;margin:0 auto">
<p style="margin-top:8px">밝은 머티어리얼 테마</p>
</div>
</div>
<br style="clear:left"/>
</div>
<p>자세한 내용은 <a href="{@docRoot}training/material/theme.html">머티어리얼
테마 사용</a>을 참조하세요.</p>
<h3>목록 및 카드</h3>
<p>Android는 머티어리얼 디자인 스타일
및 애니메이션으로 카드 및 목록을 표시하는 데 사용할 수 있는 두 개의 새로운 위젯을 제공합니다.</p>
<!-- two columns -->
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
<p>새로운 <code>RecyclerView</code> 위젯은 <code>ListView</code>의
플러그 기능이 개선된 버전으로, 다양한 레이아웃 유형을 지원하고 향상된 성능을 제공합니다.</p>
</div>
<div style="float:left;width:250px;margin-right:0px;">
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
<p>새로운 <code>CardView</code> 위젯은 일관적인 모양 및 느낌이 있는
카드 내 정보의 중요한 부분을 표시할 수 있게 해줍니다.</p>
</div>
<br style="clear:left"/>
</div>
<p>자세한 내용은 <a href="{@docRoot}training/material/lists-cards.html">목록
및 카드 생성</a>을 참조하세요.</p>
<h3>뷰 그림자</h3>
<p>X 및 Y 속성과 더불어 이제 Android의 뷰에는 Z
속성이 추가되었습니다. 이 새로운 속성은 다음을 결정하는 뷰의 엘리베이션을 나타냅니다.</p>
<ul>
<li>그림자 크기: 뷰의 Z 값이 클수록 표시되는 그림자도 커집니다.</li>
<li>그리기 순서: 뷰의 Z 값이 클수록 다른 뷰의 위에 표시됩니다.</li>
</ul>
<div style="width:290px;margin-left:35px;float:right">
<div class="framed-nexus5-port-span-5">
<video class="play-on-hover" autoplay>
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
</video>
</div>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<em>영화를 재생하려면 기기 화면을 클릭합니다.</em>
</div>
</div>
<p>자세한 내용은 <a href="{@docRoot}training/material/shadows-clipping.html">그림자
정의 및 뷰 클리핑</a>을 참조하세요.</p>
<h3>애니메이션</h3>
<p>새 애니메이션 API는 UI 컨트롤 내의 터치 피드백, 뷰 상태
변화, 그리고 액티비티 전환을 위한 사용자 지정 애니메이션을 생성할 수 있게 해줍니다.</p>
<p>이 API를 사용하면 다음 작업을 수행할 수 있습니다.</p>
<ul>
<li style="margin-bottom:15px">
<strong>터치 피드백</strong> 애니메이션으로 뷰 내 터치 이벤트에 응답하기.
</li>
<li style="margin-bottom:15px">
<strong>회전하며 나타나기</strong> 애니메이션으로 뷰 감추기 및 표시하기.
</li>
<li style="margin-bottom:15px">
사용자 지정 <strong>액티비티 전환</strong> 애니메이션으로 액티비티 간 전환하기.
</li>
<li style="margin-bottom:15px">
<strong>커브 모션</strong>으로 더 자연스러운 애니메이션 생성하기.
</li>
<li style="margin-bottom:15px">
<strong>뷰 상태 변경</strong> 애니메이션으로 하나 이상의 뷰 속성 변경 사항 애니메이션화하기.
</li>
<li style="margin-bottom:15px">
뷰 상태 변경 간에 <strong>상태 목록 드로어블</strong>에서 애니메이션 표시하기.
</li>
</ul>
<p>터치 피드백 애니메이션은 버튼과 같은 여러 기본 뷰에 내장되어 있습니다. 새 API를 사용하면 이러한 애니메이션을 사용자 지정하고 사용자 지정 뷰에 추가할 수
있습니다.</p>
<p>자세한 내용은 <a href="{@docRoot}training/material/animations.html">사용자지정
애니메이션 정의</a>를 참조하세요.</p>
<h3>드로어블</h3>
<p>드로어블에 대한 다음과 같은 새 기능을 통해 머티어리얼 디자인 앱을 쉽게 구현할 수 있습니다.</p>
<ul>
<li><strong>벡터 드로어블</strong>은 단색 인앱 아이콘에
적합하며, 정의 손실 없이 확장 가능합니다.</li>
<li><strong>드로어블 색조</strong>를 사용하면 비트맵을 알파 마스크로 정의할 수 있으며, 런타임에
색을 입힐 수 있습니다.</li>
<li><strong>색상 추출</strong>은
비트맵 이미지에서 주요 색상을 자동으로 추출할 수 있게 해줍니다.</li>
</ul>
<p>자세한 내용은 <a href="{@docRoot}training/material/drawables.html">Drawable
사용</a>을 참조하세요.</p>
|
