네, 안녕하세요. 저희 디자인 시스템 이야기 AST와 MCP로 여는 미래 발표를 시작하겠습니다.

네, 안녕하세요. 이번 발표를 맡게 된 배민 공통서비스 웹프론트 개발팀 권현하 이상철입니다.

어, 저희는 우아 공방의 역사에 대해서 먼저 소개를 드리고 그 과정에서 생긴 문제점을 AST와 MCP를 적용하면서 해결해 나간 경험을 공유드린 다음에 우아 공방의 미래를 그려보는 것으로 진행하려고 합니다.

어, 먼저 우아 공방이란 무엇인지 소개를 드리려고 해요.

저희 우아 공방은 우아한형제들의 디자인 시스템이에요.

비즈니스의 성장에 맞는 유연하고 확장 가능한 구조를 갖추기 위해서 세 개의 계층으로 이루어져 있고 그 계층은 코어, 클레이, 몰드입니다.

먼저 코어는 우아 공방의 최소한의 규칙이라고 생각해 주시면 됩니다.

컬러나 타이포그래피 같은 재료에 해당하는 디자인 토큰들과 UX 라이팅 같은 사용성에 기반이 되는 지침들이 있고, 이 재료들로 최소한의 정의만 가지고 있는 코어 컴포넌트들이 있습니다.

그다음은 클레이와 몰드 계층입니다. 클레이는 서비스에 맞는 브랜드 아이덴티티와 사용성 그리고 최소한의 기준과 규칙을 가집니다.

저희 클레이는 블루와 민트 총 두 개로 나뉘어 있는데요.

블루는 사장님 서비스를 담당하고 있고 민트는 배달의민족 앱을 포함한 고객형 서비스를 담당하고 있습니다.

그리고 이러한 클레이를 바탕으로 각 팀 혹은 프로덕트에서 필요한 패턴들을 관리하는 몰드가 존재합니다.

저희 우화 공방은 디자인 시스템 TF 1기가 구성되어 2022년부터 구축되기 시작됐고 2023년 정식 버전 1버전이 배포되었습니다.

그리고 2024년에는 클레이 민트와 블루를 운영하는 것을 포함해서 각 프로덕트별로 몰드를 구성해 오다가 특히 백오피스 제작이 필요한 컴포넌트들을 모아둔 몰드 어드민 가이드를 제공하기 시작했습니다.

그래서 올해에는 민트, 블루 몰드 어드민 가이드를 사용하는 공식 문서와 스토리북, 서포트 채널, 피그마와 같은 가이드를 제공하고 피그마 플러그인, 크롬 익스텐션 같은 도구들을 제공하고 있습니다.

그렇게 우아한 공방이 런칭된 이후로 3년이 지나게 되었는데요.

어, 이번 발표를 준비하면서 저희가 운영하고 있던 서포트 채널을 되돌아봤어요.

저희는 서포트 티켓을 슬랙 채널을 통해서 받고 있고 그 문의 내용을 지라 티켓으로 자동으로 생성해서 담당자를 할당하며 관리를 하고 있었습니다.

왼쪽 차트를 보시면 3년 동안 들어온 서포트 문의가 엄청난 양이라는 것을 알 수 있습니다.

작년만 해도 벌써 1,300개에 다다르고 있고 올해 9월까지만 통계를 내봐도 1,000개에 다다르고 있습니다.

하지만 이 서포트 문의를 처리하는 웹 개발자는 많아야 네 명이었어요.

운영 개선만 해도 시간은 항상 부족했었죠.

이렇게 서포트 문의를 처리하다 보니 과연 우아공방은 잘 사용되고 있나라는 의문이 생기게 되었습니다.

어, 사용처에서 들어오는 다양한 문의들은 다음과 같아요.

이거 수정 부탁드립니다. 이거 어디 있나요?

이거 어떻게 하나요? 이거 추가해 주세요라는 문의들이에요. 이 문의들이 한 번의 일정에 겹쳐서 들어오게 되면 자연스럽게 특정 문의 건은 우선 순위에 따라 일정에 맞추지 못하는 경우가 생깁니다.

하지만 서비스를 개발하다 보면 일정에 맞춰서 꼭 적용해야 되는 경우가 있죠.

