Android 앱, 안드로이드OS 디자인의 아이콘, 쉐잎 이해하기 - 패스트캠퍼스 챌린지 28일차

*모든 자료의 출처 : Material Design by Google https://material.io/design/

Material Foundation > Icon

Grid and keyline shapes

Icon sizes

When creating an icon, view and edit it at 400% (192 x 192 dp), which will display edges at 4dp. By maintaining this ratio, any changes to the original will be scaled up or down proportionally, which preserves sharp edges and correct alignment when the scale is returned to 100% (48dp).

 

Keyline Shapes

Keyline shapes are based on the grid. By using these core shapes as a baseline, you can maintain consistent visual proportions throughout your product icons.

Cross-platform adaptations

 

Space

Adequate space should surround system icons to allow legibility and touch. Icons of 24dp can use a touch target of 48dp.

1. Clearance area
2. Placement

Dense layouts (Desktop)

When a mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts. Dense icons of 20dp can use a...

When a mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts. Dense icons of 20dp can use a touch target of 40dp.

1. Clearance area
2. Placement

 

Color

Icons on light backgrounds

Active icon
The standard opacity for an active icon with focused state on a light background is 87% (#000000). An active with unfocused state is 54%.

Inactive icon
An inactive icon, which is lower in the visual hierarchy, should have an opacity of 38% (#000000).

Icons on dark backgrounds

Active icon
The standard opacity for an active icon with focused state on a dark background is 100% (#FFFFFF). An active with unfocused state is 70%.

Inactive icon
An inactive icon, which is lower in the visual hierarchy, should have an opacity of 50% (#FFFFFF).

 

---

 

Material Foundation > Shape

Usage

Emphasis

Because unique shapes stand out, they can direct attention to different parts of a screen.

This combination of a round floating action button and curved bottom app bar stands out from the rectangular shapes elsewhere on screen.

Identity

Shape provides a way for users to recognize components and identify different Material surfaces.

These entry chips can be identified by their consistent use of shape.

State

You can communicate an element’s change of state by using a different shape from the rest of the elements or surfaces in that group. When using shape to indicate a state change, use it consistently with that state, in every instance it occurs.

This card changes shape upon selection to indicate it’s been selected.

Branding

To express a brand’s visual language throughout an app, use shape in tandem with other customizations (like color) in consistent ways. Small adjustments to shape, applied strategically through an app, contribute to the overall impression a brand makes.

The consistent use of shape throughout this app helps express its brand.

 

 

---

강의수강화면

오늘은 안드로이드OS 디자인의 아이콘과 쉐잎 이해하기 강의를 들었다. 구글의 머티리얼 디자인 사이트에서 중요하다고 생각되는 내용들만 가져와서 위에 옮겨 두었다.

안드로이드는 애플에 비해서 디자인 가이드가 매우 세세하고, 예제의 종류도 다양하다. 다양성 면에서 좀 더 폭넓은 선택사항을 제공하는만큼, 섬세한 표현력도 더 요구되는 것 같다. 다행히 기본적인 디자인 리소스 자료도 이 웹사이트에서 함께 제공해주기 때문에 실제 작업에 적용하여 사용하는데에는 크게 불편함이 없을 것 같다.

[참고] 구글 제공 안드로이드 아이콘 디자인 템플릿 다운로드 (Adobe Illustrator files including the 24dp icon grid) : https://goo.gle/icontemplates

머티리얼 디자인 가이드는 모두 영어로만 되어 있는데, 한글판이 있는지 찾아 보니 공식 사이트에 오래전에는 올려져 있었는데 잦은 업데이트에 대응하지 못하더니 어느 순간부터는 완전히 사라졌다고 한다. 그래서 사람들이 한글 번역 버전을 블로그나 github 같은 곳에 올려 놓았는데, 역시 구버전이거나 혹은 번역기를 써서 어색한 표현인 경우가 대부분이다.

이 디자인 가이드의 번역본이 유용하려면, 공식 홈페이지의 업데이트에 대응해 발빠른 업데이트가 가장 중요한 관건이다. 구글에서 일하는 한국인원어민 직원들과 전문 번역팀도 많을텐데, 왜 한국어나 다른 나라의 언어로 번역문을 제공하지 않는지가 의문이다. 차라리 내가 한글번역을 해서 올릴까, 싶다가도 지금은 내가 쓸 시간이 넉넉하지 않고 돈벌이가 되는 일도 아니라서 망설여진다.

종종 경험해보니, 번역일은 생각보다 막대한 시간이 투자된다. 언어와 문화의 차이만큼이나 단어의 뜻이 1:1로 정확히 매칭되어 변환되는 경우가 흔하지 않기 때문이다. 특히 이런 전문/기술분야는 현업에서 실제 쓰이는 용어로 번역을 해줘야 하기 때문에 영어와 한국어로 모두 현업에서 쓰는 용어를 알고 있어야 한다. 나중에 내 시간과 벌이가 좀 더 여유로워진다면 이 사이트를 번역해서 공유를 해보고도 싶다. 

번역에 대한 이야기가 길어졌지만, 그만큼이나 이 사이트의 내용을 자세히 살펴보고 숙지하는 것이 UI디자인 실무에서 마치 교과서처럼 중요하기 때문이다. 내가 듣고 있는 강의가 이 사이트 내용을 강사님과 함께 보며 이해하는 과정을 갖게 된 이유이기도 하다. 

---

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa