안드로이드가이드라인(2)_아이콘

학습목표
안드로이드 아이콘의 역할과 중요성 이해하고, 안드로이드 환경에서 아이콘이 사용자 경험에 미치는 영향을 학습한다.

---

아이콘의 디자인 원칙과 접근법

제품 아이콘은 서비스와 도구를 비롯해 브랜드와 제품을 시각적으로 표현한 것으로, 제품의 핵심 아이디어와 의도를 간단하고 대담하며 친절한 방식으로 전달 할 수 있습니다

여기서도 모든 아이콘에는 일관된 흐름과 통일성이 있어야 합니다.

 

머티리얼Mmaterial의 촉감과 물리적 질감이 반영

• 아이콘을 종이처럼 자르거나 접는 단순한 그래픽 요소를 통해 견고하고 깔끔해 보이도록 하면서 가장자리를 선명 하게 만든다. 
• 표면에는 정밀한 하이라이트와 일관된 그림자를 적용해 통해 빛과 음영을 표현한다.

 

• 아이콘은 일반적인 작업, 파일, 장치 및 디렉터리를 상징하는 데 사용되는 작은 그래픽
• 재료 기호는 여러 가지 스타일 변형을 포함하는 새로운 글꼴 형식인 가변 아이콘 글꼴입니다.
• 동적으로 사용자 정의할 수 있는 스타일 변형에는 무게, 채우기, 광학 크기 및 등급이 포함됩니다.
• 기호는 이러한 가변 아이콘 글꼴에서 생성된 정적 아이콘 집합으로 제공됩니다.
• SVG, 정적, 아이콘 글꼴로 사용할 수 있으며 재료 기호 그림 플러그인이나 구글 폰트를 통해 액세스할 수 있다.

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

---

Design principles

• 너무 직설적이고, 복잡한 아이콘을 피함
• 너무 세밀한 것은 피함.
• 하나의 아이콘 집합에 스타일을 혼합하지 않음
• Standard (Baseline) icon size

Standard icons are displayed as 24dp x 24dp. For pixel-perfect accuracy, create icons for viewing at 100% scale. 

---

그리드와 키라인

• 아이콘을 만들 때 400%(192 x 192 dp)에서 아이콘을 보고 편집하며 
• 4dp에서 에지가 표시되는데. 이 비율을 유지하면 원본에 대한 모든 변경 사항이 비례적으로 확대 또는 축소되어 스케일이 100%(48dp)로 반환될 때 날카로운 모서리와 올바른 정렬이 유지됩니다.
• 그래픽 요소의 위치를 일관되면서도 유연하게 조정하며 아이콘을 제작하려면 그리드에 명확한 규칙이 적용되어 있어야 하는데

•  안드로이드는 iOS와 달리 외곽 라인이 규격화되어 있지 않고 오브젝트의 형태를 그대로 표현할 수 있으므로 통일감을 유지하기 위해 그리드 이외에 키라인을 제공하고 있습니다.
• 키라인 모양은 미리 설정된 표준을 사용한다. 정사각형, 원형, 세로 직사각형, 가로 직사각형으로 제품 아이콘을 통일하고, 그리드에 일관되게 배치해야 한다.
• 일정하지 않은 모서리 반지름을 사용하지 마십시오.

-

---

런처 아이콘

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

---

아이콘의 크기와 디자인

• 큰 아이콘과 작은 아이콘을 제공해야 한다.
• 작은 아이콘은 홈 화면과 앱이 설치된 후 시스템 전체에서 사용되며, 큰 아이콘은 구글 플레이 스토어에서 사용된다.
• 화면 픽셀 밀도에 따라 크기별로 5종류의 아이콘이 필요하며 플레이 스토어에 등록하기 위한 용도로 하나가 더 필요하다.
• 액션 바 Action Bar 아이콘은 응용 프로그램의 테마에 따라 평면과 그레이 스케일 로 제작 하며 , 3D형태로 제작하지 않는다.
  또한 일관성 유지를 위해 동일한 그레이 스케일 색상과 효과를 사용해야 한다
