지난 7년간 피플펀드는 누적 취급액 기준으로 100배 이상의 성장을 만들어냈습니다. 빠른 성장의 파도 속에서도 좋은 서비스를 제공하기 위해 노력한 결과, 피플펀드는 기존 비은행권에서 경험하기 어려웠던 유연한 UI/UX로 고객분들께 편리한 서비스를 제공할 수 있었습니다.
물론 아쉬움도 있었습니다. 많은 프로젝트가 동시다발적으로 진행되다 보니 종종 ‘최고’의 선택보다 ‘최선’을 선택해야 하는 때를 마주할 수밖에 없었고, 이는 항상 아쉬움을 남겨왔습니다.
하지만 모든 문제에는 해결책이 있는 법! 제한된 시간 속에서도 최고의 고객 경험을 구현하기 위해, 디자인 그룹은 불필요한 과정을 줄이고 중요한 일에 시간과 리소스를 더 집중할 필요가 있다고 느꼈습니다. 바로 디자인 시스템 구축을 통해서 말이죠.
피플펀드의 디자인 시스템이 어떤 역할을 하길래 디자이너들에게 고민할 시간을 선물해준 걸까요? 디자인 시스템은 디자이너, 그리고 서비스를 이용하는 고객에게 어떤 의미를 가질까요? 디자인 시스템이 필요했던 이유부터 만들어 간 과정, 그 결과까지 모두 담아봤습니다.
디자인 시스템이 필요한 이유: 같은 관점에서, 좀 더 빠르게, 본질에 집중하기
디자인 시스템 구축 전 상황을 되돌아 보면, 우리에겐 개선해야 할 두 가지 문제가 있었습니다. 첫 번째는 프로토타입 제작 시간이 전체 작업에서 차지하는 비중이 높다는 것이었고, 두 번째는 효율적인 커뮤니케이션을 위한 공동의 이해와 약속이 부족하다는 점이었죠.
먼저 아이디어를 시각화하는 프로토타입 제작 과정에서 작업적 비효율이 발생했는데요. 대표적으로 프로덕트 디자이너는 같은 유형의 컴포넌트를 만들 때에도 해당 컴포넌트를 일일이 손수 그려야 했기에 작업에 오랜 시간이 소요됐습니다.
일반적으로 하나의 고객 플로우가 만들어지기 까지 수십 번 이상의 프로토타입을 구현해 테스트 해본다는 점을 고려할 때, 컴포넌트를 손수 그리는 시간을 줄이면 줄일수록 작업 기간이 단축되면서 더 다양한 시도를 할 수 있는 여력이 확보될 수 있다고 판단했습니다.
부서 간 사용 언어와 이해도의 차이 때문에 소통에도 어려움이 많았습니다. 예를 들면, 지금까지는 자신이 담당하는 운영체계에 따라 같은 컴포넌트를 각기 다른 명칭으로 불렸습니다. 같은 컴포넌트인데 iOS 담당자는 모달, 안드로이드 담당자는 얼럿, 혹은 웹 담당자는 팝업라고 불렀던 거죠.
단순 명칭의 차이 뿐만 아니라 서로 이해하고 있는 컴포넌트 특성이 달라 예상 작업 범위이나 스케줄, 심지어 결과까지 예상과 다르기도 했습니다.
디자인 시스템은 프로덕트를 만드는 모두가 지켜야 할 하나의 기준입니다. 우리는 이런 문제들을 해결하기 위해 이 기준을 다시 한번 점검하고 새로운 약속이 필요하다고 느꼈습니다. 그렇게 피플펀드만의 디자인 시스템 Purple이 탄생했어요.
‘명칭은 디자이너들끼리 모여서 결정하면 되는거 아니야?’라고 생각할 수 있지만, 그렇게 단순한 문제는 아닙니다. 디자인 시스템은 브랜드의 룩앤필(Look & Feel)을 형성하는 기본 체계인 만큼, 모든 요소의 도입 기준과 근거가 명확해야 합니다. 동시에 작업의 효율성을 높이기 위한 약속인 만큼 디자이너 뿐만 아니라 PO, 개발자 등 유관 부서의 요구사항을 모두 충족해야 하죠. 특히 조직의 규모가 커질 수록 이해관계자가 그만큼 늘어나기 때문에, 단순 구두 협의로 문제를 해결해나가는데는 한계가 있습니다.
결국 이 과제를 해결하기 위해서는 기존보다 더 명확하고 촘촘한 브랜드 고유의 디자인 원칙과 가이드라인, 그리고 이를 효율적으로 구현할 수 있는 기반이 필요했습니다. 궁극적으로 최적의 UI/UX를 디자인하기 위해서 말이죠. 그렇게 피플펀드만의 디자인 시스템 <Purple>이 탄생했습니다.
피플펀드 디자인 시스템 <Purple>: 모든 것을 재정의하다
디자인 그룹은 가장 먼저 기존에 사용된 컴포넌트와 새롭게 필요한 컴포넌트를 모아 디자인 시스템 구조를 설계했습니다.
브랜드의 톤앤매너에 맞는 UI/UX 표준화 체계를 수립하며 제품의 기본이 되는 파운데이션과 현재 사용되고 있는 모든 컴포넌트의 규격을 운영 체제, 서비스 및 개발적 특성을 반영하여 다시 정의했고, 각 요소들의 활용 방식에 대한 가이드라인을 문서화했습니다.
이때 가장 중요하게 고려했던 점은 ‘어떤 디자이너가 작업을 하더라도 일관된 제품을 만들 수 있는가?’였습니다.
서비스가 성장하고 확장할수록 다양한 고객 여정이 만들어지는데, 이때 시스템을 통해 일관된 고객 경험을 주는 것은 좋은 브랜드라면 반드시 갖춰야 할 역량이라고 봤기 때문입니다. 이런 이유로 디자인 그룹은 다양한 관점과 케이스를 검토하며 시스템의 완성도를 높이기 위해 끊임없이 소통하고 고민해나갔습니다.
컬러, 폰트, 레이아웃, 그래픽 등의 디자인 에셋 고도화 작업도 진행했습니다. 파운데이션 내의 요소인 컬러, 타이포그라피, 레이아웃, 그래픽 등을 점검하고 업그레이드 시킨 것이죠. 또 디자인 라이브러리는 OS 체제별 특징을 살리고 작업 관리를 효율화하기 위해 Web, iOS, Android로 구분해 구축했습니다.
세부적인 가이드라인 작업이 끝난 후에는 이를 실제로 반영한 미디어 라이브러리를 생성했습니다.
미디어 라이브러리에 있는 모든 컴포넌트는 세부 규격과 요건에 맞춰 제작되었기 때문에 컴포넌트를 일일이 그릴 필요 없이 클릭 하나로 활용할 수 있게 되어 작업 효율이 획기적으로 상승했습니다. 덕분에 다양한 경우의 수를 시각화해볼 수 있고, 협업할 때에도 아이디어를 바로 적용할 수 있어 커뮤니케이션이 수월해졌죠.
Purple의 세 가지 선물: 시간, 성장, 그리고 팀워크
이렇게 치열한 과정 끝에 탄생한 디자인 시스템 Purple. 피플펀드의 디자이너들은 말해요. 디자인 시스템이 가져온 효과는 단순히 “효율성”뿐만은 아니었다고 말이죠!
어떤 긍정적인 변화가 있었는지 디자인 그룹의 이야기를 직접 들어보았습니다.
첫 번째, 디자인의 본질에 집중할 시간
“더 많은 화면들을 더 빠른 시간 내에 구성할 수 있어요”
혜정 : 예전을 생각하면 디자인 시스템의 중요성을 더욱 체감하는 것 같아요. 주택담보대출 개선 프로젝트를 진행하면서 가심사 결과 페이지를 만들 때가 있었어요. 그 때는 화면 하나를 거의 30번 이상 고친 것 같아요. 디자인 요소의 가이드라인이 명확하지 않았기 때문에 다양한 버전을 만들어보고, 뭐가 나은지 하나하나 비교해야 했거든요. 근데 지금은 디자인 시스템을 통해 더 많은 화면들을 빠른 시간 내에 구성할 수 있어서 효율적으로 일하고 있어요.
“본질에 집중할 수 있는 시간이 생겼어요”
예린 : 디자인 시스템을 새롭게 도입하면서 사용자 경험에 더욱 고민하고 집중할 수 있는 시간이 늘었어요. 기존에는 화면 구성에 많은 시간을 할애했다면, 지금은 더 좋은 사용자 경험과 플로우를 고민하는 것에 집중할 수 있어서 너무 좋아요.
예를 들면, 분산투자 서비스 화면을 구성할 때, 화면에 금액을 먼저 띄워야 소비자가 편하게 서비스를 이용할 수 있을지, 아니면 상품 창을 먼저 띄울지 고민하던 때가 있었어요.
Purple이 생기기 전에는 컴포넌트들을 일일이 그리느라 모든 경우의 수에 대한 플로우를 제작하는데 한계가 있었습니다. 하지만 이제는 여러 가지 버전을 만들어놓고, 고객에게 최선이 무엇일지 깊게 고민하는데 집중하고 있어요.
두 번째, 디자이너의 성장
“디자인 요소들에 대해 더 심도 있게 이해할 수 있게 되었어요.”
재욱 : 디자인 시스템은 사내 디자인 교과서와 같아요. 교과서를 만드는 사람은 그 교과에 대해 가장 잘 알아야 하잖아요. 그래서 디자인 시스템에 들어갈 내용을 정하기 위해 모두가 공부하고 치밀하게 분석했던 것 같아요.
파운데이션 요소 중 하나인 컬러를 정할 때가 하나의 예시였던 것 같아요. 피플펀드의 디자인 컬러를 정할 때, 경쟁사의 사례를 다 찾아보고 현재 우리가 쓰고 있는 컬러에도 수십가지의 시도를 해봤거든요. 컬러뿐만 아니라, 컴포넌트 구조와 사용법에 대해서도 치밀하게 연구했어요.
그러다 보니 디자인 그룹 구성원 모두 디자인 컴포넌트에 대한 이해도가 훨씬 높아졌어요. 또한, 디자인의 원리와 기본 요소의 중요성을 알게 된 것 같아요.
“근거 있는 디자인의 기반을 다질 수 있었어요.”
범준 : 건물도 외관만 화려하고 기반이 약하면 잘 지어졌다고 할 수 없잖아요. 디자인도 마찬가지라고 봐요. 디자인을 할 때 심미적인 부분도 중요하지만, 기반이 탄탄하도록 근거 있는 디자인을 하는 게 가장 중요하다고 생각해요.
UX의 기반이 되는 디자인 시스템 역시 이러한 이유로 모든 요소들이 근거를 가지고 만들어졌으면 했어요. 컴포넌트별로 왜 이렇게 디자인해야 하는지 팀원들과 함께 고민하는 시간을 지나 결과적으로 요소들 하나하나 근거 있는 디자인 시스템이 만들어진 것 같아서 아주 만족해요.
디자인 시스템에 대한 전사 발표 세션이 있었는데 이때 큰 무리없이 준비할 수 있었던 이유도 애초에 꽤 체계적으로 설계했기 때문이에요. 디자이너로서 상당히 뿌듯하죠. (웃음)
세 번째, 더 단단해진 팀워크
“자유로운 토론 문화가 만들어져서 너무 좋았어요.”
재욱 : 디자인 시스템을 만들면서 자유로운 토론 문화가 만들어져서 좋았어요. 한창 논의가 많이 이루어질 때는 거의 하루에 서너시간씩 모여서 이야기를 나눴어요. 각자가 작업해온 화면에 대해 이야기하는데, 처음엔 이야기하면서 감정이 들어갔죠. 열심히 준비해왔는데 누군가 그걸 비판하면 기분이 나쁠 수 있잖아요.
근데 시간이 지나면서 서로에게 도움이 되는 피드백을 줄 수 있는 문화가 생기게 된 것 같아요. 수평적으로 소통하고 토론할 수 있는 문화를 통해 서로 영향을 미치며 시너지 효과를 얻을 수 있게 된 듯 합니다.
“다른 그룹과의 팀워크도 훨씬 견고해졌어요.”
지혜 : 디자인 시스템을 만드는 일은 디자이너만 참여하는게 아니에요. 디자이너가 디자인을 하면 개발자가 그 디자인을 기술적으로 구현하고, 그 사이에서 PO가 과정을 조율해요.
디자인 시스템을 업데이트하기 전에는 그룹 간의 커뮤니케이션에 아쉬운 점이 많았어요. 일단 각 컴포넌트에 대해 부르는 명칭도 제각각이어서 혼란스럽기도 했고, 디자이너가 화면을 구성할 때 그것이 기술적으로 구현 가능한지도 확신할 수 없었어요.
이런 점들을 같이 논의하고 결정하는 과정에서 서로 작업하는 방식을 이해할 수 있었어요. 앞으로의 협업이 더욱 기대됩니다!
<Purple>은 오늘도 진화한다
디자인 시스템에는 완성이 없습니다. 상황이 변해서 디자인에 대한 새로운 약속이 필요해지면, 계속해서 디자인 시스템을 업데이트해야 할 테니까요.
그러기 위해서는 프로덕트 디자이너 뿐만 아니라 제품을 만드는 수많은 사람들이 합의할 수 있는 프로세스가 필요합니다. 디자인 그룹은 개선이 필요한 컴포넌트들에 대해 디자인 시스템의 버전 노트를 만들어 관리하고, 제품본부의 구성원들과 주기적으로 미팅을 하며 디자인 시스템에 필요한 변화를 논의해가고 있어요.
앞으로도 이런 고민과 노력이 제품에 잘 담겨 피플펀드 프로덕트는 더더욱 쉽고 편리하고 매력적으로 변신할 예정입니다. 지금보다도 더 근사해질 피플펀드의 프로덕트의 모습, 계속 지켜봐주세요!
edited by Jiwoo
photographed by Hyunki
