Design System · v1.0

One The Lab Design System

일관된 화면을 빠르게 만들기 위한 색·글꼴·간격·컴포넌트 규칙 모음. 노랑을 브랜드 보울티지로 쓰고, 짙은 잉크와 따뜻한 캔버스로 균형을 잡는다.

Foundations

Color

Brand

Yellow
#FFD400
Yellow Soft
#FFE766
Yellow Deep
#C9A600
Ink
#1A1A17

중립 · 표면

Body
#3D3D38
Muted
#7A7A72
Hairline
#E7E5DD
Canvas
#FAFAF7

Semantic

Success
#3FA66A
Warning
#E0941A
Error
#D24A4A
Info
#3A78C2

Foundations

Typography
Display제목 크게
H1 / 32섹션 제목
H2 / 24하위 제목
H3 / 18카드 제목
Body / 16본문 텍스트는 16px, 줄간격 1.6으로 읽기 편하게.
Small / 14보조 설명 텍스트
Mono / 13const token = "value";

서체: Inter (UI) · JetBrains Mono (코드)

Foundations

간격 Scale
--s1 · 4px
--s2 · 8px
--s3 · 12px
--s4 · 16px
--s5 · 24px
--s6 · 32px
--s7 · 48px
--s8 · 64px

Foundations

모서리 · 그림자

Radius

sm 6 · md 10 · lg 16 · pill

Elevation

sm
md
lg

Components

Button

Components

Badge · 상태
기본 정상 주의 오류 정보

Components

Form

Components

알림
✓
저장되었습니다.
!
저장하지 않은 변경사항이 있습니다.
✕
요청을 처리하지 못했습니다.
i
새 버전이 준비되었습니다.

Components

Table
토큰값용도상태
--brand-yellow#FFD400브랜드 강조사용중
--ink#1A1A17제목·텍스트사용중
--canvas#FAFAF7배경사용중
--hairline#E7E5DD테두리검토

Infographics

Roadmap
Q1 · 완료
디자인 시스템 v1토큰·컴포넌트
다크 모드테마 전환
Q2 · 진행
다이어그램 라이브러리UML · 인포그래픽
반응형 개선
Q3 · 예정
컴포넌트 문서화
접근성 점검
Q4 · 예정
v2 릴리스
팀 온보딩

Infographics

Matrix (2×2)

중요도 × 긴급도 — 우선순위 분류 (아이젠하워)

🔥 지금 한다
· 배포 버그
· 보안 패치
📅 계획한다
· 리팩터링
· 문서화
⚡ 위임한다
· 알림 응답
· 회의 정리
🗑 버린다
· 잡무
· 과한 최적화
← 낮은 긴급도  ·  높은 긴급도 →

Infographics

Dashboard
활성 사용자
12.4K
▲ 8.2%
전환율
3.1%
▲ 0.4%p
평균 응답
240ms
▼ 12ms
오류율
0.7%
▼ 0.2%p
월
화
수
목
금
토
일

Infographics

비교표
기능FreeProTeam
프로젝트 수3무제한무제한
다크 모드✓✓✓
협업✕✕✓
우선 지원✕✓✓
가격 / 월₩0₩9,900₩29,000

Infographics

Timeline
2026.01
프로젝트 시작
요구사항 정의 · 디자인 토큰
2026.03
MVP(Minimum Viable Product) 출시
핵심 컴포넌트 · 다크 모드
2026.06
다이어그램 추가
UML · 인포그래픽 라이브러리
2026.09
정식 v2
문서화 · 접근성

Infographics

Mind Map · Architecture
One The Lab 시스템 디자인 토큰 컴포넌트 인포그래픽 다이어그램

Infographics

Case Study

문제

화면마다 색·간격이 제각각이라 신규 페이지 제작에 평균 3일 소요.

해결

CSS 토큰 + 컴포넌트 라이브러리 도입, 다크 모드 기본 제공.

결과

−65%

제작 시간 3일 → 1일 미만.

Infographics

Venn Diagram

집합의 교집합·합집합 표현

디자인 개발 협업 교집합 = 공통 작업

Infographics

Circle Packing

계층·크기를 중첩 원으로 표현

UI API DB

Infographics

Bubble Chart

X·Y·크기(3차원) 데이터 표현

비용 → 성과 →

Infographics

개념도

개념과 관계(연결어)를 명시한 지도

에이전트 모델 도구 루프 포함 사용 반복

Infographics

Tree Diagram

계층 구조(부모-자식)

root src docs ui api guide

Infographics

순서도

번호 매겨진 단계별 진행 흐름

1 기획 2 설계 3 개발 4 배포

Infographics

SWOT(Strengths, Weaknesses, Opportunities, Threats) Analysis

강점·약점·기회·위협 전략 분석

S강점 Strengths

· 빠른 개발 속도
· 일관된 디자인 토큰

W약점 Weaknesses

· 문서 부족
· 테스트 미흡

O기회 Opportunities

· AI 도구 확산
· 신규 시장

T위협 Threats

· 경쟁 심화
· 기술 변화

Infographics

Customer Journey Map

단계별 사용자 행동과 감정 변화

인지
광고로 제품 발견
🙂
탐색
기능 비교, 가격 확인
😐
구매
복잡한 결제 단계
😟
사용
기대대로 동작
😄
감정

Infographics

Sankey Diagram

흐름의 양을 띠 굵기로 표현

방문 가입 이탈 결제

Infographics

Gantt Chart

일정·기간을 막대로 표현

