goorm Design System · Light-first

Vapor UI

구름의 디자인 시스템

opinionated, light-first, very token-driven, proudly Korean-bilingual. 11-family 베이스 팔레트와 시맨틱 alias로 product surface를 일관되게 묶고, host 앱은 키 팔레트만 swap한다.

PRIMARY

Blue 500

FAMILIES

11 × 10

TYPE SCALE

13 steps

RADIUS

11 + circle

COMPONENTS

27 covered

PACKAGES

6 monorepo

01.

Button · IconButton

xl 사이즈만 radius 400 (12px), 나머지는 300 (8px)

SIZE · sm 28 / md 32 / lg 40 / xl 48

VARIANT · primary / outline / ghost / secondary

VARIANT · danger / danger-outline / contrast

STATE · default / hover / active / disabled

ICON BUTTON · 32×32 · radius 300 · hover bg-secondary-100

02.

Form · 입력

TextInput · Textarea · Select · MultiSelect · InputGroup · Field

TEXT INPUT · idle / focused / error

이메일

로그인 ID로 사용된다.

조직 도메인

focus 상태 — blue-500 ring 18%.

비밀번호

8자 이상 입력해야 한다.

FIELD · validation (error / success)

워크스페이스 이름

공백은 사용할 수 없다. 하이픈으로 연결한다.

워크스페이스 이름

사용 가능한 이름이다.

슬러그

goorm.io/

InputGroup — addon이 좌측 코너만 둥글게 가진다.

TEXTAREA · resize vertical

릴리스 노트

line-height 1.5 · padding 8 12 · focus ring은 단일 줄 입력과 동일하다.

SELECT · default / placeholder / open · MULTISELECT

런타임 스택 (default)

Node.js 20

리전 (placeholder)

리전을 선택한다

런타임 스택 (open)

Next.js 15

Node.js 20

Next.js 15

Python 3.12

Go 1.22

참여 팀 (MultiSelect)

Vapor Squad Design Frontend

플랜 (disabled)

Enterprise (고정)

03.

Selection · 선택

Checkbox · Radio · Switch · RadioCard

CHECKBOX · RADIO · SWITCH

약관에 동의한다 마케팅 수신에 동의한다 (선택) 월간 결제 — ₩9,900 / 월 연간 결제 — ₩99,000 / 년 (2개월 무료) 다크 모드 자동 전환 주간 활동 리포트 받기

RADIO CARD · default / checked

Cloud IDE 브라우저에서 바로 컨테이너를 띄워 개발한다. 로컬 연결 로컬 머신을 원격 컨테이너에 연결한다. 팀 워크스페이스 멤버를 초대해 환경을 공유한다. 템플릿에서 시작 미리 구성된 스택으로 빠르게 시작한다.

04.

Navigation · 내비게이션

Tabs · Breadcrumb · Menu · NavigationMenu · Pagination

BREADCRUMB

TABS · active는 하단 2px primary 보더

PAGINATION

NAVIGATION MENU · 사이드바

MENU · 드롭다운

05.

Data · 데이터

Avatar · Table

AVATAR · 이니셜 / 이미지 · 32px (lg 40px)

최 이

TABLE · th gray bg · row hover · badge 셀

멤버	역할	상태	컨테이너
최준영	Squad Lead	활성	12
이태성	CDO	활성	8
김지원	Frontend	초대 대기	3
박서연	Design	정지	0

06.

Overlay · 오버레이 / Feedback · 피드백

Callout · Tooltip · Popover · Sheet · Dialog · Toast

새로운 워크스페이스 정책이 적용된다. 개인 프로젝트는 자동으로 private으로 생성된다. 기존 프로젝트는 영향을 받지 않는다.

배포가 완료되었다. vapor-ui-1.3.0이 production에 배포되었다. 페이지를 새로고침해 변경 사항을 확인한다.

저장하지 않은 변경 사항이 있다. 다른 페이지로 이동하기 전에 저장한다.

토큰 빌드에 실패했다. colors_and_type.css에서 정의되지 않은 변수를 참조했다. 빌드 로그를 확인한다.

TOAST — gray-900 · 상태 점 + 닫기

컨테이너가 시작되었다.

빌드에 실패했다. 로그를 확인한다.

TOOLTIP — solid gray-900 + 흰 텍스트

POPOVER — radius 400 · shadow-lg

FOCUS RING — 2px blue-500 + 2px offset

상태 변화는 한 단계 darker step으로 fill을 swap하는 방식이다 — transform·scale은 사용하지 않는다.

DIALOG — scrim oklch(0 0 0 / .4) · radius 500 · shadow-xl

컨테이너를 삭제할까요?

vapor-design-tokens 컨테이너와 연결된 볼륨이 영구히 삭제된다. 이 작업은 되돌릴 수 없다.

SHEET — 우측 슬라이드 패널 (모바일에서 Dialog 대체)

07.

Key screen — goorm 콘솔 / 컨테이너 목록

Pretendard 본문 14px · table th 12px · 헤어라인 1px gray-200

console.goorm.io / projects / vapor-ui

개요

컨테이너

멤버

설정

컨테이너 목록

현재 활성화된 컨테이너 4개 · 총 사용량 12.4GB / 50GB

이름	스택	상태	마지막 실행	메모리
vapor-design-tokens	Node.js 20	실행 중	방금 전	512 MB
vapor-ui-docs	Next.js 15	실행 중	3분 전	1.2 GB
color-generator-test	Python 3.12	대기 중	2시간 전	256 MB
icons-storybook	Node.js 20	실패	어제	— MB