디자인 아틀라스⬡아이콘·일러스트
키라인, 광학 보정, 듀오톤 아이콘, 아이소메트릭 — 작은 그림을 그리는 규칙. — 16개 항목
아이콘 키라인Icon Keylines
아이콘을 그릴 때 크기를 맞추는 기준이 되는 원·정사각형·세로장방형·가로장방형 네 가지 보이지 않는 틀.
옵티컬 보정Optical Correction
수치상 같은 크기인데도 원이나 삼각형이 정사각형보다 작아 보이는 착시를 없애려고, 곡선·뾰족 도형을 일부러 살짝 더 크게 그리는 보정.
라인 아이콘Line Icon
면을 채우지 않고 일정한 굵기의 선(스트로크)만으로 형태를 그린 아이콘 — 가볍고 텍스트와 잘 어울린다.
솔리드 아이콘Solid Icon
윤곽선 없이 면 전체를 색으로 채운 아이콘 — 작은 크기에서도 형태가 뭉개지지 않아 눈에 잘 띈다.
듀오톤 아이콘Duotone Icon
한 아이콘을 두 개의 평면 레이어로 나눠, 옅은 톤은 배경을 진한 톤은 강조를 맡기는 방식 — 그림자 없이 색 두 개로 위계를 만든다.
아이콘 그리드 (세이프 영역)Icon Grid & Safe Area
아이콘을 그리는 캔버스와, 실제로 그림을 채울 수 있는 여백 안쪽 세이프 영역을 구분해두는 규칙.
픽셀 퍼펙트Pixel-Perfect
아이콘의 선이 물리적 픽셀 경계에 정확히 맞아떨어지게 그리는 것 — 반 픽셀 위에 걸치면 안티앨리어싱으로 흐려진다.
픽토그램Pictogram
글자 없이 그림만으로 뜻이 통하는 기호 — 언어·문해력과 무관하게 즉시 알아봐야 하는 공항·시설 표지판이 대표적이다.
아이소메트릭 일러스트Isometric Illustration
소실점 없이 세 축을 120도로 배치해서, 원근 왜곡 없이도 입체감을 보여주는 그림 방식.
플랫 일러스트Flat Illustration
그림자·그레이디언트·하이라이트를 걷어내고 단순한 도형과 균일한 색면만으로 장면을 그리는 일러스트 스타일.
3D 아이콘 (CSS 셰이딩)3D Icon (CSS-Shaded)
실제 3D 렌더링 없이 CSS 그레이디언트와 그림자만으로 유리·플라스틱 같은 광택 입체감을 흉내 낸 아이콘.
애니메이션 아이콘Animated Icon
상태가 바뀔 때 순간 전환하지 않고 이전 모양에서 다음 모양으로 부드럽게 형태를 바꾸며 지나가는 아이콘.
아이콘 메타포Icon Metaphor
실제 기능과 상관없는 물건의 그림을 빌려와, 그 물건이 하던 역할을 새 기능의 상징으로 쓰는 것 — 저장 버튼의 플로피 디스크가 대표적이다.
스트로크 일관성Stroke Consistency
아이콘 세트 전체에서 선의 굵기를 하나의 값으로 고정하는 규칙 — 굵기가 다른 아이콘을 나란히 두면 세트 전체가 어수선해 보인다.
스팟 일러스트Spot Illustration
화면 전체를 채우는 장면이 아니라, 빈 상태·에러·성공 알림처럼 특정 지점 하나를 위해 그리는 작고 독립적인 그림.
아바타 일러스트Avatar Illustration
실제 사진 대신, 간단한 도형만으로 사람의 형태를 암시하는 그림 — 프로필 사진이 없는 사용자의 기본값으로 쓰인다.