–
최근에는 구성한 컬러가 실제 어떤 모습으로 적용되는지 구체적으로 들여다볼 수 있는 서비스를 자주 만나볼 수 있는데요. 오늘 소개할 서비스 역시 ‘컬러 조합’을 쉽게 만들어주고, 선택한 컬러에 따라 화면이 어떻게 구성되는지 3가지 목업에 따라 살펴볼 수 있는 곳입니다.
‘Goodpalette’의 기본 구성입니다. 왼쪽으로는 3가지 주요 컬러를 확인(또는 선택)할 수 있으며, 오른쪽으로는 앞서 선택하거나 확인한 컬러가 어떤 모습으로 적용되는지 살펴볼 수 있습니다. 이런 구성은 컬러를 찾는 것으로 끝내지 않고, 컬러 조합이 실제 화면에 적용되었을 때 어떤 느낌인지 미리 살펴볼 수 있다는 장점이 있습니다.
화면은 총 3가지가 제공되는데 성격이 달라 참고하기 좋은 환경을 제공합니다. 무엇보다 화면을 구성하는 내용 단위로 컬러를 어떻게 활용할 수 있고, 적용하면 좋은지에 대한 정보가 된다는 점에서 도움을 많이 받을 수 있습니다.
컬러 생성은 자동으로 생성과 특정 컬러 값을 직접 입력하는 방법으로 가능합니다. ‘Generate’ 버튼을 클릭하면 세 가지 컬러가 알아서 생성 또는 변경되는 것을 알 수 있어요. 하지만 이 버튼은 3가지 컬러 구성을 한 번에 생성하기 때문에 마음에 드는 컬러가 있다면 컬러 단위로 제공되는 ‘자물쇠’ 버튼을 눌러 고정시켜야 합니다. 이렇게 마음에 드는 3가지 컬러를 빠르게 구성할 수 있어요.
앞서 말씀드린 것과 같이 스포이드 버튼을 활용해 컬러를 직접 선택하는 것도 가능합니다. 이 방법은 메인 컬러 등 일부를 미리 고려하고 있는 경우 유용하게 사용할 수 있습니다. 어울리는 나머지 컬러를 쉽게 찾을 수 있기 때문입니다. 이렇게 직접 선택하고 구성한 컬러는 기본 대시보드 유형의 화면에 적용된 (세 번째 화면 구성) 모습으로 빠르게 확인할 수 있습니다.
적합한 컬러 구성을 찾았다면, 4가지 방법으로 내보내기를 할 수 있습니다. URL을 복사해 공유하거나, CSS/SCSS 내용을 카피해 적용해보거나, SVG로도 가능합니다. 상황과 필요에 따른 방법을 선택할 수 있는 모습입니다. 3가지를 기준으로 원하는 컬러를 찾아야 하고, 화면에 적용 시 대략 어떤 모습인지 확인이 필요할 경우 한 번씩 유용하게 사용할 수 있는 서비스가 아닐까 싶네요. 더 자세한 내용은 ‘링크’를 참고해주세요!
- 웹과 모바일UI, 포스터, 패턴 등 다양한 환경에 맞는 다섯 가지 컬러 조합을 찾아볼 수 있는 곳!
- 다섯가지 컬러 조합을 바탕으로, 웹디자인 구성 사례를 확인할 수 있는 : HAPPYHUES
- 모바일 화면 구성에 적합한 3가지 컬러 조합을 확인 할 수 있는 : MOBILE PALETTE GENERATOR
–
–
