안드로이드 가이드 라인 1

내비게이션

1. 내비게이션의 유형
내비게이션은 서비스를 이용하기 위해 앱 화면을 이동하는 것을 말하며, 전용 내비게이션 컴포넌트와 콘텐츠에 내비게이션 속성을 포함해 다양한 수단으로 구현된다. 내비게이션은 앱의 정보 구조에 따라 세 가지 탐색 방향 중 하나로 이동이 가능하다.

- 측면 내비게이션 Lateral Navigation
측면 내비게이션은 계층 구조가 같은 화면으로 이동하는 것을 말한다. 앱의 기본 탐색 요소는 계층 구조의 최상위 수준에 있는 모든 대상에 대한 액세스를 제공해야 한다. 측면탐색에서는 최상위 화면으로 이동할 수 있어야 하며, 두 개 이상의 최상위 대상이 있는 앱은 드로어 Drawer나 하단의 내비게이션 모음 또는 탭을 통해 측면 내비게이션을 제공할 수 있다.

- 전면 내비게이션 Forward Navigation
전면 내비게이션은 연속적인 계층 구조, 흐름 단계, 앱에서의 화면 간 이동 등을 의미하며, 카드나 이미지와 같은 컨테이너, 버튼, 링크, 검색 사용도 포함된다. 

- 역방향 내비게이션 Backward Navigation
역방향 내비게이션은 최근 화면 기록 등을 이용해 앱 내에서든 다른 앱으로든 이전 화면으로 이동하는 것, 또는 앱 내에서 계층적 화면을 역으로 이동하는 것을 말한다. 이때 플랫폼에서는 앱 내에서의 역방향 탐색 동작이 정확하게 정해져 있어야 한다. 

- 상향식 내비게이션 Upward Navigation
상향식 내비게이션은 최상위 화면에 도달할 때까지 뒤로가기를 사용하는 역방향 내비게이션과는 달리 앱의 계층 구조 내에서 한 수준 위를 탐색하는 방식이다. 상단의 앱 바에 있는 화살표가 역방향 탐색의 한 형태이다. 앱의 모든 하위 화면에는 상향 내비게이션이 구현되어야 한다.

2. 내비게이션의 전환
내비게이션의 전환은 홈 화면에서 상세 화면으로 이동하는 것처럼 화면 사이를 이동할 때 발생하며, 이때 화면 전환을 나타내는 동작이 사용된다. 사용자는 앱의 계층 구조를 보며 서로 어떻게 관련되는지 파악하게 된다. 

---

아이콘

1. 디자인 원칙과 접근법
제품 아이콘은 서비스와 도구를 비롯해 브랜드와 제품을 시각적으로 표현한 것으로, 제품의 핵심 아이디어와 의도를 간단하고, 대담하며 친절한 방식으로 전달한다. 각 아이콘은 시각적으로 구별되지만, 브랜드의 모든 제품 아이콘에는 일관된 흐름과 통일성이 있어야 한다. 머티리얼 아이콘 Material icon 디자인에는 머티리얼의 촉감과 물리적 질감이 반영된다. 즉 아이콘을 종이처럼 자르거나 접는 단순한 그래픽 요소를 통해 견고하고 깔끔해 보이도록 하면서 가장자리를 선명하게 만든다. 표면에는 정밀한 하이라이트와 일관된 그림자를 적용해 통해 빛과 음영을 표현한다. 

2. 그리드와 키 라인 
아이콘은 400% (192x192dp)로 보면서 만드는 것이 바람직하다. 이 비율에서 편집하면 원본의 모든 변경 사항이 비례적으로 확대 또는 축소되므로 100% (48dp)에서도 아이콘의 형태가 유려하게 유지된다.
키 라인의 모양은 그리드를 기반으로 하며, 핵심 모양을 기준으로 사용하면 아이콘 전체에서 일관된 시각적 비율을 유지할 수 있다.

 

아이콘의 키라인

