Design System · v0.8.2

awork Design System

awork 제품팀이 공유하는 UI 기준 문서입니다. 컴포넌트, 토큰, 패턴을 한 곳에 정리해 디자이너와 개발자가 같은 기준으로 화면을 만듭니다.

버전: 0.8.2 beta
업데이트: 2026.05.13
기준 스택: Next.js · FastAPI · PostgreSQL
톤: 실무형 · 정보 밀도 · 신뢰

원칙

요청사항을 정리하고, 전문가가 결과물을 검수합니다.
장식보다 정보. shadow보다 1px border와 여백을 우선합니다.
Blue는 CTA, 링크, 활성 상태에만 사용합니다.

Color

토큰 이름과 hex, 사용 위치를 함께 표기합니다. 코드에서는 --color-* CSS 변수로 참조합니다.

Primary CTA · 링크 · 활성 상태에만 사용

Token	Hex	Usage
`primary/500`	`#0069FF`	Primary CTA, 링크 기본
`primary/600`	`#2563EB`	CTA hover, 포커스 링
`primary/700`	`#1D4ED8`	Pressed, active tab 강조
`primary/800`	`#1E40AF`	다크 배경 위 텍스트, brand accent

Info 안내성 메시지, 보조 강조

Token	Hex	Usage
`info/600`	`#167AD8`	Info 아이콘, 보조 링크
`info/100`	`#E9F2F9`	Info 배지 배경
`info/50`	`#F0F9FF`	알림 배너, hover surface

Neutral 텍스트 위계, 배경, 보더

Token	Hex	Usage
`neutral/0`	`#FFFFFF`	Page background, 카드 표면
`neutral/50`	`#F8FAFC`	섹션 배경, 입력 비활성
`neutral/100`	`#F1F5F9`	Table header, hover surface
`neutral/200`	`#E2E8F0`	Border 기본, divider
`neutral/300`	`#CBD5E1`	Border 강조, disabled border
`neutral/500`	`#64748B`	Caption, placeholder, 보조 텍스트
`neutral/700`	`#334155`	본문 텍스트
`neutral/900`	`#0F172A`	제목, primary text

Semantic 상태 표현. 텍스트와 배경 색 쌍으로 사용

Token	Hex	Usage
`success/600`	`#059669`	결제 완료, 승인, 정상 상태
`success/50`	`#ECFDF5`	Success 배지 배경
`warning/600`	`#D97706`	납기 임박, 주의
`warning/50`	`#FFFBEB`	Warning 배지 배경
`danger/600`	`#DC2626`	분쟁, 결제 실패, 삭제
`danger/50`	`#FEF2F2`	Danger 배지 배경

Typography

시스템 폰트 스택 기반. 본문은 14-16px 중심으로 정보 밀도를 우선합니다.

Font family system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif

Role	Size / Line	Weight	Sample
`display`	32 / 40	600	주문 상세
`page-title`	28 / 36	600	진행 중인 프로젝트
`section-title`	20 / 28	600	최근 주문 12건
`card-title`	16 / 24	600	RAG 기반 사내 챗봇 구축 패키지
`body`	14 / 22	400	납기일은 첫 결제일로부터 14일이며, 1차 산출물 검수 후 잔금이 결제됩니다.
`body-strong`	14 / 22	500	분쟁이 접수된 주문입니다. 운영팀이 확인 중입니다.
`caption`	12 / 18	400	2026.05.13 14:23 작성 · 김민재 PM
`mono`	13 / 20	500	ord_2026051323A · txn_8f3d2a91

Spacing & Radius

4의 배수 기준. 작은 단위는 텍스트 사이, 큰 단위는 섹션 사이에 사용합니다.

Spacing scale

Token	px
`space/1`	4
`space/2`	8
`space/3`	12
`space/4`	16
`space/5`	20
`space/6`	24
`space/8`	32
`space/10`	40

Radius

Token	px	적용
`radius/0`	0	표 셀, 구분선
`radius/sm`	2	체크박스, 작은 칩
`radius/md`	4	버튼, 입력, 배지
`radius/lg`	6	카드, 토스트
`radius/xl`	8	모달, 사이드시트

Layout

Token	값	설명
`max-width`	1280px	최상위 컨테이너
`content`	1200px	본문 영역
`gutter`	24px	좌우 여백
`gutter-sm`	16px	모바일 좌우 여백
`col-gap`	24px	그리드 열 간격
`row-gap`	16px	그리드 행 간격

Breakpoints: sm 640, md 768, lg 1024, xl 1280

Components

실제 화면에서 쓰이는 형태로 표기합니다. props 명세는 코드 저장소를 참고하세요.

Button

한 화면에 Primary는 한 개만 사용합니다.

Variant	Default	Hover	Disabled	Size sm
`primary`
`secondary`
`ghost`
`danger`
`link`	변경 이력 보기	변경 이력 보기	변경 이력 보기	변경 이력

Input / Search

높이 36px(md) 기준. 포커스 시 primary/600 1px ring.

상품명 2-60자, 특수문자 일부 제한 검색 키워드 또는 ord_로 시작하는 주문번호 상태 기본값: 전체 담당자 이메일 focus awork 도메인 계정만 등록 가능 예산 (원) error 최소 100,000원 이상 입력하세요. 사업자 등록번호 disabled 인증 후 자동 입력됩니다.

Status badge

주문/작업 단계 상태. 텍스트는 6자 이내로 통일합니다.

