[번역] UI디자인에서 컬러를 사용하는 방법
실질적인 팁과 도구들
이번에는 UI의 첫인상을 결정하는 '컬러'에 대한 아티클을 가져왔습니다. 컬러는 서비스의 정체성과 연결되기 때문에 굉장히 중요한 결정이고 그만큼 많은 고민이 따르는데요, 이 글이 여러분의 고민을 조금이나마 덜어주길 기대해봅니다. 그리고 읽어보면 아시겠지만, 글을 쓰신 디자이너분이 한국 KPOP 뮤직비디오의 색감을 칭찬해주셨습니다. 그 부분이 반갑고 자랑스럽게 느껴져 더욱이 이 글을 번역하게 되었습니다 :)
UI디자인에서
컬러를 사용하는 방법
실질적인 팁과 도구들
[원문]How to use colors in UI Design
컬러는 모든 것을 의미하며 조화롭게 사용하는 것이 좋습니다. 여러분은 색상표에서 최대 3가지 메인컬러만 고정으로 사용한다면 더 나은 결과를 얻을 수 있습니다. 디자인 프로젝트에서 컬러를 적용하는 것은 균형과 많은 관련이 있고, 더 많은 컬러를 사용할수록 조화를 이루는 것은 더 복잡해집니다.
Color does not add a pleasant quality to design - it reinforces it.
- Pierre Bonnard
컬러는 디자인에 쾌적한 품질을 더하는게 아니라, 디자인을 강화시킨다.
- 피에르 보나르
만약 이미 정의한 컬러파레트에 컬러를 추가해야한다면, 음영과 색조를 사용하면 됩니다. 그 둘을 함께 활용하면 새로운 톤을 만들 수 있습니다.
60–30–10 규칙
이 인테리어 디자인 규칙은 당신이 색상표를 쉽게 구성할 수 있도록 도와주는 전통적인 장식기법입니다. 60% + 30% + 10% 비율은 컬러의 균형을 의미합니다. 이러한 공식은 균형감각을 길러주고 눈이 하나의 초점에서 다음 초점으로 편하게 넘어갈 수 있도록 해줍니다. 그리고 활용하기에도 굉장히 간단합니다.
60%는 주요 컬러, 30%는 보조 컬러, 그리고 10%는 강조 컬러입니다.
벽페인트, 가구들, 장식들컬러의 의미
과학자들은 수세기 동안 컬러의 생리학적 효과에 대해 연구해왔습니다. 미학연구에 따르면 컬러는 감정과 연상을 만들어냅니다. 컬러의 의미는 문화와 환경에 따라 달라지는데 그것이 의류매장에서 블랙&화이트 패션을 보게되는 이유입니다. 사람들은 우아하고 고상하게 보이길 원하기 때문입니다.
Asos는 순수한 블랙&화이트 컬러와 초록색 CTA를 사용합니다. 이렇게 하는 데에는 이유가 있습니다.빨강 : 열정, 사랑, 위험
파랑 : 고요한, 책임감 있는, 안전한
검정 : 신비로운, 우아한, 사악한
하양 : 순수, 침묵, 깨끗한
초록 : 새로운, 신선한, 자연의
컬러의 의미를 더 확인하고 싶다면 이 링크를 참고하세요. - color culture
링크를 누르면 해당 이미지가 나옵니다. 바로 보실 수 있도록 넣어두었습니다.그레이스케일을 먼저 고려하세요.
우리는 디자인을 할 때 처음부터 컬러와 톤을 가지고 노는걸 좋아합니다. 그러나 이런 행동은 메인컬러를 고르는 데에 3시간이나 보냈다는 사실을 알았을 때 배신감을 느끼게 합니다. 이건 정말 유혹적이지만, 당신은 이런 태도를 피할 줄 알아야 합니다.
대신에 요소의 간격과 레이아웃을 잡는 데에 집중해야 합니다. 그래야 시간을 많이 아낄 수 있습니다. 이렇게 제약을 두는 것이 훨씬 생산적이며 지루하게 보인다고 생각할 필요 없습니다. 더 예쁘게 보이고 싶다면 회색조 말고 다른 톤을 시도하면 됩니다.
단순한 단색 컬러들과 요소에 초점이 맞춰져 있습니다.순수한 그레이스케일과
블랙으로부터 멀어져야 합니다.
지금까지 배운 가장 중요한 컬러 트릭 중 하나는 완전한 회색 사용을 피하는 것입니다. 실제로 순수한 회색은 거의 존재하지 않습니다. 검은색도 마찬가지입니다.
이 이미지에서 가장 어두운 색은 #000이 아니라, #0A0A10입니다.당신의 컬러에 약간의 활기(saturation)를 더해야한다는 걸 항상 기억해야 합니다. 그렇게 하면 사용자들은 무의식적으로 더 자연스럽고 친숙하게 느낄 것입니다.
자연을 믿으세요.
최고의 컬러조합은 자연에서 얻을 수 있습니다. 그것은 항상 자연스러워 보일 것입니다. 디자인 솔루션을 위해 환경을 살피는 일의 가장 좋은 점은 팔레트가 항상 변화하고 있다는 점입니다.
To get inspired
we only need to look around
영감을 얻기위해 주변을 둘러봐야 합니다.
대비값을 동일하게 유지하세요.
몇가지 컬러들은 서로 잘 어울리지만, 반면에 부딪히기도 합니다. 아래에는 컬러휠에서 가장 많이 쓰이는 상호작용에 대한 명확한 규칙들이 있습니다. 이런 방법을 알아둘 필요는 있지만, 그렇다고 꼭 따라야하는 건 아닙니다.
컬러이론에 대해 더 알고싶다면 이 아티클을 확인하세요.
- Color Theory For Designers: Creating Your Own Color Palettes
영감을 얻으세요.
우리가 UI 레퍼런스에 대해 이야기를 나눈다면 dribbble은 최고의 공간입니다. 이곳에는 컬러로 검색할 수 있는 툴이 마련되어 있습니다. 그러므로 다른 디자이너들이 특정컬러를 어떻게 사용했는지 시각적인 조사가 필요하다면 이 곳을 방문하면 됩니다. - dribbble.com/colors
영상, 편집디자인, 인테리어디자인, 패션 등 영감을 주는 아주 많은 영역들이 있습니다. 그런 팔레트들에 무감각 하지말고 흥미롭다고 느껴지는 모든 것들을 저장하세요.
가끔 저는 KPOP 영상에서 컬러들을 뽑아냅니다. 그것들은 아주 훌륭합니다.도구들
더 쉬운 작업을 위해, 2017년에 컬러 팔레트를 고를 수 있는 최고의 툴들을 몇가지 정리해두었습니다. 그들은 당신의 많은 시간을 절약해줄 것입니다.
1 Coolors.co
제가 컬러를 고를 때 사용하는 가장 좋아하는 툴입니다. 선택한 컬러를 쉽게 고정시킬 수 있고 팔레트를 만들 수 있습니다. 또 원하는 이미지를 업로드하면 그 안에서 컬러 팔레트를 얻을 수 있는 기능도 제공합니다. 이런 장점들이 하나의 결과에만 제한되지 않도록 하고, 당신이 레퍼런스의 초점을 수정할 수 있는 선택지를 갖게 됩니다.
2 Kuler
https://color.adobe.com/ko/create/color-wheel
어도비에서 만든 이 툴은 이미 오랫동안 우리와 함께 해왔습니다. 이것은 데스크탑 버전의 브라우저에서만 가능합니다. 데스크탑을 사용하고 있다면, 포토샵으로 색상표를 내보낼 수도 있습니다.
3 Paletton
http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
이 툴은 Kuler와 유사하지만, 차이가 있다면 5가지 톤으로 제한되어 있다는 점입니다. 이미 결정된 주요컬러에 다른 톤들을 추가해서 보고싶을 때 사용하기 좋은 툴입니다.
4 Designspiration.net
https://www.designspiration.net/
지금 당신은 컬러 팔레트를 위한 아이디어가 있고, 그 아이디어 조합의 예가 궁금하다고 상상해봅시다. 이 때, Designispiration이 좋은 툴이 되어줄 것입니다. 최대 5개의 컬러를 고를 수 있고 당신의 물음에 맞는 이미지를 검색할 수 있습니다. 특정 팔레트를 활용한 이미지검색 뿐만 아니라 팔레트가 디자인에 적용된 실제사례를 볼 수 있다는 점에서 굉장히 훌륭한 툴입니다.
5 Shutterstock Lab Spectrum
직접 고른 컬러로 이미지 검색을 하고 싶다면 어떻게 해야합니까?라고 묻는다면, 특정 톤으로부터 이미지들을 찾을 수 있는 Shutterstock의 ‘Spectrum’이라는 툴이 있습니다. 워터마크가 있긴하지만 팔레트를 만들기에 충분한 미리보기 이미지를 제공하기 때문에 굳이 구독료까지 낼 필요는 없습니다.
6 Tineye Multicolr
https://labs.tineye.com/multicolr/
만약 이미지의 컬러들이 조합된 것을 찾고싶거나 각각의 양을 명시하고 싶다면, Tineye가 당신을 도와줄 것입니다. 이 웹사이트는 Flickr에서 제공하는 1천만 개의 창의적인 이미지 데이터베이스를 사용하고 있습니다.
마지막
컬러는 마스터하기에 어려운 개념입니다. 특히 디지털 영역에서는 더욱 그렇습니다. 위에 언급된 팁들은 적절한 컬러 선택을 쉽게 해줄 것입니다. 그리고 훌륭한 색상표 만드는 법을 배우기 위해서는 가능한 많이 연습하고 컬러를 다루어봐야 가능합니다.
