#디자인시스템 #셀프서비스
2021.10.20
임보영, 이미라, 이윤희
2020년 1분기에 사장님들을 위한 포털인 배민사장님광장의 셀프 서비스(사장님들이 직접 배민 앱에서 가게 설정 등을 수정할 수 있는 서비스) 전면 개편 프로젝트를 진행했습니다. 셀프 서비스를 만들면서 적용했던 디자인 시스템에 관해 개발자 관점에서 이야기를 해보려고 합니다.
디자인 시스템에서 시스템이란 ‘복잡한 사회적 체계의 맥락에서 구조와 행동을 통제하는 규칙들의 집합체’에 가깝습니다. 저희는 단순히 UI/UX 가이드라인이 정의된 UI 템플릿이 아닌, 프로토콜과 같은 매우 강력한 규칙으로 시스템을 만들고 이를 바탕으로 디자인 시스템을 만들었습니다.
셀프 서비스 개편은 50여 페이지, 140여 다이얼로그, 10여 API 호스트, 150여 REST/GraphQL 엔드포인트와의 연결이 되어 있는 작지 않은 프로젝트였습니다. 게다가 다양한 크기의 기기들에 대응하는 반응형 제작도기다리고 있습니다.
거기에 주어진 일정은 2개월, 워킹데이로는 40일이었습니다. 단순히 계산하면 풀타임 프론트엔드 개발자 5명이 하루에 한 페이지씩 만들어야 하는 분량입니다. 하지만 아직 디자인이 나오지 않은 상태였고 QA*를 위한 시간도 미리 확보해야 했습니다. 지면도 많고 복잡도도 높았지만, 정보를 컴포넌트화해서 재사용성을 높이면 더 효율적으로 빠른 시간 안에 개발할 수 있겠다는 생각에 디자인 시스템을 도입하기로 했습니다. 아래는 셀프 서비스 디자인 시스템의 구조입니다.
• 셀프 서비스 디자인 시스템 •
* Quality Assurance. 프로젝트의 기능 검증 및 품질 테스트
코어 컴포넌트
코어 컴포넌트는 대부분 추상 클래스로 구성되어 있으며 이를 상속받아 스택을 쌓아 올리는 구조로 설계되었습니다. 이 중 BaseComponent와 PageContainer를 자세히 살펴보겠습니다.
BaseComponent
BaseComponent는 모든 컴포넌트가 상속받아야 하는 기본 클래스 컴포넌트입니다. 이 컴포넌트는 크게 세 가지 역할을 수행합니다.
첫 번째, 새로운 생명주기를 정의합니다.
두 번째, 이벤트를 자동으로 해제합니다. 컴포넌트가 마운트될 때 하는 다양한 처리 중에는 DOM 요소나 컴포넌트에 이벤트를 설정하는 경우가 있습니다. 이때 설정된 이벤트를 해제해야 하는데 종종 이를 빠뜨릴 때가 있습니다. 이를 방지하고자 on 메서드를 만들었습니다.
마지막으로, 웹 로그 관련된 tracking 멤버 변수가 있으면 자동으로 로그를 전송해줍니다. 이 값을 설정하면 마운트 시 자동으로 서버에 로그를 전송해서 데이터 시각화나 A/B 테스트에 사용할 수 있습니다.
PageContainer
추상 클래스인 BaseComponent를 상속받는 또 다른 추상 클래스로 URL이 있는 모든 페이지가 상속받아야 하는 컴포넌트입니다. PageContainer를 상속받는 컴포넌트는 반드시 해당 페이지의 뷰 로그를 남기도록 추상 변수를 사용해 강제했습니다. 도메인별로 페이지 점검이 이루어질 때 점검 화면을 보여줄 수 있도록 서버 상태를 관리하는 변수도 마련해두었습니다.
코어 라이브러리
CachedEntity
CachedEntity는 서버 사이드에서 많이 쓰이는 캐시 관리 기법이 적용된 추상 클래스입니다. 자주 변하지 않는 데이터의 경우 CachedEntity의 인터페이스에 맞춰서 구현하면 TTL(Time to Live)*이 지원되는 디스크/메모리 캐싱 기능을 사용할 수 있습니다. CachedEntity의 인터페이스를 통해 메모리 캐시 확인, IndexedDB 확인, API 호출 순서로 데이터를 조회합니다. 조회된 데이터는 IndexedDB와 메모리에도 캐시하고 재활용합니다. CachedEntity 자체는 복잡한 구조로 이루어졌지만 실제로 활용할 때는 간단한 코드만으로 복잡한 기능을 동작시킬 수 있습니다.
* 데이터의 유효 기간을 나타내는 방법으로 캐시의 성능이나 프라이버시 수준을 향상시키는 데 사용됨
화면 구성요소
본격적으로 폼 같은 구성요소를 만들고 각 화면에 빠르게 적용했습니다. 단순 UI만을 구현한 컴포넌트가 아닌 컴포넌트 간의 관계를 고려해 다양한 규칙들을 정의했습니다. 그덕분에 화면 구성에 드는 고민 시간을 줄일 수 있었습니다.
이렇게 만든 카드 컴포넌트는 유연하고 확장 가능한 카드 형식의 콘텐츠 컨테이너이며, 선택적으로 추가할 수 있는 카드 헤더와 카드 레이아웃(행/열 정렬) 컴포넌트를 제공합니다. 카드 하위에 있는 아이템들을 재구성해서 노출시키고 있어서 나중에 레이아웃이 변경되더라도 기존 코드들을 수정하지 않고 카드 컴포넌트에서 재조립할 수 있다는 장점이 있습니다.
상속 구조
구성요소를 만들 때 공통적인 부분은 최대한 추상 클래스에 구현해, 비즈니스 로직과 관련된 부분만을 작성하도록 영역을 격리했습니다. Dialog 컴포넌트는 비즈니스 로직이 들어가는 화면에만 집중하도록 만든 대표적인 추상 컴포넌트입니다. 컴포넌트는 상속받는 곳에서 메서드를 오버라이드*해 커스텀이 가능하도록 설계되었습니다.
Dialog 컴포넌트
Dialog 컴포넌트는 정보 또는 경고 메시지를 표시해 사용자에게 보여주는 추상 클래스입니다. 전역 스토어로 관리되며, 화면에 그려주는 부분은 Root Component에서 담당합니다. 모든 다이얼로그는 Dialog 컴포넌트를 상속받고 추상 메서드(RenderBody)를 구현해야 합니다.
특수한 상황에서는 renderTitle, renderFooter를 오버라이드해 다른 형태로 보이게 할 수 있고, 그보다 더 큰 변화가 필요한 경우 renderContent 전체를 오버라이드해 다이얼로그의 open/close 기능만 사용하고 완전히 다른 표현 형식을 가지게 할 수도 있습니다. 이처럼 하나의 상위 클래스를 만들어서 오버라이드를 통해 중복 구현해야 하는 부분들을 최대한 줄였습니다.
StepDialog 컴포넌트
StepDialog 컴포넌트는 Dialog를 상속받은 추상 클래스입니다. 긴 호흡의 UX 컨텍스트를 가진 화면들이 이전/다음 버튼으로 연결된 다이얼로그를 구현하는 데 사용됩니다. StepDialog는 대부분 여러 화면을 구성하는데 하나의 데이터 객체를 사용합니다. 그래서 진행 상태, 사용할 데이터 등을 포함한 로컬 스토어를 가지며 다이얼로그 내의 UI들은 이 스토어 정보의 변화에 반응하게 되어 있습니다.
StepDialog를 만들 때 Step이라는 추상 클래스 컴포넌트를 상속받아 각 화면을 구현합니다. 그리고 StepDialog의 추상 메서드 renderSteps( )를 구현할 때 각 화면의 컴포넌트를 배열로 반환해 각 단계를 배열 순서로 노출시킵니다.
이처럼 디자인 시스템에서는 대부분 코드를 객체지향 추상 클래스로 구성해서 셀프 서비스 프로젝트를 진행할 때는 비즈니스 로직을 처리하는 데 집중할 수 있게 했습니다. 공통된 UI/UX와 규칙을 정의해 스타일에 대한 고민 없이 큰 틀에서의 디자인은 그대로 이어가도록 한 겁니다. 또한 새로운 컨텍스트가 필요한 부분들만 캐스케이딩(Cascading)*해 사용하여 커뮤니케이션 시간은 줄고 업무 속도는 향상되었습니다.
지금까지 디자인 시스템의 도입 과정과 생산성을 높이는 시스템 설계 경험을 소개해보았습니다. 디자인 시스템을 구축하고 끝나는 것이 아닌 지속적으로 보완하고 개선하기 위한 장치로써 매주 워크숍을 진행하고 있고, 여기서 다양한 코드를 함께 만들고 논의하며 신뢰를 쌓아가고 있습니다.
* 적용된 스타일 중 어떤 스타일을 선택할지 우선순위를 결정하는 원리
◆◆◆
JPA + OAuth2 + JWT + AWS와 배우는 스프링 부트 3
Java 백엔드 입문자를 위한 풀 패키지
실력을 갖춘 개발자로 성장하려면 시작이 중요합니다.
그래서 이 책은 무엇부터 익혀야 하는지 막막한 입문자에게 백엔드 개발의 필수 지식을 학습 로드맵 중심으로 설명합니다.
이어서 스프링 부트 3 개발에 꼭 필요한 4대장인 JPA ORM, OAuth2 인증, AWS 배포, CI/CD를 최신 트렌드에 맞게 그리고 실무에 유용하게 알려줍니다.
모든 장 끝에는 연습문제가 수록되어 있어 배운 내용을 점검할 수 있습니다. 이 책이 여러분의 백엔드 개발자 여정에 든든한 나침반이 되어 줄 겁니다.
저자 우아한 형제들
우아한형제들은 배달이 일상을 조금 더 행복하게 하도록 오늘도 달리고 있습니다. 평범한 사람들이 모여 비범한 성과를 만들어 내는 곳이될 수 있도록 건강한 조직문화를 만드는 일에 진심을 다합니다. 2016년부터 ‘우아한형제들 기술블로그’를 운영하며 개발 조직의 성장 과정을 기록하고 있습니다.
