자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.
⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️
COLOR FOR UI
Contrast Constraints
대비(Contrast)는 페이지의 요소를 구별하는 좋은 방법이다.
그러나 모든 요소에 그렇게 함으로써 사용자에게 인지 과부하를 유발할 수 있다.
경쟁 요소가 많으면 모든 것이 그들의 관심을 끌기 위해 경쟁하고, 이는 페이지에서 우세한 것으로 이어질 수 없다.
색 사용을 통해 페이지 대비에 대해 생각하고 적용할 때는 전체적인 대비량을 제한하는 것이 중요하다.
이렇게 하면 디자이너는 사용자가 집중하고 수행할 작업 등 페이지의 가장 중요한 부분만 강조 표시할 수 있다.
중립 배경(neutral background)(낮은 밝기 또는 채도를 가진 모든 색상)을 갖는 것은 사용자의 주의를 끌려는 사이트의 부분과 높은 대비를 추가할 수 있기 때문에 좋은 기초이다.
마찬가지로 밝은 색상의 텍스트가 있는 어두운 배경도 이미지나 비디오와 같은 자산에 따라 사이트에 표시되는 합리적인 대안이 될 수 있다.
반면, 중간 배경(Medium background)은 충분한 대비를 만들기 어렵고 명확한 시야를 확보하기가 어려울 수 있기 때문에 조금 더 까다롭다.
Brand Color
인터넷 스타트업이든 스포츠팀이든 다국적 의류 브랜드이든 각 회사는 브랜드 색상이 정해져 있다.
예를 들어, 페이스북은 트위터처럼 파란색을 상징하고 있는 반면 코카콜라는 빨간색을 주색으로 하고 있다.
심지어 BrandColors라라고 불리는 사이트도 있는데, 이런 사이트들을 다양한 회사들을 위해 전시하고 있다.
디자인 작업을 할 때는 브랜드 색상을 선택하고 적용하는 것이 필수이다.
색상 팔레트를 지배해야 하는 색상이다.
이 브랜드 색상은 사이트에서 사용되는 색상의 약 60%를 차지하며, 제품과 사용자의 인식 사이에 브리지를 구축하는 데 도움이 된다.
Accenct Colors
브랜드 색상이 일반적으로 웹 사이트의 구성을 지배하는 반면, 액센트 색상은 똑같이 중요하다.
이러한 보조 색조(supplementary hue)는 디자인 내에 작은 색 팝을 제공하며 사용자의 주의를 끄는 데 사용할 수 있다.
예를 들어 색상표를 선택한 경우 팔레트에서 하나 이상의 색상이 액센트 색상으로 사용된다.
이를 통해 사용자가 자신의 목표를 달성하는 데 있어 중요한 부분인 Call-to-action을 해독하는 데 도움이 되도록 디자인의 여러 부분에 이러한 액센트 색상을 적용할 수 있다.
Buttons
버튼은 액센트 색상을 효과적으로 사용할 수 있는 요소의 한 유형이다.
사용자가 탐색하거나 양식을 제출하거나 다음 작업으로 이동하는 방법을 제공하기 때문에 버튼의 색상은 사용자의 눈에 많은 것을 결정한다.
버튼에 적합한 색을 선택할 뿐만 아니라 사용자가 버튼과 상호 작용할 때 버튼의 상태도 다르다.
이러한 서로 다른 상태는 사용자에게 상호 작용이 가능하거나 불가능하다는 가시적인 신호를 제공한다.
사용되는 두 가지 공통 상태는 호버 상태(hover state)와 비활성화 상태(disabled state)이다.
일반적으로 호버 상태는 버튼에 사용되는 액센트 색상의 음영 또는 색조를 나타낸다.
이렇게 하면 사용자가 작업 맨 위로 스크롤할 때 어떤 작업이 수행되고 있음을 이해하는 데 도움이 된다.
또한 설계자는 버튼이 비활성화되어 더 이상 수행 가능하지 않음을 사용자에게 전달하는 방법을 고려해야 한다.
비활성화된 상태는 버튼이 활성 버튼이 아니거나 사용자가 버튼을 활성화하기 전에 단계를 완료해야 하기 때문에 버튼을 클릭할 수 없음을 의미한다.
좋은 예는 사용자 로그인 양식이다.
사용자가 사용자 이름 또는 전자 메일과 유효한 암호를 제공할 때까지 로그인 버튼을 비활성화할 수 있다.
Forms
양식 입력은 색상을 사용하여 사용자에게 작업을 나타내는 또 다른 유형의 구성요소이다.
버튼과 마찬가지로 폼 입력에도 특정 상태가 있다.
사용자가 처음 페이지에 도착했을 때 입력을 보는 기본 상태가 있다.
두 번째 상태는 선택된 상태 또는 활성 상태이다.
필드를 강조 표시하고 필드에 입력할 수 있다는 시각적 신호를 사용자에게 제공한다다.
일반적으로 테두리 색이나 상자 그림자 효과를 사용하면 된다.
입력 필드를 편집하거나 입력할 수 없는 경우 비활성화된 상태도 있어한다.
비활성화된 버튼과 유사하게 회색으로 표시된다.
입력에는 성공과 실패를 나타내는 다른 색상도 있다. 이것들은 semantic color라고 한다.
Semantic Colors
어떤 것이 옳고 그른 경우 사용자에게 추가적인 표시를 제공해야 한다.
사용자 입력 요소를 디자인할 때 오류가 발생한다는 것을 이해해야한다.
이 경우 사용자는 어디에서 문제가 발생했는지 알 수 있도록 경고를 받아야한다.
이 표시기에 사용되는 일반적인 디자인 패턴 색상은 빨간색이다.
빨간색은 삭제 버튼에 대한 강조 표시를 제공하는 데에도 사용된다.
사용자가 무언가를 삭제하기를 원하거나 삭제해야 하는 경우 삭제 작업이 일반 작업과 다르다는 점을 충분히 명확히 해야 한다.
반면에, 사용자가 문제 없이 목표를 달성하거나 올바른 일을 할 때, 사용자에게 적절하게 알려야하며, 그렇게 하는 좋은 방법은 녹색을 성공 메시지로 사용하는 것이다.
또한 녹색은 사용자가 제출, 앞으로 이동 또는 이동하도록 유인하는 작업에 자주 사용된다.
모든 오류가 사용자에 의해 발생하는 것은 아니다.
가끔, 코드는 그냥 깨질 때가 있는데, 웹 사이트에서 오류가 발생하여 사용자에게 알려야 할 경우, 문제 수준을 나타내는 색상과 작업 색상과 충돌하지 않는 색을 선택하는 것이 좋다.
이러한 경고 상황의 일반적인 색상은 노란색이다.
사용자가 인터페이스와 상호 작용할 때 사용자에게 제공하는 시각적 피드백은 매우 중요하다.
Default Colors
디자인하는 거의 모든 사이트는 어떤 식으로든 검은색, 흰색, 그리고 회색 음영을 포함할 것이다.
이러한 기본 색상(defualt color)은 읽기에 많은 대비를 제공하며 다른 여러 가지 색 구성표에도 적합하기 때문에 디자인에서 텍스트 색상으로 자주 사용된다.
텍스트 색상을 선택할 때는 텍스트를 읽을 수 있을 정도로 대비가 높은지 확인하는 것이 중요하다.
그러나 너무 많은 대조도 문제가 될 수 있다.
흰색 위에 검정은 극명한 대비 때문에 사용자의 눈에 거슬릴 수 있다.
흰색 배경의 텍스트에 더 진한 회색 또는 어두운 회색 배경의 흰색 텍스트를 사용하면 문제 없이 읽을 수 있을 만큼 명확한 대비를 제공하면서 느낌을 부드럽게 할 수 있다.
Neutral Colors
배경과 텍스트에 서로 다른 색을 사용할 때 대비가 어떻게 영향을 받는지도 고려해야한다.
neutral color, 즉 광도 및/또는 채도가 낮은 색은 사용자의 주의를 끌려는 사이트의 일부에 인상을 추가할 수 있으므로 좋은 기본 색상을 제공한다.
예를 들어 흰색 텍스트와 함께 어두운 회색 사용 시와 마찬가지로 밝은 색 텍스트와 함께 어두운 색조를 사용할 수 있다.
neutral color의 음영이나 색조를 사용하면 대조도가 낮기 때문에 동일한 결과를 얻기 어려울 수 있다.
Whitespace
공백은 웹 디자인에서 균형 있고 조화로운 레이아웃을 만드는 중요한 측면이다.
디자이너로서, 공백을 어떻게 개선하고 디자인을 해칠 수 있는지를 이해하는 것이 중요하다.
공백 또는 음의 공백은 요소 사이의 텅 빈곳을 나타낸다. 하지만 색깔이 반드시 흰색은 아니다.
예를 들어, 당신은 구글이 그것의 랜딩 페이지에 흰 공간을 수용한다는 것을 알게 될 것이다.
콘텐츠를 검색하는 기본 액션에만 사용자의 관심을 집중시킵니다.
공백이 너무 많으면 사이트 흐름에 부정적인 영향을 미칠 수 있다.
요소 사이의 간격을 너무 많이 포함하면 콘텐츠를 원활하게 탐색하려는 사용자에게 문제가 발생할 수 있다.
디자이너자는 공간의 사용을 염려하지 말고 사이트의 사용성을 높이고 가장 중요한 콘텐츠의 우선 순위를 정해야한다.
Accessibility
UI 구성 요소에 대해 선택한 색상에 액세스할 수 있는지 확인하는 것은 시각적 디자인의 매우 중요한 부분이다.
대비되는 색을 사용하면 도움이 필요한 사용자가 디자인된 내용을 이해하고 구별할 수 있다.
일부 사용자는 색맹을 겪을 수 있다.
- 적녹: 사용자가 빨간색과 녹색을 구별하기 어려운 경우.
- 청황: 푸른빛이 더 푸르러 보이는 청노랑.
- 색맹: 사용자가 색을 전혀 볼 수 없는 경우.
사이트에 더 쉽게 액세스하려면 다른 표시기와 색을 결합하여 정보를 전달한다.
앞에서 녹색을 성공 표시로, 빨간색을 오류 경고 표시로 사용하는 것을 언급했다.
사용자가 메시지를 완전히 이해했는지 확인하려면 녹색 확인과 빨간색 "x"와 같은 레이블 표시기를 사용하는 것이 좋다..
액세스 가능한 색상표를 결정하는 데 문제가 있는 경우 WCAG(Web Content Accessibility Guidelines)를 기반으로 사이트 또는 앱에 대해 액세스 가능한 색상표를 만드는 ColorSafe를 방문할 수 있다.
Interations
비주얼 UI 디자이너로서 미학은 전체적인 사용자 경험에 중요하다.
그러나 사용적합성 및 미관이 상충되는 경우 사용적합성 측면에서 오류를 범하는 것이 가장 좋다.
테스트와 반복은 사용자 중심 설계 프로세스의 필수적인 부분이다.
적절하고 유용한 피드백을 얻기 위해 디자인을 사용자 앞에 놓는 것은 아무리 많은 디자인 지식으로도 대체할 수 없다.
일부 사용자는 다른 사용자와 다르므로 누구를 위해 구축했는지 더 잘 이해할 수 있으면 색상 선택이 제대로 수행되도록 하는 데 도움이 된다.
참고
BrandColors - official brand color hex codes
Close Modal About BrandColors BrandColors was created by DesignBombs. The goal was to create a helpful reference for the brand color codes that are needed most often. It's been featured by Smashing Magazine, CSS-Tricks, Web Design Depot, Tuts+, and over 2
brandcolors.net
Color Safe - accessible web color combinations
Pick a color to set the text color Click on a color square to preview text color in the upper toolbar. Click on the Hex or RGB value in the toolbar to copy to your clipboard. Got it
colorsafe.co
WebAIM: Contrast Checker
Contrast Checker You are here: Home > Resources > Contrast Checker This tool requires Javascript. Normal Text The five boxing wizards jump quickly. Large Text The five boxing wizards jump quickly. Graphical Objects and User Interface Components image/svg+x
webaim.org
Color by Cloudflare Design
A color palette tool for interface design
color.cloudflare.design
'IT > CSS' 카테고리의 다른 글
| Links and Buttons (0) | 2021.05.08 |
|---|---|
| Text Design (0) | 2021.05.08 |
| CSS: Color Theory (0) | 2021.05.07 |
| CSS: Display and Positioning (0) | 2021.05.07 |
| CSS: Box Model -2 (0) | 2021.05.04 |
댓글