PRINCIPLE 01
기능이 장식을 이긴다
Function over decoration
장식은 시간이 지나면 낡는다. 기능은 오래 간다. 우리는 그림자와 그라디언트로 우아함을 흉내내지 않고, 정확한 여백과 위계로 우아함을 얻는다.
“덜어낼 게 없을 때 완성이다.”
--radius-sm--radius-md--shadow-sm
/about/design·v1.0 · living document
Design
System.
우리는 시스템을 짓습니다. 눈에 보이는 것부터 눈에 보이지 않는 것까지. 이 페이지는 위브솔루션즈가 로고 · 컬러 · 타이포그래피 · 여백 · 모션을 어떻게 다루는지에 대한 공개된 브랜드 헌법이자, 개발자가 그대로 복사해 쓰는 토큰 참조서입니다.
brands: 17tokens: 40+fonts: Pretendard · JetBrains Monotheme: dark-first
Agentic Terminal
product
VibeShell
product
VH
VibeShell Hook
product
VG
VibeShell Gateway
product
AgentDesk
product
AgentFlow
product
Atlas
service
Weady
service
Mono Writer
service
탐라여지도
service
Obliq
service
Qeeper
service
Scroll ↓12 sections · principles · tokens · downloadable
// 01Principles
다섯 개의 원칙.
에이전틱 엔지니어링 회사의 디자인 헌법. 코드처럼 정확하고, 코드처럼 재사용 가능하고, 코드처럼 문서화된다.
PRINCIPLE 02
터미널도 디자인 표면이다
Terminal is a design surface
우리 정체성은 터미널에서 시작한다. Monospace, blinking cursor, ANSI 색, 정확한 격자. 이 언어를 웹에도, 문서에도, 로고에도 그대로 가져온다.
“$ echo hello”
--font-mono--color-terminal-*--animate-cursor-blink
PRINCIPLE 03
하나의 체계, 여러 목소리
One system, many voices
Atlas 는 엔터프라이즈 정색이고, Weady 는 시원한 하늘색이고, Mono Writer 는 크래프트 종이색이다. 다른 톤을 쓴다. 그러나 여백 · 위계 · 조판 규칙은 같은 체계에서 온다.
/services/*/products/*/collab/*/club/*
PRINCIPLE 04
타이포그래피가 첫 번째 UI다
Type is our first UI
한글은 Pretendard, 라틴 코드는 JetBrains Mono. 한글은 break-keep 로 어절이 깨지지 않게 조판한다. 위계는 굵기와 크기와 색으로 만든다. 아이콘은 최소한만.
--font-sans--font-monobreak-keepwhitespace-nowrap
PRINCIPLE 05
모션은 의미를 갖는다
Motion is meaning
움직임 자체가 목적이 되면 소음이다. 우리는 상태 전환(spring), 강조(fade-up), 지속(cursor-blink) 등 의미를 실어 나를 때만 애니메이션을 쓴다. Easing 은 4종으로 통일.
--ease-default--ease-in--ease-out--ease-spring--animate-fade-up
// 02Logo System
하나의 이름. 열두 개의 얼굴.
We've Solutions 마스터 워드마크 아래에 4개의 트랙 · 17개 서브 브랜드가 있습니다. 각 로고는 독립적인 정체성을 가지지만, 여백 · 라운드 · 격자 규칙을 공유합니다.
MASTER · LEVEL 0
We've Solutions
위브솔루션즈 · 개발자가 편한 세상을 만든다
마스터 로고는 모든 하위 브랜드가 최종적으로 귀속되는 상위 표식. Header · Footer · 명함 · OG 이미지 · 문서 표지에서 사용. 최소 사용 크기는 24px, 여백은 로고 심볼의 1/4.
프로덕트
Products · 6— 개발자 도구 · Terminal · SSH · AI 에이전트
서비스
Services · 7— 컨슈머 · 엔터프라이즈 웹/앱
콜라보
Collab · 1— 파트너와 함께 만드는 프로젝트
클럽
Club · 3— 내부/커뮤니티 프로젝트
USAGE RULES
Clear space
로고 심볼 폭의 1/4 이상 여백을 확보합니다.
Minimum size
웹 24px · 인쇄 12mm 이상에서만 사용.
Do not
회전 · 색 반전 · 왜곡 · 그림자 추가 금지.
// 03Color System
색은 도구다. 장식이 아니다.
마스터 팔레트 4색 + 시맨틱 토큰 8종 + 상태 4종. Mint 는 유일한 강조색이고, 나머지는 정보 위계를 위한 도구입니다. 각 스와치를 눌러 hex/rgb/hsl 값을 복사할 수 있습니다.
BRAND · MASTER
Mint
--color-mint
Primary accent · CTA · terminal cursor
Navy
--color-navy
Enterprise · Atlas · logo base
Sky
--color-sky
Info · secondary highlight
Paper
--color-paper
Light theme background · Mono Writer
SEMANTIC · DARK-FIRST
Background primary
--color-bg-primary
다크 앱 기본 배경
Background secondary
--color-bg-secondary
카드 · 섹션 구분
Surface raised
--color-surface-raised
hover · 강조 표면
Surface sunken
--color-surface-sunken
터미널 · 코드 블록
Foreground
--color-foreground
본문 텍스트
Muted
--color-muted
부가 설명
Subtle
--color-subtle
라벨 · 메타
Line
--color-line
구분선 · 카드 테두리
STATE
Success
--color-success
성공 · 완료
Warning
--color-warning
주의 · Beta
Error
--color-error
오류 · 파괴적 작업
Info
--color-info
안내 · 링크
// 04Typography
타이포그래피가 첫 번째 UI다.
한글은 Pretendard Variable, 라틴 코드는 JetBrains Mono. 위계는 굵기 · 크기 · 색으로만 만들며, 밑줄이나 배경색으로 강조하지 않습니다.
SANS · KOREAN + LATIN
Pretendard
v1.3.9 · CDN
가나다 · The quick brownBlack · 900
가나다 · The quick brownExtrabold · 800
가나다 · The quick brownBold · 700
가나다 · The quick brownMedium · 500
가나다 · The quick brownRegular · 400
MONO · CODE + TERMINAL
JetBrains Mono
Google Fonts
$ curl -s "https://wevesolutions.co.kr"
> HTTP/2 200
> content-type: text/html; charset=utf-8
// 우리는 시스템을 짓습니다.
export const brand = {
identity: "agentic-engineering",
voice: "precise + human",
animation: "meaningful only",
};ready
TYPE SCALE
8 단계. 그 이상은 예외적으로만.
96px
위브솔루션즈
Display
Hero 워드마크
64px
위브솔루션즈
H1
섹션 타이틀
40px
위브솔루션즈
H2
서브섹션
26px
가나다 · The quick brown fox
H3
카드 헤더
18px
가나다 · The quick brown fox
Body Large
히어로 서브라인
15px
가나다 · The quick brown fox
Body
본문
13px
가나다 · The quick brown fox
Caption
메타 · 라벨
11px
가나다 · The quick brown fox
Micro
코드 뱃지 · 상태
KOREAN TYPESETTING · 우리만의 규칙
break-keep 필수
한글은 어절 단위로 조판. Tailwind
break-keep 클래스로 어색한 어절 중간 줄바꿈 방지. 특정 어절이 여전히 어색하면 whitespace-nowrap span 으로 통째로 묶는다.em-dash 금지, 가운뎃점 사용
— 대신 · 을 사용. AI 어투처럼 보이지 않도록 em-dash 는 코드/스크립트에서만. 구분자로는 · (middle dot, U+00B7) 이 우리 조판 규칙.
// 05Space & Grid
4px 격자 위에 모든 것이 정렬된다.
기본 단위는 4px. 여백은 4의 배수만 사용합니다. 이 규칙 하나로 정렬 이슈의 90% 가 사라집니다.
SPACE · BASE 4
space-1
4px
아이콘 · 뱃지 내부 간격space-2
8px
칩 · 버튼 내부 간격space-3
12px
리스트 아이템 간space-4
16px
본문 문단 간space-6
24px
카드 paddingspace-8
32px
섹션 상하 여백 · Sspace-12
48px
섹션 상하 여백 · Mspace-16
64px
섹션 상하 여백 · Lspace-24
96px
히어로 상하 여백RADIUS
--radius-sm · 6px
input · 뱃지
--radius-md · 10px
버튼 · 뱃지 대형
--radius-lg · 16px
카드 · 스와치
--radius-xl · 24px
히어로 카드 · 모달
CONTAINER
prose
720px본문 · 블로그 · 원칙
content
960px제품 소개 · 서비스 페이지
wide
1200pxDesign System · 대시보드
full
100%히어로 배경 · 3D 씬
// 06Motion & Easing
모션은 의미를 갖는다.
네 개의 곡선. 그 이상은 필요하지 않습니다. 각 easing 은 특정 상황을 위한 도구고, 무엇을 쓸지가 곧 무엇을 말하는지입니다.
Default
--ease-default
cubic-bezier(0.4, 0, 0.2, 1)
일반 상태 전환 · UI 대부분
In
--ease-in
cubic-bezier(0.4, 0, 1, 1)
사라짐 · 화면 밖으로
Out
--ease-out
cubic-bezier(0, 0, 0.2, 1)
등장 · 튀어나옴
Spring
--ease-spring
cubic-bezier(0.34, 1.56, 0.64, 1)
강조 · 상호작용 반응
DURATION
200–900ms
UI 상호작용은 200ms 이내. 장면 전환만 최대 900ms.
REDUCED MOTION
prefers-reduced-motion
OS 접근성 설정 존중. 모든 애니메이션은 opt-out 가능해야 함.
60FPS 원칙
transform + opacity
레이아웃 재계산 유발하는 top/left/width 애니메이션 금지.
// 07Iconography
아이콘은 파이프라인이다.
모든 앱 아이콘은 SVG 원본에서 시작해 sharp → webp 로 흐릅니다. 이 파이프라인 덕분에 새 서비스 추가 시 5분 안에 4 사이즈 · 팔레트 최적 · webp 서빙본까지 완성됩니다.
STEP 01
Origin
디자이너가 SVG 원본을 그린다 (1254×1254 · 벡터 · 배경 포함).
FigmaSVG
STEP 02
Rasterize
sharp (libvips + librsvg) 로 4 사이즈 PNG 생성 (128 / 256 / 512 / 1024).
sharplibrsvg
STEP 03
Compress
cwebp -q 82 로 최종 webp 서빙본 생성. 팔레트 최적화 필수 (colours 64).
cwebp -q 82
STEP 04
Component
src/components/logos/*Logo.tsx 재사용 컴포넌트 (size · radius · priority props).
next/image
SIZE MATRIX · Atlas 예시
128px
iOS · Notification · Small system
256px
macOS Menu · Toolbar
512px
Web · Store listing · OG
1024px
App Store · High-DPI display
// 08Product Variations
같은 체계, 다른 목소리.
각 브랜드는 타겟과 목적에 맞춰 다른 톤을 씁니다. Atlas 의 엔터프라이즈 정색과 Weady 의 시원한 하늘색과 Mono Writer 의 종이색은 다르지만, 여백 · 위계 · 조판 규칙은 같은 체계에서 옵니다.
Agentic Terminal· VibeShell 계열
Windows · macOS 데스크톱의 날개
AI 시대 개발자 · Terminal-native · 정확 · 신뢰
JetBrains Mono
VibeShell· VibeShell 계열
iOS · Android 모바일의 날개
이동 중인 개발자 · Vibrant · 모바일 최적화
JetBrains Mono
VH
VibeShell Hook· VibeShell 계열
Claude Code · Codex 설치 관리
AI 도구 설치 관리자 · Utility · 조용한 배경
JetBrains Mono
VG
VibeShell Gateway· VibeShell 계열
안전한 원격 게이트웨이
사내 개발 서버 관리자 · Secure · Enterprise-friendly
JetBrains Mono
AgentDesk
AI 에이전트 데스크톱 워크스페이스
AI 협업 데스크톱 사용자 · macOS-native · 창(window) 시스템
Pretendard
AgentFlow
에이전트 워크플로우 자동화
자동화 파이프라인 설계자 · Flow · 조직화 · 아이덴티티 있는 마크
Pretendard
Atlas
Agentic ERP + Groupware
AI 시대 엔터프라이즈 운영팀 · Enterprise · Agentic · 3-Layer 아키텍처
Pretendard + JetBrains Mono
Weady
출퇴근 날씨 도우미
매일 옷 뭐 입지 고민하는 사람 · Consumer · Friendly · Sky
Pretendard
Mono Writer
잠그고 끝까지 쓰는 macOS 글쓰기 앱
몰입해서 글 쓰고 싶은 작가 · Minimal · Kraft · 종이 감성
Pretendard + Iowan Old Style (감성)
탐라여지도
제주 여행 정보 플랫폼
제주 여행자 · 로컬 큐레이션 · Nature · Forest · Local
Pretendard
Obliq
비스듬한 시각으로 보는 도구
다른 관점을 원하는 사용자 · Neutral · Navy 기본
Pretendard
Qeeper
지속적으로 지키는 도구
루틴/습관 유지자 · Steady · Navy 기본
Pretendard
오늘의 문장
하루 한 줄, 오늘의 문장
매일 짧은 영감이 필요한 사람 · Editorial · Navy · 여백
Pretendard
FICO2000BETA
재무·자산 학습 콜라보
재무 리터러시 학습자 · Finance · Amber · 파트너 브랜드
Pretendard
Reading Insight Club
책에서 통찰을 뽑는 모임
독서 커뮤니티 멤버 · Warm · Yellow · Navy
Pretendard
Path Insight Club
커리어 경로 탐색 모임
커리어 탐색 커뮤니티 · Playful · RGB
Pretendard
Unknown Basketball
농구 커뮤니티
동네 농구인 · Sport · Court Red
Pretendard
// 09Design Tokens
개발자가 복사해서 쓰는 계약서.
이 페이지 자체가 우리 토큰의 진실의 원본. src/app/globals.css 의 @theme 블록이 여기에 실시간으로 반영됩니다. 새 프로젝트를 시작할 땐 이 블록을 통째로 복사하면 됩니다.
src/app/globals.css
@theme {
/* Brand */
--color-mint: #00C4B4;
--color-navy: #264E76;
--color-sky: #97C7EB;
/* Semantic · dark-first */
--color-bg-primary: #131313;
--color-bg-secondary: #1A1A1A;
--color-surface-default: #1A1A1A;
--color-surface-raised: #242424;
--color-surface-sunken: #0D0D0D;
--color-foreground: #FFFFFF;
--color-muted: #B3B3B3;
--color-subtle: #666666;
--color-line: #333333;
/* State */
--color-success: #4CAF50;
--color-warning: #FFA500;
--color-error: #FF6B6B;
--color-info: #97C7EB;
/* Fonts */
--font-sans: var(--font-pretendard), 'Pretendard Variable', -apple-system, system-ui, sans-serif;
--font-mono: var(--font-jetbrains), 'JetBrains Mono', Menlo, Consolas, monospace;
/* Radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
/* Easing */
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}tailwind · usage
// Tailwind v4 · @theme 로 정의된 토큰이 자동 클래스가 됩니다.
// Color
<div className="bg-bg-primary text-foreground border-line" />
<span className="text-mint" />
<button className="bg-navy hover:bg-mint text-white" />
// Typography
<p className="font-sans" />
<code className="font-mono text-mint" />
// Radius
<div className="rounded-lg" /> {/* 16px */}
<div className="rounded-xl" /> {/* 24px */}
// Motion
<div className="transition ease-spring duration-300" />
<div className="animate-fade-up" />
<span className="animate-cursor-blink" />react · component
// 로고 컴포넌트 (재사용)
import AtlasLogo from "@/components/logos/AtlasLogo";
<AtlasLogo size={96} priority />
// 브랜드 데이터에서 팔레트 가져오기
import { BRANDS } from "@/data/design/brands";
const atlas = BRANDS.find((b) => b.slug === "atlas");
// atlas.colors.primary === "#264E76"// 10Voice & Content
말투도 UI다.
같은 정보를 다르게 말하면 다른 사람이 됩니다. 우리는 진지하고 정확하되, 필요할 때 따뜻하게 말합니다.
존댓말 · 정중한 직진
✓
사용자에게는 존댓말. 팀 내부/개발 문서는 반말/약어 허용.
✕
고객 대상에서 반말이나 하이톤 이모지.
WHY
우리는 진지한 개발자 도구를 만듭니다. 친근함은 정확함 다음.
이모지 금지
✓
위계 · 색 · 여백으로 감정을 전달.
✕
🚀 ✨ 🔥 등 마케팅 이모지 남발.
WHY
이모지 없이 감정이 전달되지 않는다면 문장 자체가 약합니다.
가운뎃점(·) 사용
✓
요소 나열은 · 로 구분: '개발자 · 디자이너 · PM'.
✕
em-dash(—) 를 나열 구분자로 사용.
WHY
AI 어투로 보이지 않도록. · 이 우리 조판 서명입니다.
슬로건이 아닌 사실
✓
'라이브로 증명한다', '연동된 앱 12 개' 같은 검증 가능한 사실.
✕
'혁신적인', '차세대의', '완벽한' 같은 마케팅 형용사.
WHY
우리는 코드로 말합니다. 카피는 그 다음.
OUR TERMS · 사전
위브솔루션즈We've Solutions정식 국문 표기. 띄어쓰기 없음.
에이전틱AgenticAI 에이전트가 스스로 판단하고 조작한다는 뜻.
바이브 코딩Vibe CodingVibeShell 계열에서 사용. AI 와 대화하며 자연스럽게 코드 짜기.
// 11In the Wild
살아있는 시스템.
문서만으로는 부족합니다. 아래는 이 디자인 시스템이 실제 서비스에서 어떻게 살아 움직이는지 보여주는 여섯 개의 얼굴입니다. 각 카드를 눌러 직접 확인해 보세요.
service
Atlas
Agentic ERP + Groupware
visit →
service
Weady
출퇴근 날씨 도우미
visit →
service
Mono Writer
잠그고 끝까지 쓰는 macOS 글쓰기 앱
visit →
service
탐라여지도
제주 여행 정보 플랫폼
visit →
collab
BETAFICO2000
재무·자산 학습 콜라보
visit →
club
Path Insight Club
커리어 경로 탐색 모임
visit →
LIVING DOCUMENT · v1.0
우리는 시스템을 짓습니다.
이 페이지는 진화합니다. 새 서비스가 등록되면 여기 반영되고, 토큰이 바뀌면 여기가 먼저 업데이트됩니다. 궁금한 점이나 협업 문의는 contact.