디자인 시스템

같은 뜻은 어디서나 같은 모양으로 보여야 합니다. 이 문서는 그 규격입니다.

아래 화면은 서비스에서 지금 돌고 있는 갤러리를 그대로 끼워 넣은 것입니다. 스크린샷이 아니라 실제 코드가 그리는 화면이라, 규격을 고치면 이 문서도 함께 바뀝니다. 값이 헷갈리면 문서의 표보다 이 화면이 먼저입니다.

새 탭에서 크게 보기 ↗

이 주소는 로그인이 필요 없습니다

견본만 그리는 화면이라 데이터를 한 줄도 조회하지 않습니다(사람 이름도 견본용 가짜입니다). 검색엔진에는 노출되지 않습니다. 통합관리 안에서는 /dashboard/design-system 으로 같은 화면을 봅니다.

규격을 두 벌 만들지 않는다

색·크기 표는 한 곳에만 둡니다. 예전에 역할 색 표가 조직관리 안에만 있어서, 다른 화면이 역할 색을 쓰려면 표를 베껴야 했습니다. 베낀 표는 반드시 어긋납니다.

1. 색

기본

뜻	값	쓰는 곳
Primary	#004ACC	주 동작 버튼, 선택 상태, 표의 그룹 머리
페이지 배경	#F5F6FA	본문 바탕
표 머리 면	#FBFCFD	페이지 배경보다 밝아야 한다
본문 글자	#282828
보조 글자	#6B7280
흐린 글자	#9AA1AD	지워진 계정, 라벨
비활성 글자	#C0C6CF	값이 0인 칸

상태

뜻	글자	배경
성공·정상·완료	#1F9D57	#E7F6EE
주의·대기·미완료	#D9A407	#FDF6E3
위험·긴급·폐기	#D8413B	#FDECEA
이벤트	#6C4CF1	#F3EEFF

역할

역할 색은 상태색을 빌려 쓰되 뜻이 다릅니다 — 여기서 색은 「좋다/나쁘다」가 아니라 「누구냐」입니다.

역할	색
관리자	빨강
본사 담당자	파랑
점주	주황
매장 매니저	초록

예전에는 본사/지점 두 색만 써서 「관리자」와 「본사 담당자」가 같은 파랑, 「점주」와 「매장 매니저」가 같은 회색이었습니다. 역할 열이 아무것도 알려주지 못했습니다.

2. 글자

rem 을 쓰지 않는다

html { font-size: 14px } 이라 Tailwind 의 rem 기반 클래스가 전부 어긋납니다. p-3 = 10.5px, w-5 = 17.5px, text-sm = 12.25px. 크기는 px 로 적습니다 — p-[12px], w-[20px].

이름	크기	쓰는 곳
KPI 값	26 / 800	카드의 숫자
제목	15.5~20 / 700	화면·팝업 제목
본문	13.5	표 셀, 카드 본문
캡션	12.5	보조 설명
라벨	11.5	표 머리, 배지

3. 컴포넌트

배지

radius 6 · 11.5/700 · 옅은 배경 + 진한 글자. 상태는 색 있는 글자가 기본이고, 배경 칩은 개수를 세는 정보에만 씁니다.

체크박스

18px · radius 6 · 테두리 1.5 · Primary — 하나뿐입니다. 예전에 22곳이 열한 가지 모양이었습니다(10.5px 짜리를 모바일에서 손가락으로 눌러야 했습니다).

상자는 브라우저 기본 모양이 아니라 직접 그립니다. accent-color 만 입히면 사파리는 둥근 사각, 크롬은 각진 사각이 되고 작아질수록 체크 표시가 뭉갭니다. 같은 규격이 화면마다 다르게 보이면 규격이 아닙니다. 선택 · 일부 선택 · 잠김 · 지우기(빨강) 네 상태가 한 벌입니다.

행 끝 「관리」 버튼

32px 정사각 · radius 9 · 1px 테두리의 흰 상자 · 아이콘 15. 지우기만 테두리와 아이콘을 빨강으로 바꿉니다 — 되돌릴 수 없는 동작을 미리 알립니다.

색을 아껴 쓴다

처음에는 비밀번호 초기화에 주황, 매장 켜기/끄기에 초록을 줬더니 133행이 노랑·빨강으로 뒤덮여 정작 위험한 버튼이 묻혔습니다. 색은 되돌릴 수 없는 동작에만.

로딩

반오토 심볼이 그대로 돕니다. 화면 폭을 가로지르는 막대는 쓰지 않습니다 — 어느 제품에서나 보는 모양이라 우리 화면이라는 느낌이 없고, 앱을 켤 때 뜨는 스플래시와도 이어지지 않습니다.

지점 고르기

지점이 128개입니다. 지점 셀렉트는 무조건 검색이 되는 형태로 씁니다. 지역별로 묶이고, ↑↓·Enter·Esc 로도 고를 수 있습니다.

지워진 계정의 이름

계정을 지워도 그 사람이 남긴 발주·게시글·근태는 남습니다. 그 자리는

