아이콘 제작 가이드
크기
아이콘에서는 일관성이 핵심 요소이며 기본 사이즈가 같아야 한다. 우선 그리드 비율(8또는 10)을 정해야 기본이 되는 사이즈를 정할 수 있다. 만약 8px그리드를 사용한다면 16, 24, 32… 사이즈로 제작한다.
크기에 따라 디테일이 추가된다면 사이즈를 키우는 것에서 시작하자. 대부분의 경우 기본 아이콘 사이즈는 24px로 작업한다. 하지만 마케팅이나 점검 페이지처럼 상태를 설명해야 하는 화면에서는 크게 사용할 때가 있다. 이런 큰 사이즈 아이콘에는 디테일을 추가하기도 한다.
다양한 사이즈로 아이콘을 만들어야 할 때, 가장 큰 사이즈에서 시작해 점점 작은 사이즈를 만든다. 그래픽에서 디테일을 줄이고 심플하게 만드는 것이 그 반대 케이스보다 더 쉽기 때문이다. 또한 최소화 하기 전에 오브젝트에 대한 감각을 익히게 해준다.
색상
서비스 디자인을 위한 아이콘은 우선 검정색으로만 디자인한다. 색상이 많아질수록 복잡해지며 다른 디자이너와 협업하기 어렵다. 마케팅용 아이콘은 브랜드에 중요한 요소일 때 2가지 이상을 쓸 수 있다. 3가지 이상 색상을 사용하면 아이콘이 아닌 일러스트레이션으로 인식한다.
그리드
픽셀 그리드
픽셀 그리드는 가장 기본이 되는 수치적 토대이다. 아이콘을 만들 때 픽셀 그리드에 정렬하면 잘 렌더링 될 뿐만 아니라 작업을 편리하게 한다. 위치에 통일성을 주고 전체적으로 균형을 맞추기 쉽다.
시각적 그리드
시각적 그리드는 사람 눈으로 봤을 때 아이콘간 균형을 파악하는걸 도와준다. 원형이나 커브가 있는 오브젝트는 사각형보다 시각적 공간을 덜 차지한다. 아이콘을 같은 사이즈의 공간에 넣고 아이콘 별로 적절한 패딩을 적용해야 한다. 리스트처럼 아이콘을 일정하게 정렬해서 사용할 일이 많으므로 가로 세로로 정렬 했을 때 균형이 맞는지 확인하자.
시스템 아이콘의 기본 사이즈는 24x24로 만든다. 데스크탑의 경우 마우스와 키보드가 기본 입력장치일 때 기본 아이콘 사이즈는 20x20으로 줄어든다.
머티리얼에서 오브젝트가 들어가는 영역을 패딩과 구분하기 위해 Live Area라고 부른다. 기본 사이즈에서 패딩은 2dp이다.
패딩 영역은 꼭 비워놓는 부분이 아니라 아이콘의 밸런스에 따라 조절한다.
선과 채우기
선 아이콘은 작은 디테일이 가능하고 채워진 (filled) 아이콘은 형태를 인지하기가 쉽다. 적절한 스타일을 선택하려면 전체적인 브랜드를 고려해야한다.
선 아이콘을 만든다면 기본적으로 선은 같은 굵기가 되도록 한다. 선 사이의 공간은 선보다 더 얇지 않도록 주의한다.
선과 공간의 굵기가 같은 예시
복잡한 형태를 만들 때 시각적 보정이 필요하다. 머티리얼 아이콘은 기본 선 굵기가 2 이지만 아래 클립과 담배 연기의 경우 커브가 많기 때문에 1.5로 보정되었다.
코너
머티리얼에서 기본 라운딩 코너값은 2이다. 내부 코너는 적용하지 않는다. 도형의 너비가 높이가 2 이하인 경우 선으로 된 코너는 라운딩을 적용하지 않는다.
터치 영역
이름
아이콘은 명시적인 형태를 기준으로 심볼/파일명을 정하는게 좋다. 예를들어 스톱워치 아이콘의 경우 Speed가 아닌 Stopwatch로 한다. 전구의 경우 Idea가 아닌 Lightbulb로 한다. 이름은 짧을수록 좋으며 2자 이상의 단어 조합을 써야한다면 multi_people 같은 형태로 구분한다.
참고 링크 🔗
Last updated
