우아한형제들의 전사 디자인 시스템, 배시시 #우아콘2022 #Day2_음식그이상의것을문앞으로

우아한테크·우아콘 2022 2022·2022년

AI 요약

우아한형제들 웹프론트팀이 전사 디자인 시스템 "배시시"를 만든 과정을 공유한다. 서비스마다 프라이머리 컬러·컨셉이 달라 가이드라인·컴포넌트를 하나로 합칠 수 없는 전사 환경에서, 디자이너와 컴포넌트 개발자를 "서포트"하는 도구들을 직접 만들어 디자인 시스템을 운영하는 방식이 핵심이다.

핵심 포인트

가이드라인은 서비스별로 다르되 용어 같은 규칙은 통일하고, 같은 가이드라인은 하나의 컴포넌트 라이브러리로 묶는 구조를 택했다
파운데이션 제너레이터로 디자이너의 파운데이션을 사내 NPM 패키지로 자동 퍼블리시해, 수기 고지·오타·누락 없이 개발자가 타입까지 받아 쓰게 했다
롤업 기반 코어 트래킹·웹팩 기반 프로덕트 트래킹 플러그인으로 컴포넌트·파운데이션·페이지의 사용 관계를 추적하고, 피그마 플러그인으로 이중 편집을 없앴다

왜 읽나여러 서비스를 가진 조직의 전사 디자인 시스템 운영, 특히 디자인 토큰 자동화와 사용 추적 도구를 고민하는 프론트엔드·디자인 시스템 담당자에게 실전 아키텍처를 보여 준다.

챕터별 상세

010:00 – 4:42

전사 디자인 시스템의 문제와 배시시

웹프론트 개발 그룹의 이소정 발표자가 우아한형제들의 디자인 시스템 "배시시"를 소개한다. 디자인 시스템은 일관적인 사용자 경험을 돕고 용어 통일로 직군 간 커뮤니케이션과 개발 생산성을 높인다. 보통 UI/UX 가이드라인을 컴포넌트 라이브러리가 구현하는 구조를 떠올린다.

문제는 "우아한형제들의 디자인 시스템"이라면 전사 모든 서비스를 커버해야 한다는 데 있다. 파편화된 구조에서는 가이드라인마다 용어가 달라지거나 컴포넌트 라이브러리 업데이트 반영이 파편화될 수 있다. 그렇다고 전사 가이드라인·라이브러리를 하나로 합치는 것은, 배민은 민트색이 프라이머리지만 다른 서비스는 각각 다른 파란색을 쓰는 등 서비스마다 컨셉·컬러가 달라 불가능하다. 그래서 가이드라인은 각각 다르되 용어 같은 디자인 규칙은 통일하고, 같은 가이드라인은 하나의 컴포넌트 라이브러리로 이루어지게 잡았다. 이 컨셉을 "배민 시각 시스템"의 줄임말 "배시시"라 부른다. 컴포넌트 개발은 프로덕트 개발자에게 맡기고, 발표자 팀은 디자이너와 컴포넌트 개발자를 "서포트"하는 역할을 맡는다.

발표자 팀이 제공하는 서포트 도구를 개괄한다. 어드민 플랫폼 "배시시 스튜디오", 디자이너 설정 파운데이션을 개발자가 바로 쓰게 하는 "파운데이션 제너레이터", 데이터 트래킹용 번들러 플러그인 두 가지, 그리고 어드민을 거치지 않고 피그마에서 파운데이션을 만드는 "배시시 피그마 플러그인"이 있다. 파운데이션은 디자인 시스템의 최소 단위 요소로, 컬러·타이포그래피 등 여섯 타입으로 정의된다. 버튼 하나에도 아이콘·폰트·프라이머리 컬러·레디어스 같은 파운데이션이 쓰인다.

어드민 플랫폼 배시시 스튜디오는 첫 페이지에서 컨텍스트를 선택해 들어간다. 들어가면 "트래킹 브라우저"가 나와 트래킹 데이터를 누구나 확인할 수 있는데, 프로덕트 기준(배포 버전·라이브러리·사용 컴포넌트), 컴포넌트 기준(사용 프로덕트·페이지·라이브러리 버전), 파운데이션 기준(컬러 값과 사용 버전·컴포넌트)으로 추적할 수 있다. 디자이너가 파운데이션을 편집·버전 생성하는 "파운데이션 매니저"도 있다.

