제목: Red, White, and Blue
원문: https://medium.springboard.com/a-designers-guide-to-selecting-colors-for-your-product-9944756838d4
모두가 알아야하는 칼라 팔렛트의 8가지 규칙
사람과 컴퓨터간의 인터렉션은 그래픽적인 UI 요소를 기반으로하며, 여기서 칼라는 중요한 역할을 한다. Pierre Bonnard가 이렇게 말했다.
칼라는 디자인에 기쁨의 퀄리티를 더해주는게 아니라 그것을 강조하는 것이다.
새로운 제품을 디자인할때 무한개 종류의 칼라 조합이 나올 수 있으므로, 칼라 스킴의 칼라를 정하는 일은 보통 어렵다. 이 글에선 올바른 칼라 팔렛트를 선택할 수 있도록 8가지 기본 규칙을 다룰 것이다.
1. 칼라의 수를 제한하기
디자인 제품에 칼라를 적용하는 것은 균형과함께 많이 해보아야한다. 많은 칼라를 사용할수록 균형을 맞추기 힘들어진다. 여러분의 칼라 스킴에 최대 3개의 주요 칼라를 담아둔다면, 더 나은 결과물이 나올 것이다. 사람들이 어떻게 Adobe Color CC를 사용하는지 연구한 Toronto대학의 연구에 따르면, 많은 사람들이 두세개의 칼라로 조합한 간단한 칼라 조합을 선호한다고 말했다.
여러분의 팔렛트에 정해놓은 것들을 너머 추가적인 칼라가 필요하게되면, 셰이드(shade)와 틴트(tint)를 이용할 수 있다.
스킴은 어떻게 만들까
그래서 이 두세가지의 칼라는 어떻게 정할까? 칼라 휠(color wheel)이 도와줄 것이다.
새로운 칼라 스킴을 만들기 쉽게, 미리 정의해둔 칼라 스킴 기준들이 있다(특히 초보자를 위한).
- Monochromatic: Monochromatic 스킴은 같은 칼라에서 나오지만, 틴트, 셰이드, 톤으로 조정하기 때문에 스킴을 만들기 가장 쉬운 기준이다. Monochromatic 칼라들은 함께 잘 어울려 부드러운 효과를 만든다.
-
Analogous: Analogous 칼라 스킴은 연관된 칼라들로부터 만들어진다. 한 칼라는 주요 칼라로 사용되고, 다른 칼라들은 스킴을 풍성하게 하는데 사용된다. 이것은 상대적으로 뽑아내기 쉽지만, 전체적인 스킴이 이것에의해 과장될 수 있으므로, 여러분이 사용하는 칼라의 vibrancy를 잘 정하는것이 요령이다. 예를들어 제스처-주도 Todo앱인 Clear는 현재 작업들의 우선순위를 시각화하기위해 강한 인상(striking)의 analogous 칼라를 사용한다. 반면 명상 앱인 Calm는 사용자에게 편안함과 평화로움을 느끼게 하기위해 blue와 green의 analogous 칼라를 사용한다.
12색 칼라 휠에 서로 인접한 세가지 칼라를 사용하여 analogous 스킴을 만들었다. 제스처기반 to-do 앱인 Clear는 현재 테스크들의 우선순위를 표현하기위해 강렬하고 눈에띄는 analogous 칼라를 사용한다
Calm은 전반적인 분위기를 만들기위해 analogous 칼라들을 사용한다
- Complementary: 그것들의 기본 양식에서 이 스킴들은 두가지 강하게 반대되는 칼라로만 이루어진다. 이 스킴은 보는이의 시선을 끄는데 사용된다. complementary 스킴을 사용할때는, 주 칼라를 정하는 것이 중요하고, 강조를 위한 보색을 사용한다. 예를들어, 인간의 눈이 다른 종류의 green으로 가득찬 물체를 보고 있을때, 약간의 red는 굉장히 눈에 띌 것이다.
- Custom: 커스텀 칼라 스킴을 만드는 것은 많이들 생각하는것 만큼 복잡하지 않다. 훌륭한 칼라 팔렛트를 만들기위해 적용시킬 수 있는 간단한 요령이 있다. 중립적인 팔렛트(전통적인 monochromatic 스킴)에 밝은 강조의 칼라를 넣으면 된다. 새로 만들어진 스킴은 시각적으로 굉장히 강한 인상이 있을 것이다.
2. 자연에서 영감을 받기
최고의 색 조합은 자연에서 온다. 왜냐? 이 스킴들이 눈에 자연스럽게 보이기 때문이다. 영감을 받기 위해, 우리는 주변만 둘러보면 된다. 여러분의 하루 삶에서 특히 아름답거나 강한 인상의 칼라를 본다면 그것으로 스킴을 만들려고 해보아라. 간단하게 아름다운 순간을 사진으로 찍고 이것으로 칼라 스킴을 만들어보자.
3. 60–30–10 규칙을 따르려 하자
이 규칙은 오랫동안 사용해온 데코레이팅 규칙이다. 이것은 칼라스킴을 함께하기 쉽게 도와준다. 60% + 30% + 10% 비율은 어떤 공간에서 사용되는 칼라의 벨런스를 말한다.
이 개념은 사용하기 아주 쉽다. 60%는 주 색조, 30%는 두번째 칼라, 10%는 강조하는 칼라로 이루어진다. 이 생각은 두번째 칼라가 메인 칼라를 지지하지만, 서로 충분히 다른 부분에 놓는다. 10%는 여러분의 강조하고자하는 칼라이다. CTA나 다른 주목하고 싶은 요소에 이 칼라를 놓을 수 있다.
4. 그레이스케일 먼저 디자인하기
칼라를 가지고 노는것은 즐겁다. 이것이 왜 새로운 제품의 작업을 할 때 칼라 스킴 고르기를 가장 먼저 하는 이유이기도 하다. 이것은 매우 칼라 스킴으로 유혹되는데, 나는 여러분이 그레이스케일 디자인을 먼저 해보도록 하기를 추천한다. 그레이스케일 그라디언트로 여러분의 앱 프로토타입을 먼저 만들고 이것을 기본선으로 사용하자. 칼라를 넣기 전에 그레이스케일로 디자인 하면 여러분을 요소들의 공간과 레이아웃에 집중시킬 수 있다.
칼라를 나중에 넣고, 그 목적으로만 작업하자.
5. 칼라 Black 사용을 피하기
현실 세계에선, 순수한 black은 거의 존재하지 않는다. 우리 주변에 있는 모든 "black" 물체는 대부분 불을 껐을때 그 색이 된다. 이 말은, 그들은 실제 black이 아니고, dark grey이다. 길은 black이 아니다. 그림자도 black이 아니다.
조심스럽게 골랐던 칼라들 옆에 순소한 black을 놓으면, black은 다른 모든것들을 압도해버린다. 이것은 자연스럽지 않기때문에, 눈에 띄게 된다. 우리가 매일 사용하는 많은 앱들은 기본으로 black을 가지지만, 이 black은 실제 black이 아니라 dark grey들이다. 예를들어 Asos 상단 바의 가장 어두운 색은 #000000가 아니라 #242424이다. 그러니 여러분의 칼라에 항상 채도를 조금 넣자.
6. 칼라 대비를 이용하여 중요성 만들기
칼라는 눈을 가이드해주는데 도움을 주는 도구이다. 어떤것을 더 두드러지게 만들고 싶으면, 칼라를 더 대비되게 할 수 있다. 일반적으로 높은 대비는 중요한 내용이나 핵심 요소에대한 좋은 선택이다. 사용자가 어떤것을 보거나 클릭하게 하고 싶으면, 눈에띄게 만들어라!
7. 사용자의 감정에 영향을주는 칼라를 사용하기
칼라가 고유의 의미를 가지고 감정을 자극할 수 있다는 사실은 이미 잘 알려진 사실이다. 이 의미는 사용자가 여러분의 제품을 지각하는데 직접적인 방법으로 영향을 줄 것이라는 의미이다.
당신이 앱/사이트를 위해 칼라 팔렛트를 선택할때는, 이것들이 어떻게 생겼는지 그냥 생각하지 말고, 이것들이 어떤식으로 느껴지는지도 생각해야한다. 당신이 고른 칼라는 여러분이 만들고자 했던 브렌드 아이덴티티와 잘 맞을수도있고 맞지 않을 수도 있다. 시작해보기위해, (서양의) 각 칼라와 기본적인 연관에대해 빠른 참조 가이드를 모아놓았다.
Red, Orange, Yellow
- Red (정렬적인, 강력한, 위험한, 중요한): Red는 극도로 자극적인 칼라이다. 속도나 힘에대한 인상을 남긴다. 에너지의 칼라로 알려져있다. 이것은 혈액순환을 증가시키고 신진대사를 촉진하는 심리적 효과가 증명되어있다. 사람들이 왜 red를 볼 때 강하고 빠른게 읽는지에대한 이유이다. red를 사용하면, 사용자의 주의를 잡거나 주의가 필요한 개별 요소에 강조할 수 있다.
- Orange (명량한, 에너지있는, 매력적인, 싼): Orange는 따뜻하고 활기찬 칼라이다. 에너지있는 아우라를 가지며, 사용자에게 따듯하고 환영하는 느낌을 만들어 줄 수 있다. 몇 연구자들은 Orange가 싸다는 느낌을 만드는 것을 발견했다.
- Yellow (쾌활한, 친근한, 자극하는, 시선을 끌고 싶어하는): Yellow는 당신이 정한 셰이드에따라 극도로 다재다능해지는 칼라이다. Light Yellow는 해와 관련 있어서 적극성이나 따뜻함과 소통한다. (gold와 같은) Dark Yellow는 고대나 시대의 인상을 준다. 이 darker 셰이드는 종종 영원이나 현명함에 관련되있다.
Green, Blue, Purple
- Green (자연의, 안전의, 신선한): Green은 환경의 의미를 반경하고 자연과 가까운 의미를 가진다. 또한 성장을 나타내고, 이것이 왜 비지니스와 연관되는지의 이유이다. Green은 옳고 그름의 의미도 나타낸다.
- Blue (고요한, 책임의, 신뢰할 수 있는, 의존하는): blue 칼라는 고요함과 편안한 감정과 관련되있다. 설득력과 신뢰도에도 관련이 되있고, 믿음과 전문가적인 이해를 준다. Blue는 내부적인 보안의 느낌을 발산한다. 이것이 은행이나 기술 회사가 blue를 사용하는 이유이다. 페이스북, 트위터, 링크드인같은 커다란 소셜 미디어는 모두 그들의 네트워크에 이 칼라를 사용한다.
- Purple (럭셔리한, 미스테리한, 로멘틱한, 숭고한): 역사적으로 왕족과 연결되있는 purple는 그 제품이 최고급이라는 느낌을 넌시시 비친다.
Pink, Black, White, Gray
- Pink (여성의, 순결의, 어린): Pink는 여성스러움과 관련되있는 것으로 알고있다.
- Black (강력한, 세련된, 미스테리의, 뚜렷한): Black은 red를 포함한 다른 칼라들보다 빨리 주의를 끈다. 텍스트나 강조에만 일반적으로 사용되는 이유이다.
- White (순수한, 건강한, 깨끗한, 순진한): White는 주변에 있는 다른 칼라들을 강조하고, 두번째 칼라로 인기있다.
- Gray (자연적인, 형식적인, 세련된, 무미건조한): Gray는 중립을 나타내고, black이나 white의 성격을 가져갈 수 있다. 주 칼라로 사용될때, 형식적인 인상을 준다.
문화나 환경에따라 칼라의 의미가 다양해질 수 있다는 것이 중요하다. 이 부분에대해 더 많이 알고 싶다면, Symbolism Of Colors And Color Meanings Around The World 글을 확인해보자.
8. 디자인 접근성을 만들기
접근성(Accessibility)는 칼라로 디자인할때 핵심 고려사항이다. 오늘날의 제품들은 (사람의 능력에 상관없이) 모두를위한 접근성이 필요하다.
지시자로 칼라 혼자 사용되는 것을 피하기
약 8%의 남자들과 0.5%의 여자들은 색맥의 어떤 형태의 영향을 받는다. 12명의 남자들중 1명, 200의 여자들중 1명이다. 여러 형태의 조건이 있지만, red와 green 색맹이 가장 일반적이다. 색맹의 형태로 겪고있는 사람은 일반적으로 red와 green의 변색들을 보기 힘들 것이다.
색맹은 (red-green, blue-yellow, moochromatic을 포함하여) 다른 형태를 받아드리므로 여러분의 제품에서 중요한 상태를 소통하기위해 여러 시각적 힌트를 사용하는 것이 중요하다. 칼라를 추가하고, 선, 지시자, 패턴, 텍스쳐, 엑션과 내용을 설명하는 틱스트등을 사용하자.
텍스트에 낮은 대조는 피하라
칼라 대조는 디자인의 사용성에대해 칼라 이론이 중요하게 생각하는 한 분야이다. 텍스트에 칼라를 사용하고 있으면, 두 칼라가 서로 낮은 값 대비(low value contrast)로 옆에 놓이면 여러분의 카피는 굉장히 읽기 힘들어진다는 것을 알고 있어야한다.
백그라운드와 포그라운드의 칼라가 색맹의 사람들과 시력이 낮은 사람들에게 충분히 대조되는지 검증하자. 그렇게 어려운 일이 아니다. 명암비(contrast ratio)를 확인하면 끝이다.
명암비는 한 칼라가 또다른 칼라와 얼마나 다른지 표현한다(일반적으로 1:1 혹은 21:1 이런식으로 쓴다). 비율에서 두 숫자의 차가 높을수록 두 칼라 사이에 상대적 휘도(luminance) 차이가 크다는 것이다. W3C는 바디 텍스트와 이미지 텍스트에대해 아래
명암비를 추천한다.
- 작은 텍스트는 백그라운드에대해 적어도 4.5:1의 명암비를 가져야한다.
- 큰 텍스트(14pt 볼드/18pt 기본 보다 큰)는 백그라운드에대해 적어도 3:1의 명암비를 가져져야한다.
보너스: UX 디자이너를 위한 필수 도구들
쉽게 일하기 위해 칼라 팔렛트를 고르는데 최고의 도구들을 알려주겠다.
Adobe Color CC(이전에는 Kuler로 알려졌다)는 칼라 스킴을 찾고, 수정하고, 만드는데 훌륭한 도구이다. 팔렛트에 있는 모든 칼라는 몇번의 클릭으로 개별적으로 수정하거나, 기본 칼라로 정할 수 있다. 팔렛트를 저장하고 라이브러리에 넣을 수도 있고, 이 사이트의 커뮤니티에서 만든 여러 훌륭한 칼라 스킴들이 있다.
다른 디자이너가 사용한 특정 칼라에대해 비주얼 조사를 하고 싶으면, dribbble.com/colors로 가서 필요한 칼라를 선택하자.
메트리얼 디자인 가이드라인은 일러스트레이션에 사용되거나 브랜드 칼라를 개발하는데 사용될 수 있는 굉장한 칼라 팔렛트를 제공한다. 이 팔렛트의 모든 칼라들은 서로 조화롭게 동작한다.
Colorzilla는 구글 크롬과 모질라 파이어폭스에서 가능한 익스텐셔이다. 여기에는 color picker, eye-dropper, CSS gradient generator, palette browser을 포함하여 칼라 관련 것들을 담고있다.
Coolors는 다중칼라의 스킴을 만드는데 강력한 도구이다. 선택된 칼라를 잠그고, 새로운 팔렛트를 생성하기위해 스페이스바를 누르면 된다. 이 도구의 멋진 점은 한 결과만 나오도록 제한하지 않았다는 점이다. 참조 포인트를 수정ㅎ여 간단하게 몇개의 칼라 스킴을 얻어낼 수가 있다.
내가 칼라 스킴을 만드는 개인적인 방법으로는 사진을 이용하는 것이다. 이 도구는 이미지를 업로드하여 그것으로부터 칼라 팔렛트를 만들어준다.
Color Blindness Simulation in Adobe Photoshop
포토샵으로 당신의 디자인의 접근성 테스트를 할 수 있다. 그냥 View > Proof Setup으로 가서, 적녹색맹과 제2색맹(Protanopia-type이나 Deuteranopia-type), 두 타입중에 선택할 수 있다.
디자인의 접근성 이슈를 막기위해, 디자인하는동안 스스로 색맹의 경험을 해보는 것도 좋은 방법이다. NoCoffee Vision Simulator는 어느 페이지에서도 칼라-시력 결핍이나 낮은-시력 조건으로 시뮬레이팅할 수 있게 해준다. 예를들어 "Color Deficiency"를 사용하여 "Deuteranopia"를 설정하면 웹페이지가 흑백으로 보인다. 이것이 시각적인 저하의 사용자에게 당신의 디자인 접근성을 만드는데 도움을 줄 것이다.
칼라는 디자이너의 툴킷 중에 가장 강력한 도구 중 하나이다. 그러나 동시에 통달하기에 까다로운 도구이기도 하다. 위에서 말한 규칙들이 새로운 디자이너들에게 좋은 토대가 되길 바란다. 이제 실전으로 가볼 시간이다. 칼라 스킴에서 훌륭해지는 최고의 방법은 실제로 만들어 보는 것이기 때문이다.
이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은
- 블로그 댓글
- 페이스북 페이지(@나는한다번역)
- 이메일(canapio.developer@gmail.com)
- 트위터(@canapio)
으로 보내주시면 됩니다.
'그 외 > 디자인' 카테고리의 다른 글
| [번역]우리가 WeWork 인터뷰에서 사용하고 있는 제품 디자인 예제들 (374) | 2017.08.15 |
|---|---|
| [번역]그래, 리디자인(Part1) (0) | 2017.06.17 |
| [번역]데이터와 함께 단어 설계하기 (0) | 2017.05.28 |
| [번역]UI 애니메이션: 역할을 이용하기 (0) | 2017.05.14 |
| [번역]UI 디자인에서 어떻게 색을 사용할까 (0) | 2017.05.14 |
WRITTEN BY
- tucan.dev
개인 iOS 개발, tucan9389
,
