[번역]UI 디자인에서 어떻게 색을 사용할까

제목: How to use colors in UI Design

원문: https://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753

실질적인 팁과 도구들

색은 모든것과같고(Color is like everything else), 알맞게 사용하는 것이 최고이다. 여러분의 칼라 스킴에서 색을 최대 세가지로 제한하면 더 나은 결과물을 낼 수 있을 것이다. 디자인 프로젝트에 칼라를 적용시키는것은 균형을 맞추는 수많은 작업을 가지며, 더 많은 칼라를 사용할수록 그 균형을 맞추기 더 복잡해진다.

칼라는 디자인에 좋은 품질을 더하지 않는다-더 강력하게 만든다.

Pierre Bonnard

여러분 팔랫트에 정의해놓은 것에서 색을 추가해야 한다면, 쉐이드와 틴트를 사용하자. 이것은 다른 톤으로 작업할 수 있게 해준다.

60-30-10 규칙

이 인테리어 디자인 규칙은 시대에 상관없이 칼라 스킴을 쉽게 서로 놓게해주는 데코레이팅 기술이다. 60% + 30% + 10% 균형은 칼라에 균형을 맞춰준다. 이 공식은 균형에대한 이해를 만들어주고 집중하는 지점에서 다음까지 눈을 편안하게 이동할 수 있게 해주기때문에 잘 먹힌다. 또한 사용하기에도 매우 간단하다.

60%는 주요 색상(dominant hue)이고, 30%는 두번째 칼라, 그리고 10%는 강조하고싶은 칼라이다.

칼라의 의미

과학자들은 몇세기동안 특정 칼라에대한 심리적 영향을 연구해왔다. 미학 외에도 칼라는 감정(emotions)과 연상(associations)의 창조자다. 칼라의 의미는 문화와 환경에따라 다양하다. 이것이 왜 흑&백 패션 매장을 보는지의 이유이다. 그들은 우아하고 숭고해보이고 싶다.

• 빨강색: 열정의, 사랑의, 위험한
• 파랑색: 고요한, 책임감있는, 안전한
• 검정색: 미스터리한, 우아한, 악의
• 하얀색: 순수한, 고요한, 깨끗한
• 초록색: 새로운, 신선한, 자연의

더 많은 리스트를 보고싶으면 color culture를 확인해보자.

먼저 그레이스케일부터

디자인에서 처음부터 칼라와 톤으로 작업하고싶어하지만, 이런 행동은 당신이 주요 칼라를 조정한다고 3시간을 쓰고있다는 것을 알아차렸을때 당신은 배신해버릴것이다... 매우 매혹적이긴하나 이런 태도를 피하는 법부터 배워야한다.

대신에 공간을 정하고 요소들의 레이아웃을 잡도록 해야한다. 이렇게하면 여러분의 많은 시간을 단축시킬 것이다. 몇 제약은 매우 생산적이다. 필립(flips)은 지루하지 않게 보여야한다. 좋게 보이려면 다른 톤을 시도해보자.

순수한 그레이스케일과 점정으로부터 떠나기

내가 배웠던 가장 중요한 칼라 기법중 하나는 채도없는 그레이 칼라 사용을 피하는 것이다. 실제 세상에서 순수한 그레이 칼라는 거의 존재하지 않는다. 검정도 마찬가지이다.

여러분의 색에 조금이라도 채도를 항상 넣자. 잠재적으로 사용자에게 더 자연스럽고 친근하게 보일 것이다.

---

자연을 믿자

최고의 칼라 조합은 자연에서보터 나온다. 그들은 항상 자연스러워보인다. 디자인 솔루션을 위한 환경을 찾는 가장 좋은 방법은 항상 팔레트가 바뀐다는 점이다.

영감을 얻기 위해서는 단지 주변을 둘러보면 된다

대비를 기억하자

몇 칼라들은 서로 잘 맞지만, 다른 것들은 그렇지 않을 수 있다. 칼라 휠에서 가장 잘 관찰되는 인터렉트가 무엇인지에대한 명확한 규칙들이 있다. 이 방법을 알고 있어야하지만 손수 할 필요는 없다.

