색상을 사용해서 디자인 개선하기

요약: 사용자 경험을 지원하기 위해서는 색상을 현명하게 조합해야 상호작용이 잘되고, 압도되지 않으며, 동일한 종류의 정보를 인터페이스 어디에나 전달할 수 있습니다.

켈리 고든, 2021년 6월 6일

색상은 디자이너가 가지고 있는 가장 중요하고 영향력 있는 도구 중 하나입니다. 디자인에서 브랜드 톤을 설정해서 이미지에 영향을 미치며, 사용자의 관심을 끌며, 사용자의 감정에 영향을 미치며, 사용성을 높일 수 있습니다. 하지만, 올바른 색상 조합을 찾는 것은 어려울 수 있고 약간의 기본적인 지식과 연습이 필요합니다.

컬러 휠 설명

색은 우리의 눈이 다양한 빛의 파장을 인식하는 방법입니다. 1666년, 아이작 뉴턴은 세가지 색 그룹을 발견했습니다.

- 주요 컬러: 노란색, 빨간색, 파란색

- 보조 컬러: 주황색, 보라색, 녹색 (원색 혼합)

- 3차 컬러: 황-주황, 적-주황, 적-보라 등 (1차와 2차 혼합)

뉴턴은 색상 사이의 관계를 설명하기 위해 이 색상들을 컬러 휠 위에 배치했습니다.

[color-wheel1-15.png]

컬러 휠은 3가지 컬러 그룹을 보여줍니다. 주요 컬러는 가장 작은 중심 원에 표시됩니다. 보조 컬러는 가운데 링에 있으며, 가장 큰 외부 원은 3차 컬러 (모든 주요 컬러와 보조 컬러) 로 구성됩니다.

색채 이론

시각 예술에서, 색깔이 함께 어울리는 것을 설명하는 다양한 시도가 있습니다. 이것들은 색채 이론이라고 알려져 있습니다. 색채 이론의 세부사항은 이 기사의 범위를 벗어나는 반면, 기본적인 개념은 색의 조화로, 서로 잘 어울리는 색의 집합입니다.

색상 조화를 색상 팔레트의 구성요소나 기본 템플릿으로 생각할 수 있습니다. 몇 가지 일반적인 색상 조화는 다음과 같습니다.

- 유사(Analogous): 컬러 휠에서 서로 옆에 있는 색상입니다 (색상 대비가 낮음).

- 보완(Complementary): 컬러 휠의 반대쪽에 있는 색상이며, 높은 색상 대비를 생성합니다.

- 분할 보완(Split-complementary): 상호 보완적인 색상의 양쪽에서 다른 색과 결합된 색입니다. 이 조화는 기본적인 보색과의 대비를 약간 부드럽게 해줍니다.

- 3색(Triadic): 컬러 휠에서 동일한 거리 (120도 간격) 에 있는 3가지 색상입니다.

- 단색(Monochromatic): 한가지 색조의 톤과 음영.

[color-wheel1-13.png]

색상 조화를 사용하여 함께 잘 작동하는 색상 조합을 알아볼 수 있습니다. 유사, 보완, 삼각, 분할 보완 및 단색 체계는 너무 많은 색상이 필요하지 않는 기본 체계입니다.

네가지 색을 사용하는 조합 유형이 더 많습니다. 그러나 더 많은 색상을 도입할수록, 시각적 계층 구조의 균형을 맞추고 적용하기가 어려워질 수 있습니다. 색상에 대한 경험이 많다면 더 복잡한 조합으로 실험할 수 있지만, 두 세가지 색상만으로 시작할 수 있습니다.

색상의 의미

