UI 디자인에서 색상을 사용하는 방법
UX 디자인 배우기 #126
Today UX 아티클
How to use colors in UI Design를 번역한 글입니다.
컬러는 다른 것과 마찬가지로, 적당히 사용할 때 가장 좋습니다. 컬러 스킴에서 최대 3개의 주요 컬러를 고수하려고 할 때 더 나은 결과를 얻게 되는 경우가 많습니다. 디자인 프로젝트에 컬러를 적용하는 일은 균형 잡기와 매우 관련이 있는데, 더 많은 색상을 사용할수록, 균형을 잡는 일은 더 복잡해집니다.
컬러는 디자인에 유쾌한 느낌을 더 해주는 것이 아닙니다. 컬러는 디자인을 보강해줍니다. - Pierre Bonnard -
팔레트에 정해둔 색상 외에 추가적인 색상이 필요하다면, 음영과 색조를 활용해보세요. 분명 다른 분위기를 연출해줄 것입니다.
60-30-10 룰
60 대 30 대 10이라는 인테리어 룰은 세월이 흘러도 변치 않는 데코레이션 테크닉으로, 컬러 스킴을 쉽게 조합하는 데 도움을 줍니다. 60% + 30% + 10% 비율은 컬러에 균형을 준다고 합니다. 이 공식대로 하면 균형감을 만들고 눈이 핵심 포인트에서 그다음으로 편안하게 움직일 수 있게 해주기 때문이죠. 또한 사용하기도 굉장히 쉽습니다.
60%는 주요 색상, 30%는 보조 색상, 10%는 강조 색상에 사용합니다.
벽 페인트, 가구, 악세서리의 컬러 비율컬러의 의미
과학자들은 특정 컬러가 가지는 심리적 효과에 대해 수십 년간 연구해왔습니다. 컬러는 심미성 외에도 감정을 일으키고 연상작용을 일으킵니다. 컬러의 의미는 문화와 상황에 따라 다양할 수 있습니다. 때문에 우리는 블랙&화이트를 사용한 패션 매장은 우아함과 장엄함을 보여주려고 한다는 것을 알 수 있습니다.
Asos의 깔끔한 블랙&화이트 디자인과 녹색 CTA. 이렇게 만든 데는 이유가 있습니다.l 빨간색: 열정, 사랑, 위험
l 파란색: 차분함, 책임감 있는, 안전
l 검은색: 미스터리, 우아함, 사악함
l 흰색: 순수함, 조용함, 깔끔함
l 녹색: 새로움, 신선함, 자연
더 긴 리스트를 보고 싶으시다면, 여기(color culture)를 클릭해보세요.
https://seopressor.com/wp-content/uploads/2015/06/colour-culture1.png
그레이 스케일부터 써보기
디자인 초반에는 컬러나 톤을 많이 쓰고 싶어 하지만, 주요 컬러를 조정하는 데만 3시간을 보내고 나면 그런 행동이 어리석었음을 깨닫게 될 겁니다. 여러 컬러를 쓰고 싶은 유혹이 많이 들겠지만, 그런 태도는 지양하도록 해야 합니다.
그 대신 요소의 간격과 배치에 집중해야 합니다. 그러면 훨씬 더 많은 시간이 절약될 것입니다. 이러한 제약을 두는 것은 생산성을 매우 높여줍니다. 그렇다고 꼭 밋밋해 보이게 되는 것은 아닙니다. 멋져 보이게 만들고 싶다면 다양한 톤을 활용해보면 됩니다.
컬러는 간단하게 단색으로 맞추고 다른 요소에 집중했습니다.완전한 그레이 스케일과 검은색은 피한다
제가 지금까지 배운 가장 중요한 컬러 사용 요령 중 하나는 채도 없이 그레이 스케일을 이용하는 것입니다. 실생활에서 완전한 회색은 거의 존재하지 않습니다. 검정도 마찬가지입니다.
이 이미지에서 가장 어두운 색은 #000가 아니라 #0A0A10입니다.언제나 약간의 채도를 넣는 것을 기억하세요. 유저의 잠재의식 속에서는 그것이 훨씬 더 자연스럽고 익숙할 것입니다.
자연을 따라간다
최적의 컬러 조합은 자연에서 나옵니다. 이런 컬러 조합은 언제나 자연스럽습니다. 디자인 솔루션을 환경에서 찾는 것의 가장 좋은 점은 팔레트가 언제나 바뀐다는 것입니다.
영감을 받고 싶다면 주변을 둘러보면 된다대비 효과를 준다
어떤 컬러는 서로 잘 어울리기도 하지만, 어떤 컬러는 서로 충돌하기도 합니다. 컬러가 서로 어떻게 상호작용하는지를 가장 잘 살펴볼 수 있는 도구는 바로 컬러 휠입니다. 알고 있어야 하는 방법이지만, 매뉴얼대로 따라 할 필요는 없습니다.
컬러 이론에 대해 더 알고 싶다면 다음 글을 읽어보세요. Color Theory For Designers: Creating Your Own Color Palettes
영감 얻기
UI 레퍼런스에 대해 얘기하자면, Dribble이 가장 좋은 공간입니다. 컬러로 검색하는 기능도 있어서 특정 컬러를 다른 디자이너는 어떻게 사용했는지 시각적인 리서치를 해보고 싶다면, dribbble.com/colors에 들어가 보세요.
비디오, 인쇄물 디자인, 인테리어 디자인, 패션 디자인 등등 영감을 얻을 수 있는 것이 아주 많습니다. 다만, 아무 생각 없이 좋아 보이는 플레이트를 무작정 수집하기만 하면 안 됩니다.
저는 보통 KPOP에서 컬러를 훔쳐오는 것을 좋아합니다. 아주 훌륭합니다. 아래 사례를 보십시오.
툴
도움을 드리기 위해 2017년 현재 사용할 수 있는 컬러 팔레트 선택 툴을 소개하고자 합니다. 시간을 많이 절약해 줄 것입니다.
Coolors.co
제가 컬러를 고를 때 가장 자주 활용하는 툴입니다. 특정 컬러를 선택한 다음에 버튼을 누르면 팔레트가 자동으로 만들어집니다. Coolors는 이미지를 올려서 거기서 팔레트를 추출할 수 있게도 해줍니다. 특히 하나의 조합만 보여주는 것이 아니라 제가 레퍼런스 포인트를 직접 선택할 수 있다는 점이 아주 좋습니다.
Kuler
이 툴은 어도비에서 만둔 툴로, 역사가 오래되었습니다. 브라우저 내에서도 사용할 수 있고 데스크톱 버전도 있습니다. 데스크톱 버전을 사용하면 이 컬러스킴을 포토샵으로 불러올 수도 있습니다.
Paletton
Kuler과 비슷한데 5가지 톤으로 제한되지 않는다는 점에서 차이가 있습니다. 주요 컬러가 정해진 상태에서 다른 컬러를 조합해보고 싶을 때 좋은 툴입니다.
Designspiration.net
컬러 팔레트에 대한 아이디어는 가지고 있는데 어떻게 그 조합이 사용되었는지 사례를 찾고 싶다면, Designispiration를 활용하시면 됩니다. 최대 5가지 컬러를 고른 후에 그와 매치되는 이미지를 검색해볼 수 있습니다. 특정 팔레트를 사용한 이미지를 찾는 데 유용할 뿐만 아니라 실제 디자인 사례를 볼 수 있어 유용합니다.
Shutterstock Lab Spectrum
특정 컬러로 이미지를 검색하고 싶으면 어떻게 하냐고 물어보실 수도 있을 것 같습니다. 그럼, Shutterstock에서 만든 Spectrum이라는 툴이 있습니다. 특정톤으로 사진을 검색해볼 수 있는 툴이죠.
워터마크가 들어간 작은 프리뷰 이미지로 충분히 팔레트를 만들 수 있기 때문에 프로그램을 구독할 필요도 없습니다.
Tineye Multicolr
사진에 들어간 컬러 조합을 검색하면서 그 비율도 조정해 보고 싶다면, Tineye가 도움이 될 것입니다. 이 웹사이트는 Flickr에서 가져온 저작권 허용 이미지 1천만 개를 데이터베이스로 활용하고 있습니다.
결론
컬러는 마스터하기 어려운 개념입니다. 특히 이런 디지털 시대에는 더욱 그렇습니다. 위에서 언급한 팁들은 적절한 컬러 조합을 찾는 데 도움이 될 것입니다. 멋진 컬러 스킴을 만드는 가장 좋은 방법은 자기가 직접 컬러를 가지고 다양한 조합을 만들어보면서 연습하는 것입니다.
감사합니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