여러분이 칼라 이론에대해 더 배우고 싶다면 이 글을 확인해보자-Color Theory For Designers: Creating Your Own Color Palettes

영감을 얻자

UI 참조에대해 이야기할때는 dribbble이 최고이다. 칼라로 검색하는 도구도 가지고 있어서, 다른 디자이너들이 사용한 특정 칼라에대한 시각적 조사를 하고싶으면 여기로 가보자 dribbble.com/colors

비디오, 출력 디자인, 인테리어 디자인, 패션... 그 많은것이 한곳에 모여있다. 이 팔랫트에서만 있지말고 관심있는 모든것을 저장하자.

  

종종 나는 KPOP 비디오클립에서 칼라를 따내기도한다. 이것들은 매우 훌륭하다.

도구들

쉽게 작업하기위해, 2017년에 사용할 수 있는 칼라 파랫트의 최고의 툴들을 묶어보았다. 이것들은 여러분의 시간을 많이 단축시켜 줄것이다.

Coolors.co

칼라를 선택하는데 명백하게 내가 제일 좋아하는 툴이다. 선택된 칼라에 락을 걸어놓고 공간을 누르면 팔랫트를 만들어준다. 또한 Coolors는 이미지를 업로드하여 그 이미지로부터 칼라 팔랫트를 만드는 기능도 제공한다. 이렇게 멋진 기능은 한 결과물에대해서만 제한이 없지만 대신에 참조 포인트를 수정할 수 있게 해주는 picker를 가진다.

Kuler

이 툴은 어도비에서 나온 툴이며, 긴 시간동안 우리 곁에있었다. 브라우저에서 데스크탑 버전으로 사용할 수 있다. 데스크탑 버전을 사용하고 있다면 포토샵에 칼라 스킴을 내보낼 수 있다.

Paletton

Kuler와 비슷하지만 다섯개의 톤으로 제한되지 않는다는 점이 다르다. 톤을 추가해가면서 주요 칼라가 필요할때 좋은 툴이다.

Designspiration.net

칼라 팔랫트에대한 아이디어는 있지만 그것을 섞은 예시자료가 필요하다고 생각해봐라. Designispiration는 이런 당신을 위한 좋은 도구이다. 5개의 칼라를 골라서 여러분의 쿼리에 맞는 이미지를 검색할 수 있다. 특정 팔랫트로 이미지를 찾을 수 있을 뿐 아니라 디자인에서 실제로 구현된 것이다.

Shutterstock Lab Spectrum

내가 고른 칼라로 사진을 찾고 싶으면 어떨까? 흠, Shutterstock는 특정 톤으로 사진을 찾는 Spectrum이라는 도구를 가지고있다. 검색에 뭔가 쳐넣을 필요가 없는데, 물방울표시로 작은 미리보기 이미지가 팔랫트를 생성해줄 것이기 때문이다.

Tineye Multicolr

그러나 사진에 있는 여러 칼라를 찾고 싶고, 각각의 양을 고르고 싶으면 Tineye가 도와줄 것이다. 이 웹사이트는 Flickr로부터 1000만개의 창의적인 일반 이미지를 데이터베이스에 쓰고 있다.

<동영상, viemo>

마지막의 생각들

칼라는 마스터하기에 힘든 개념이고, 특히 디지털 영역에서는 더 그렇다. 위에서 말한 팁들은 올바른 칼라를 선택하는 일에 도움이 될 것이다. 멋진 색채 스킴를 만드는 법을 배우는 가장 좋은 방법은 여러분 자신을 위해 열심히 연습하고 색을 가지고 노는 것이다.

---

이 블로그는 공부하고 공유하는 목적으로 운영되고 있습니다. 번역글에대한 피드백은 언제나 환영이며, 좋은글 추천도 함께 받고 있습니다. 피드백은 

• 블로그 댓글 
• 페이스북 페이지(@나는한다번역) 
• 이메일(canapio.developer@gmail.com) 
• 트위터(@canapio) 

으로 보내주시면 됩니다.