그래서 다음과 같은 서비스 개발이 진행되게 됩니다. 왼쪽 화면은 우아공방 언러 컴포넌트를 사용하는 샌드위치 프로덕트의 피그마 가이드입니다.

언러 컴포넌트의 초록색 부분인 헤더와 바디 콘텐츠가 이미 존재하고 주황색 부분인 디스크립션 영역이 아직 구현되지 않는 영역이라고 가정을 해 보겠습니다.

서비스 디자이너는 설명 영역이 필요하지만 업무 우선 순위에 따라서 일정 내에 우아한 공방의 가이드에 추가되지 못하니 우아 공방 컴포넌트를 디테치, 즉 우아한 공방 컴포넌트를 연결을 끊어서 새로운 커스텀 컴포넌트를 추가하게 됩니다.

그리고 해당 가이드는 그대로 서비스 개발자에게 전달되게 되죠.

그러면 서비스 개발자는 어떻게 프로덕트를 개발을 진행하게 될까요?

바로 무적의 디브 같은 커스텀 커스텀 태그가 등장하게 됩니다.

저희 가이드를 벗어난 특정 태그 컴포넌트를 커스텀하게 되죠.

예시를 보시면 스타일 또는 클래스 같은 것으로 사용자의 CSS가 추가가 됩니다.

그 이후에 저희 우아 공방에서 얼럿의 설명 영역을 추가하고 텍스트 컬러를 FGT이라는 디자인 토큰으로 영역을 구성하게 되어도 사용자에서는 앞에서 적용한 라인 스타일링 컬러가 적용되어 있어요.

음, 이번에는 얼럿의 설명 영역이 수정이 필요해지면 어떻게 될까요?

저희가 설명의 텍스트 컬러를 FG 컬터널이라는 다른 디자인 토큰으로 변경을 해도 사용처에서는 여전히 핵스값이 적용되어 있습니다.

그래서 앞선 예시와 같이 디자인에서는 우아 공방 컴포넌트에서 디테치된 컴포넌트들이 생기게 되고 개발에서는 DIV와 같은 커스텀 태그, 우아 공방 컴포넌트를 감싼 커스텀 컴포넌트들이 생겨나게 됩니다.

그렇게 되면 우아 공방이 디자인 업데이트나 버그픽스 같은 업데이트를 진행하게 되어도 사용처에서는 반영되지 않는 상황들이 발생되게 됩니다.

저희는 이런 문제점을 어떻게 해결해 갔는지를 앞으로 공유를 드리려고 합니다.

저희의 목표는 하나. 다시 우아 공방이 쓰이도록 하자는 것입니다.

이를 위해서 우아 공방 사용 현황을 분석하고 분석된 내용을 바탕으로 변화를 이끌어 나가고자 했습니다.

그래서 저희는 먼저 우아공방 애널리틱스를 만들었습니다.

저희의 니즈는 한눈에 우아공방 사용 현황을 보고 싶었고 그 현황을 바탕으로 어떻게 수정할지를 가이드를 드리려고 했습니다.

말 그대로 우아공방 사용 현황 분석 도구라고 생각해 주시면 됩니다.

앞으로 아뜰리에라는 단어를 자주 보실 수 있는데요.

아뜰리에는 우아공방의 영문 이름이라고 생각해 주시면 됩니다.

그러면 저희가 어떻게 분석을 진행하게 되었는지 설명을 드릴게요.

사용 현황 분석은 디자인단과 코드단을 나눠서 분석하게 됐습니다.

디자인은 피그마에서 디자인 토큰과 컴포넌트가 어떻게 사용되는지를 분석하고 개발에서는 코드에서 디자인 토큰과 컴포넌트가 어떻게 사용되는지를 분석했습니다.

먼저 피그마 분석의 시스템 흐름도를 살펴보겠습니다.

스트 JS 배치 서버에서 피그마 REST API를 통해서 피그마 데이터를 가져와서 분석하고 JSON으로 생성해서 S3 버킷에 업로드를 하고 있습니다.

그리고 리액트 대시보드 웹에서는 해당 JSON을 가져와 대시보드를 렌더링하고 있습니다.

어 앞서서 말씀드렸다시피 저희는 디자인 토큰과 컴포넌트가 잘 사용되는지를 확인하려고 하는데요.

먼저 디자인 토큰은 다음과 같은 항목들을 확인했습니다.

