Gravity UI 디자인 시스템: 자신만의 인터페이스를 쉽게 구축하는 방법

안녕하세요, 저는 Yandex Cloud의 User Experience 부서장 알렉세이 시지코프(Alexey Sizikov)입니다. 이 글에서 한 가지 소식을 전하려고 합니다. 저희는 디자인 시스템이자 컴포넌트 라이브러리인 Gravity UI를 오픈소스로 공개했습니다.

Gravity UI 컴포넌트 라이브러리를 사용하면 현대적인 UI를 구축할 수 있습니다. 구성은 다음과 같습니다:

• 기본 React 컴포넌트 세트;
• 랜딩 페이지를 위한 빌더(컨스트럭터) 라이브러리;
• 컴포넌트 사용에 대한 상세 가이드;
• Figma 라이브러리;
• 약 600개에 가까운 변형을 포함한 готовый (완성형) 아이콘 세트;
• ChartKit — 데이터 시각화 패키지;
• Yagr — uPlot 기반의 고성능 차트 렌더러;
• I18n — UI 로컬라이제이션(다국어) 패키지
• 그리고 25개 이상의 유용한 라이브러리.

아래 접힌 부분(cut)에는 Gravity UI를 왜 만들었는지, 어떻게 사용하고 있는지, 어떤 특징과 장점이 있는지, 그리고 앞으로 어떻게 발전시킬 계획인지에 대한 이야기가 있습니다. 또한 프로젝트에서 다양한 색상 스킴을 설정하는 방법과, 일반적인 두 가지(라이트/다크) 대신 왜 네 가지 테마를 제공하는지도 다룹니다.

Gravity UI의 특징은 무엇인가

실제 경험에 기반

우리 디자인 시스템의 차별점 중 하나는 사용자 요구에 기반해 발전한다는 점입니다. 사용자 대부분은 개발자입니다. 더 나아가, 디자이너들은 자신이 작업하는 제품과 긴밀히 연결되어 있습니다. 각 디자이너는 고유한 사용 시나리오를 가진 여러 서비스를 담당합니다. 솔루션이 해당 서비스들에서 테스트된 뒤, 프로덕트 디자이너는 이를 다른 서비스로 전달해 실제로 동작하는지, 그리고 개발자들에게 도움이 되는지를 확인합니다.

예를 들어, 사이드 내비게이션 컴포넌트는 처음에는 로고와 메뉴 항목만을 중심으로 발전했습니다. 이후 편의를 위해 ‘모든 서비스’와 검색이 포함된 항목을 추가했습니다. 또 어느 서비스에서 사이드 메뉴에서 바로 새 엔터티를 만들어야 할 필요가 생기자, ‘플러스(+)’ 버튼을 별도로 추가했습니다. 이후 메뉴 항목이 많은 복잡한 서비스를 위해 구분선이 있는 메뉴 섹션과 ‘기타 항목’ 버튼도 등장했습니다.

유연한 변형(옵션)

Gravity UI의 많은 컴포넌트는 다양한 시나리오를 고려해 설정할 수 있습니다. 예를 들어 pagination 컴포넌트는 여러 표시 방식이 있습니다. 전체 페이지 수를 보여주거나, 버튼의 전체 라벨을 표시하거나, 특정 페이지로 이동하고 페이지당 항목 수를 바꿀 수 있도록 할 수 있는데, 이런 옵션은 페이지 수가 많은 경우를 위해 설계되었습니다. 반대로 결과가 많지 않은 케이스라면 컴팩트 모드를 사용하거나, 숫자를 숨기고 화살표만 표시할 수도 있습니다.

폭넓은 적용 범위

Gravity UI를 사용하면 단순한 관리자용 UI부터 그래프가 포함된 복잡한 대시보드까지 만들 수 있습니다. 우리 디자인 시스템으로 구성할 수 있는 것들의 예시는 다음과 같습니다:

• 랜딩 페이지,
• 관리자 페이지,
• 대시보드,
• 차트/그래프,
• CRM,
• 분석 서비스.

