색상
색상 (Color)
색상은 스타일을 표현하고 감정을 불러일으키며 의미를 전달하는 도구예요. 표준화된 색상 팔레트와 그것의 의도적인 적용은 익숙하고 편안하며 일관된 경험을 보장해요. Fluent의 색상 체계를 이해하고 활용하는 방법을 알려 드릴게요.
출처: 문서
본문
색상은 스타일을 표현하고, 감정을 불러일으키고, 의미를 전달하는 도구예요. 표준화된 색상 팔레트와 그것의 의도적인 적용은 익숙하고, 편안하고, 일관된 경험을 보장해요.
Fluent 팔레트 (Fluent palettes)
Fluent는 중성(neutral), 공유(shared), 브랜드(brand) 세 가지 색상 팔레트를 정의해요. 각 팔레트는 특정 기능을 수행해요. 각 섹션을 읽고 각각의 구체적인 역할과 제품 전반에 어떻게 적용하는지 알아보세요.
중성 색상 (Neutral colors)
중성 팔레트는 인터페이스를 바탕으로 하는 검정, 흰색, 회색으로 구성돼요. 이 색상은 표면, 텍스트, 레이아웃 요소에 사용돼요. 컴포넌트에서 사용될 때는 종종 상태의 변화를 암시해요.
중성색을 이용한 시각적 계층 (Visual hierarchy using neutrals)
표면에 더 밝은 중성색을 사용해 기본 초점 영역을 강조하고 계층감을 만들어요. 이렇게 하면 사용자의 시선이 인터페이스에서 가장 주의가 필요하거나 가장 유용한 영역으로 향하게 돼요.
공유 색상 (Shared colors)
공유 색상은 M365 앱 제품군 전반에 걸쳐 정렬되며, 아바타, 캘린더, 배지 같은 Fluent의 고가치 재사용 컴포넌트에 사용돼요. 공유 색상은 제품 전반에서 컴포넌트와 기능을 빠르게 인지하도록 해 줘요.
중요한 영역을 강조하고 하이라이트하기 위해 공유 색상을 아껴서 사용하세요.
다크 모드에서는 공유 팔레트의 색상이 눈의 피로를 줄이고 시각적 접근성 요구를 수용하기 위해 채도와 밝기가 바뀌어요.
의미 색상 (Semantic Colors)
공유 팔레트의 일부 색상은 피드백, 상태, 또는 긴급함을 전달하기 위해 특별히 사용돼요. 이를 의미 색상이라고 하며 항상 중요한 정보를 전달해야 해요.
중요한 메시지에 의미 색상을 사용하세요. 장식용으로는 사용하지 마세요.
의미 색상은 빨간색은 위험, 노란색은 주의, 초록색은 긍정적인 피드백 같은 실제 세계의 연상을 바탕으로 한눈에 보는 정보를 전달해요. 일관되게 사용하고 다른 지표와 함께 짝지으면 이러한 맥락을 강화하고 인지 부하를 줄여 줘요.
브랜드 색상 (Brand colors)
색상은 제품 제품군의 즉각적인 브랜드 인지에 핵심이에요. M365의 제품은 전용 브랜드 색상으로 구별돼요.
제품 색상 - 라이트 모드 (Product colors - light mode)
Communication Blue & Outlook, PowerBI, Office, PowerPoint, Windows, Publisher, Cortana, Stream, Excel, Sway, GroupMe, Teams, OneDrive, Visio, Planner & Project, Word, Power Apps, Booking
브랜드 색상을 인터페이스의 다양한 영역에 적용하면 시각적 중요성을 만들 뿐 아니라, 사용자를 특정 제품 경험에 고정시켜 줘요. 브랜드 색상을 과용하거나 큰 표면에 사용하면 계층을 희석시키고 경험을 탐색하기 어렵게 만들 수 있으니 피하세요.
버튼과 CTA, 선택된 상태
상호작용 상태 (Interaction States)
Fluent 팔레트는 컴포넌트의 상호작용 상태를 나타내는 데 자주 사용돼요. 일반적으로 사람이 상호작용할수록 컴포넌트가 어두워져요—가장 밝은 rest 상태에서 더 어두운 hover, 가장 어두운 selected 상태까지요. 포커스 상태에서는 컨트롤의 색상이 바뀌지 않지만, 마우스와 키보드 상호작용 사이의 명확한 시각적 구분을 만들기 위해 컨테이너의 획(stroke)이 더 두꺼워져요.
플랫폼 구분 (Platform distinction)
Windows 상호작용 상태는 현재 색상을 반대로 처리해요. 사람이 상호작용할수록 컨트롤이 밝아져요.
접근성 모범 사례 (Accessibility best practices)
색상으로 Fluent 경험을 만들 때 접근성을 최우선으로 유지하세요.
- 저시력 또는 색맹이 있는 사람이 인지할 수 있는 대비를 보장하세요
- 가능하면 사람들이 항상 자신에게 맞도록 색 구성표를 개인화할 수 있게 하세요
- 색상을 유일한 의사소통 수단으로 사용하지 마세요. 텍스트, 그래픽, 다른 지표와 함께 사용해 여러 방식으로 정보를 전달하세요
이것은 Fluent의 핵심 주의 하나, "one for all, all for one"을 지키는 몇 가지 방법일 뿐이에요. 자세한 내용은 접근성 가이드라인을 참조하세요.
색상 토큰 (Color tokens)
일관된 색상 사용은 경험 전반, 심지어 제품 전반에 걸쳐 시각적 연속성을 만들어요. 균일한 색상 사용을 보장하는 가장 쉬운 방법은 Fluent의 디자인 토큰 시스템을 사용하는 것이에요. Fluent 팔레트의 각 값은 맥락에 무관한 전역 토큰으로 저장돼요. 그런 다음 별칭(alias) 토큰이 맥락을 제공해 hex 코드를 찾을 필요 없이 올바른 색상을 쉽게 선택하게 해 줘요.
토큰으로 디자인-개발 워크플로우를 개선하는 방법에 대한 자세한 내용은 토큰 가이드를 참조하세요.