로그인
메카뎀매거진 Blog
[큐레이션] UI/UX 디자인컬러
- 작성일2022-01-21
- 조회570
분량
추천강의
※ 컬러모드
대표적인 컬러모드는 4가지가 있습니다.
흔히 알고 계시는 RGB, CMYK 이며, 이 외에 HSB, HSL까지 다양한 컬러모드의 개념을 숙지하는 것이 디자인에 많은 도움이 됩니다.
* RGB > Web컬러모드 / CMYK > 인쇄&출력 컬러모드
- RGB 컬러는 Red, Green, Blue 3개의 색상이며 빛을 이용하여 색을 표현하는 디스플레이등에서 이용, 빛의 혼합에 의해 색을 구성하기 때문에 색을 사용할수록 밝아집니다.
- CMYK 컬러는 Cyan, Magenta, Yellowm Black 4개의 색상이며 출판, 인쇄에서 주로 이용하고 잉크의 혼합에 의해 색을 구성하기 때문에 색을 사용할수록 어두워집니다.
* HSB/HSL
- Hue(색상), Saturation(채도), Brightness/value(명도), Lightness/luminance(휘도)
HSB 모델은 컴퓨터 그래픽스(CG)에서 색을 기술하는데 사용되는 색모델의 하나로 색상, 채도, 명도를 의미합니다.
HSL의 L은 Lightness/luminance로 명도/휘도를 의미합니다.
HSB/HSV 모델의 명도만 변형된 색모델로 비슷해보이지만 다른 그래프형태를 띕니다.
HSL 모델의 밝기(L)는 HSB의 채도와 명도 2가지 요소에 영향을 주기도 하며, '얼마나 빛을 포함하고 있는지'에 대한 측정값으로 광고/휘도 등으로 표현됩니다.
※ UI/UX 디자인컬러
컬러는 UI/UX 디자인에서 가장 처음 인식되고, 가장 오래도록 기억에 남는 강렬한 표현수단이자 가장 효과적인 커뮤니케이션입니다.
UX적 관점에서 보자면 컬러는 잘 사라지지 않는 정보 중 하나이기 때문에 디자인을 할 때 가장 신경써야 하는 요소 중 하나죠.
컬러는 어떠한 이미지와 의미를 동반합니다.
레드 강렬한 이미지로 열정, 집중, 사랑
오렌지 활력이 넘치고 사교성, 아이디어, 자유
옐로우 즐거운, 창의적인, 진보적인, 활동적인
그린 건강함, 신선함, 자연, 치유
블루 신뢰감과 정직함, 평화
퍼플 고급스러움, 신비로움
디자인을 할 때에는 색체의 조화와 대비를 통해 명확한 메시지를 전달하면서도 심미적으로 아름다움을 디자인을 하는 것이 중요하지만
컬러가 가진 긍정/부정적인 이미지들에 대해 잘 이해하고 있다면 컬러 이미지를 잘 활용하여 디자인 전달을 할수 있습니다.
웹디자인에서 통용되는 일반적인 상호작용의 의미와 다른 컬러를 적용하거나, 디자인을 해치는 선택을 하지 않도록 유의해야합니다.
※ UI에서 컬러의 역할
UI에서 컬러는 브랜드 이미지를 전달하기도 하지만, 해당 요소의 중요도와 상태를 나타내는 역할을 합니다.
강조하고 싶거나 사용자가 누르게 하고 싶은 요소에 눈에 띄는 컬러를 사용하고, 나머지 요소는 채도가 빠진 그레이컬러를 사용함으로써 요소 간의 중요도를 확실하게 표시합니다.
컬러만 제대로 사용해도 사용자를 원하는 방향으로 이끌 수 있습니다.
그러나 그레이 컬러는 깔끔하고 무난한 이미지를 줄 수 있지만 사용할 때는 다른 정보와의 위계를 흐트리지 않는 지, 가시성 등 고려해야 할 것이 많습니다.
※ 2022년 올해 트렌드 컬러
팬톤은 미국 뉴저지 소재의 색상 전문 R&D 기업이며, 팬톤에서 고안한 컬러 배열을 '팬톤 컬러' 라고 합니다.
올해의 트렌드 컬러를 소개하기 전 과거 6년간의 팬톤컬러를 먼저 소개해드립니다.
이렇게 선정된 색들은 다양한 제품과 포장, 그래픽 디자인에도 영향을 많이 준다고 합니다.
트렌드에 관심있으신 분들은 더 유심히 알아보는 것을 추천합니다!
그렇다면 2022년 팬톤에서 선정한 'COLOR OF THE YEAR 2022'는 뭘까요?
*출처:팬톤
*출처:팬톤
올해의 색상은 베리페리(VeryPeri)라고 해요.
앞으로 다가올 미래를 새로운 시각으로 앞서 나갈수 있는 색이라고 합니다.
평범한 푸른색이 아닌 특색있는 색감이 살짝 더해진 색상이라는 점에서 새로운 방식으로 융합되고 있는 디지털시대의 디자인을 나타내기도 해요.
현시대의 한계를 넓히는데 도움을 주는 건 물론이고 우리의 새로운 기능성을 탐색하고 디지털 공간과 게임트렌드를 이끌어감을 암시한다고 합니다.
특히나, 베리페리 컬러가 메타버스와도 관계가 깊다고 해요.
키워드는 용기있는 창의성, 상상력, 역동적 이라고 하니 기억해주시면 좋을거 같아요.
※ UI/UX 컬러 팔레트 참고할만한 사이트
1. Happy Hues
https://www.happyhues.co/
- 배경 컬러 팔레트를 선택했다 하더라도, 구체적으로 어떻게 사용해야 할 지 잘 모르시는 분들에게 도움이 되는 사이트
컬러 팔레트를 선택할 때마다 사이트 전체의 배경이 바뀌고, 한번에 확인 할 수 있습니다.
2. ColorDrop
https://colordrop.io/
- 심미적으로 뛰어난 컬러 팔레트를 모아 놓은 사이트. 검색이나 필터링 기능도 제공하고, 우측에서 항복을 클릭하면 색상정보가 자동으로 복사됩니다.
3. Color Supply
https://colorsupplyyy.com/app/
- 보색, 유사색, 3색 배색 등 색상 디자인에 활용할 수 있는 효과적인 배색을 작성할 수 있는 사이트.
대표적인 컬러모드는 4가지가 있습니다.
흔히 알고 계시는 RGB, CMYK 이며, 이 외에 HSB, HSL까지 다양한 컬러모드의 개념을 숙지하는 것이 디자인에 많은 도움이 됩니다.
* RGB > Web컬러모드 / CMYK > 인쇄&출력 컬러모드
- RGB 컬러는 Red, Green, Blue 3개의 색상이며 빛을 이용하여 색을 표현하는 디스플레이등에서 이용, 빛의 혼합에 의해 색을 구성하기 때문에 색을 사용할수록 밝아집니다.
- CMYK 컬러는 Cyan, Magenta, Yellowm Black 4개의 색상이며 출판, 인쇄에서 주로 이용하고 잉크의 혼합에 의해 색을 구성하기 때문에 색을 사용할수록 어두워집니다.
* HSB/HSL
- Hue(색상), Saturation(채도), Brightness/value(명도), Lightness/luminance(휘도)
HSB 모델은 컴퓨터 그래픽스(CG)에서 색을 기술하는데 사용되는 색모델의 하나로 색상, 채도, 명도를 의미합니다.
HSL의 L은 Lightness/luminance로 명도/휘도를 의미합니다.
HSB/HSV 모델의 명도만 변형된 색모델로 비슷해보이지만 다른 그래프형태를 띕니다.
HSL 모델의 밝기(L)는 HSB의 채도와 명도 2가지 요소에 영향을 주기도 하며, '얼마나 빛을 포함하고 있는지'에 대한 측정값으로 광고/휘도 등으로 표현됩니다.
※ UI/UX 디자인컬러
컬러는 UI/UX 디자인에서 가장 처음 인식되고, 가장 오래도록 기억에 남는 강렬한 표현수단이자 가장 효과적인 커뮤니케이션입니다.
UX적 관점에서 보자면 컬러는 잘 사라지지 않는 정보 중 하나이기 때문에 디자인을 할 때 가장 신경써야 하는 요소 중 하나죠.
컬러는 어떠한 이미지와 의미를 동반합니다.
레드 강렬한 이미지로 열정, 집중, 사랑
오렌지 활력이 넘치고 사교성, 아이디어, 자유
옐로우 즐거운, 창의적인, 진보적인, 활동적인
그린 건강함, 신선함, 자연, 치유
블루 신뢰감과 정직함, 평화
퍼플 고급스러움, 신비로움
디자인을 할 때에는 색체의 조화와 대비를 통해 명확한 메시지를 전달하면서도 심미적으로 아름다움을 디자인을 하는 것이 중요하지만
컬러가 가진 긍정/부정적인 이미지들에 대해 잘 이해하고 있다면 컬러 이미지를 잘 활용하여 디자인 전달을 할수 있습니다.
웹디자인에서 통용되는 일반적인 상호작용의 의미와 다른 컬러를 적용하거나, 디자인을 해치는 선택을 하지 않도록 유의해야합니다.
※ UI에서 컬러의 역할
UI에서 컬러는 브랜드 이미지를 전달하기도 하지만, 해당 요소의 중요도와 상태를 나타내는 역할을 합니다.
강조하고 싶거나 사용자가 누르게 하고 싶은 요소에 눈에 띄는 컬러를 사용하고, 나머지 요소는 채도가 빠진 그레이컬러를 사용함으로써 요소 간의 중요도를 확실하게 표시합니다.
컬러만 제대로 사용해도 사용자를 원하는 방향으로 이끌 수 있습니다.
그러나 그레이 컬러는 깔끔하고 무난한 이미지를 줄 수 있지만 사용할 때는 다른 정보와의 위계를 흐트리지 않는 지, 가시성 등 고려해야 할 것이 많습니다.
※ 2022년 올해 트렌드 컬러
팬톤은 미국 뉴저지 소재의 색상 전문 R&D 기업이며, 팬톤에서 고안한 컬러 배열을 '팬톤 컬러' 라고 합니다.
올해의 트렌드 컬러를 소개하기 전 과거 6년간의 팬톤컬러를 먼저 소개해드립니다.
이렇게 선정된 색들은 다양한 제품과 포장, 그래픽 디자인에도 영향을 많이 준다고 합니다.
트렌드에 관심있으신 분들은 더 유심히 알아보는 것을 추천합니다!
그렇다면 2022년 팬톤에서 선정한 'COLOR OF THE YEAR 2022'는 뭘까요?
*출처:팬톤
*출처:팬톤
올해의 색상은 베리페리(VeryPeri)라고 해요.
앞으로 다가올 미래를 새로운 시각으로 앞서 나갈수 있는 색이라고 합니다.
평범한 푸른색이 아닌 특색있는 색감이 살짝 더해진 색상이라는 점에서 새로운 방식으로 융합되고 있는 디지털시대의 디자인을 나타내기도 해요.
현시대의 한계를 넓히는데 도움을 주는 건 물론이고 우리의 새로운 기능성을 탐색하고 디지털 공간과 게임트렌드를 이끌어감을 암시한다고 합니다.
특히나, 베리페리 컬러가 메타버스와도 관계가 깊다고 해요.
키워드는 용기있는 창의성, 상상력, 역동적 이라고 하니 기억해주시면 좋을거 같아요.
※ UI/UX 컬러 팔레트 참고할만한 사이트
1. Happy Hues
https://www.happyhues.co/
- 배경 컬러 팔레트를 선택했다 하더라도, 구체적으로 어떻게 사용해야 할 지 잘 모르시는 분들에게 도움이 되는 사이트
컬러 팔레트를 선택할 때마다 사이트 전체의 배경이 바뀌고, 한번에 확인 할 수 있습니다.
2. ColorDrop
https://colordrop.io/
- 심미적으로 뛰어난 컬러 팔레트를 모아 놓은 사이트. 검색이나 필터링 기능도 제공하고, 우측에서 항복을 클릭하면 색상정보가 자동으로 복사됩니다.
3. Color Supply
https://colorsupplyyy.com/app/
- 보색, 유사색, 3색 배색 등 색상 디자인에 활용할 수 있는 효과적인 배색을 작성할 수 있는 사이트.