• 회색 + 점선 밑줄로 「삭제된 계정」
• 이름·삭제일은 마우스를 올렸을 때만(툴팁)

이름을 목록에 그대로 적으면 지워진 사람이 지금 일하는 사람처럼 읽혀 「이 사람에게 물어보면 되겠다」로 이어집니다.

4. 표

항목	규격
머리	회색 면 + 11.5/600 흐린 글자, 두꺼운 밑줄 없음
칸 사이	세로 구분선 (첫 칸 뒤부터)
행 높이	48~52
그룹 머리	Primary 면 + 흰 글자 (지역·날짜 묶음)
카드	1px 테두리 + radius 16 + 옅은 그림자

표는 PC 것이다

좁은 화면에서는 카드로 쌓습니다. 조직관리 네 탭이 모바일에서 표 그대로 나와 화면 밖으로 밀린 「관리」 버튼을 누를 수 없던 적이 있습니다(지점 탭은 표 너비가 화면의 두 배였습니다).

조밀 규격 (예외)

재고관리처럼 열 열두 개를 나란히 놓고 비교하는 표는 카드로 접으면 비교가 안 됩니다. 그런 표만 좁은 화면에서 한 단 조밀하게 그립니다.

	PC	좁은 화면
셀 여백	12.25px	8px
셀 글자	13.5px	12.5px
체크박스	18px	16px
행 끝 버튼	38.5px	32px

줄이는 것은 표 안뿐입니다. 카드·폼의 같은 체크박스와 버튼은 손가락 규격을 지킵니다 — 표는 훑는 곳이고 카드는 누르는 곳이라 필요한 크기가 다릅니다.

값이 체크뿐인 표 (.data-table--compact)

환경설정의 「지점 × 항목」 표들이 이것을 씁니다 — 리포트 설정 · 고객센터 · 계약 기능 관리 · 출퇴근 운영 시간 · 검증 방식 · 패널티 설정. 지점이 128줄인데 한 줄에 담기는 것은 체크 몇 개뿐입니다.

규격	값	이유
표 폭	내용 폭(화면을 채우지 않음)	늘리면 체크 사이가 벌어져 어느 열인지 눈으로 못 따라간다
행 높이	33~35px (여백 7·12)	읽을 글이 없는 표에서 50px 은 낭비. 128줄이면 화면 두 개 반
스크롤	표 안에서만, 520px	머리줄·첫 칸(지점 이름)을 붙잡아 내려가도 잃지 않는다
정렬	열 이름 클릭 = 켜짐 먼저 → 꺼짐 먼저 → 가나다	「어디가 꺼져 있나」를 128줄 훑어 찾을 일이 아니다

열 이름 아래에는 켜진 지점 수(51/128)를 함께 적습니다. 부품은 components/settings/StoreCheckMatrix.tsx 하나입니다 — 지점별 켬/끔 화면을 새로 만들 때 표를 다시 그리지 말고 이것을 씁니다. 체크가 아닌 값(시각 선택 · OCR/GPS/WIFI)을 담는 표는 겉틀만 같이 씁니다(SettingsTable.tsx).

관리 칸의 빈 자리는 비워 두되 자리는 차지한다

조건이 맞는 줄에만 버튼을 그리면(설정이 있는 줄에만 지우기) 그 옆의 저장 버튼이 줄마다 좌우로 흔들려 두 열이 어긋나 보입니다. 없는 버튼은 지우지 말고 invisible 로 자리만 남깁니다.

5. 레이아웃

항목	값
본문 여백	12px (모바일) / 좌우 24 · 상하 20 (PC)
화면 동작 버튼	PC 는 상단 바 오른쪽, 좁은 화면은 바 아래 별도 줄(배경·구분선으로 갈라 놓는다)
검색	칩 줄 오른쪽 끝, 다섯 화면 공통
KPI 카드	PC 4열 / 모바일 가로 스크롤 한 줄
환경설정 카드	1090px 고정 — 탭을 옮겨도 카드의 오른쪽 끝이 움직이지 않는다
카드 안 글줄	680px 에서 끊는다 — 설명 한 줄이 1300px 이면 다음 줄 첫 글자를 못 찾는다

KPI 가 잘려 보이는 것은 의도한 것

모바일에서 2×2로 쌓으면 KPI 가 첫 화면을 통째로 차지해, 정작 봐야 할 목록이 밀려납니다. 가로로 흘리고 잘린 카드를 「더 있다」는 신호로 씁니다.

6. 되풀이하지 않기 위한 메모

• 상태는 색 있는 글자로. 배경 칩은 개수 세는 값에만
• 0 은 힘을 뺀다 — 전체 지점이 기본이라 0인 행이 많고, 전부 진하면 실제 값이 묻힌다
• 아이콘만 있는 버튼은 만들지 않는다 — 누를 수 있는 것인지 모른다. 글자를 붙이거나 툴팁을 단다
• 숫자를 조용히 맞추지 않는다 — 이상하면 「확인이 필요하다」고 옆에 붙이고 이유는 툴팁으로