피그마 REST API의 응답 중에서 노드 정보를 활용해서 컬러의 필 스타일은 노드의 스타일스와 필을, 레이아웃의 스페이싱은 노드의 패딩과 아이템 스페이싱을, 타이포그래피의 텍스트 스타일은 노드의 스타일즈의 텍스트를, 셰이프의 레디어스와 섀도우 스타일은 노드의 코너 레디어스와 이펙트 스타일을 확인했습니다.

그리고 컴포넌트를 사용하는지는 비교적 쉬웠는데요. 저희 디자인 직군에서 우아 공방 컴포넌트의 경우에만 이모지 또는 특수 문자로 시작하도록 약속이 되어 있기 때문에 노드의 네임이 이모지 또는 특수 문자로 시작하는지를 확인하면 됐습니다.

저희는 이 분석을 바탕으로 피그마에서 우아한 공방 컴포넌트가 아닌 것들을 쉽게 볼 수 있게 하기 위해 피그마 플러그인도 개발했습니다.

피그마 플러그인은 간단하게 얘기하자면 피그마 내부에서 실행되는 JS 기반 확장 프로그램입니다.

오른쪽 플러그인 화면과 같이 UI와 로직을 자유롭게 구성할 수 있고 그 안에서 피그마 데이터를 가공하고 피그마 UI를 변경하실 수 있습니다.

그래서 앞서 분석된 JSON에서 노드들의 아이디를 가져와서 해당 노드들을 하이라이팅하는 피그마 플러그인을 개발하게 됐습니다.

왼쪽 예시 피그마를 보시면 전체 선택과 선택 삭제 버튼이 하이라이팅된 모습을 보실 수 있습니다.

이번엔 코드 단의 시스템 흐름도를 공유드리겠습니다.

GitLab CI/CD에서 스케줄 트리거를 통해서 우아공방 패키지를 사용하는 저장소 리스트를 사내 서버에 요청해서 가져오고, 그 저장소들을 반복문을 돌면서 분석을 진행했습니다.

그리고 분석된 내용을 JSON으로 만들어 마찬가지로 S3에 업로드를 하고 해당 JSON을 대시보드 웹에서 가져와 렌더링하게 됩니다.

저희는 코드를 분석하기 위해서 아뜰리에 트래커라는 라이브러리를 만들게 되었습니다.

해당 라이브러리에서는 임포트 분석을 통해서 어떤 컴포넌트가 얼마나 사용되는지를 확인하고 디자인 토큰 사용 현황을 분석해서 디자인 토큰과 하드코딩을 정량적으로 측정했습니다.

코드 분석을 위해서는 추상 구문 트리인 AST가 필요했어요. 그래서 AST를 분석할 수 있는 Babel Parser와 Babel Traversal을 이용하게 되었습니다.

어, 이제는 추상 구문 트리의 간단한 예제를 보여드리려고 합니다. 왼쪽은 사용처에서 쉽게 볼 수 있는 우아 공방 코드를 사용하는 모습입니다.

그리고 오른쪽은 추상 구문 트리의 전체적인 구조입니다. 어, 오른쪽에서 바디 부분에 코드가 변환된 내용이 들어가게 됩니다.

먼저 첫 번째 줄인 우아 공방 컴포넌트를 임포트하는 코드를 추상 구문 트리로 변환된 모습을 보면 임포트 디클레어레이션이라는 타입으로 아뜰리에의 민트와 버튼 객체가 잘 추출된 것을 볼 수 있습니다.

다음으로 두 번째 줄인 우아 공방 디자인 토큰을 임포트하는 코드는 마찬가지로 임포트 디클레어레이션이라는 타입으로 임포트 경로와 임포트한 값이 버스가 잘 추출된 모습을 보실 수 있습니다.

마지막으로 직접 디자인 토큰을 사용하는 세 번째 라인을 보겠습니다.

오른쪽과 같이 베리어블 디클레어레이션 타입으로 각각의 항목들이 잘 추출된 모습을 보실 수 있습니다.

저희는 이 추상 구문 트리를 비지터 패턴으로 모든 노드를 방문하면서 분석을 진행했습니다.

비지터 패턴은 간단하게 말씀드리면 트리의 모든 노드를 방문하면서 특정 노드 타입을 만날 때마다 콜백 함수가 실행되는 것입니다.