-아이콘 표현
a. 재질 배경 : 재질의 가장 먼 후면 레이어
b. 재질 전경 : 레이어의 배경에 그림자를 포함
c. 스팟 컬러 : 요소의 작은 부분에 적용된 색
d. 플루딩 Flooding : 전체 요소에 적용된 색상
e. 가장자리 색상 : 요소의 위쪽 가장자리에는 원래보다 밝은 색상 적용
f. 가장자리 음영 처리 : 요소의 아래쪽 가장자리는 원래보다 어두운색으로 음영 처리
g. 연결 그림자 : 전경 가장자리의 부드러운 그림자
h. 끝 : 왼쪽에서 아래쪽으로 희미해지는 부드러운 조명 색조

3. 런처 아이콘 Launcher icon
실행 아이콘이라고 하는 런처 아이콘은 애플리케이션을 열 때 사용되며 주로 홈 화면에 위치한다. 런처 아이콘은 스마트폰 또는 앱 스토어에서 다른 아이콘과 함께 배치되며, 사용자는 대개 여러 응용프로그램 중에서 하나를 선택하게 된다. 따라서 런처 아이콘을 디자인할 때는 최대한 빨리 앱을 식별하고 찾을 수 있게 하는 데 초점을 맞춰야 한다.
사람은 애플리케이션을 선택할 때 형태나 그림보다 색상을 가장 먼저 인식하는 경향이 있다. 아이콘을 디자인하려는 앱에서 특정 색상을 브랜드 컬러로 사용한다면, 색상을 좀 더 강조할 수 있는 방안을 모색하는 것이 좋다. 

- 앱 아이콘의 크기 
안드로이드에서도 모든 앱은 큰 아이콘과 작은 아이콘을 제공해야 한다. 작은 아이콘은 홈 화면과 앱이 설치된 후 시스템 전체에서 사용되며, 큰 아이콘은 구글 플레이 스토어에서 사용된다. 화면 픽셀 밀도에 따라 크기별로 5종류의 아이콘이 필요하며 플레이 스토어에 등록하기 위한 용도로 하나가 더 필요하다.

화면	스케일링 요소	DPI	런처 아이콘의 크기
mdpi (기준 1dp=1px=1sp)	1x	160	48x48px
hdpi	1.5x	240	72x72px
xhdpi	2x	320	96x96px
xxhdpi	3x	480	144x144px
xxxhdpi	4x	640	192x192px

안드로이드 화면별 스케일링 요소, DPI, 런처 아이콘의 크기

 

- 액션 바 Action Bar
액션 바 아이콘은 응용프로그램의 주제에 따라 평면과 그레이 스케일로 제작하며, 3D 형태로는 제작하지 않는다. 또한, 일관성 유지를 위해 같은 그레이 스케일 색상과 효과를 사용해야 한다.

- 탭 아이콘 Tab icon
탭 아이콘은 탭 인터페이스에서 개별 탭을 나타내는 데 사용되는 그래픽 요소로, 투명 배경을 사용해야 한다. 

- 상태 표시 아이콘 Status icon
상태 표시 아이콘은 상태 바가 밝은 경우와 어두운 경우에 각각 사용할 수 있도록 두 종류가 필요하며, 배경은 투명으로 작업하고 png 파일로 저장해야 한다. 또한 3D 입체는 사용하지 않는다.

- 대화형 아이콘 Dialogue icon
대화형 아이콘은 사용자의 인터페이스에 팝업 형태로 제공되며 그러데이션과 내부 그림자를 사용할 수 있다.

- 리스트 뷰 아이콘 List View icon
메뉴 아이콘이라고도 하는 리스트 뷰 아이콘은 대화형 아이콘과 비슷하지만, 아이콘 형태 내부에 그림자 효과를 사용하는 것이 다르며 설정 애플리케이션과 같이 제한적으로 사용된다.
*안드로이드 아이콘 그리드는 개발자 사이트에서 내려받을 수 있다. 글꼴과 장치, 레이아웃 템플릿과 같은 다양한 UI 요소도 함께 내려받을 수 있다. https://material.io/guidelines/resources/sticker-sheets-icons.html

