칼라는 디자인에 기쁨의 퀄리티를 더해주는게 아니라 그것을 강조하는 것이다.
이 12가지 칼라 휠은 칼라 스킴을 만드는데 중요한 도구이다
- Monochromatic: Monochromatic 스킴은 같은 칼라에서 나오지만, 틴트, 셰이드, 톤으로 조정하기 때문에 스킴을 만들기 가장 쉬운 기준이다. Monochromatic 칼라들은 함께 잘 어울려 부드러운 효과를 만든다.
Monochromatic 스킴은 눈에 굉장히 들어오기 쉽다(특히 blue나 green hues). 페이스북 예시에서도 볼 수 있듯, 이 스킴은 깔끔하고 우아해 보인다
-
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 스킴)에 밝은 강조의 칼라를 넣으면 된다. 새로 만들어진 스킴은 시각적으로 굉장히 강한 인상이 있을 것이다.
회색톤의 디자인에 한 칼라를 넣으면 간단하고 효과적으로 눈을 끈다. 드롭박스의 칼라 스킴에서, white와 grey의 조합으로 만든 레이아웃은 blue로 강조되어 튀어보인다
최고의 칼라 조합은 자연에서 온다. 사진 한장에서 칼라 스킴을 만들 수 있다
60%는 주 색조, 30%는 두번째 칼라, 10%는 강조하는 칼라로 이루어진다. 이 기술은 눈을 하나의 초점에서 다른 곳으로 편안하게 이동시킬 수 있게 한다
그레이스케일 레이아웃에 한 칼라를 넣으면 간단하고 효과적으로 이목을 끈다
이 개의 칼라는 dark grey이지 black이 아니다
ASOS에서 가장 어두운 칼라는 black이 아니다
대비는 화면의 남은 부분에비해 다른 영역으로 보이게 만든다. 어떤것을 더 두드러지게 만들고 싶으면, 칼라를 더 대비되게 할 수 있다
- Red (정렬적인, 강력한, 위험한, 중요한): Red는 극도로 자극적인 칼라이다. 속도나 힘에대한 인상을 남긴다. 에너지의 칼라로 알려져있다. 이것은 혈액순환을 증가시키고 신진대사를 촉진하는 심리적 효과가 증명되어있다. 사람들이 왜 red를 볼 때 강하고 빠른게 읽는지에대한 이유이다. red를 사용하면, 사용자의 주의를 잡거나 주의가 필요한 개별 요소에 강조할 수 있다.
- Orange (명량한, 에너지있는, 매력적인, 싼): Orange는 따뜻하고 활기찬 칼라이다. 에너지있는 아우라를 가지며, 사용자에게 따듯하고 환영하는 느낌을 만들어 줄 수 있다. 몇 연구자들은 Orange가 싸다는 느낌을 만드는 것을 발견했다.
- Yellow (쾌활한, 친근한, 자극하는, 시선을 끌고 싶어하는): Yellow는 당신이 정한 셰이드에따라 극도로 다재다능해지는 칼라이다. Light Yellow는 해와 관련 있어서 적극성이나 따뜻함과 소통한다. (gold와 같은) Dark Yellow는 고대나 시대의 인상을 준다. 이 darker 셰이드는 종종 영원이나 현명함에 관련되있다.
- Green (자연의, 안전의, 신선한): Green은 환경의 의미를 반경하고 자연과 가까운 의미를 가진다. 또한 성장을 나타내고, 이것이 왜 비지니스와 연관되는지의 이유이다. Green은 옳고 그름의 의미도 나타낸다.
- Blue (고요한, 책임의, 신뢰할 수 있는, 의존하는): blue 칼라는 고요함과 편안한 감정과 관련되있다. 설득력과 신뢰도에도 관련이 되있고, 믿음과 전문가적인 이해를 준다. Blue는 내부적인 보안의 느낌을 발산한다. 이것이 은행이나 기술 회사가 blue를 사용하는 이유이다. 페이스북, 트위터, 링크드인같은 커다란 소셜 미디어는 모두 그들의 네트워크에 이 칼라를 사용한다.
- Purple (럭셔리한, 미스테리한, 로멘틱한, 숭고한): 역사적으로 왕족과 연결되있는 purple는 그 제품이 최고급이라는 느낌을 넌시시 비친다.
- Pink (여성의, 순결의, 어린): Pink는 여성스러움과 관련되있는 것으로 알고있다.
- Black (강력한, 세련된, 미스테리의, 뚜렷한): Black은 red를 포함한 다른 칼라들보다 빨리 주의를 끈다. 텍스트나 강조에만 일반적으로 사용되는 이유이다.
- White (순수한, 건강한, 깨끗한, 순진한): White는 주변에 있는 다른 칼라들을 강조하고, 두번째 칼라로 인기있다.
- Gray (자연적인, 형식적인, 세련된, 무미건조한): Gray는 중립을 나타내고, black이나 white의 성격을 가져갈 수 있다. 주 칼라로 사용될때, 형식적인 인상을 준다.
정산적인 시각으로 보이는 칼라와 red-green 칼라 결핍으로 보이는 동일한 칼라(제2색맹과 적녹색맹)
red 문자를 보지 못하는 사람들에게 극도로 답답한 경험을 줄 수 있으므로, red나 green 칼라만 사용한 정보전달은 피하라
낮은 대비의 텍스트는 잠재적으로 많은 앱들의 사용성을 망가뜨릴 수 있다
- 작은 텍스트는 백그라운드에대해 적어도 4.5:1의 명암비를 가져야한다.
- 큰 텍스트(14pt 볼드/18pt 기본 보다 큰)는 백그라운드에대해 적어도 3:1의 명암비를 가져져야한다.
Webaim 칼라 대조 체커
Adobe Color CC는 다양한 칼라 스킴 선택을 빠르게 탐험해볼 수 있는 멋진 도구이다
shot에 포함된 칼라의 최소 퍼센트를 지정할 수도 있다(이 shot은 30% blue이다)
shot에 포함된 칼라의 최소 퍼센트를 지정하기
Coolors는 이미지를 업로드하여 그것으로부터 칼라 팔렛트를 만들어준다
이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은
- 블로그 댓글
- 페이스북 페이지(@나는한다번역)
- 이메일(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