기획
W1
설계
W2–3
개발
W3–6
배포
W7
W1W3W5W7

Infographics

Kanban Board

작업 상태별 카드 보드

To Do2
로그인 화면
설정 페이지
Doing1
다이어그램 추가
Done2
다크 모드
디자인 토큰

Infographics

Fishbone Diagram

원인 분석 (이시카와) — 여러 원인 갈래가 하나의 결과로 향함 (시간 흐름 아님)

결과 페이지 로딩 지연 코드 무거운 번들 미최적 쿼리 인프라 서버 과부하 CDN 미사용 이미지 미압축 과대 해상도 캐시 캐시 미적용 짧은 TTL 네트워크 요청 과다 느린 DNS 서드파티 외부 스크립트 광고 태그

Infographics

Comparison Matrix

옵션 × 기준 평가 비교 (● 높음)

기준안 A안 B안 C
비용●●●●●●●●●●●●
속도●●●●●●●●●●●●
유지보수●●●●●●●●●●●●

구조 · Structure

Class Diagram

클래스의 속성·메서드와 상속(▷) 관계

Animal - name: string + speak(): void Dog - breed: string + bark(): void Cat - indoor: bool + meow(): void

구조 · Structure

Object Diagram

특정 시점의 인스턴스와 값(슬롯)

rex : Dog name = "Rex" breed = "Jindo" owner : Person name = "Kim" owns

구조 · Structure

Package Diagram

패키지 묶음과 의존성(점선 →)

ui domain data

구조 · Structure

Component Diagram

컴포넌트와 제공/요구 인터페이스 (lollipop · socket)

Web UI Auth API IAuth

구조 · Structure

Deployment Diagram

물리 노드(서버·기기)와 배포된 아티팩트

«device» Browser app.js «server» API Node server.jar HTTPS

구조 · Structure

Composite Structure

클래스 내부 부품(part)과 포트(port) 연결

Order : System : Cart : Payment

동작 · Behavior

Sequence Diagram

시간 순서에 따른 객체 간 메시지

User UI API click GET /data 200 OK render

동작 · Behavior

Activity Diagram

작업 흐름과 분기·병합

로그인 입력 유효? 에러 표시 홈 이동 아니오 예

동작 · Behavior

State Machine Diagram

상태와 이벤트에 따른 전이

Idle Loading Done fetch success error / retry

동작 · Behavior

Use Case Diagram

액터와 시스템 기능(유스케이스)

사용자 Shop System 상품 검색 장바구니 결제 «include»

동작 · Behavior

Communication Diagram

객체 간 연결과 번호 매겨진 메시지

:UI :Controller :Service 1: submit() 2: save()

동작 · Behavior

Timing Diagram

시간축에 따른 상태 변화

HighLow t0t1t2

동작 · Behavior

Interaction Overview

액티비티 틀 안에 상호작용(ref) 흐름

sd Checkout ref로그인 ref결제 처리

기타 · Practical

ERD(Entity Relationship Diagram) — Database 설계

엔티티·키와 관계(까마귀발 표기)

USER 🔑 id PKemailname ORDER 🔑 id PKuser_id FKtotalcreated_at 1 : N

기타 · Practical

Flowchart — Algorithm · Logic
시작 입력 받기 n > 0 ? 출력 끝 예 아니오

기타 · Practical

Data Flow Diagram (DFD)

외부 개체 · 프로세스(원) · 데이터 저장소 사이 흐름

사용자 1.0주문처리 D1 주문 주문정보 저장

기타 · Practical

System Architecture

계층형 전체 시스템 구성

Client (Web · Mobile) API Gateway Auth Orders Payments Database

기타 · Practical

Network Diagram

서버·네트워크 연결

☁ WAN Router Web Server App Server DB Server

기타 · Practical

API(Application Programming Interface) Flow Diagram

API 호출 흐름

Client Gateway Service DB

기타 · Practical

User Flow

사용자 화면 이동

랜딩 로그인 대시보드 완료

기타 · Practical

Wireframe — UI 구조
로고
검색
메뉴
카드
카드
카드

기타 · Practical

Mind Map — 기능 기획
앱 기능 회원 결제 알림 통계

기타 · Practical

ATAM(Architecture Tradeoff Analysis Method) — 아키텍처 트레이드오프 분석

품질속성 → 시나리오를 (중요도, 위험도)로 평가하는 유틸리티 트리

유틸리티 성능 가용성 보안 변경 용이성 피크 부하서 응답 < 200ms (중요도 H · 위험도 M) 월 가동률 99.9% 유지 (중요도 H · 위험도 L) 전 구간 인증·암호화 (중요도 H · 위험도 H) 신규 기능 1일 내 추가 (중요도 M · 위험도 M)

분석 지점 분류 — 결정이 품질속성에 미치는 영향

지점아키텍처 결정영향분류
민감점캐시 TTL 설정응답속도 ↔ 데이터 신선도Sensitivity
트레이드오프전체 암호화 적용보안 ↑ · 성능 ↓Tradeoff
위험단일 DB 인스턴스가용성 목표 미달 가능Risk
위험 아님모듈식 레이어 분리변경 용이성 충족Non-risk

Development

Token 사용법

하드코딩 금지. 항상 CSS 변수로 참조한다.

/* ✗ 하지 말 것 */
.box{ background:#FFD400; }

/* ✓ 토큰 참조 */
.box{
  background: var(--brand-yellow);
  color: var(--ink);
  padding: var(--s4);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}