flutter & dart - [Design] 중요한 디자인 구성요소에는 중요한 컬러를 적용

https://www.designer-note.com/design-color-role/

[Design] 중요한 디자인 구성요소에는 중요한 컬러를 적용 – 비전공자를 위한 디자인 노트

https://www.designer-note.com/category/design/

Design – 비전공자를 위한 디자인 노트

 

차례

1. 색의 역할과 중요한 색
   1) 주제색(Primary Color)
   2) 강조색(Accent Color)
   3) 배경색(BG Color)
   4) 보조색(Sub Color)
2. 컬러 계획(Color Scheme)

---

1. 색의 역할과 중요한 색

디자인에 적용된 색에는 각자 맡은 역할이 있습니다. 중요한 역할을 하는 색과 보조 역할을 하는 색 등으로 이루어지는 데 중요한 역할을 하는 색이 바로 중요한 컬러이겠죠!

색의 역할별로 다음과 같이 나누어 보도록 하겠습니다.

• 주제색(Primary Color): 주인공 역할을 하는 색 = 브랜드 컬러(Brand Color)
• 강조색(Accent Color): 강조하는 역할을 하는 색
• 배경색(BG Color): 바탕, 백그라운드(BG, Background)에 사용한 색
• 보조색(Sub Color): 보조적인 역할을 하는 색

중요한 역할을 하는 디자인 요소에 적용되는 컬러가 중요한 색이고, 주제색과 강조색이 그 역할을 맡습니다. 배경색과 보조색은 중요한 색상을 보조하는 역할이라고 생각하면 됩니다.

다양한 디자인 분야별로 컬러에 관련된 용어가 조금은 다르게 사용되고 있다는 점 참고하기 바랍니다.

---

1) 주제색(Primary Color)

출처: Logopedia

페이스북(facebook)과 네이버(NAVER)를 생각하면 어떤 색이 떠오르세요? 페이스북은 파란색, 네이버는 초록색이 연상될 것입니다. 모두 회사의 로고에 사용된 색입니다.

그러면 페이스북 로고에서는 파란색, 네이버 로고에서는 초록색이 중요한 색일 것입니다. 로고에는 회사의 브랜드를 대표하는 컬러가 사용되고, 다양한 관련 디자인에 이 중요한 색이 적용됩니다.

이러한 회사 브랜드의 대표가 되는 중요한 색을 브랜드 컬러(Brand Color)라고 합니다. 브랜드 컬러는 관련 디자인에서 메인 컬러(Main Color), 주요색인 주제색으로 적용되는 경우가 많습니다.

컬러의 역할에서는 주제가 되는 중요한 역할을 하므로 “주제색“이라 명칭하고, 구글에서 제공하는 디자인 시스템인 “머티어리얼 디자인(Material Design)”의 컬러 시스템(Color System)을 참고하여 “프라이머리 컬러(Primary Color)“라는 단어를 사용하도록 하겠습니다.

• 주제색(Primary Color)
  – 브랜드 컬러(Brand Color)
  – 메인 컬러(Main Color), 키 컬러(Key Color)
  – 주요색, 기본색

디자인 작품에서 주제색을 분석하는 경우, 해당 브랜드 컬러를 찾아보고 참고하여 분석하는 것이 한 방법입니다.

---

2) 강조색(Accent Color)

 

출처: facebook, Naver 앱 캡처

위의 이미지는 페이스북과 네이버 앱의 홈 스크린을 캡처한 화면입니다. 홈 스크린의 디자인을 보면 각 회사의 브랜드 컬러, 즉 주제색인 파란색과 초록색이 앱 디자인에도 적용된 것을 볼 수 있습니다.

출처: facebook, Naver 앱 캡처

그리고 두 개의 앱 모두 알림(Notification)을 나타내는데 공통으로 빨간색 원이 사용되고 그 안에 숫자가 표시됩니다. 이처럼 사용자에게 알림이 왔다는 사실을 강조하는 디자인으로 빨간색이 강조색(Accent Color)로 사용된 예입니다.

강조색(Accent Color)은 디자인에서 중요한 정보를 강조하는 색으로 사용됩니다.

 

출처: facebook, Naver 앱 캡처

또한, 강조색으로 주제색(브랜드 컬러)도 사용될 수 있습니다. 위의 두 앱을 보면 각 회사의 브랜드 컬러, 즉 주제색이 중요한 디자인 요소에 적용되었습니다. 페이스북의 경우 하단의 선택된 아이콘과 네이버의 경우 입력창에 적용된 주제색을 확인할 수 있습니다.

이전 ‘비전공자를 위한 디자인 TIP! 01. 컬러와 폰트는 1~2개만 사용하자!‘에서 제목과 키워드에 주제색 한 가지만 적용해도 충분히 좋은 디자인 작업이 될 수 있다고 소개한 이유가 주제색이 강조색으로 사용되는 경우가 많기 때문입니다.

---

3) 배경색(BG Color)

출처: facebook, Naver 앱 캡처

페이스북의 과 네이버 앱의 다른 스크린 디자인을 보면 홈 스크린과 마찬가지로 배경에 흰색이 주로 사용된 것을 알 수 있습니다.

배경색(BG Color)은 디자인의 배경, 즉 백그라운드(Background)에 사용되는 색입니다. 바탕색이라고도 합니다.

• 배경색(BG Color)
  – 백그라운드 컬러(Background Color)
  – 바탕색

출처: KakaoTalk 앱 캡처

배경색이 보조적인 역할을 하는 컬러이지만 디자인 콘셉트에 맞춰 주제색(브랜드 컬러)이 사용되는 예도 있습니다.

---

4) 보조색(Sub Color)

보조색(Sub Color)은 주제색, 강조색, 배경색 이외에 사용된 컬러로 배경색과 함께 보조적인 역할을 합니다.

• 보조색(Sub Color)
  – Assort Color, Complementary Color

---

2. 컬러 계획(Color Scheme)

디자이너는 컬러 계획을 세우고 디자인 요소에 맞는 컬러를 적용하며 디자인 작업을 진행합니다. 위의 페이스북과 네이버 앱도 브랜드 컬러를 주제색(Primary Color)으로 설정하고 앱디자인에 적용한 사례입니다.

네이버 앱 디자인에서 컬러의 역할을 분석해보면, 위와 같이 주제색, 강조색, 배경색, 보조색이 적용된 것을 알 수 있습니다.

중요한 앱디자인 구성요소인 입력창과 주요 버튼에 브랜드 컬러를 주제색을 활용하였고, 또한 중요한 정보를 알리는 알람(Notification)에는 강조색을 적용했습니다. 배경색은 전반적으로 흰색, 보조색에는 검은색 위주로 사용하면서 그 외의 컬러로 구성하였습니다.

글의 주제를 함축하고 있는 중요한 제목에는 주제색인 파란색을 사용하고, 중요한 키워드에는 강조색인 빨간색을 적용한 예입니다. 배경색은 흰색이고, 텍스트 컬러인 검은색이 보조색입니다.

이와 같이 디자인 구성요소에 컬러를 적용하기 위해 컬러의 역할을 정하는 것이 컬러 계획(Color Scheme)입니다.

이러한 컬러 계획을 통해 중요한 디자인 요소에 중요한 컬러(주제색, 강조색)를 사용하고, 이외의 색들도 일관되고 통일성 있게 적용하는 것이 좋은 디자인을 하는 방법입니다.