• 탭아이콘 : 탭 아이콘 Tab icon 은 탭 인터페이스에서 개별 탭을 나타내는 데 사용 되는 그래픽 요소로 , 투명 배경 을 사용해야 한다.
• 상태표시 아이콘 : 상태 표시 아이콘Status icon은 상태 바가 밝은 경우와 어두운 경우에 각각 사용할 수 있도록 두 종 류가 필요하며, 배경은 투명으로 작업하고 png 파일로 저장해야 한다. 또한 3D 입체는 사용하지 않는다.
• 대화형 아이콘 : 대화형 아이콘Dialogue icon은 사용자의 인터페이스에 팝업 형태로 제공되며 그러데이션과 내부 그림자를 사용할 수 있다
• 리스트 뷰 아이콘 : 메뉴 아이콘이라고도 하는 리스트 뷰 아이콘List View icon은 대화형 아이콘과 비슷하지만, 아이콘 형태 내부에 그림자 효과를 사용하는 것이 다르며 설정 애플리케이션과 같이 제한적으로 사용된다.

---

아이콘의 저장과 파일명

• 아이콘은 디렉터리 안에 알파벳순으로 정렬되기 때문에 각 아이콘 유형에 공용 접두사를 사용하면 도움이 된다.
• 각 아이콘의 이름은 iOS와 달리 대문자를 사용하면 안 된다.

---

시스템 아이콘

• 시스템 아이콘System icon은 명령, 파일, 장치, 디렉터리 관리, 인쇄, 저장과 같은 일반적인 작업 을 나타내는데 사용되며,콘텐츠의 유형을 나타내는 내비게이션 바, 툴 바, 퀵 액션 아이콘 등으 로 구분할 수 있다.
• 시스템 아이콘의 디자인은 단순하고 현대적이며 익숙해야 한다. 또한 아이콘의 크기가 작으므로 명확해야 하며, 전체적으로 일관성이 유지되면서 흑백 모드도 지원해야 한다
• 시스템 아이콘은 운영체제에서 기본 아이콘을 제공하지만, 없다면 직접 제작해 사용해도 된다. 다만 기존의 시스템 아이콘과 이질감이 느껴지지 않도록 선의 굵기, 크기, 형태에 일관성을 유지해야 한다.
• 시스템 아이콘은 쓰임새에 따라 크기가 다르므로 사용 용도에 따라 크기를 조절해야 한다. 이때 주의할 점은 타사의 시스템 아이콘과 혼용해 사용하면 안 된다는 것이다. 즉 iOS의 시스템 아이콘에 안드로이드 시스템 아이콘을 가져와서 사용하면 안 되며 반대의 경우도 마찬가지이다.

 

•  시스템 아이콘의 스트로크 너비는 곡선, 각도의 내· 외부 일관되게 2dp여야 한다.
• 시스템 아이콘의 가장자리에는 가독성과 터치를 위해 [그림 6-29]와 같이 터치 영역을 두어야 한 다. 마우스와 키보드를 기본 입력 도구로 사용하는 밀도 높은 화면에서도 20×20dp의 아이콘에 40×40dp의 터치 영역을 사용한다.(48dp)

아이콘의 움직임

• 전환 : 두 아이콘 사이에서 전환된다는 것은 두 아이콘이 연결되어 있음을 의미하며, 하나의 아이콘을 누르면 다른 아이콘을 사용할 수 있습니다.
• 강조 : 애니메이션 아이콘 전환은 선호하는 강조 수준에 따라 단순 또는 복잡한 동작을 사용할 수 있습니다.
• 기간 stagger : 프로그램 전체에서 일관성을 유지하려면 유사한 수준의 복잡도를 가진 아이콘에 대해 동일한 기간을 사용합니다.
• 엇갈림 : 아이콘 세트는 엇갈린 타이밍을 사용하여 입구를 유동적으로 수행할 수 있습니다. 그들은 진행감을 주기 위해 왼쪽에서 오른쪽으로 움직입니다.
• 상태 : 아이콘 애니메이션은 상태 변화를 강화하는 데 사용할 수 있습니다.
• 테밍 : 애니메이션은 브랜드의 스타일을 반영해야 합니다.

  ---