블로그

클라우드 모니터링, 서버 모니터링, DB 모니터링, 네트워크 관리, 웹 애플리케이션 성능 모니터링, 통합로그관리, ITSM을 단일 플랫폼에서 관리, 브레인즈컴퍼니의 소식을 전합니다.

[전시회] ‘공공용 민간 SaaS 서비스 제공기업’으로 선정된 브레인즈컴퍼니 디자인 시스템이 필요한 이유와 핵심요소는?
이정민 2023.12.12
[전시회] 브레인즈컴퍼니가 소프트웨이브2023에서 주목받은 이유
 
 
 
 
 “우리나라 금융 유니콘 기업이 개발과정에서 1,000시간을 아낀 비결”
“애플과 구글이 제품을 기획하고 개발할 때 가장 중요하게 생각하는 것” 
 



  
디자인 시스템은 무엇일까?

위에 있는 두 문장의 답은 바로 ‘디자인 시스템’이에요. 고객이 하나의 브랜드를 접하는 순간부터 끝까지 지속적으로 동일한 경험을 하게 해주는 디자인 시스템의 중요도는, 점점 더 커지고 있죠.


디자인 시스템은 시맨틱 컬러, 컴포넌트 디자인, 디자인 토큰 등을 구축하여 제품 전반에서 사용자가 일괄적인 시각적 경험을 할 수 있도록 도와주고 있어요. 제품을 더 빠르고 효율적으로 만들어주기도 해요.
 
그리하여 이번 시간에는 1) 디자인 시스템은 구체적으로 무엇이고 2) 브레인즈컴퍼니는 어떤 노력을 하고 있는지 살펴볼게요!
 
 
 
 
 
디자인 시스템의 요소1 : 시맨틱 컬러
 
▲Zenius ITSM 버튼에 적용된 컬러 시스템
 
디자인 시스템의 중요 요소 중 하나인 '시맨틱 컬러'는, 사용 방법에 따라 색상 이름을 지정하는 방법이에요. 브레인즈컴퍼니의 제니우스(Zenius)도 시맨틱 컬러를 사용하고 있는데요. Primary, Secondary, Tertiary, Ghost, Gray, Severity Color 등으로 구성되어 있어요.
 
여기서 Primary 컬러는 UI 전체의 주요 구성 요소에 대한 역할을 해줘요. 가장 중요한 액션에 사용하며, 화면에서 가장 강력한 클릭 유도 문안인 CTA(call to action)을 강조하기 위해 사용하기도 하죠.
 
 
 
▲Zenius ITSM Primary 컬러의 변천사
 
Zenius ITSM은 BI 컬러를 보완한 Primary 색상을 사용 중이며, Secondary와 Tertiary는 이와 어울리는 색상을 지정해 사용하고 있어요. 브레인즈컴퍼니의 컬러는 선명한 파란색이지만, 제품 화면에 사용하기에는 채도가 너무 높아 두 번의 GUI 테스트를 거쳐 위와 같이 보완한 색상이 나왔어요.
 
Secondary와 Tertiaty 사용 시 화면 구성의 위계질서에 따라 색상을 설정하여 중요도(중요, 보조, 부가)를 표현하기도 해요.
 
[잠깐의 TMI🤭] 브레인즈컴퍼니 브랜드 색상인 Blue는 한국에서 가장 선호도가 높은 색상이며, 신뢰·젊음·성실·책임감 등의 이미지를 지닌 색상이에요.
 
 
 
▲컬러 팔레트
 
 
 
 
 
디자인 시스템의 요소2 : 심각도 컬러
 
▲심각도 컬러 팔레트
 
'심각도 컬러'는 Zenius에서 사용하는 시맨틱 컬러의 일종이에요. Zenius에서 발생한 이벤트를 알려주는 색상으로 총 6단계의 색상을 구축하여서 사용하고 있답니다. 정상, 무해, 주의, 위험, 긴급, 치명의 6단계이며 위와 같은 컬러를 사용하고 있어요.
 
 
 
 
 
디자인 시스템의 요소3 : 디자인 토큰
 
'디자인 토큰'은 디자인 시스템의 시각적 디자인 요소이며, 디자인 관련 변수를 저장하는 데 사용하는 기본 요소에요.
 
기존에는 피그마(Figma)에서 컬러나 폰트 등을 Style로만 지정할 수 있었어요. 같은 색상을 여러 개의 항목에 적용할 경우, 토큰 별로 사용할 수 없는 점이 굉장히 불편했죠. 하지만 Figma의 Variable 기능이 업데이트된 후, 토큰을 만들 수 있게 되었어요!
 
브레인즈컴퍼니의 메인 제품 Zenius는 총 세 개의 테마를 사용 중이라, 디자인 토큰 시스템을 테스트하고 있답니다.
 
 
 
▲컬러 토큰 시스템
 
위와 같이 속성이 다른 두 개의 디자인에 동일하게 Neutral-500 컬러를 사용했는데요, 토큰별로 색상을 적용할 수 있는 시스템이라, 같은 색상을 지닌 다른 속성이어도 개별로 컬러 관리가 가능한 장점이 있어요. 개발자와의 협업에도 굉장히 좋은 시스템이랍니다!
 
 
 
。。。。。。。。。。。。
 
 
 
제니우스(Zenius) 제품이 태어난 지 오래된 만큼, 제품 디자이너가 여러 번 바뀌었어요. 컬러 시스템에 대한 가이드도 중간중간 변경되었죠.
 
브레인즈컴퍼니 디자인팀은 컬러 시스템을 다시 재정비하기 위해, 여러 가지 테스트 과정을 거치고 있어요. 아직은 구축 단계에 있어 디자인 팀 내의 규칙이나, 개발자들과 네이밍 규칙 등 협의해야 할 일이 적진 않아요. 그래도 구축이 완료된다면 정말 소통하기 편해질 거 같아요!
 
이제 곧 완성될 '디자인 시스템'을 통해 한층 더 성숙해질 Zenius! 많은 기대 부탁드려요😊
 
이정민 디자인팀 사진
이정민디자인팀

브레인즈컴퍼니 디자인 팀에서 Product 및 Dashboard 디자인을 합니다. 더 나은 사용자 경험을 위해 다양한 시각으로 디자인합니다.

필진 글 더보기

추천 콘텐츠