Introduction

Vapor는 CDS(GDS v1)와 GDS를 거쳐 개발된 구름의 세 번째 디자인 시스템입니다. 시스템의 상세한 소개는 아래의 발표 영상과 자료를 참고해주세요.

사내 기술 세미나 - "Vapor: 새로워진 구름의 디자인 시스템을 소개합니다"

• 발표 영상 / 발표 자료 (Goorm staff only)

Vapor는 여러가지 서브 패키지들로 구성되어 있습니다. 각 패키지는 다음과 같은 역할을 수행합니다.

1. Vapor Foundation:
   • 구름의 디자인 시스템을 구성하는 디자인 토큰 라이브러리
   • size(dimesion, border radius, space), color, typography(font family, font weight, line height) 정의
   • GDS의 Goormstrap을 리뉴얼한 버전
2. Vapor Components:
   • 구름의 디자인 시스템을 구성하는 컴포넌트 라이브러리
   • Reactstrap 기반
3. Vapor Chart:
   • 구름의 디자인 시스템을 구성하는 차트 라이브러리
   • Ant Design Chart 기반
4. Vapor Icons:
   • 구름의 디자인 시스템을 구성하는 아이콘 라이브러리
5. Vapor Resource:
   • 구름의 디자인 시스템에 사용되는 그래픽 리소스 경로 모음
6. Vapor Hooks:
   • 구름의 디자인 시스템을 구성하는 React Hooks 라이브러리
   • (** 추후 문서화 사이트 제공 예정)
7. Vapor Docs:
   • 구름의 디자인 시스템을 문서화한 사이트

디자인 팀이 생기고 제품 개발자는 10명 내에외서 약 50명으로 늘어났으며, 사내 제품이 3개에서 6개로 늘어났습니다.

이로 인해, 많은 인원과 팀이 GDS를 사용하게 되면서, 중앙 집중형 시스템인 GDS에 병목현상이 발생했습니다.

디자인 시스템이 어느 정도 자리 잡으면서 다양한 사업에서 다른 형태의 디자인 시스템을 요구했습니다.

예: primary color를 빨간색으로 변경, font-family를 “EsaManru체”로 설정, border-radius를 조금 더 각지게 변경 등

기존에는 웹 접근성에 신경 쓰지 않았지만, 제품이 학교에 보급되면서 웹 접근성이 중요한 이슈로 부각되었습니다.

예: 키보드 탐색이 어렵고, 스크린 리더에 불친절하며, 시력이 약한 사용자에게 불편함을 줌

GDS 컴포넌트가 Custom Bootstrap, Custom Reactstrap, Self Made Component로 구성되어 복잡했습니다. 이로 인해, 컴포넌트 스타일링 관심사 분리가 명확하지 않아, 컴포넌트 스타일링을 어디서 해야 할지 모호했습니다.

GDS 라이브러리에 대한 담당자가 없고, 개발 가이드가 문서로만 제공되어 문제 발생 시 누구에게 문의할지 애매해서 그레인 존이 발생했습니다.

해당 문제를 해결하기 위해 Vapor는 다음과 같은 타겟을 설정했습니다.

Product Canvas를 통해 Vapor의 3가지 디자인 시스템 목표를 설정했습니다.

사용자(End-user)의 문제 해결을 위한 솔루션

• 웹접근성 개선: WAI-ARIA 패턴 도입, overlay 수집 및 정의, 명도 대비 높이기 등
• 구름 웹접근성 지침서 발간: 명확한 접근성 가이드라인 제공

회사(Company)의 문제 해결을 위한 솔루션

• goormstrap 리뉴얼: 컴포넌트와 디자인 토큰을 분리하여 다양한 비즈니스 상황에 맞게 재정의
• Design token을 CSS variable로 전환: 다양한 비즈니스에서 다양한 형태로 적용 가능하도록 디자인 토큰을 CSS 변수화
• 문서화 사이트에 시각화: 변화하는 디자인 토큰을 시각적으로 확인할 수 있도록 문서화

크리에이터(Creator)의 문제 해결을 위한 솔루션

• 크리에이터(개발자) 할 일 줄이기:

  • Typescript 100% 지원
  • PR 프로세스 간소화 및 개선: 문제 포착 → 브랜치 생성 → 컴포넌트 수정 → 문서화 코드 자동화 스크립트 → PR
  • 시각화 코드 자동화: plop CLI와 Figma API 활용
  • Github 활용 활성화: Github Issues 및 Discussion 활성화, Github Actions 활용

• 크리에이터(디자이너) 혼란 줄이기:

  • Figma와 개발 문서화 사이트 간의 일치: Figma branch 기능을 활용해 디자인 시스템 원본 컴포넌트 변경사항 관리, Vapor 패키지 라이브러리 배포 시 Figma 원본 컴포넌트 변경 작업 merge 및 Figma 라이브러리 배포

Vapor는 GDS에서 발생한 문제들을 해결하고, 디자이너와 개발자가 함께 사용할 수 있는 통일된 디자인 시스템을 구축하는 것을 목표로 합니다. 이를 통해 구름의 제품은 더욱 사용하기 쉽고, 유연하며, 기여하기 편리한 디자인 시스템을 갖추게 될 것입니다.

Vapor를 바로 사용하고 싶으신가요? 아래의 가이드를 참고해주세요.

Vapor 패키지 설치