각 컨텍스트마다 해당하는 파운데이션이 하나씩 존재하며, 파운데이션 제너레이터가 그 부분을 담당한다. 기존에는 디자이너가 파운데이션을 편집한 뒤 변경 사항을 개발자에게 상세히 고지하고 개발자가 수기로 확인·수정해, 오타·누락으로 다시 커뮤니케이션해야 하는 문제가 있었다.

제너레이터를 쓰면, 디자이너가 파운데이션 매니저로 편집해 버전을 저장하면 데이터가 DB에 저장되고 해당 버전의 파운데이션 패키지가 사내 NPM 레지스트리에 퍼블리시된다. 개발자는 패키지를 설치해 바로 쓰면 되고, 디자이너는 "해당 버전으로 업데이트해 달라"는 내용만 전하면 된다. 패키지는 파운데이션 데이터를 JSON으로 갖고 타입까지 익스포트해 개발자가 자동완성으로 컴포넌트를 개발할 수 있다.

다음은 컴포넌트와 파운데이션의 관계를 추적하는 코어 트래킹 플러그인이다. 디자이너가 어떤 컬러를 쓰는 컴포넌트를 알고 싶을 때마다 개발자가 검색해 찾아 주는 비효율을 해결한다. 컴포넌트 라이브러리가 ES6 모듈로 빌드되는 경우가 많아 롤업 플러그인으로 개발했으며, 롤업 컨피그에 설정하면 라이브러리 버전·사용 파운데이션 버전·익스포트 컴포넌트 리스트·컴포넌트가 쓰는 파운데이션 요소 네 가지가 DB에 저장된다. 그 결과 "백그라운드 디폴트 컬러가 1.0.4 버전의 버튼·컨테이너·셀렉트에서 쓰인다"는 식의 정보를 확인하고, 배시시 스튜디오에서 개발된 컴포넌트를 버전별로 미리 볼 수 있다.

다만 이 플러그인만으로는 어느 페이지에서 쓰이는지 알 수 없어 프로덕트 트래킹 플러그인이 등장한다. 웹팩이 대중적이고 Next.js에도 대응돼 웹팩 플러그인으로 개발했으며, 컨피그에 추가하고 페이지 컴포넌트에서 "배시시 페이지" 함수를 호출하면 코드 분석으로 페이지 리스트·라이브러리 버전·페이지별 사용 컴포넌트를 가져온다. 레포마다 페이지 구성 방식이 달라 페이지 이름과 파일을 넘겨 주는 방식으로 구현했다.

서포트의 마지막은 배시시 피그마 플러그인으로, 배시시 스튜디오의 파운데이션 매니저와 피그마를 연동하는 것이 핵심이다. 기존에는 파운데이션 데이터를 피그마와 파운데이션 매니저 두 곳에서 반복 편집하는 비효율이 있었다. 플러그인을 쓰면 어느 쪽에서 편집하든 서로 연결돼 한 군데에서만 작업하면 된다. 플러그인 팝업은 파운데이션 매니저와 동일한 기능을 가져 파운데이션을 추가·수정·삭제하고, 피그마 디자인에 적용하거나 피그마에 적용된 파운데이션을 가져올 수 있으며, 스튜디오와 연결해 특정 버전을 가져오거나 드래프트로 보내거나 새 버전을 배포할 수도 있다.

전체 데이터 플로우로 정리하면, 디자이너가 스튜디오나 피그마 플러그인으로 파운데이션을 편집·저장하면 데이터가 DB에 들어가고 제너레이터로 사내 NPM에 패키지가 퍼블리시된다. 컴포넌트 라이브러리는 그 패키지를 설치하고 코어 트래킹 플러그인으로 빌드해 트래킹 정보를 DB에 넣으며, 프로덕트도 프로덕트 트래킹 플러그인으로 데이터를 저장한다. 결과적으로 디자인 가이드라인과 컴포넌트 라이브러리만이 아니라 이런 "서포트"가 더해져야 비로소 전사 디자인 시스템 "배시시"가 된다고 정리하며, 같은 고민을 하는 이들에게 도움이 되길 바란다는 말로 마무리한다.