Iconography
아이콘은 익숙한 도식화된 요소들을 활용하여 기능, 상황을 문자보다 직관적으로 표현해서
사용자의
서비스 이해도를 높이는데 도움을 줍니다.
Icon Design
아이콘을 디자인할 때는 다음과 같은 사항들을 고려해야 합니다.
-
1. 무게감
아이콘들의 시각적 무게감을 고려하여 제작합니다.
-
2. 굵기
값을 3~4px 사이로 통일하여 디자인합니다.
-
3. 모서리
각 아이콘마다 개별적으로 어울리는 값을 지정합니다.
-
4. 기울기
아이콘의 형상에 따라 상황에 맞게 사용합니다.
Grid
일정한 크기의 그리드와 키 라인 내에서 작업하여 화면 상에서 균형감과 무게감이 일치하도록 합니다.
Size
48x48 크기 기준으로 제작합니다. 아이콘은 하나의 리소스로 제작하며, 상황에 따라 크기를 변경하여 사용합니다.
Color
색상의 경우는 white(#F5F5FF)가 기본이며 아이콘에 색상 적용이 필요할 경우 아이콘을 추가 제작하여 사용합니다.
States
각 아이콘의 상태에 대한 정의입니다. 모든 아이콘 상태의 디자인은 정의된 토큰으로 동일하게 적용합니다.
-
1. Enabled
활성화 된 상태의 일반적인 아이콘입니다.
-
2. Selected
사용자가 아이콘을 선택한 상태입니다.
-
3. Focused
사용자가 화면상 위치를 쉽게 인식할 수 있도록 포커스된 상태의 아이콘입니다.
-
4. Disabled
비활성화 된 상태의 아이콘입니다.
Naming Rule
지정된 규칙에 따라 아이콘 이름을 지정합니다.
-
1. 대문자 사용 지양
미국식 영어 소문자 a-z, 언더 대시 _, 숫자 0-9 이외의 문자는 사용하지 않습니다.
-
2. 시작점에 a-z만 사용
아이콘 이름의 첫 글자는 영어 소문자만 사용합니다. 숫자나 _ 은 사용하지 않습니다.
-
3. -사용 지양
공백을 사용할 수 없기 때문에 두 단어를 구분할 때 구분 기호는 _를 사용합니다.
-
4. 확장자 지정
투명값이 포함된 이미지는 .png 투명값이 포함되지 않은 이미지는 .jpg 확장자를 사용합니다.
-
아이콘 이름은 다음과 같이 구성됩니다.
-
1. Prefix
- Asset type : 아이콘의 유형으로 다음과 같이 정의합니다. 이 영역은 해당 리소스가 무엇인지에 대한 정의입니다.
- Name Space : 아이콘이 노출되는 위치에 대한 내용을 정의합니다. 이 영역은 해당 리소스가 어디에 속하는지에 대한 대답입니다. 여러 화면에서 범용적으로 사용되는 아이콘은 name space를 따로 지정하지 않고, 구체적인 하위 클래스에 속하는 아이콘에 한 해 name space를 추가합니다.
-
2. Root
해당 아이콘을 가장 잘 설명할 수 있는 명사를 사용합니다.
-
3. Suffix
prefix 영역과 root 영역의 조합으로 아이콘의 이름을 만들었을 때, 요소가 충돌한다면 추가적으로 내용을 붙입니다. 필요한 내용만 추가하되, 그림에서 표현된 순서대로 네이밍을 붙여줍니다.
Sample
