B2B에서의 디자인 시스템
보기좋은 디자인이 아닌 비즈니스에 임팩트를 주는 디자인
B2B에 왠 디자인인가
요즘에는 B2B 영역과 그와 관련한 디자인 분야가 마치 블루오션인 것처럼 주목을 받는 일이 종종 있지만, 사실 이와 관련한 일들이 실제로 어떻게 돌아가는지 아는 사람은 업계에서도 그리 많지 않다. 심지어 해당 B2B 분야에 종사하는 사람들도 모르는 일이 흔하다. 나 역시도 디자인 관련한 부분만 어렴풋하게 개념을 잡는 정도지, 비즈니스 자체가 어떤 식으로 정교하게 굴러가는지까지는 잘 모른다. 다만 '어떤 식으로든 비즈니스에 지속적으로 도움을 주고 있겠지'라는 팀 레벨의 신뢰와 믿음을 바탕으로 프로젝트를 진행할 뿐이다.
B2B 영역은 디자인 분야로 치면 레드오션에 가까웠다. 디자인이라는 학문과 산업의 속성상 '눈에 띄게 보여야' 그 역할을 다 하는 경우가 많은데, 회사 간의 비즈니스에서 오고 가는 제품이나 서비스는 최종 소비자의 눈에 '보일 기회'가 없기 때문에, 디자인에 대한 유무형의 투자가 이루어지지 않고 뭐든 적당하게 만들어지는 경우가 많았다.
하지만, 최종 소비자를 상대로 하는 많은 B2C회사들이 디자인에 점차 많은 투자를 하면서 실제적인 효과를 보기 시작했고, 디자인에 대한 효용성이 크게 이슈화되기 시작하면서 디자인의 역할에 대해서도 많은 논의가 생기기 시작했다. 이맘때부터 디자인의 '심미성' 보다는 '사용자 경험', '프로세스'에 좀 더 가치를 부여하기 시작했던 것 같다. 아마도 UI/UX 디자인 관련한 분야의 용어나 글들도 많이 접하게 된 시기였던 것 같고.
간단하게 말하자면, 좋은 UX(User Experience, 사용자 경험) 디자인을 가지고 있는 제품들이 소비자들로부터 좋은 평가를 받고, 궁극적으로는 회사의 이익에 기여함이 커지게 되었다. 그러다 보니 소비자에게 좋은 제품을 선보이기 위해서 제품을 만들어내는 회사 내의 사람들의 생산성도 좋아야 하는 단계가 온 것이고, 그 생산성에 직접적으로 관여하는 시스템을 만드는 B2B 디자인에 요즘 많은 시선이 쏠리기 시작하는 것 같다.
디자인 시스템
사실 디자인 시스템에 대한 개념은 새로운 일이 아니다. 1990년대 후반~2000년대 초중반 '디자인 표준화'라는 개념으로 회사 내의 생산성을 극대화시키기 위해 불필요한 부분들을 없애고 여러 플랫폼에서 공용할 수 있는 부분을 늘림으로써 효율성을 높이는 시도가 많이 있었다. 다만 그때는 하드웨어적인 부분들이 주를 이루었다면, 지금은 소프트웨어 부분에서의 효율성을 늘리는 시도가 다른 점이다.
예전과 또 다른 점은, 디자인 시스템은 효율성에만 집착하는 것이 아니라, 브랜드에 대한 이미지, 총체적인 경험을 만들어내는 거대한 언어이다. 이 부분은 디자인 아이덴티티(Design Identity)와 헷갈릴 수도 있는데, 간단하게 정리하자면,
디자인 아이덴티티는 브랜드가 나가야 할 방향을 보여주는 것이고,
디자인 시스템은 그것을 구현해나가는 실제적인 디자인과
개발과정까지도 시스템화 시킨 것.
-이라고 정의할 수 있겠다.
UBER의 디자인 컨텐츠 홈페이지 (https://www.uber.design)
Airbnb의 디자인 컨텐츠 홈페이지 (https://airbnb.design). 디자인 시스템 뿐만 아니라 회사가 추구하는 방향의 컨텐츠를 지속적으로 담아낸다.결국 잘 만들어진 디자인 시스템을 보유하고 있는 회사는 브랜딩의 관점에서 뿐만 아니라, 디자인 업무의 효율성, 효과적인 비즈니스 측면에서도 플러스 효과가 생긴다는 의미이다.
B2B를 위한 디자인 시스템
위의 Uber나 Airbnb의 디자인 시스템의 경우에는 자사의 B2C 제품/서비스에* 직접적으로 적용되는 디자인 시스템이다. 그러다 보니 디자인 시스템을 구축 시에 전방위적으로 계획하여 회사 내의 모든 제품에 일괄적으로 적용 가능하도록 할 수 있다. 이는 물론 쉬운 일이 아니지만, 그래도 B2B 비즈니스를 다루는 회사보다는 LOB(Line of Business: LOB is a general term that describes the products or services offered by a business or manufacturer.)의 개수가 적기 때문에 상대적으로 한 번에 급격한 변화를 주는 것이 가능하다. 실제로 Uber와 Airbnb의 디자인 시스템은 '짜잔!' 하고 어느날 공개가 되어 많은 사람들이 관심을 갖게 되었고, 현재 그들이 제공하고 있는 제품/서비스의 거의 모든 디자인 분야에 적용되고 있다.
반면에 B2B 분야에서의 디자인 시스템은 한마디로 느릿느릿한 '진화'라고 할 수 있겠다. 현실적으로 한 번에 모든 분야를 바꿀 수가 없으니 중요도, 긴급성, 그리고 비즈니스에서의 비중을 고려하여 점차적으로 적용범위를 확대해간다. LOB의 분야가 방대하다 보니, 상대적으로 적은 양의 디자인 변화에도 많은 LOB들이 적용을 하게 되면, 비즈니스 전체적으로 큰 임팩트를 미치게 된다. 어떻게보면 적은 변화에도 큰 임팩트를 만들 수 있으니 효과적이라고 말할 수도 있겠다.
* Uber와 Airbnb도 B2B 분야의 비즈니스를 한다. B2B 분야의 비즈니스의 점점 더 커질 것으로 보이긴 하나, 아직은 그 비즈니스 포션이 B2C의 부분 대비 작기 때문에 이렇게 표현한 것.
실제 개발 과정의 예
B2B 디자인 시스템의 실제 디자인 개발 과정을 예로 들어보면 좀 더 이해가 빠를 듯하다. 여기 나오는 순서는 내가 3년간 겪었던 가장 일반적인 프로세스였고, 이 또한 회사마다, 팀마다, 프로젝트마다 다를 수 있겠다.
1. 니즈(Needs) 모으기
디자인 시스템을 구축하기 위한 가장 첫 번째 단계는 '어떤 걸 만들려는 건데? 무얼 더 낫게 바꾸려는 건데?'라는 질문에 답을 할 수 있어야 한다. B2C 비즈니스를 하는 회사의 경우, 자사 제품을 들여다보면 문제점도 나오고 어떻게 디자인 시스템화 시킬 수 있을지 소위 '견적'이 대충 나오는데, B2B 비즈니스의 경우에는 좀 다르다. 일반적인 경우 회사의 이익을 극대화시키기 위해서 전체 매출에서 많은 영역을 차지하고 있는 제품 몇 개를 선정한다. 그리고 그 중에서 디자인 사용성(Usability)이 현저하게 떨어져 있는 제품을 타깃으로 삼고, 그 제품을 사용하고 있는 유저들과 워크샵(혹은 유저 리서치)을 통해서 현재 제품의 문제점, 개선 가능한 지점을 파악한다. 예를 들어, 우리 회사의 Product Management 제품을 10개 회사에서 사용한다면, 그중에서 2~3군데의 회사에서 실제로 그 제품을 사용하는 유저(User)로부터 실제 업무 시 어떤 부분에서 어려움이 발생하는지 의견을 듣는다.
2. 우선순위 정하기
그렇게 해서 여러 가지 어려운 점(User pain-point)들을 파악하면, 제한된 시간, 인력 및 예산으로는 모든 것을 해결하기 어려운 것이 보통이기 때분에, 우선순위를 선정해서 프로젝트에서 해결해야 할 주요 pain-point들을 결정한다. 이 때에는 상황에 따라 여러 가지 메트릭스를 사용할 수 있는데- 프로젝트에 사용되는 리소스, 문제의 긴급성, 제품의 중요도, 회사 매출과의 연계성 등을 다양하게 고려하게 된다.
3-1. 디자인 진행 : Set the stone
문제 해결을 하기로 한 이슈들을 가지고 바로 디자인을 시작하기 전에 가장 먼저 해야 할 일은 기본적인 밑바탕을 탄탄하게 만들어 놓는 일이다. 다양한 글자체에 대한 연구(Type system), 컬러 전략, 사용되는 이미지의 Tone & Manner, 그리드 시스템(Grid system) 등등, 구체적인 UI 요소들을 디자인할 때에 기본적으로 지켜져야 하는 것들이 해당된다. 이것들이 제대로 갖춰지지 않으면 여러 UI 요소들이 하나의 디자인 언어로 묶인 것으로 보이지 않게 되므로 디자인 진행 초반에 가장 공을 들여야 하는 부분이다.
3-2. 디자인 진행 : UI component design
Design foundation의 방향이 정해지면 이제 본격적으로 디자인을 진행해야 하는 단계이다. 디자이너라면 익숙한 디자인 프로세스**의 단계(문제 분석 - 리서치 - 디자인 - 프로토타입 - 테스트)를 거치고 내부 의사결정 시스템을 따라서 디자인을 완료한다. 디자인을 완료하기 전에 수시로 개발팀과 Feasibility(디자인 제안대로 실제 제품이 구현될 수 있는지)를 계속 체크해야 한다. 이후에는 디자인 스펙을 개발팀에게 전달하면 된다. 예전에는 PDF로 하나하나 만들어서 전달했었는데, 요즘에는 Zeplin, Figma와 같은 앱을 사용해서 디자인 스펙을 손쉽게 전달할 수 있어서 무척 편리하다.
** 사실 '디자인 프로세스' 하나만으로도 몇 개의 글이 나올수 있는 주제이지만, 이 글에서 이야기하려는 주제와는 거리가 있으므로 간략하게만 언급하고 넘어간다.
4. 개발 진행
개발이 본격적으로 진행되면 일정 주기로 개발팀이 보내오는 빌드(Build)를(디자인 제안대로 실제로 구현한 시제품) 리뷰하고, 디자인 안과 다른 부분이 있으면 그 간격을 줄이기 위해서 지속적으로 개발팀에서 피드백을 해서 수정하도록 해야 한다. 빌드의 버전 관리를 잘해야 나중에 최종적으로 어떤 빌드가 디자인의 승인을 받게 되는지 명확해진다. 특히 참여하는 개발자가 여러 명 있을 경우 각자 맡은 부분이 다르기 때문에 꼼꼼한 버전 관리가 필수다.
5. 컨텐츠 제작
디자인 단계가 완료되어 개발에 넘기게 되면 디자이너는 관련 컨텐츠 제작을 해야 한다. 디자인 시스템에 관한 컨텐츠는 주로 디자인 가이드라인(웹페이지), 그리고 디자인 템플릿을 제작하는 것이다.
디자인 가이드라인은 제작한 디자인 컴포넌트들을 어떻게 제작하고 어떤 때에 사용하는지에 대한 상세한 안내서와 같다. 가이드라인이 상세하게 잘 정리되어야 제작된 UI 컴포넌트들을 사용하는 고객들(디자이너 및 개발자)이 혼동을 겪지 않는다. 디자인 템플릿은 요즘 주로 Sketch 파일의 형태로 제작된다. 템플릿 안에는 미리 제작된 여러 가지의 디자인 컴포넌트 예제와 함께, 디자인 심볼이 라이브러리로 구성이 되어 있어서 초보자도 쉽게 사용할 수 있다.
6. 배포 및 업데이트
개발 진행이 완료되고, 디자인 컨텐츠도 마무리가 되면 공식 배포를 한다. 앞서 말했듯이 B2B 디자인 시스템은 '진화'에 가까운 형태로 성장해가므로 정해진 분기별로 꾸준히 업데이트를 해야 한다. 따라서 이번 분기의 디자인 시스템 업데이트가 끝나서 배포를 완료하면, 다음 분기에 업데이트할 디자인 토픽들을 백로그에서 선정해서 다음 버전을 준비해야 한다.
디자인시 유의점
디자인 시스템을 구성할 때 늘 염두해야 할 것이 있는데, 바로 확장성(Scalability)이다. 하나의 UI 컴포넌트를 디자인할 때에도 이것이 어떤 edge case(일반적으로 발생하지 않는 드문 사용 상황)가 발생할 수 있는지, 그리고 다른 디자인 요소와 어떻게 연관되어 사용될 수 있는지, 이후 버전이 업그레이드 되었을 때 추가될 수 있는 기능들은 어떤 것들이 있을지 미리 고민해야 좀 더 유연한 디자인 시스템을 구축할 수 있다. 반대로 말하면 확장성이 고려되지 않은 디자인 시스템은 버전이 올라갈 때마다 기존의 것을 새롭게 디자인해야 할 수도 있다. 디자이너는 UI 컴포넌트들이 다양한 상황에서 최대한 유연하게 적용될 수 있도록 고민하며 작업해야 한다.
seh
