ProtoPie 6.0, 2021년 10월에 출시된 이 버전은 사용자들이 크게 반긴 몇 가지 주요 변화를 도입했습니다. 대시보드와 탭처럼 생산성을 높여 주는 기능뿐 아니라, ProtoPie의 외형을 훨씬 더 개선했다고 믿는 여러 시각적 변경 사항도 적용했습니다. 이 모든 변화는 더 견고한 브랜드와 사용자 경험을 제공하기 위해 만들어진 새로운 ProtoPie 디자인 시스템에서 비롯되었습니다. 이러한 변화의 뒷이야기를 살펴보겠습니다.
2021년의 주요 업데이트인 ProtoPie 6.0은 완전히 새로운 외형과 분위기를 도입했습니다.
현실을 마주할 시간
ProtoPie 생태계는 여러 제품으로 구성되어 있습니다. 실제 프로토타이핑을 위한 ProtoPie Studio, 스마트 기기에서 프로토타입을 테스트하는 ProtoPie Player, 그리고 협업과 공유를 위한 ProtoPie Cloud가 그것입니다. 사용자는 프로토타이핑 프로젝트를 진행하는 동안 이 제품들을 오가며 끊임없이 작업합니다.
보시다시피, ProtoPie 생태계를 이루는 다양한 제품들은 예전에는 시각적으로 서로 꽤 달라 보였습니다.
하지만 각 제품은 각자의 방식으로 존재해 왔습니다. 아이콘과 색상 같은 시각적 요소와 UX도 서로 달랐습니다. 그 결과 생태계 전반에서 일관되지 않은 경험을 제공하고 있었습니다. 예를 들어 웹사이트와 ProtoPie Player는 산호색을 기본 색상으로 사용한 반면, ProtoPie Studio와 ProtoPie Cloud는 서로 다른 계열의 인디고 색을 사용했습니다. 이러한 불일치는 사용자에게 혼란스러운 경험을 안겼습니다. 이를 해결하기 위해 우리는 현실을 직시하고 ProtoPie 생태계 전체를 위한 하나의 디자인 시스템을 만들어야 했습니다.
궁극적인 우선순위: 디자인 원칙
우리는 ProtoPie의 브랜드 및 제품 디자이너들을 모두 모아 두 가지 질문을 던졌습니다:
ProtoPie가 핵심적으로 어떤 디자인 가치를 추구해야 할까?
ProtoPie 자신은 어떤 디자인 원칙을 따라야 할까?
적절한 다음 단계를 결정하기 위해, 먼저 서로 다른 의견을 가진 디자이너들이 함께 모여 공통점을 찾을 수 있는 환경이 필요하다는 점을 깨달았습니다.
우리는 공통점을 찾기 위해 모든 아이디어를 한데 모았습니다.
우리는 먼저 떠오르는 관련 키워드들을 모두 모으는 것부터 시작했습니다. 그런 다음 ProtoPie가 어떤 브랜드가 되길 원하는지, 그리고 사용자에게 어떤 가치를 제공하고 싶은지를 탐구했습니다.
이 과정을 통해 위에 보이는 세 가지 키워드로 범위를 좁힐 수 있었습니다. 결국 각 키워드가 공유하는 공통 가치는 당신(사용자)과 당신의 아이디어(사용자의 아이디어)라는 것을 발견했습니다. ProtoPie는 생산성 도구이기 때문에, 우리에게 가장 중요한 것은 사용자의 아이디어를 돋보이게 하고, 생산성을 높이며, 더 행복하게 만드는 제품을 만드는 일입니다.
디자인의 기초
우리는 atomic design 방법론을 따라 과정을 시작했습니다. 이 방법론은 가능한 한 가장 작은 요소에 집중하며 디자인 과정을 시작한 다음, 요소들을 다양한 조합으로 확장해 나가라고 말합니다. 따라서 우리는 전체 디자인 노력의 기반이 될 가장 작은 디자인 요소를 정의하는 것부터 시작했습니다.
우리는 제품 원칙을 각 요소에 직간접적으로 녹여 넣고자 했습니다. 아래에서는 우리의 결정 뒤에 있는 사고 과정을 더 자세히 살펴보겠습니다. ProtoPie Design System을 이루는 4가지 요소인 색상, 아이콘, 타이포그래피, 레이아웃을 살펴보겠습니다.
색상
첫 번째 단계는 산호색과 인디고 두 색을 하나의 기본 색상으로 통합하는 것이었습니다. 쉬워 보일 수 있지만, 놀라울 정도로 복잡했습니다.
초기 브랜드 색상인 산호색을 제품에도 사용한다면 브랜드는 더 눈에 띄게 될 것입니다. 그러나 산호색은 일반적으로 경고나 위험을 연상시킵니다. 따라서 산호색을 기본 색상으로 사용하는 것은 UI 관점에서 오히려 역효과를 낼 수 있습니다.
우리는 새로운 기본 색상으로 보라색을 선택했습니다. 현재 브랜드 색상과 상당히 비슷하면서도 비교적 중립적으로 인식되기 때문입니다. 또한 제품 색상을 파란 회색에서 중립적인 회색으로 변경했는데, 이는 사용자의 아이디어를 방해하지 않으면서 돋보이게 하려는 우리의 목표를 반영합니다.
이 점을 염두에 두고, 라이트 테마와 다크 테마라는 두 가지 새로운 테마도 도입했습니다. 사용자는 만들고자 하는 작업 환경의 유형이나 자신이 가장 편하게 느끼는 방식에 따라 원하는 테마를 선택할 수 있습니다.
우리는 같은 색을 미묘하게 다른 명도로 짝지어 각 테마의 가독성을 극대화하려고 했습니다. 예를 들어 다크 테마에서는 라이트 테마보다 보라색이 약간 더 어둡고 채도가 높다는 점을 눈치챌 수 있을 것입니다.
디지털 환경에서는 제품과 사용자 사이에 양방향 상호작용이 일어나므로, 상태 변화가 어떻게 보이는지 명확하게 시각화하는 것이 중요합니다. 이전에는 ProtoPie 제품 전반의 상태 변화 규칙이 일관되지 않았지만, 이번 업데이트에서는 이를 표준화하고 통합했습니다.
아이콘
우리는 로고 타이포페이스를 보완할 새로운 아이콘 체계를 구축했습니다. 보시다시피 이 아이콘 체계는 대담하고 기하학적이면서도 제품 전반의 서로 다른 스타일을 하나로 통합합니다. 우리는 모바일 앱 디자인을 넘어 자동차와 웨어러블 같은 다양한 제품 영역에서 일하는 폭넓은 사용자들이 직관적으로 이해할 수 있는 보편적인 형태를 만드는 데 특히 신경 썼습니다.
우리는 각 아이콘을 분명한 실루엣으로 제작해 크기와 관계없이 쉽게 구별될 수 있도록 했습니다. ProtoPie 아이콘은 종종 복잡한 메타포를 전달해야 합니다. 그 의미를 직관적으로 전달하기 위해, 주요 부분과 보조 부분을 서로 다른 톤으로 구분하는 투톤 스타일을 사용했습니다.
형태는 다르지만 의미는 같은 아이콘들을 하나로 통합했습니다. 그런 다음 서로 다른 상태를 나타내고 각 상태가 무엇을 의미하는지 직관적으로 전달하기 위해 아이콘 형태 변형을 만들었습니다.
타이포그래피
ProtoPie의 브랜드 서체인 Gilroy는 우리 브랜드 아이덴티티에 잘 어울리는 아름답고 품질이 뛰어난 글꼴입니다. 그러나 강하고 장식적인 특성이 있습니다. 그래서 우리는 불필요한 주목을 끌기보다는 사용자의 프로토타입이 더 돋보이도록 도와줄 다른 보조 글꼴을 찾고자 했습니다.
그래서 우리는 보조 서체로 Inter를 채택했습니다. Rasmus Andersson이 만든 이 글꼴은 컴퓨터 화면을 위해 세심하게 설계된, 가독성이 높고 더 표준적인 서체입니다. 제목 영역에서는 여전히 브랜드 아이덴티티를 두드러지게 보여주고 싶었기 때문에, 그 부분을 제외한 전체 생태계에 Inter를 적용했습니다. 요약하면 ProtoPie 전반에서 총 세 가지 글꼴을 사용합니다. 이는 코드 스니펫용 글꼴을 포함한 모든 디자인 시스템 가이드라인에 기반합니다.
또한 일정 수준의 가독성을 보장하기 위해, 전체적으로 사용되는 글꼴의 최대 및 최소 크기에 대한 제한을 두고 있습니다.
레이아웃
레이아웃 측면에서는 몰입감 있는 사용자 경험을 보장하기 위해 일련의 가이드라인을 마련했습니다. 우리는 한 줄에 들어가는 항목 수와 각 항목의 이상적인 크기를 고려해 사용자 참여를 극대화하고자 했습니다.
또한 모든 제품이 공유할 수 있는 브레이크포인트를 설정해 ProtoPie 생태계 전반에서 하나의 연속된 경험처럼 느껴지도록 했습니다. 웹사이트, ProtoPie Cloud, ProtoPie Studio에 동일한 반응형 디자인을 적용했습니다.
합의 찾기
우리는 디자이너부터 엔지니어에 이르기까지 디자인 시스템 업데이트에 참여한 모든 팀에게 이러한 가이드라인과 변경 사항을 지속적으로 설명했습니다. 질문이나 궁금한 점이 있을 때마다, 우리는 충분한 시간을 들여 우리의 생각을 설명하고 이러한 변화가 사용자에게 어떤 긍정적인 영향을 미칠지 전달했습니다.
요소의 기본부터 각 스타일의 근거, 그리고 디자인 시스템을 더 확장하기 위한 단계에 이르기까지 이러한 가이드라인은 우리 팀 간의 합의를 형성하고 이전에 세워 두었던 디자인 원칙을 더욱 공고히 하는 역할을 합니다.
다음은?
ProtoPie 6.0의 도입은 ProtoPie 생태계 전반에서 사용자에게 더 좋고, 더 일관되며, 더 인지하기 쉬운 경험을 제공했습니다. 우리는 제품에서 전달하고자 하는 디자인 가치가 ProtoPie 사용자들에게 잘 와닿도록 노력하고 있습니다.
하지만 생태계 전반의 일관성을 구축하는 것은 시작에 불과합니다. ProtoPie Design System을 확립함으로써 불필요한 의사결정을 줄이고, 우리는 더 높은 민첩성으로 더 중요한 문제에 집중할 수 있게 되었습니다. 다시 말해, 이러한 변화는 앞으로의 추가 개선을 추진할 동력을 우리에게 제공했습니다. ProtoPie를 여러분 팀에 더욱 효과적이고 즐거운 프로토타이핑 도구로 만들어 줄 더 많은 기능과 개선 사항을 기대해 주세요.
