5년 동안 어떻게 우리의 디자인 시스템을 키워왔을까 1
프랑스 은행 소시에떼 제네랄의 디자이너와 개발자 이야기
이 글은 나와 함께 일하고 있는 UX 디자이너인 루이로랑의 미디엄 글을 번역한 것이다. 최근 들어 많은 관심을 받고 있는 디자인 시스템을 5년 전에 우리 팀은 어떻게 시작했고 성장시켜 왔는지에 관한 이야기다.
우리 회사에는 디자인 시스템 팀이 따로 있지 않다.
하지만 이 글을 쓴 루이로랑과 비주얼 아이덴티티를 디렉팅 하는 루카스를 필두로, 최근엔 루이로랑 대신 헨리를 포함, 우리 UX 디자인 팀 전체가 디자인 시스템의 성장에 기여하고 있다.
최근 디자인 시스템을 주제로 한 강연, 글, 케이스 스터디 등이 세계적으로 많아지고 있다. 여기서도 디자인 시스템에 대한 관심은 매우 높다. 그렇다면 소시에떼 제네랄의 유엑스 팀에선 어떻게 디자인 시스템을 실험하고 발전해왔을까. 특히나 이러한 디자인 프레임워크를 비즈니스에 적용하는 과정에 관심이 많은 나로서는 디자인 시스템을 함께 만들어가고 있다는 데에 큰 자부심을 가지고 있다.
디자인 시스템은 디자이너와 개발자가 조화롭게 일할 수 있도록 해주는 소통 언어이기 때문에 이 글은 동료인 리드 프런트엔드 개발자, 파비앙과 함께 썼다. 지금부터 우리 디자인 시스템의 탄생부터 성장 과정, 그리고 우리가 겪은 경험을 나누고자 한다. 우리와 비슷한 여정을 걸으려는 누군가에게 도움이 되었으면 하는 바람에서.
SG 디자인 시스템의 탄생과 성장
SG Design System — simplified timeline소시에떼 제네랄에선 2014년부터 현 디자인 시스템의 초석인 컴포넌트 라이브러리의 디자인 파일과 코드를 공유하기 시작했다. 그 당시 이를 시작하게 된 목적은 SG의 B2B 금융 서비스들을 모아둔 SG Markets 플랫폼 안에 수많은 서비스들이 가지고 있는 사용자 경험을 일관적으로 통합하기 위해서였다.
이를 위해서는 일반적인 금융 서비스 인터페이스에서 사용자들이 어떻게 행동하고 있는지 이해해야 했다. 또한 그들에게 가장 편하고 쉬운 컴포넌트를 디자인하고 계속해서 테스트해야 했다. 몇 년에 거친 이러한 과정을 통해 디자인 시스템의 기초를 다지게 되었다.
2017년부터는 더 깊게 이 주제에 대해 들어가 보기 시작했다. 수많은 토론을 거쳐 우리에게 가장 중요한 원칙과 가이드라인을 결정하고 이를 구체적으로 정의하였다. 그리고 기존의 컴포넌트를 하나하나 리디자인하기 시작했다. 사용성과 접근성(Accessibility)을 고려하여 디자인하였고, 계속해서 iteration을 거쳤다. 앞서 언급했듯이 팀원 모두가 이 과정에 참여하였다.
첫 버전이 완성되자 우리는 실제 프로젝트 중에서 얼리버드가 되어줄 프로젝트들을 모집했다. 그저 비주얼이 멋있거나 다양한 컴포넌트를 제공하는 정도에 그칠 수 없었다. 우린 얼리버드 프로젝트에 디자인 시스템을 입혀보고, 계속해서 보완해 나갔다. 그렇게 우리는 세계적으로 750개가 넘는 B2B와 B2E (Business-to-Employee) 프로젝트들에 폭넓게 적용될 수 있는 확장 가능한 (scalable) 디자인 시스템을 구축하기 시작했다.
잠깐, 처음으로 다시 돌아가 우리가 어떤 단계들을 거쳤는지, 그리고 어떤 툴들을 활용했는지 좀 더 자세히 설명하고자 한다.
과거를 기반으로 하여 다시 구축한 디자인 시스템
디자인 시스템을 만드는 것도 큰 일이지만, 이를 회사 차원에서 받아들이게 하는 것은 또 다른 문제다. 그러기 위해서는 현재 회사에서 이미 적용되고 있는 것은 무엇인지, 그리고 어느 정도까지 이를 받아들일지 파악하는 것이 중요하다.
처음 SG Markets의 서비스들의 디자인되었을 때에 우린 부트스트랩 3 프레임워크를 사용하여 오픈 커뮤니티의 오픈 소스들을 활용하고자 했다. 우리들은 처음부터 다 만들지 않고, 오픈 소스를 응용했다. 그러다 보니 자연스레 기술의 발전을 따라 부트스트랩 프레임워크를 활용해왔다. 특히나 부트스트랩 4 버전이 나오면서 핵심 디자인 컴포턴트 라이브러리, scss 변수들을 이용할 수 있었고, 수많은 accessibility 이슈들이 개선되었다.
Table of SCSS variables우리의 첫 단계는 이 프레임워크 라이브러리가 어떻게 작동하는지 이해하는 것이었다. 우리는 1000개가 넘는 scss 변수들을 다 나열한 엑셀 파일을 만들었고 어떤 변수들을 우리에 맞게 커스텀할지 파악하기 시작했다.
그 후, 우리의 니즈에 맞게 변수를 추가하고 수정하는 과정을 거쳤다. 그 결과가 SG 부트스트랩 4 (“SGBS4”)이자 우리만의 아트 디렉팅이 각 컴포넌트들에 적용된 프레임워크다. 앞서 언급한 것처럼 기존 프로젝트들이 부트스트랩 3 프레임워크를 사용하고 있었기 때문에 상대적으로 적은 비용과 시간을 들여서 전환할 수 있었다.
SG 디자인 시스템의 기초
기술적인 프레임워크를 통일성 있게 적용하고 나서, 우리의 디자인 시스템의 전반적인 컨셉을 드러내는 명확한 원칙을 아트 디렉팅을 통해 시각화했다. 그중에서도 가장 중심이 되는 내용들을 가이드라인을 통해 정의하였다.
Timeless typefaces, dynamic typesetting and strong visual hierarchy
이는 우리가 추구하는 디자인 시스템의 아트 디렉팅 컨셉이다.
타이포그래피
대부분 우리 서비스를 이루고 있는 컨텐츠의 90 퍼센트는 활자다. 그래서 우리는 타이포그래피를 우리 디자인 시스템 컨셉에서 매우 중요한 요소로 보았다.
공간
균형 잡힌 레이아웃과 컨텐츠의 상하구조를 위해 우리는 마진, 패딩, 네거티브 패딩의 비율을 계산하고 최적의 비율로 세팅하였다.
톤
우리의 선택은 스위스 그래픽 디자인에 꽤나 큰 영향을 받았고, 더하여 금융 업계의 에센스도 고려하였다.
디자인 시스템을 구축하는 초반 단계에선 코어 가이드라인에 많은 시간을 투자했다. 이것들이 확실하게 정해졌을 때 오히려 확장 가능한 다른 컴포넌트들은 더 쉽게 정의될 수 있었다. 오늘날, 우리 디자인 시스템에 새로운 것을 더하거나 수정하거나 발전할 때에 이 코어에 맞는지를 꼭 확인하고 진행하고 있다.
지금까지 우리 팀의 SG 디자인 시스템이 어떻게 시작되었는지 그 코어는 무엇인지 살펴봤다. 다음 글에는 이를 이루고 있는 3가지 빌딩 블록들에 대해 더 자세히 나누고자 한다. 또한 이 디자인 시스템이실제 금융 비즈니스 프로젝트들에 어떻게 적용되고 있는지, 이를 거친 수정 보완의 과정까지 차차 공유해 보려고 한다.
우리 팀에 대해 궁금하시다면
여기를 참고하시거나 댓글로 문의해주세요 :)
