본문 바로가기
엑셈 경쟁력/엑.기.스

엑기스 | 엑셈 디자인 가이드 소개

by EXEM 2020. 11. 11.



엑셈이 전개일여와 필리노베이터 철학을 기반으로 움직이기 시작한 이후로, 직원들은 공통의 사고방식을 공유하고 큰 방향점을 가지고 움직이고 있습니다. 여러 방향의 에너지를 효율적으로 작동시키기 위해, 어떤 시스템을 갖는 것은 생산성 향상에 큰 도움이 된다고 할 수 있습니다. 


흥미롭게도, 디자인 필드에서 이런 움직임들이 생겨나고 있습니다. 대표적으로 Apple과 Google에서는 그들만의 디자인 철학, 시스템을 개발하고 공유하여 그들의 생산성을 증가시킴과 동시에 디자인 트렌드에 큰 영향을 끼치고 있습니다.



출발


엑셈 디자인그룹 또한 디자인 철학과 체계의 필요성을 느끼고 있었습니다. 디자이너 각자의 경험과 사고방식이 달라서, 다수의 제품, 브랜드, 환경의 시각요소를 창조해내는 데에 기준과 방향이 모호했기 때문입니다. 철학과 체계가 없는 상황은 아니었지만, 모두가 공감하고 움직일 수 있는 세련된 형태는 아니었습니다. 


각자 다른 디자인 사고방식


따라서 제각각인 작업 방식과 사고방식에 큰 방향을 공유할 수 있는 디자인 원칙. 철학이 필요하게 됩니다. 당시에는 신제품이 킥오프되던 시기이기도 했기 때문에, 신제품 CloudMOA 제품디자이너인 제게는 그 니즈가 더 절실히 느껴졌습니다.



초기 마인드셋



신제품의 디자인이 걸림돌이 되어 출시가 늦어지는 경우를 피하고자, 초기 전략은 '빠른 시각화'를 통한 '빠른 테스트'였습니다. 이로써 적절한 판단을 도움을 드리자는 전략이었습니다. 이 전략은 제품을 구현하는 데에 속도를 낼 수 있었지만, 중간 단계의 시각적, 설계적 오류를 케어하기엔 많은 비효율이 발생할 수밖에 없었습니다. 


이러한 이슈들은 '디자인 철학, 가이드'에 대한 필요에 더욱 갈증을 갖게 하는 경험이었습니다. 



글로벌 기업들의 디자인시스템


따라서 자연스럽게 다른 기업들의 디자인 체계에 눈을 돌리게 되었습니다. 여러 제품에 일관된 기준을 가지고 작업을 할 수 있는 환경을 어떻게 조성해 두었는지 살펴볼 필요가 있었습니다. 그들이 공개해둔 시스템이 제품에서는 어떤 방식으로 작용하고 있는지 자세히 살펴보고, 공개된 소스를 활용하여 제품에 적용해보는 등 체계를 구성할 수 있는 인사이트를 가지려고 그룹 전원이 노력을 기울입니다.



공동의 목표로 설정


애자일 방식의 제작

외부의 디자인 시스템을 학습하고, 엑셈의 제품을 구성할 수 있는 요소를 찾아가며, '엑셈 디자인 가이드'의 러프한 그림을 그릴 수 있었습니다. 궁극적으로는 제품의 퀄리티를 높이고, 크게는 디자인 철학과 원칙, 자세하게는 디자인 시스템 혹은 가이드를 구성한다고 했을 때 그것을 소화할 수 있는 그림이 그려지고, 마침내 디자인그룹의 공통 목표로 삼을 수 있게 됩니다.


엑셈 디자인 가이드


 

엑셈 디자인 가이드는 약 1년간 현업 외 프로젝트로서 애자일 방법론으로 기민하게 제작하고자 했습니다. 엑셈의 제품은 단순하지 않고, 굉장히 복잡하며, 여러 기술의 집약체라고 볼 수 있습니다. 이런 제품을 아우르는 명확한 철학을 단기간에 설정한다는 것은 조심스러운 일이었습니다. 


애플의 HIG의 경우를 본다면, 1987년부터 이미 인간-컴퓨터 상호 작용 설계 원칙의 강력한 토대를 가지고 오랫동안 다듬어 왔습니다. 때문에 새로 개발되는 화면들과 기존 화면들이 갖는 시각적 성격을 고려하여, 조심스럽게 기반을 마련해 나갔습니다.


EXEM Design Principe

본격적으로 엑셈 디자인 원칙과 가이드에 대해 소개해 드리도록 하겠습니다. 엑셈 디자인 원칙은 4개의 기본원칙과 20개의 UX 원칙을 전제로 하며, 이를 상호참고하여 디자인 가이드를 산출하였습니다.


먼저 엑셈 디자인의 기본을 이루는 4가지 대원칙을 소개해 드리겠습니다.


4가지 엑셈 디자인 원칙


일관성

"늘 엑셈의 톤과 매너로 브랜드의 핵심 가치를 전달합니다."

이를 통해 제품 디자인 사용성을 높이며, 사용자가 새로운 것을 받아들이는 데에 도움을 드립니다.