그래서 바벨이 이 추상 구문 트리를 순회하면서 임포트 디클러레이션, 멤버 익스프레션, JSX 어트리뷰트라는 콜백 함수를 실행하게 되고 그 안에서 저희는 임포트 구문을 감지하고 디자인 토큰 사용을 감지하고 하드코딩된 스타일 값을 감지했습니다.

그 결과로 우아공방 디자인 토큰과 하드코딩된 스타일 값의 수치를 확인할 수 있었고 하드코딩된 스타일 코드 정보 즉 파일명, 코드라인 값과 같은 정보를 수집할 수 있었습니다.

저희는 이렇게 분석에 그치지 않고 직접 수정까지 진행을 하려고 했어요.

올해 우아공방에서 마이그레이션을 쉽게 해 주는 자동화 도구인 코드 모드를 개발을 했었는데요.

이 도구를 사용하면 대화형으로 마이그레이션을 진행하면서 다양한 트랜스폼으로 코드를 변환하고 변환한 코드를 커밋까지 실행해 주는 도구를 개발했습니다.

이 코드 모드는 오른쪽과 같이 MPX 명령어로 쉽게 실행할 수 있습니다.

그래서 트래커를 통해 코드를 분석하고 분석한 정보를 코드 모드에게 넘겨서 수집한 코드를 변환까지 실행하게 됩니다.

해당 코드 모드를 터미널에서 실행하게 되면 명령어로 넘겨준 경로를 탐색하면서 하드코딩된 컬러가 있는지를 검사하고 직접 수정을 한 후에 커밋 메시지까지 작성해 주는 모습을 보실 수 있습니다.

그래서 이 결과 화면과 같이 하드코딩된 스타일들이 디자인 토큰으로 잘 변경되는 모습을 보실 수 있습니다.

그리고 이렇게 분석된 내용을 한 눈에 확인할 수 있게 대시보드 웹에서 차트로 시각화하고 있습니다.

이런 일련의 분석 과정을 통해서 저희는 세 가지를 이루어내게 됐습니다.

피그마 데이터와 AST 기반의 코드 분석으로 정량적 측정이 가능하게 되었고, GitLab CI/CD와 배치 프로세스로 수동 작업 없이 정기적인 분석을 가능하게 했고, 연결이 끊어진 코드를 우아한 공방 표준으로 다시 되돌리는 계기를 만들었습니다.

이렇게 문제를 해결해 나가는 과정에서 이 문제를 다른 관점으로 상황을 바라보고 해결 방안을 제시해 주신 팀원이 계십니다.

그분을 무대로 모시겠습니다. >> 저는 앞에서 현아님이 이제 다양한 방법으로 현재의 문제점을 어떻게 해결할지에 대해서 설명을 해 주셨다면은 저는 애초에 조금 다른 방법으로 처리를 해 보면 어떨까라고 생각을 해서 이후의 세션을 진행하게 되었습니다.

그래서 제가 생각했던 것들은 애초에 질문이 없으면 안 될까?

답변을 자동화할 순 없을까라고 생각을 하게 되었어요.

그래서 문제를 한번 다시 정의해 보려고 합니다.

첫 번째는 우아 공방에 문의가 많이 들어온다는 점이고요.

두 번째는 우아한 공방과 연결이 끊어진 컴포넌트가 늘어난다는 점입니다.

첫 번째, 우아 공방에 문의가 많이 들어온다는 것은 어떤 문의가 들어오는지 확인을 해보니 대부분은 버그 혹은 사용성 문의였습니다.

사용성 문의를 한번 확인해 보도록 할게요. 우아 공방에는 90개가 넘는 컴포넌트가 있고 각각의 컴포넌트마다 타입스크립트와 스토리북, 마크다운으로 세 가지 종류의 가이드라인이 있습니다.

당연해진 디자인시스템, 그다음 이야기: AST와 MCP로 여는 미래 #우아콘2025 #우아한형제들

우아한형제들의 기술조직 이야기를 전하는 우아한테크입니다.

우아한형제들 https://www.woowahan.com/
우아한테크 Facebook https://www.facebook.com/woowahanTech
우아한형제들 기술블로그 https://techblog.woowahan.com

당연해진 디자인시스템, 그다음 이야기: AST와 MCP로 여는 미래 #우아콘2025 #우아한형제들

Scripts