아이코노그래피
아이코노그래피 (Iconography)
아이콘은 개념, 객체, 또는 동작을 나타내며 레이아웃 안에서 의미론적 목적을 가져요. 아이콘은 항상 알아볼 수 있고, 기능적이며, 쉽게 이해되어야 해요.
출처: 문서
본문
Fluent 아이콘 컬렉션 (Fluent icon collections)
Fluent 아이콘은 친숙하고, 친근하며, 현대적이어서 매력적이고 직관적인 경험을 만들어줘요. 우리 아이콘은 사용 목적에 따라 세 가지 컬렉션으로 나뉘어요. 시스템(system), 제품 출시(product launch), 그리고 파일(file) 아이콘입니다. 각 컬렉션의 적용, 사용, 라이선스 안내는 각 문서에서 읽어보세요.
시스템 아이콘 (System Icons)
명령 바(command bar), 내비게이션, 상태 표시기 같은 항목에 UI 안에서 시스템 아이콘을 사용해요. 시스템 아이콘은 MIT 라이선스로 오픈소스예요.
테마 (Themes)
시스템 아이콘은 다양한 레이아웃, 시각적 두께, 최적화된 사용성을 수용하기 위해 두 가지 테마를 지원해요.
Regular (레귤러)
Regular 테마 아이콘은 주로 사용자가 사용 가능한 동작(다운로드, 구매, 실행 등)을 식별하고 선택하도록 돕는 길찾기(wayfinding) 장치로 사용돼요.
Filled (필드)
Filled 테마 아이콘은 선택된 상태를 강조하거나, 조금 더 두께와 가독성이 필요한 더 작은 순간에 사용돼요.
아이콘 크기 (Icon size)
아이콘 크기는 사용 사례와 플랫폼에 따라 달라져요. 작은 아이콘은 정보를 주거나 아이디어를 강화할 수 있지만, 상호작용에는 사용하면 안 돼요. 크기를 정할 때는 사용자가 경험을 어떻게 이동하는지 고려하세요. 손에 쥔 도구가 정밀할수록 아이콘은 작아질 수 있어요.
정보를 주려면 12픽셀 아이콘 사용하기 (Use 12 pixel icons to give information)
일반적으로 상호작용에는 너무 작아요.
아이콘 크기를 손의 도구에 맞추기 (Match the icon size to the tool at hand)
더 큰 터치 타깃이 필요한 작은 화면에서는 더 큰 아이콘을 사용하세요.
제품 출시 아이콘 (Product launch icons)
제품 출시 아이콘은 Microsoft 앱을 나타내요. 이들의 주요 역할은 Microsoft 기능과 그것이 가능하게 하는 협업·생산성을 식별하는 것이에요. 또한 구매, 다운로드, 실행 같이 사용자가 동작을 취하도록 할 수도 있어요.
이 아이콘들은 우리 Microsoft 브랜드와 연결을 그리지만, 회사를 대표하지 않으며 Microsoft 로고 대신 사용해서는 안 돼요.
축소하기 (Scaling down)
제품 아이콘이 48픽셀 아래로 줄어들면 가독성을 위해 세부 묘사가 단순해져요. 크기를 조정하는 대신 특정 크기에서 아이콘을 사용하면 픽셀 단위로 완벽한 결과를 만들 수 있어요.
확대하기 (Scaling up)
제품 아이콘을 48픽셀보다 크게 확대할 때는 풀 피델리티(full-fidelity) 아이콘을 사용하고 4의 배수(48, 64, 96…)로 조정하세요. 기본 아이콘의 4배, 즉 48픽셀에서 192픽셀로 확대하면 픽셀 완벽함을 보장해요.
파일 형식 아이콘 (File type icons)
파일 형식 아이콘은 특정 파일이나 파일 형식을 나타내요.
크기와 형식 (Size and format)
다색(multicolor) 파일 형식 아이콘은 대부분의 Microsoft UI에서 16, 48, 96픽셀 크기에서 가장 잘 보여요.
이 아이콘은 SVG와 .webp로 제공돼요. SVG는 벡터라 더 다재다능하고 쉽게 크기를 조정할 수 있지만, 모든 브라우저가 SVG를 지원하지는 않아요. PNG는 브라우저 지원이 더 넓지만 선명하게 유지하려면 많은 크기가 필요해요.
아이콘 사용 (Icon usage)
이름 짓기 (Naming)
Fluent 시스템 아이콘은 문자 그대로의 은유(literal metaphor)이며, 제공하는 기능이 아니라 표현하는 형태나 객체의 이름을 따서 지어져요.
베리어(Shield)지, 보안(Security)이 아니에요
수식자 (Modifiers)
필요할 때는 관련된 동작 같은 더 구체적인 은유를 표현하기 위해 아이콘에 수식자(modifier)를 추가할 수 있어요. 수식자는 최상의 대비를 위해 항상 filled 테마여야 하고, 항상 아이콘의 오른쪽 아래 모서리에 배치해야 해요.
수식자를 써서 단순한 아이디어를 확장하기 (Use modifiers to build on a simple idea)
너무 많은 복잡성을 도입하지 않기 (Don't introduce too much complexity)
수식자가 아이콘의 시각적 표현이나 의미에 너무 많은 복잡성을 도입할 거라면 사용하지 마세요.
색상 (Color)
아이콘에 색상을 추가하면 시각적 균형을 깨뜨릴 수 있으니, 아이콘에 색을 쓰기 전에 신중하게 생각하세요. 아이콘에 색을 포함한다면 한 가지 색만 사용하고 대비를 염두에 두세요.
시스템 아이콘에는 단색만 사용하기 (Only use solid colors on system icons)
제품 출시 아이콘의 색은 절대 바꾸지 않기 (Never change the color of product launch icons)
지역화 (Localization)
다른 문화에서 특정 기호의 문화적 함의를 이해하세요. 대부분의 경우 아이콘은 지역화가 필요 없지만, 어떤 아이콘은 한 문화에서 괜찮아도 다른 문화에서는 받아들여지지 않을 수 있어요. 사용될 맥락에 맞춰 아이콘 선택을 검증하세요.