예를 들어, 우리 동료들이 만든 대시보드는 다음과 같습니다:

간단한 랜딩 페이지도 만들 수 있습니다. 예를 들어, 오픈소스 프로젝트를 소개하는 사이트는 Gravity UI 컴포넌트로 제작되었습니다.

150명 이상의 컨트리뷰터

우리의 생태계는 지속적으로 발전하고 개선되고 있습니다. 개발자 커뮤니티의 피드백뿐 아니라, 이미 우리 디자인 시스템을 사용하는 100개 이상의 서비스로부터 제안이 들어오고 있습니다.

예를 들어 보겠습니다. 처음에는 다크와 라이트, 두 가지 테마만 있었습니다. 그런데 그래프를 보기 위해, 또는 스탠드업 중에 인터페이스를 TV로 송출하는 팀들로부터 피드백을 받기 시작했습니다. TV에서는 인터페이스가 잘 보이지 않는다는 문제가 있었기 때문입니다. 비슷한 문제는 오래되었거나 품질이 낮은 모니터를 쓰는 사용자에게도 발생합니다.

결과적으로 우리는 각 테마마다 ‘고대비’ 버전을 개발했습니다. 이는 다크/라이트 및 시맨틱 컬러의 밝기를 높여 줍니다. CSS 스타일로 설정되며, 사용자 설정에서 제어됩니다.

참고로 이제 여러분도 기여할 수 있습니다. GitHub에 PR을 보내거나 Figma에 코멘트를 남겨 주세요.

Gravity UI를 어떻게 사용(작업)하는가

브랜드에 맞춘 인터페이스 설정

이제 Gravity UI로 무엇을 더 할 수 있는지 이야기해 보겠습니다. 먼저 디자인 시스템을 브랜드에 맞게 커스터마이징하는 기능부터 시작하겠습니다. 예를 들어 YDB가 오픈소스로 공개될 때, 우리는 하나의 디자인 시스템을 유지하면서도 서로 다른 브랜드별로 고유한 느낌을 내야 했습니다. 이를 위해 별도의 CSS 변수 그룹을 만들었습니다. 이 그룹에는 브랜드 컬러, 폰트, 모서리 라운드 값(반경)이 포함됩니다. 코드에서는 작은 블록처럼 보입니다:

.g-root {
    --g-font-family-sans: 'Inter', sans-serif;

    --g-text-header-font-weight: 600;
    --g-text-subheader-font-weight: 600;
    --g-text-display-font-weight: 600;
    --g-text-accent-font-weight: 600;

    --g-color-base-brand: rgb(117, 155, 255);
    --g-color-base-brand-hover: rgb(99, 143, 255);
    --g-color-base-selection: rgba(82, 130, 255, 0.05);
    --g-color-base-selection-hover: rgba(82, 130, 255, 0.1);
    --g-color-line-brand: rgb(117, 155, 255);
    --g-color-text-brand: rgb(117, 155, 255);
    --g-color-text-brand-contrast: rgb(255, 255 ,255);
    --g-color-text-link: rgb(117, 155, 255);
    --g-color-text-link-hover: rgb(82, 130, 255);

    --g-border-radius-xs: 3px;
    --g-border-radius-s: 5px;
    --g-border-radius-m: 6px;
    --g-border-radius-l: 8px;
    --g-border-radius-xl: 10px;
    --g-border-radius-2xl: 16px;
}

이 그룹에서 폰트, 강조 버튼 색, 라운딩 등을 바꿀 수 있습니다. 이렇게 하면 하나의 디자인 시스템을 다양한 브랜드에 적용하면서도 브랜드 아이덴티티를 유지할 수 있습니다. 이 방식이 맞지 않다면 자체 색상 스킴을 만들 수도 있습니다. 자세한 안내는 문서에 있습니다.

브랜드 컬러를 변경하더라도 기본 인터페이스에는 영향을 주지 않는다는 점을 언급할 필요가 있습니다. 이는 시맨틱 컬러가 사용되는 요소에서 특히 중요합니다. 예를 들어 빨간색은 여전히 오류를 의미하고, 초록색은 성공을 의미합니다.

