TECH ARTICLE

리뉴얼된 제니퍼 컬러 스타일 가이드

제니퍼 리뉴얼 프로젝트를 진행하면서 화면과 차트 색상, 즉 제니퍼 브랜드 컬러를 변경하는 작업을 진행하였습니다. 내비게이션에 이어, 눈에 띄는😜 변화가 아닐까 하는데요.

새로운 화면 디자인에 맞는 색상을 선정하고 이를 컴포넌트나, 차트, 또는 이벤트 등에 일관성있게 반영하는 작업과 함께, 사용하는 색상을 쓰임에 맞게 분류하고 구조화하여 좀 더 체계적으로 관리 할 수 있는 작업이 진행되었습니다.

제니퍼 5.6.0에서는 기존의 브랜드 컬러보다 더 세련되고 산뜻하게 정리가 된 제니퍼 차트를 경험할 수 있습니다. 😘

더 심플하고 세련되게, 제니퍼 브랜드 컬러의 활용

기존에는 컬러를 사용할 때 명확한 기준이나 구체적인 스타일 가이드가 없다보니 새로운 화면이나 예외적인 상황이 발생했을때마다 감각에 의존해야만 했습니다. 필요할 때마다 색상을 생산하여 제작하다보니, 같은 계열의 색상이 규칙없이 무수히 생겨나게 되고 관리가 힘들 수 밖에 없었지요. 이런 이유로 정서적인 전달이 필요한 브랜드 색상을 사용할 때마다 어려움이 많을 수 밖에 없었습니다. 😂

기존의 X-view팝업 화면(좌)과, 새로운 X-view팝업화면(우) / 여러가지 보라색 색상을 사용한 기존의 X-view팝업화면과 브랜드 컬러에 명도만으로 포인트를 준 새로운 X-view팝업화면
기존의 분석/성능브라우저 화면 (좌)와 한톤의 브랜드 컬러를 사용한 새로운 성능브라우저 화면(우)

제니퍼 리뉴얼 프로젝트를 시작하면서 새로운 제니퍼 화면에서는 제니퍼 브랜드 이미지가 스마트하고 세련된 이미지로 전달될 수 있도록 브랜드 컬러를 리뉴얼 하기로 결정했습니다.

우선, 새롭게 색상을 선정하고, Primary와 Secondary 로 지정한 브랜드색상에 명도만 다르게 하여 한가지 톤으로 필요한 부분에만 포인트를 주었습니다. 데이터 분석에 있어 가장 중요한 사용자가 데이터를 인지하는데 방해되지 않게 정리 하였습니다.

제니퍼 브랜드색상. 색상의 명도만 다르게 하여 다양하게 활용할 수 있다.
차트에서 포인트가 되는부분에 적용한 제니퍼의 브랜드 색상

단순하고 일관성있게 , 세부 정보를 구별하여 리뉴얼

제니퍼에서는 이벤트를 표시하는 차트들이 화면의 다양한 부분에서 굉장히 많은데 의미적으로 거의 비슷한 ‘상태’를 보여주기 위해 사용한 비슷한 계열의 색상이 많았습니다.

이는 이벤트 색상을 제대로 체계화 하지 않은 데다 이를 관리할 시스템이 제대로 구축되지 않은 상태에서 화면이 추가될때마다 새로운 색상을 추가하여 사용해왔기 때문인데, 그라데이션이 들어간 경우의 색상까지 포함하면 실제로 사용한 색상은 더 많을 것으로 예상합니다. 리뉴얼 작업이 시급했습니다. 😒

비슷한 상태에 일관성있게 적용할 수 있는 이벤트 색상

우선 비슷한 ‘상태’의 색상을 하나로 취합하여 일관성있고 전체적인 맥락에서 단순해 보이도록 수정했으며 행동 패턴에 따른 색상을 따로 분류하여 레이어드 하여 사용함으로써 색상 범위를 줄이는 작업을 진행했습니다. 그리고 앞으로도 쉽게 관리할 수 있도록 매뉴얼 작업을 진행 하였습니다. 😃

기존의 시스템 어드민 대시보드 (좌) 새로운 시스템 어드민 대시보드(우)-비슷한 ‘상태’의 색상을 하나로 취합하여 전체적인 맥락에서 단순하고 명료해 보이도록 리뉴얼 하였다.

정리된 매뉴얼로 인해, 앞으로의 작업이 훨씬 수월해질 것으로 기대하고 있습니다~ 😍

제니퍼의 Behaviors 색상 팔레트, 행동 패턴에 따른 색상은 기존색상에 레이어드하여 사용하여 색상 범위를 줄일 수 있었다.

엣지 있는 차트 색상의 변화

이번 리뉴얼에서는 차트 색상 팔레트에도 큰 변화를 주었습니다. 차트가 좀 더 눈에 띄고 선명하게 보일수 있도록 새로운 색상으로 변환하는 작업을 진행했는데요, 😉 보통 제니퍼의 차트 색상은 이벤트 색상을 제외하고 대부분 라인차트에서 활용되고 있고, 인스턴스의 개수가 수십가지 존재하는 고객사들이 많기 때문에 최대한 많은 색상을 사용해야 합니다.

20가지 색상의 기존 차트 색상 팔레트

기존에는 20가지 색상에, 데이터가 20가지를 초과하는 경우 색상값을 코드로 자동 생성하는 방식을 통해 다른색상이 생성되도록 하여 사용해왔는데, 이를 20가지에서 40가지로, 20가지의 조화로운 색상을 추가하였습니다.

조화로운 색상을 더 추가한 40가지 색상의 새로운 차트 색상 팔레트

많은 변화가 있었음에도 아직 모든 화면의 디자인이 다 리뉴얼된것이 아니어서 올해 하반기는 그러한 부분들의 단순화를 지속적으로 해나갈 예정입니다.

더 세련되고 엣지있게 변화할 다음의 내용을 기대해 주세요~😘

Next

Contact Us

안녕하세요? 제니퍼소프트입니다.
기술 문의의 경우 질문자의 회사/이름/연락처를 본문에 기술해 주셔야만 원할한 지원이 가능합니다.
보내주신 문의 사항을 검토하여 빠른 시일 내에 답변해 드리겠습니다.

  • Chris
  • Irene

메일을 보냈습니다.

메일 전송이 완료되었습니다.
빠른 시일 내에 답변드리겠습니다.
감사합니다.
제니퍼소프트 웹사이트는 쿠키를 사용합니다. 쿠키에 대한 자세한 정보 및 삭제 방법은 제니퍼소프트의 개인정보처리방침을 참고하시기 바라며 본 사이트를 계속해서 이용하는 것은 제니퍼소프트의 쿠키 사용에 동의함을 의미합니다.