- 아이콘의 저장과 파일명
안드로이드에서는 화면의 해상도에 따라 서로 다른 이미지를 로딩할 수 있다. 아이콘은 디렉터리 안에 알파벳순으로 정렬되기 때문에 각 아이콘 유형에 공용 접두사를 사용하면 도움이 된다. 각 아이콘의 이름은 iOS와 달리 대문자를 사용하면 안 된다.

유형 Asset Type	접두사 Prefix
아이콘	ic_
런처아이콘	ic_launcher
리스트 뷰 아이콘, 액션 바 아이콘	ic_menu
상태 표시 아이콘	ic_stat_notify
탭 아이콘	ic_tab
대화형 아이콘	ic_dialog

4. 시스템 아이콘 System icon
시스템 아이콘은 명령, 파일 장치, 디렉터리 관리, 인쇄, 저장과 같은 일반적인 작업을 나타내는 데 사용되며, 콘텐츠의 유형을 나타내는 내비게이션 바, 툴 바, 퀵 액션 아이콘 등으로 구분할 수 있다. 시스템 아이콘의 디자인은 단순하고 현대적이며 익숙해야 한다. 또한 아이콘의 크기가 작으므로 명확해야 하며, 전체적으로 일관성이 유지되면서 흑백 모드도 지원해야 한다. 
안드로이드 시스템 아이콘의 크기는 24 x 24dp로 표시되며, 바탕화면에서 마우스와 키보드가 기본 입력 방법이면 측정값이 20dp로 축소될 수 있다. 
시스템 아이콘의 콘텐츠는 라이브 영역 내부에 있어야 하며, 라이브 영역은 2dp의 빈 곳을 이용해 패딩 Padding을 구성한다. 시각적 무게감에 일관성이 있게 디자인하기 위해 패딩으로 내용을 확장할 수는 있지만, 트림 Trim 영역 바깥으로는 아이콘의 어떤 부분도 확장하면 안 된다.

- 시스템 아이콘의 구조 
아이콘의 코너 반경은 기본적으로 2dp이고, 내부 모서리는 둥글지 않은 정사각형이어야 한다.
시스템 아이콘의 스트로크 너비는 곡선, 각도의 내, 외부 일관되게 2dp 여야 한다.

- 시스템 아이콘의 배치 공간
시스템 아이콘의 가장자리에는 가독성과 터치를 위해 영역을 두어야 한다. 마우스와 키보드를 기본 입력 도구로 사용하는 밀도 높은 화면에서도 20x20dp의 아이콘에 40x40dp의 터치 영역을 사용한다. 
컬러를 사용할 때는 배경 컬러에 유의해야 한다. 또한, 활성화된 아이콘과 비활성화된 아이콘을 구분할 수 있도록 컬러를 다르게 해야 하며, 이때 투명도가 아니라 색상으로 구분해야 한다.
https://material.io/tools/icons
각진 아이콘과 둥근 아이콘의 경우 가장자리 곡선의 반경을 0~4dp 사이에서 조절한다. 디자이너의 선택에 따라 브랜드 이미지와 맞는 모양으로 제작하면 된다.
투톤 아이콘에는 스트로크와 채우기 색상을 대조해 여러 브랜드 색상을 사용할 수 있다. 이 경우 내부 색상에는 투명도나 불투명도를 적용해 투톤으로 만든다.

- 아이콘의 움직임
애니메이션은 아이콘에 시각적 즐거움을 더하는 수단이다. 아이콘이 수행하는 작업을 표현하는 형태로 애니메이션을 구성하면 더 좋다. 애니메이션을 적용함으로써 사용자에게 사용환경을 환기하고 사용성을 높일 수 있는 장점도 있다. 아이콘을 애니메이션으로 연결하는 경우는 대개 두 개의 시각적 상태를 연결하지만, 강조 수준에 따라 동작을 더 복잡하게 구현할 수도 있다. 특히 최근 마이크로 UI가 추세가 되면서 이러한 움직임이 더 중요하게 반영되고 있다.

 

2023.04.13 - [UXUI 디자인] - 안드로이드 가이드 라인 2

안드로이드 가이드 라인 2

2023.04.12 - [UXUI 디자인] - iOS 가이드라인 3

iOS 가이드라인 3