Figma의 컴포넌트

작업 편의를 위해 우리 디자이너 팀은 컴포넌트의 모든 상태를 준비해 Figma에 업로드했습니다. 원한다면 라이브러리를 복사해, 툴 안에서 바로 인터페이스를 구성해 볼 수 있습니다.

최근 업데이트에서는 라이브러리에서 네 가지 테마 전체를 중복 제공하지 않습니다. 기본으로는 라이트 테마에서 작업하지만, Layer 섹션에서 어떤 요소든 또는 페이지 전체를 다른 테마로 전환할 수 있습니다.

라이브러리의 모든 요소는 Overview 페이지에 정리되어 있습니다. 여기에서 필요한 컴포넌트를 찾아, 해당 요소의 모든 상태가 있는 페이지로 이동할 수 있습니다. 또한 각 컴포넌트에는 사용 예시도 포함되어 있습니다.

약 600개의 아이콘

아이콘은 디자인과 사용성에서 필수 요소 중 하나입니다. 아이콘은 콘텐츠를 조직하고 구조화하며, 강조점을 주고, 정보 인지(가독성)를 개선하는 데 도움이 됩니다. 처음에는 아이콘 팩을 만드는 일이 그리 어렵지 않아 보일 수 있습니다. 하지만 가상 머신, 데이터베이스, 다양한 차트 유형처럼 복잡한 은유를 표현하는 아이콘을 만들 때 우리는 어려움을 겪었습니다.

아이콘 검색을 더 편리하게 만들기 위해 특별한 네이밍 시스템을 사용했습니다. 이제 같은 아이콘을 서로 다른 이름으로도 찾을 수 있습니다. 예를 들어 화살표 아이콘을 찾고 싶다면 다음 어떤 단어를 입력해도 됩니다: arrow, enter, move, login.

가이드

앞에서 썼듯이, 우리의 목표는 개발자들이 가이드에 있는 컴포넌트 설명을 바탕으로 표준적인 인터페이스를 쉽게 만들 수 있게 하는 것이었습니다. 각 요소마다 디자이너에게 문의할 필요 없이 이 과정을 단순화하고자 했습니다. 현재 우리는 가이드만을 사용해 개발자들이 полностью (전적으로) 만든 내부 서비스 5개 사례를 이미 갖고 있습니다.

물론 개발자만의 힘으로 이 과제를 완전히 해결할 수는 없습니다. 어쩔 수 없이 UX/UI 전문가의 주의가 필요한 복잡한 시나리오가 존재합니다. 그럼에도 우리는 디자이너들의 부담을 상당 부분 덜어낼 수 있었습니다.

가이드에서 디자이너 팀은 컴포넌트를 설명하고 사용 권장사항을 제시하며, 올바른 접근과 잘못된 접근의 예시를 함께 보여주었습니다. 이 페이지에서 확인할 수 있습니다.

Gravity UI를 어떻게 활용하는가

해야 할 일은 콘솔에 명령어를 입력하는 것뿐입니다:

git clone git@github.com:gravity-ui/uikit-example-cra.git my-project && cd my-project
npm i 
npm run start

더 자세한 안내는 GitHub의 리포지토리 메인 페이지에 있습니다.

Gravity UI의 모든 컴포넌트는 UIkit에서 확인할 수 있고, 필요에 맞는 라이브러리는 Libraries에서 선택해 연결할 수 있습니다.

정리하자면, 다시 한 번 강조하고 싶습니다. Gravity UI는 사용자들의 실제 경험, 개발자들의 요구, 디자이너들의 전문성에서 성장한 디자인 시스템입니다. 그래서 실용적이고 효율적입니다. 이제 누구든 무료로 사용할 수 있습니다.

우리는 사용자들의 요구와 피드백을 반영해 프로젝트를 더 나은 방향으로 발전시키고자 합니다. GitHub에 방문해 PR을 올리고, Figma에 코멘트를 남기고, 사용 사례도 공유해 주세요.