상태	Badge	의미
`paid`	결제완료	잔금/선금 결제가 완료됨
`in_progress`	작업중	판매자가 작업을 진행 중
`due_soon`	납기임박	납기일까지 48시간 이내
`disputed`	분쟁	구매자가 이의 제기, 운영팀 검토
`draft`	초안	판매자가 아직 게시하지 않음
`verified seller`	인증 전문가	사업자 인증 + 포트폴리오 검수 완료

Product card

목록 그리드에 사용. 가격, 납기, 산출물, 판매자 신뢰 정보를 한 카드 안에서 비교 가능.

RAG · LLM Ops

인증 전문가베스트셀러

RAG 기반 사내 챗봇 구축 - 문서 1만건 기준

데이터스튜디오 · 김민재 · 누적 47건

LangChain
Python
FastAPI
pgvector

가격: 4,500,000원~
납기: 14일
산출물: 3건

★ 4.9 (37)납기 준수율 98%

Computer Vision

인증 전문가

제조 라인 불량 검출 모델 PoC

비전랩스 · 이서연 · 누적 12건

PyTorch
YOLOv8
ONNX

가격: 견적 협의
납기: 21일
산출물: 4건

★ 4.8 (9)납기 준수율 100%

Workflow Automation

신규

영업팀용 AI 견적서 작성 봇

노션웍스 · 박지훈 · 누적 3건

Next.js
OpenAI API
Slack

가격: 1,800,000원~
납기: 10일
산출물: 2건

★ 신규평균 응답 2시간

Order stepper

주문 페이지 상단, 작업실 사이드 패널에 공통으로 사용합니다.

1
요청 작성
2026.05.13 완료
2
결제 완료
선금 30% 결제
3
작업 중
D-9 · 1차 산출물 검토
4
납품
예정 2026.05.24
5
구매 확정
검수 후 잔금 결제

Admin table

운영팀 화면 기준. 행 높이 44px, 1px border, hover 시 neutral/50.

주문번호	상품	고객	금액	상태	담당자	업데이트
`ord_2026051323A`	RAG 기반 사내 챗봇 구축	주식회사 한솔물산	4,500,000	작업중	김민재	2026.05.13
`ord_2026051294B`	제조 라인 불량 검출 PoC	대한정밀	12,000,000	납기임박	이서연	2026.05.13
`ord_2026051177C`	영업팀 견적서 작성 봇	코어테크	1,800,000	결제완료	박지훈	2026.05.12
`ord_2026051002D`	고객지원 분류 모델 학습	플로우랩	3,200,000	분쟁	운영팀	2026.05.11

1-4 / 247건

Patterns

대표 화면 4종의 레이아웃 가이드. 실제 구현 시 컴포넌트는 위 섹션을 그대로 사용합니다.

상품 목록

좌측 필터 + 정렬바 + 카드 그리드. 1024 이상 3열, 768 이상 2열, 모바일 1열.

RAG · LLM Ops

RAG 기반 사내 챗봇 구축

4,500,000원~ · 14일 · ★ 4.9

Computer Vision

제조 라인 불량 검출 PoC

견적 협의 · 21일 · ★ 4.8

Workflow

영업팀 견적서 작성 봇

1,800,000원~ · 10일 · ★ 신규

NLP

고객지원 분류 모델 학습

3,200,000원~ · 18일 · ★ 4.7

주문 / 결제

좌측 입력 폼 + 우측 주문 요약. 모바일에서는 요약이 하단 영역으로 전환.

결제

1. 의뢰 정보

상품RAG 기반 사내 챗봇 구축

판매자데이터스튜디오 · 김민재

납기14일 (~ 2026.05.24)

2. 산출물 범위

요구사항 정의서 (PDF) 챗봇 백엔드 코드 (Git) 운영 매뉴얼 (Notion)

3. 결제 수단

세금계산서 카드 결제 가비아 포인트

판매자 대시보드

KPI 4개 + 진행 주문 + 다음 액션 위젯. KPI는 정보 위주, 큰 일러스트는 사용하지 않습니다.

이번 달 매출

14,820,000원

+18.4% 전월비

진행 주문

7건

납기 임박 2건

납기 준수율

96%

+2.0%p 전월비

평점

4.8/5

최근 37개 리뷰

다음 액션

전체 보기

납기임박 ord_2026051323A 1차 산출물 업로드 - D-2
검수요청 ord_2026051294B 변경 요청 회신 - D-1
초안 신규 상품 "Slack 봇 패키지" 게시 검수

진행 주문

전체

주문	상태	D-day
한솔물산 · 챗봇 구축	작업중	D-9
대한정밀 · 불량 검출	납기임박	D-2
코어테크 · 견적 봇	결제완료	-

관리자 운영 화면

좌측 nav + 상단 필터 + 본문 테이블. 운영자가 한 화면에서 검색, 확인, 처리까지 끝낼 수 있어야 합니다.

주문 관리

주문번호 · 고객 · 상품 검색 필터 상태 변경

전체 247 결제완료 84 작업중 119 납품완료 32 분쟁 6

주문번호	고객	금액	상태	담당
`ord_...023A`	한솔물산	4,500,000	작업중	김민재
`ord_...994B`	대한정밀	12,000,000	납기임박	이서연
`ord_...877C`	코어테크	1,800,000	결제완료	박지훈
`ord_...702D`	플로우랩	3,200,000	분쟁	운영팀