사용자중심

고객, 사용자가 필요로 하는 것을 우선시합니다.

높은 수준의 접근성, 정직성 및 사용자 편의를 위한 디자인에 전념합니다.


집중

필요할 때 필요한 것을 제공하기 위해 노력합니다.

높은 수준의 접근성, 정직성 및 사용자 편의를 위한 디자인에 전념합니다.


은유

사람들은 익숙한 경험을 떠올릴 때 더 빨리 배웁니다.

물리적인 화면에서 은유를 통해 자연스럽게 제품을 경험하게 됩니다.



사용자를 돕는 20가지 UX 법칙



다음으로 사용자의 심리를 돕는 20가지 UX 법칙입니다. 이는 특수한 상황에만 적용되는 것이 아닌, 보편타당한 법칙이며, 엑셈 디자인 사고방식의 근거가 됩니다. 


앞서 말씀드린 4가지 원칙이 엑셈의 디자인 그 자체를 이야기한다면, 20가지 UX 법칙은 엑셈의 제품을 이용할 사용자를 이야기한다고 볼 수 있습니다. 



EXEM Design Guide


엑셈 디자인 가이드


앞서 소개해 드린 EXEM Design Principle을 근거로, 엑셈 디자이너들이 실제 제품디자인을 진행하며 필요로 했던 구성요소들을 분류하게 됩니다. 구성요소들의 그룹핑은 화면의 중요도, 표현 빈도에 따라 탈락하거나 다른 요소에 묶이기도 하며 유동적인 움직임으로 진행됩니다. 각 요소는 어떤 방식으로 디자인 해야 하는지부터, 정확한 표현을 위한 수치에 대한 가이드로 내용을 이루게 됩니다. 이로써 EXEM Design Guide를 완성합니다.


엑셈 디자인 가이드 Windows & Views : Alert Anatomy


EXEM Design Guide 구성 기준 중 하나인 Windows & Views Alert 가이드입니다. 위처럼 각 기준은 어느 누가 작업을 하더라도, 참고될 수 있도록 상세한 가이드를 포함합니다. 이는 작업자의 업무를 원할히 하는데 도움을 주기도 하지만, 궁극적으로 제품의 일관성을 유지하는데에도 목적이 있습니다.



CloudMOA 엑셈 디자인 가이드 적용 전/후


효과

EXEM Design Principle / Guide를 적용한 후 엑셈의 디자이너들은 여러 가지 변화를 느낄 수 있었습니다.

간단하게 QTCS 관점에서 살펴보자면, 아래와 같은 결론을 얻을 수 있었습니다.


Quality - 결과물 자체의 퀄리티를 향상할 수 있는 기회를 얻게 되었고,

Time - 설계와 디자인 수정 이슈의 최소화로 작업시간 단축이 일어났습니다.

Cost - 디자인 가이드를 기반으로 한 디자인 자산을 보유하게 되어 시각화 효율의 상승이 있었습니다.

Service - 보다 안정적인 계획에서 디자인 시안과 데이터를 전달할 수 있게 됩니다.


현재 엑셈의 제품을 포함하는 전 세계의 제품개발 환경은 점점 더 복잡하고 다양해지고 있으며, 그 개발 사이클도 빨라지는 중입니다. 또한, 그 개발팀의 규모도 커지면서 고객의 기대치도 높아지고 있다고 볼 수 있습니다. 이러한 배경에서 디자인 원칙/가이드/시스템은 한사람이 한 것처럼, 만들어둔 디자인 자산을 모든 사람이 공유해서 사용할 수 있도록 합니다. 가장 중요한 것은 



"Wow 한 아이디어, 퀄리티에 집중할 수 있는 시간을 마련"



혁신적 아이디어에 집중할 기회를 마련함으로써 기민하게 움직이고, 빠르게 프로토타입을 제작해야 하는 현재 환경에 적절하다는 것입니다.



EXEM Design Principle / Guide는 현재 제품에 필요한 내용을 모두 담고 있으므로 v1.0으로 공개되었습니다. 하지만 계속해서 내용을 보충하고, 수정 포인트를 점검해야 하기에 현재도 진행 중입니다. 이에 따르는 업데이트도 최대한의 테스트와 합의를 거치고 있습니다. 원칙과 그 개념들은 이용자에게 추상, 포괄적으로 다가올 수 있기에, 성급하게 내용을 만들어 간다면 구성원들을 포함하는 고객과 사용자의 신뢰를 잃어버릴 수 있기 때문입니다. 애플과 구글과 같은 거대 기업에서 나오는 시스템들도 오랫동안 원칙을 다듬어가며, 상황과 요구에 따라 그 내용을 수정, 보완하고 있는 모습에서도 그 이유를 유추해볼 수 있습니다.


따라서 엑셈 디자인그룹은 EXEM Design Principle / Guide은 엑셈 제품을 이용하는 모든 고객이 크게 만족할 수 있을 때까지, 신중하게 완성해나갈 계획입니다.



엑셈 디자인 원칙/가이드

발표 키노트 보러 가기








기고 | 디자인그룹 김보명

편집 | 사업기획팀 박예영














댓글