인터넷에는 다양한 색깔의 의미를 상세히 설명한 수많은 인기 기사들이 있지만, 특정 색이 감정에 미치는 보편적 효과를 입증하는 실제 연구는 거의 없습니다. 일반적으로, 세계화되면서 특정한 색깔들이 표준적인 의미들 (예, 빨간색은 정지, 녹색은 이동) 을 이루었을지도 모르지만, 색 해석은 문화에 따라 다양할 거라고 가정하는 것이 가장 안전합니다. 예를 들어, 빨간색(중국)과 녹색(미국) 중 돈의 색은 무엇일까요? 또한, 어떤 사람들은 색맹 때문에 특정한 색을 구별하지 못할 수도 있다는 것을 기억하세요.

디자인에 포함된 색상의 의미 해석이 목표인 경우, (a) 전세계에서 작동하지 않을 수 있다는 것을 알고 (b) 색 해석이 사용자의 색상과 일치하는지 확인하기 위해 추가적인 사용자 테스트를 실행합니다.

디자인에 색상 적용하기

색상 팔레트는 특정 프로젝트, 브랜드나 디자인 세트에서 선택된 색상 범위 및 세트입니다. 각 개별 색상을 일부러 추가한 전체 색상 집합으로 제품이나 인터페이스의 시각적인 아름다움을 이해할 수 있습니다.

색상 팔레트 만들기

색상 팔레트를 만드는 것은 어려울 수도 있습니다. 다음 지침이 색상 팔레트를 만드는데 도움이 될겁니다.

- 위 이미지에서 색상 조합을 선택하고 개별 색상을 반복합니다. 일반적으로 단색 구성을 만들고 적용하는 것이 가장 쉬우니, 무색 경험이 있는 경우 이 조합부터 시작합니다. 일단 조합을 결정하면, 여러분이 좋아하고 여러분의 디자인에 잘 어울릴 때까지 그것들이 어떻게 작동하고 어떻게 함께 보이는지 보기 위해 다른 색깔들을 넣거나 빼보세요. 처음부터 꼭 맞춰야 한고 생각하지 마세요. 막히거나 어디서 시작해야 할지 모를 경우, 기존 팔레트에서 영감을 얻으세요 (예: 어도비 컬러를 사용하거나 참고할 웹사이트를 찾습니다). 특정 색상 조합을 좋아하는 이유를 이해하려고 노력하세요. 색 포화도는 어떤가요? 색이 부드럽나요? 강한가요? 따뜻하다거나 시원한가요? 특정 색상 팔레트를 좋아하는 이유를 이해하면 자신의 색상 팔레트를 만드는 데 도움이 됩니다.

- 팔레트를 세가지 색으로 제한합니다. 색상 수가 적으면 사용자가 고려하거나 주의를 분산시킬 필요가 적어지기 때문에 시각적 계층 구조와 대비가 강화됩니다. 예를 들어, 시리얼 통로에서 특정 시리얼을 찾는 데 어려움을 겪은 적이 있나요? 색깔이 너무 많기 때문이에요! 모든 색이 여러분의 관심을 끌기 위해 경쟁하고 있습니다. 디자인에서도 마찬가지입니다. 적을수록 좋아요.

- 브랜드 색상 지침을 따릅니다. 색상 팔레트를 만들 때는 항상 정해진 색상 지침을 따르세요. 색상을 줄이는 대안을 고려하면 업무가 더 쉬워질 뿐만 아니라, 강력하고 일관된 브랜드 경험을 만들 수 있습니다. 브랜드 색상 지침이 없다면, 기존 디자인과 제품에 사용된 색상을 살펴보고 팔레트에 포함시켜 보세요.

[nike_screen-shot-2021-05-28-at-94147-am.png]

나이키 웹사이트는 검정색, 흰색, 회색라는 최소한의 단색 색상 팔레트를 사용했습니다. 이렇게 색을 선택하면 사용자는 제품과 제품 사진에 집중할 수 있습니다.

색상 팔레트 사용하기

색상 팔레트가 있으면 이제 디자인에 적용해서 색상 팔레트가 어떻게 유지되는지 확인할 수 있습니다. 몇가지 지침이 아래에 있습니다:

