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 steps

COMPONENTS

35 styled

PACKAGES

6 monorepo

01.

Button · IconButton

radius 300 (8px) — 사이즈와 무관하게 한 단

SIZE · sm 24 / 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 (md) · radius 300 · hover 오버레이

02.

Form · 입력

TextInput · Textarea · Select · MultiSelect · InputGroup · Field

TEXT INPUT · idle / focused / error

이메일

로그인 ID로 사용된다.

조직 도메인

focus 상태 — border-primary 1px inset ring.

비밀번호

8자 이상 입력해야 한다.

FIELD · validation (error / success)

워크스페이스 이름

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

워크스페이스 이름

사용 가능한 이름이다.

슬러그

goorm.io/

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

TEXTAREA · resize vertical

릴리스 노트

line-height 22px · padding 6 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 · line 변형의 active 인디케이터는 2px

PAGINATION

NAVIGATION MENU · 사이드바

MENU · 드롭다운

05.

Data · 데이터

Avatar · Table

멤버 표와 아바타는 레이아웃 시연용 더미 데이터입니다. Squad Lead 최준영·CDO 이태성은 goorm 공식 블로그가 공개한 실제 직함이나, 계정 상태와 컨테이너 수는 발명값이고 김지원·박서연은 가상의 인물입니다.

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

최 이

TABLE · th 14px / 500 · padding 8/24 · 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 — contrast-200 배경 · 상태 점 + 닫기

컨테이너가 시작되었다.

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

TOOLTIP — solid contrast-200 + 흰 텍스트

POPOVER — radius 300 · shadow-md · min-width 200

FOCUS RING — 2px foreground-normal-200 + 2px offset

상태 변화는 fill을 갈아끼우지 않고 gray-900 오버레이의 불투명도를 hover 8% · press 16%로 올린다 — transform·scale은 사용하지 않는다.

DIALOG — scrim 검정 32% · radius 300 · 폭 500 (md)

컨테이너를 삭제할까요?

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

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

07.

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

Pretendard 본문 14px · 헤어라인 1px gray-100 · 목업 표 th 12px는 이 프리뷰의 재현

콘솔 화면은 레이아웃 시연용 더미 데이터입니다. 컨테이너 이름·상태·메모리와 총 사용량은 발명값이며, 실제 goorm 콘솔의 화면이나 요금제 한도가 아닙니다.

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