페이지 골격
모든 화면은 가운데 정렬된 하나의 컨테이너 안에서 시작합니다.
배경과 헤더는 화면 전체 폭까지 나가고, 내용은 컨테이너 안에만 들어갑니다.
| 구간 | 화면 폭 | 컨테이너 폭 |
|---|---|---|
| PC | 1280px 이상 | 최대 1380px · 가운데 정렬 |
| TB | 769 – 1279px | 708px |
| MB | 768px 이하 | 360px · 좌우 여백 20px 포함 |
쓸 수 있는 값은 2 · 4 · 6 · 8 · 10 · 12 · 14 · 16 · 18 · 20 · 24 · 26 · 30 · 40 열네 개뿐입니다. 제안거리가 멀수록 큰 값을 쓰는 위 기준을 따르면 화면끼리 리듬이 맞습니다. 모서리 둥글기는 4 · 6 · 10 · 원형 네 가지입니다.
- 32px, 48px을 쓴다. 8의 배수처럼 보이지만 이 시스템에 없는 값입니다. 8px 그리드가 아닙니다.
- 가로 스크롤이 생긴다. 컨테이너를 넘기는 표나 카드가 원인입니다. 넘칠 것 같으면 줄이거나 접으세요.
- PC만 그리고 넘긴다. 세 구간을 모두 그리되, 앞 구간과 똑같은 화면은 생략해도 됩니다.
색
역할 네 개만 외우면 됩니다. 남색은 브랜드, 파랑은 다음 동작, 주황은 문제, 회색은 나머지 전부.
화면의 대부분은 흰색과 회색입니다. 색이 들어가는 자리는 이렇게 서너 곳뿐입니다.
MAIN — 브랜드
SUB BLUE — 다음 동작
POINT — 문제 · 부정
SUB GREEN
그린만 01보다 02가 더 진합니다 — 다른 계열과 순서가 반대입니다. 확인 필요.
각 계열은 01이 가장 진하고 05로 갈수록 옅어집니다. 연한 단계는 배경, 진한 단계는 글자와 테두리에 씁니다.
| 파란 채움은 화면당 하나 | 사용자가 다음에 눌러야 할 버튼 하나만 파랗게 합니다. 파란 버튼이 셋이면 어디를 눌러야 할지 알 수 없습니다. |
| 주황은 문제가 생겼을 때만 | 평소 화면에 주황이 없어야 눈에 띕니다. |
| 남색은 헤더와 브랜드 영역에 | 본문에서 강조용으로 쓰지 않습니다. |
- 오류에 빨강을 쓴다. 이 시스템에 빨강 계열은 없습니다. 오류는 주황입니다. 팔레트에 없다고 새로 만들지 마세요.
- 브랜드색으로 버튼을 만든다. 남색은 아이덴티티, 파랑은 인터랙션입니다. 다음 단계 버튼은 파랑입니다.
- 취소 버튼을 파랗게 만든다. 사용자가 진행으로 오인합니다.
글자
크기로 위계를 만들고, 굵기는 세 단계만 씁니다.
라벨은 Medium으로 작게, 값은 Regular로 크게. 이 대비만으로 폼과 상세 화면 대부분이 읽힙니다.
서체는 Pretendard, 굵기는 Bold 600 / Medium 500 / Regular 400 세 가지뿐입니다. 쓸 수 있는 크기는 40 · 38 · 34 · 30 · 26 · 24 · 21 · 20 · 18 · 16 · 15 · 14 · 13이고, 행간은 크기마다 이미 정해져 있으니 그대로 씁니다.
- 자간을 조정한다. 전 스타일 자간 0 고정입니다. 건드리지 마세요.
- 17px, 22px 같은 중간값을 만든다. 목록에 없는 크기는 없는 값입니다.
- 굵기를 네 종류 이상 쓴다. 세 단계로 충분합니다.
- 버튼 안 글자 크기를 따로 정한다. 버튼 크기를 고르면 자동으로 결정됩니다.
버튼
“이걸 누르면 무슨 일이 일어나는가”로 스타일이 결정됩니다. 화면마다 다시 정하지 않습니다.
진행한다 · 채움 · 파랑
취소·중단한다 · 외곽선 · 주황
목록으로 간다 · 채움 · 검정
그 외 일반 동작 · 외곽선 · 검정
오른쪽 정렬, 부정을 왼쪽·진행을 오른쪽에, 버튼 사이 간격 8 또는 12. 모바일에서는 세로로 쌓고 각각 전체 너비로.
| L | 폼 제출, 페이지의 주 동작 |
| M | 기본값. 대부분 여기 |
| S | 테이블 행 안의 동작, 필터 |
| XS | 요소가 빽빽한 영역 |
형태는 사각형(기본) · 원형 · 알약형 세 가지, 비활성은 톤 다운, 로딩은 버튼 안 스피너입니다.
- 한 화면에 파란 버튼이 여러 개. 주 동작 하나만 파랗게 합니다.
- 주황 채움을 쓴다. 시스템에 존재하지만 정의된 용도가 없습니다. 쓰기 전 팀 확인.
- 버튼을 화면 하단에 고정한다. 이 서비스는 쓰지 않는 패턴입니다. 내용 바로 아래에 두세요.
- 버튼 문구 길이가 제각각. 나란히 놓이는 버튼은 길이를 비슷하게 맞춥니다.
입력과 폼
라벨 → 입력창 → 도움말, 세로로 쌓는 것이 기본입니다.
오류가 나면 테두리와 문구가 함께 주황으로 바뀝니다. 문구는 무엇을 고쳐야 하는지 구체적으로 씁니다.
| 요소 | 크기 | 상태 |
|---|---|---|
| 텍스트 입력 | S / M / L | 기본 · 오류 · 경고 · 비활성 |
| 셀렉트 | S / M / L | 단일 · 다중 선택, 검색 가능 |
| 체크박스 · 라디오 | — | 기본 · 선택 · 비활성 |
| 텍스트영역 | — | 기본 · 비활성 · 읽기전용 |
| 날짜 선택 | S 기본 / M / L | 형식 YYYY.MM.DD, 범위 지정 |
검증 문구는 필드별 한글 메시지가 기본입니다. 비밀번호 확인처럼 여러 항목이 얽힌 경우만 조합 규칙으로 처리합니다.
- 오류를 한 곳에 모아서만 보여준다. 필드마다 그 자리에서 알려줘야 합니다.
- 필수 항목 표시가 화면마다 다르다. 같은 폼 안에서는 한 방식으로 통일하세요.
- 도움말이 두 줄을 넘는다. 모바일 기준 한 줄이 목표입니다.
화면 세 가지
웹 서비스 화면은 대부분 목록 → 상세 → 등록으로 수렴합니다. 새 화면은 이 중 하나로 먼저 분류하세요.
| 번호 | 품목 | 상태 | 등록일 | |
|---|---|---|---|---|
| 0812 | 이형철근 SD400 | 발행완료 | 2026.08.12 | |
| 0811 | 레미콘 25-24-15 | 배송완료 | 2026.08.11 |
검색은 상단, 필터는 칩으로 노출, 페이지네이션은 필수. 필터 UI는 화면끼리 공유하지만 동작은 화면마다 따로 관리됩니다 — 다른 화면 필터가 그대로 작동할 거라 가정하지 마세요.
액션 버튼은 정보 카드 바로 아래 전용 영역에 둡니다. 하단 고정은 쓰지 않습니다. 사용자용 화면은 카드·섹션으로, 관리자와 정산 화면은 테이블로 배치합니다.
제목 → 표 입력 → 부가정보 → 이전·다음 순서를 따릅니다. 필수값이 빠진 채 다음을 누르면 확인 모달로 안내합니다.
작은 조각들
새로 그리기 전에, 이미 있는 것을 먼저 찾으세요.
색은 일곱 단계까지만 존재합니다. 여덟 단계로 오인해 쓴 사례가 있으니 확인하세요. 위 문구는 예시이며, 상태값과 색의 실제 매핑표는 아직 정리되어 있지 않습니다.
문구는 완료형으로 통일합니다. 버튼이 “저장”이면 토스트는 “저장되었습니다”입니다.
아이콘 + 제목 + 설명 + 버튼. 새로 그리지 말고 재사용하세요.
| 카드 | 범용 카드는 없습니다. 상품 카드, 자산 카드, 정보 카드처럼 용도별로 따로 만드는 것이 이 서비스의 방식입니다. 하나로 합치려 하지 말고 색·글자·간격 값을 재사용해 새로 그리세요. |
| 모달 | 제목 + 본문 + 하단 버튼 구조입니다. 확인·알림 모달은 화면마다 새로 그리지 않고 기존 템플릿을 재사용합니다. 새 모달이 필요하면 템플릿에 케이스를 추가하는 쪽을 먼저 검토하세요. |
| 마우스 · 키보드 | Hover는 반드시 정의합니다 — 색상이나 투명도 변화로. 제안Transition은 0.2초 + ease를 기본값으로 맞춥니다. 클릭 가능한 요소를 새로 만들면 버튼임을 알리는 역할 정보와 키보드 포커스 순서를 함께 정의해 개발에 넘기세요. |
넘기기 전 확인
열 줄입니다. 넘기기 직전에 한 번 훑으세요.
아직 규칙이 없는 것
아래는 정해진 기준이 없는 항목입니다. 임의로 만들지 말고, 필요해지면 팀에서 정하세요.
- 01그림자(Elevation) — 카드와 모달에 그림자를 쓰는지 자체가 미정
- 02모달 뒤 딤 처리 색상과 투명도
- 03그리드 컬럼 수와 거터
- 04로고 최소 여백 · 최소 크기 · 배경별 사용 규칙
- 05배너와 썸네일 비율, 최소 해상도
- 06공용 로딩 스피너 · 스켈레톤
- 07검색 결과 없음(No Result) 전용 화면
- 08정보성 안내(Info) 색상
- 09색상 대비 기준, 터치 영역 최소 크기
- 10용어집 — “확인”과 “완료”의 구분 등
- 11상태값과 배지 색의 매핑표
- 12주황 채움 버튼의 용도