ProtoPie의 새로운 디자인 시스템
ProtoPie 에코시스템 전반에 걸쳐 언어와 시각적 일관성을 공유하는 새로운 ProtoPie 디자인 시스템을 소개합니다.
지난 10월 릴리즈 된 ProtoPie의 6.0 업데이트에서는 눈에 띄는 대규모의 변화가 있었습니다. 대시보드나 탭 같은 기능상의 변화도 있었지만, 시각적인 부분에 대한 개편 또한 같이 이루어졌죠. 조금 더 견고한 브랜드와 사용자 경험을 만드는 것에 집중하기 위해 구축된 ProtoPie의 디자인 시스템 덕분이었는데요. 이번 블로그에서는 그 비하인드 스토리를 나누려고 합니다.
How we started
ProtoPie는 저작을 위한 스튜디오 앱, 미러링을 위한 플레이어 앱, 저장 및 공유를 위한 클라우드 등 여러 가지 제품을 가지고 있습니다. 우리의 유저는 프로젝트를 수행하는 과정에서 이런 제품들을 동시다발적으로 사용하게 됩니다.
기존 유저가 웹사이트→ 스튜디오 → 플레이어→ 클라우드 순으로 우리 제품을 이용할 때 만났던 화면들그러나 각 제품은 아이콘이나 컬러처럼 시각적인 요소부터 사용자 경험까지 규칙 없이 제각각으로 업데이트되며 유저들에게 혼란스러운 제품 사용 경험을 주고 있었습니다. 예를 들어 유저가 여러 제품을 넘나드는 과정에서 Primary color가 계속 인디고에서 코랄로, 다시 인디고로 바뀌었고 유저는 혼란을 느낄 수밖에 없었죠. 우리는 이런 문제점을 인식하고 다양한 제품을 아우르는 공통의 규칙을 디자인 시스템을 통해 만들고자 하였습니다.
The most important thing - Design Principle
시작하며 브랜드 디자이너와 제품 디자이너가 모두 모여 'ProtoPie 디자인의 본질적인 핵심 가치는 무엇이며 어떤 디자인 원칙을 공유해야 할까?'를 고민하는 시간을 가졌습니다. 제각기 다른 곳을 바라보고 있던 디자이너들의 지향점을 하나로 통일하여 일관성 있는 의사 결정을 할 수 있는 환경을 만드는 것이 가장 우선적으로 필요하다고 생각했기 때문입니다.
러프하게 각자가 생각하는 키워드를 던지는 것으로 시작하여 우리가 어떤 서비스가 되어야 하는지, 유저에게 어떤 가치를 주어야 하는지 탐색했습니다.
이런 과정을 통해 최종적으로 위의 세 가지 키워드로 정제할 수 있었는데요. 각 키워드를 관통하는 핵심 가치는 결국 You(User)와 Your ideas(User's idea)로 이어진다는 공감대를 형성할 수 있었습니다. ProtoPie는 생산성 툴이기 때문에 우리에겐 무엇보다도 유저의 아이디어를 빛내주고, 유저의 생산성을 높여주며, 유저를 더 행복하게 만들어줄 제품을 만드는 것이 가장 중요하다는 것이지요.
Design Foundations
우리는 가장 작은 요소부터 시작해서 결합하여 확장해나간다는 Atomic Design System의 개념을 받아들이고, 근본이 되는 작은 디자인 요소부터 정의해나가기 시작했습니다. 가장 기본적이지만 가장 중요한 단계로서 추후 컴포넌트로 발전시키기 위한 토대를 만드는 작업이었습니다.
여기에는 Iconography, Color, Typography, Layout, Shadow, Radius까지 총 6가지 항목이 포함되어 있습니다. 각 요소마다 직/간접적으로 제품 원칙을 녹여내고자 했으며 그 고민이 담겨있는 과정을 조금 더 상세하게 공유하겠습니다.
Color
코랄과 인디고, 두 가지로 사용되는 컬러를 하나의 프라이머리 컬러로 통합하는 것은 가장 중요한 과제이며 동시에 가장 어려운 과제였습니다. 기존에 빌드해왔던 ProtoPie의 브랜드를 이어나가면서 제품에 적합한 색상을 선정해야 했죠. 로고 컬러인 코랄을 제품에도 그대로 적용하면 우리의 브랜드를 더 잘 보여줄 수는 있었겠지만, UI에서는 Warning, Danger의 역할과 겹칠 수 있기 때문에 기능에 대한 오해를 불러일으킬 수도 있었습니다.
우리는 기존의 브랜드 컬러와 너무 동떨어져 있지 않으며 일반적으로 Mutual 하게 받아들여지는 Purple을 프라이머리 컬러로 채택했습니다. 또 제품 내에 전반적으로 사용되고 있던 블루 그레이 컬러를 뉴트럴 그레이 컬러로 변경하여 유저의 작업물을 시각적으로 왜곡하거나 방해하지 않고 '유저의 아이디어가 더 빛나게 한다'라는 원칙을 지키고자 했습니다.
새로운 Theme을 추가한 것은 다양한 환경에 놓여있는 유저들에게 각자 가장 편안하게 작업할 수 있는 환경을 지원해주고 싶었기 때문입니다. 이제 우리의 유저들은 두 가지의 theme 중 상황에 맞게 혹은 선호에 맞게 theme을 선택할 수 있습니다.
각 theme에는 같은 컬러라도 Subtle 하게 다른 두 가지의 컬러가 pair로 지정되어 있습니다. 예를 들어 프라이머리 컬러인 Purple은 Dark theme에선 Light theme에 비해 조금 더 어둡고 채도가 높은 컬러로 변경됩니다. 이런 방식으로 theme 별 가독성까지 고려했습니다.
일방향적이지 않고 제품과 사용자 간 상호작용이 이루어지는 digital 환경에서는 변화하는 상태를 일관성 있게 보여주는 것 또한 매우 중요합니다. 기존에 각기 달랐던 상태 변화에 대한 규칙도 정리해서 통합해나가고 있습니다.
Icon
새로운 아이콘은 로고 타입의 볼드하고 기하학적인 형태와 잘 어울리는 쉐입으로 제품 간 각기 달랐던 스타일을 통합합니다. 또 기존 아이콘은 모바일 서비스 제작자인 유저의 관점을 중심으로 제작되어 있었는데요. 모바일뿐만 아니라 오토모티브, 워치 등 다양한 산업 영역에 분포하는 우리 유저들이 모두 직관적으로 이해할 수 있는 보편적인 쉐입으로 제작하는 것에 주의를 기울였습니다.
사이즈가 작아지더라도 어떤 의미를 내포하는지 잘 구분되도록 각각의 아이콘이 명확한 실루엣을 가질 수 있게 했습니다. 또 복잡한 개념을 아이콘에 담아야 할 일이 잦은 ProtoPie의 특성상 투톤 스타일을 통해 중요한 부분과 보조하는 부분 혹은 인터랙션을 주는 부분과 받는 부분 등으로 분리하여 아이콘이 설명하고자 하는 개념 혹은 기능에 대한 인지도를 높일 수 있었습니다.
같은 의미이지만 다른 형태를 가지고 있던 아이콘들은 통합하여 중복을 제거하는 반면, 상태에 따라 형태가 달라질 때 더 의미 전달이 직관적이라고 판단되는 아이콘들은 형태를 분리하여 사용성을 높였습니다.
Typography
ProtoPie의 대표 폰트로 사용되는 'Gilroy'는 우리 브랜드의 특색을 드러내기 좋은 아름답고 완성도 높은 폰트이지만, 캐릭터가 강하기 때문에 스튜디오같이 유저가 그들의 작업물을 저작하는 환경에서는 유저의 디자인과 부딪힐 염려가 있었습니다.
이를 보완하기 위하여 컴퓨터 스크린을 위해 제작된 캐릭터가 강하지 않고 가독성 높은 폰트인 'Inter'를 서브 폰트로 채택했습니다. 브랜드가 잘 드러나야 하는 타이틀 영역 같은 부분 외에는 'inter'를 서비스 전반에 적용하여 유저들이 그들의 작업물에 온전히 집중할 수 있는 환경을 갖춰 주었습니다. 여기에 코드를 위한 폰트까지 총 세 가지의 폰트가 각각의 목적에 맞게 사용되고 있습니다.
또 맥시멈과 미니멈 사이즈를 제한하여 일정 이상의 readability를 보장할 수 있도록 했습니다.
Layout
레이아웃은 유저의 콘텐츠 몰입도를 높일 수 있는 방향으로 가이드라인을 만들었습니다. 한 행에 몇 개의 콘텐츠 이하로 유지되어야 주의가 분산되지 않고 원하는 것을 쉽게 찾을 수 있는지, 또 각 아이템의 크기는 어느 정도 일 때 정보에 대한 몰입도가 올라가는지 고려했습니다.
여러 가지 제품을 넘나들 때도 하나의 연속적인 경험으로 느껴질 수 있게끔 모든 제품이 공유할 수 있는 Breakpoint를 설정했습니다. 이를 토대로 웹사이트처럼 차차 클라우드나 스튜디오에도 반응형 디자인이 적용될 것입니다.
Making a Consensus
이러한 내용을 디자이너뿐만 아니라 디자인 시스템을 처음 접하는 엔지니어 등 다른 직군도 이해할 수 있도록 문서화하여 주기적인 공유를 하고 있습니다. 각 요소에 대한 원론적인 설명부터 우리가 어떤 이유로 이런 스타일을 채택하였고, 앞으로 어떻게 생산하고 확장해나갈 수 있는지 상세하게 담은 가이드라인은 우리 디자인에 대한 메이커 간의 공감대를 높이고 앞서 제정했던 디자인 원칙을 공고히 할 수 있게 도와주고 있습니다.
6.0 and our next step
6.0 이후로, 우리는 유저가 ProtoPie의 여러 제품을 이동하며 사용하는 과정에서도 혼란 없이 하나의 브랜드를 경험할 수 있을 것이라고 믿습니다. 우리가 보여주려 했던 디자인의 가치가 유저들에게도 잘 전달되었길 바랍니다.
사실 일관성을 갖추는 것은 시작에 불과합니다. 시스템화 된 디자인 요소들은 Micro Decisions를 생략시키고 우리가 조금 더 기민하게 제품 문제에 집중할 수 있게 돕고 있습니다. 즉 우리는 변화를 위한 추진력을 얻고 있습니다. 유저들에게 더욱더 행복한 경험을 주는 제품으로 성장해나갈 ProtoPie의 변화를 기대해주세요!
