NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

저의 메인 업무는 아니지만, 사이드 프로젝트 등을 진행할 때 사용되는 컬러를 선택하는 건 늘 고통스러운 과정으로 느껴집니다. 겨우 하나의 컬러를 선택해도, 함께 쓰면 좋을 컬러를 선택하는 게 쉽지 않기 때문인데요. 그래서 요즘은 컬러 조합을 제공해주는 사이트를 즐겨찾기 해두고, 필요할 때마다 들어가 컬러 값을 복사해 활용하고 있어요. 다행히 이런 서비스는 점점 늘어나고 있으며, 오늘 소개할 서비스는 한 디자이너가 동일한 구성의 웹디자인을 각기 다른 컬러 조합으로 확인할 수 있다면 어떨까?라는 생각으로 만든 사이드 프로젝트 중 하나인 'Happyhues'입니다.

 
Happyhues

먼저, 우리가 확인할 수 있는 건 좌측에 위치한 다섯 가지 컬러 조합과 우측에 위치한 샘플 웹디자인입니다. 왼쪽에서 선택한 컬러 조합에 따라 오른쪽의 웹사이트 주요 섹션 구성이 선택한 컬러 조합으로 변경되기 때문입니다. 총 17개의 컬러 조합이 제공되기에 하나씩 선택해서 볼 경우 동일한 샘플 웹디자인을 기준으로 17개 시안을 확인할 수 있는 구성입니다.

 

Happyhues

'Happyhues'에 처음 들어갔을 때 기본 설정되어 있는 컬러가 적용된 모습이에요. 이렇게 사용자가 선택한 컬러에 따라 자동으로 적용되며, 세부 컬러들도 섹션에 따라 자세히 들여다볼 수 있어 더욱 유용하게 느껴집니다.

 

Happyhues

원페이지 단위 웹디자인이지만 섹션이 여러 개로 구성되어 있기 때문에, 위와 같이 섹션 별 컬러 값을 확인할 수 있어요. 구성 요소와 일러스트에 쓰인 컬러를 나눠 볼 수 있으며, 각 컬러 값을 클릭하면 바로 복사 후 활용할 수 있습니다.

 

Happyhues

두 번째 섹션으로 넘어온 모습이에요. 유사한 톤으로 조금씩 구성이 바뀌는 모습인데요. 선택 컬러에 따라 조화롭게 사용되는 모습을 볼 수 있어, 어떻게 사용하고 적용하면 좋을지에 대한 여러 정보를 확인할 수 있습니다.

 

Happyhues

이번 섹션 역시 섹션에 사용된 컬러를 레이아웃 구성 요소와 사용된 아이콘에 따라 구분해서 볼 수 있는 모습이에요. 메인 컬러 조합을 변경, 섹션에 따라 제공되는 세부 값을 하나씩 복사해 우리가 원하는 조합을 생각해볼 수 있다는 점도 이곳에서 얻을 수 있는 매력 중 하나라고 생각합니다.

 

Happyhues

세 번째 섹션의 모습이에요. 정해진 컬러를 구성 요소에 따라 어떻게 활용하고 구분해야 하지?라는 질문이 저는 가장 어렵게 느껴지는데 이렇게 카드 UI는 물론 태그 형태의 구성요소까지 볼 수 있어 더 많은 도움을 받을 수 있었습니다.

 

Happyhues

마찬가지로, 세 번째 섹션 역시 사용된 컬러 (배경, 카드 배경, 카드 내 태그, 카드 내 태그 텍스트, 문장, 카드 내 하이라이트 등)를 자세히 확인할 수 있습니다. 앞서 말씀드렸던 것처럼 원하는 컬러가 있는 경우 클릭 한 번으로 컬러 값을 자동 복사할 수 있어요. 복사가 완료되었다는 메시지를 볼 수 있으니, 상황에 대한 이해도 빠르게 가능합니다.

 

Happyhues

네 번째 섹션이네요. 이 디자이너의 사이드 프로젝트로 만들어진 곳이 'Happyhues'입니다.

 

Happyhues

뉴스레터 입력 폼도 포함되어 있는 구성이며, 네 번째 섹션 아래로는 푸터 영역을 확인할 수 있어요. 이곳을 처음 발견하곤 컬러 조합에 따라 웹디자인을 계속 바꿔봤는데요. 확실히 어떤 컬러를 사용하냐에 따라 느낌이 달라진다는 사실을 알 수 있었습니다. 또 기획과 디자인을 하는 입장에서는, 별다른 노력 없이 다양한 컬러 조합을 정해진 레이아웃이나 구성에 어떻게 사용하면 좋을지 빠르게 파악할 수 있다는 점에서 자주 들여다보게 될 것 같은 느낌이 듭니다.


<참고 자료>

  1. Happyhues: https://www.happyhues.co/
댓글 0

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

피그마 작업 시 유용한 플러그인 Top3

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.