웹디자인을 위한 컬러 선택
실용적인 UI 컬러 적용 가이드
색상은 좋은 웹디자인을 만들기 위해 필수적인 것이며, 매우 신중히 고려되어야 한다. 브랜드 인지와 색상도 분명히 연관이 있으며 당신이 선택한 색상이 비즈니스의 고객에게 잠재적인 영향을 줄 수 있다.
내 경력을 통해 좋은 컬러 스킴은 사용자에게 잘 받아들여지고 호소력 있는 사이트를 만드는데 관련이 깊다는 것을 배웠다.
유저 인터페이스 디자인의 컬러를 마스터할 수 있는 간단한 방법을 찾아서 여러분과 공유하고 싶다. 이 방법이 당신이 웹사이트 등을 만드는 데 있어서 효과적이고 균형 잡힌 색상 파레트를 찾을 수 있도록 도움이 되길 바란다.
Palette outline : 60-30-10 ratio
가장 효과적인 웹사이트와 앱의 컬러스킴은 60-30-10의 비율을 따른다. 이것은 메인 컬러가 웹사이트 디자인의 60%에 적용되고, 보조색이 30%, 그리고 나머지 10%가 다른 두 개의 메인 컬러와 대비를 주는 엑센트 컬러로써 사용된다는 것을 의미한다.
세 가지 다른 음영(shade)을 선택할 때, 엑센트 컬러(10%)는 가장 눈에 띄게 해서 CTA요소와 같은 중요한 아이템들을 강조할 수 있도록 해야 한다. 메인 컬러(60%)는 눈에 편하도록 무채색(neutral color)을 사용하고, 보조색(30%)은 시각적인 흥미를 만들 수 있도록 메인 컬러와 적당히 대비를 이루어야 한다.
Color inspiration
자연은 당신에게 영감을 줄 수 있는 가장 좋은 디자이너이다. 파렛트를 만들기 위해 나는 Unsplash를 검색해서 60-30-10 규칙에 맞는 사진으로부터 세 가지 색상을 추출해 낸다.
파렛트 적용 : 그레이 스케일에 먼저 집중해라.
컬러 파렛트가 준비되면, 다음 할 일은 디자인의 와이어프레임을 만드는 것이다. 나는 먼저 공간과 요소의 레이아웃만을 잡는다. 왜냐하면 이런 제약을 가지고 작업을 하는 것이 작업을 생산적으로 만들어 주며, 나중에 컬러 스킴을 적용할 때도 많은 시간을 절약해주기 때분이다.
이 단계에서 와이어프레임에 색상이 적용되어 있지 않더라도 전혀 지루해 보이지 않는다. 나는 첫 번째 와이어프레임이 시각적으로 호소력 있게 보이게 하기 위해 서로 다른 회색 톤을 사용한다. 그러고 나서, 기능적이고 매력적으로 보이는 시각 요소를 적용하기 전에 레이아웃에 컬러 파레트를 적용한다.
Extra tip : 순수한 회색과 검은색을 피하라.
내가 배운 가장 중요한 색상 이론 중 하나는 색상이 들어가지 않는 회색은 피하라는 것이다. 실제 세계에는 순수한 회색톤은 거의 존재하지 않는다. 순수한 검은색도 마찬가지다. 회색이나 검정에 약간의 색상을 넣는 것을 기억하라. 그러면 사용자에게 색상이 더 자연스럽고 친숙하게 느껴지게 할 수 있다.
Final thoughts
디지털 공간에서 색상은 마스터하기에 트릭이 필요한 컨셉이다. 내가 위에서 언급한 팁들은 색상 파레트를 좀 더 쉽게 만들 수 있도록 도와줄 것이다. 그리고 디자인의 전반적인 효과를 증진시키기 위해 맞는 색상을 찾아서 적용할 수 있도록 해 줄 것이다. 뛰어난 컬러 스킴을 만드는 가장 좋은 방법은 연습이라는 것을 기억해라. 오늘 바로 시작해 보고 여러 가지 컬러 조합을 즐겁게 탐험해보기를 바란다!
원문 출처 :