- 60-30-10 규칙을 사용합니다. 이 규칙은 단순히 색상을 디자인 영역의 60%, 30%, 10%에서 사용해야 한다는 것을 의미합니다. 지배적인 컬러에는 60%, 보조 컬러에는 30%, 강조 컬러에는 10%를 사용합니다. 이러한 비율들은 균형을 잡고 여러분이 화려하고 혼란스러운 상황을 만들지 않도록 도와줍니다. 일반적으로, 지배적인 컬러와 보조 컬러는 상대적으로 중립적인 색이어야 합니다. 페이지에서 가장 돋보이려는 항목 (예: 콜 투 액션) 에는 강조 컬러를 할당합니다.

- 반복하고 적용합니다. 60-30-10 규칙을 사용한 다음에는 색상을 수정해서 디자인에서 중요한 요소가 무엇인지 정하는 아름다움과 특징을 개선합니다. 디자인에서 시각 디자인 원칙이 어떻게 작용되는지 살펴봅니다. 색상 선택이 올바른 시각적 계층구조를 만드는 데 도움이 되나요? 다시 말해서, 강조하고자 하는 디자인 요소에 시선이 집중됩니까? 색상 선택이 디자인에서 균형과 대조를 이루나요? 색상이 디자인에서 제대로 작용하는지 확인하세요.

- 인터페이스에서 색상을 일관성있게 사용합니다. 한 화면에서 콜 투 액션에 밝은 파란색을 사용하는 경우, 모든 위치에서 동일한 색상을 사용해야 합니다 (색상 사용에서 벗어날 타당한 이유가 없는 경우). 한 화면에서 빨간색을 경고 색상으로 사용하는 경우, 다른 화면에서 빨간색을 다른 의미로 사용하면 안됩니다. 일관성은 사용자가 색상 사용을 이해하는데 있어서 중요한 요소입니다.

[applenewsapp-color-120-120.jpg]

애플 뉴스 앱은 60-30-10 규칙을 잘 사용했습니다. 흰색과 옅은 회색은 지배적인 컬러를, 파란색은 보조 컬러, 분홍색은 강조 컬러입니다. 각 색상은 대략 60-30-10 비율로 사용되었습니다. 분홍색 강조 컬러는 관심을 끌며, Play와 Try 1 Month Free, Read Story 같은 기타 중요한 링크에 지속적으로 할당되었습니다.

색상 팔레트 테스트하기

- 여러분의 디자인을 테스트하세요. 색상 팔레트를 디자인에 적용하고, 사용성 테스트를 실시합니다. 색상은 버튼, 링크나 다른 유형의 구성요소를 변경할 수 있습니다. 예를 들어, 회색 버튼은 의도하지 않은 경우에도 사용하지 않도록 표시될 수 있습니다. 대비나 색맹과 관련된 가독성 및 접근성 문제도 찾아보십시오. accessible-colors.com 에서 다양한 텍스트와 배경 조합의 접근성을 테스트하는게 좋습니다. 또한 사용성 테스트에서 일부 색상이 유지되지 않는 것으로 나타나면, 뒤로 돌아가서 팔레트를 다시 만드세요.

[ubereats_color.png]

비록 UberEats가 60-30-10 규칙을 꽤 잘 따랐지만, 녹색 로고 Eats는 오렌지색 배경에서 떨리고 읽기가 매우 어렵습니다. 읽기 쉽도록 색상 팔레트를 수정해야 하는 예제입니다.

결론

색상 팔레트 선택과 디자인 적용은 단순히 행복한 우연이 아닙니다. 사용자 인터페이스에서 색상을 최대한 활용하려면 반복적이고 신중한 적용이 필요합니다. 적절한 색상을 사용하면 브랜드 인지도를 높이고, 관심을 끌며, 상호작용을 장려하고, 사용자의 감정에 영향을 미치며, 사용성을 높일 수 있습니다.

출처: 닐슨 노먼 그룹