---
name: salesmap-design
version: alpha
description: 세일즈맵 스타일의 웹 페이지를 새로 만들거나 기존 페이지를 세일즈맵 스타일로 고칩니다. 대상은 세일즈맵 데이터로 만드는 대시보드와 리포트, 세일즈맵 연동 안내 페이지, 도입 문의 폼, 기능 소개 랜딩, 고객에게 보내는 안내 문서, 세일즈맵과 함께 쓰는 외부 도구 화면입니다. 세일즈맵 제품 자체의 화면 개발에는 쓰지 않습니다.
reader: 외부 AI 에이전트 (coding / design agent)
omitted:
  - colors
  - typography
  - spacing
  - rounded
  - components
x-salesmap-revision: "1.0.2"
x-last-updated: "2026-10-26"
---

# SalesMap Design Language

이 문서는 판단 규칙만 담은 진입 문서입니다. 정확한 값과 사용법은 아래 네 파일에
있고, 작업에 필요한 파일만 찾아 읽습니다.

| 파일 | 내용 |
|---|---|
| [`./design/patterns.md`](./design/patterns.md) | 페이지 구성 패턴과 기존 화면 개조 절차 |
| [`./design/style.md`](./design/style.md) | 타이포·레이아웃·표면·아이콘·모션·데이터 시각화·문구·접근성 |
| [`./design/components.md`](./design/components.md) | 컴포넌트의 용도·변형·상태와 참고 CSS |
| [`./design/token.md`](./design/token.md) | 토큰 값과 전역 설정 |

## How to use

이 문서는 AI 에이전트가 읽는 지시문입니다. 사용자가 이 문서의 링크나 내용을
건네는 것만으로 아래 규칙이 적용됩니다.

세일즈맵의 디자이너이자 프런트엔드 엔지니어로 일합니다. 색과 컴포넌트를 입히는
일보다 **읽는 사람이 무엇을 판단해야 하는지 정하고, 그 판단에 필요한 정보를 순서대로
배치하는 일**을 먼저 합니다. 토큰만 맞추고 구성을 습관대로 만들면 세일즈맵 페이지가
되지 않습니다.

스타일을 적용하기 전에 아래 다섯 가지를 먼저 정합니다.

1. 이 페이지를 여는 사람이 무엇을 결정하려는지 한 문장으로 적습니다
2. 새로 만드는 페이지인지, 이미 있는 페이지를 고치는 것인지 구분합니다
3. `patterns.md`에서 가장 가까운 패턴을 고릅니다
4. 기존 페이지라면 색을 바꾸기 전에 정보 구조부터 검사하고 고칩니다 (`patterns.md` Existing-page retrofit)
5. 그다음에 `style.md`, `components.md`, `token.md`에서 필요한 부분만 찾아 적용합니다

### 작업별로 읽을 곳

| 작업 | 먼저 읽을 곳 | 이어서 |
|---|---|---|
| 대시보드·리포트 | `patterns.md` Dashboard / Report | `style.md` Data visualization, `components.md` Stat·Table |
| 기존 페이지 개조 | `patterns.md` Existing-page retrofit | 해당 패턴 |
| 폼·설정 | `patterns.md` Form / Workflow | `components.md` Input·Button |
| 랜딩·안내 문서 | `patterns.md` Landing / Guide | `style.md` Typography |
| 컴포넌트 하나 | `components.md` | `token.md` |

모든 작업에서 `token.md`의 토큰 블록과 전역 설정을 먼저 붙여 넣습니다.

### 규칙 강도

- **필수**: 어기면 세일즈맵 페이지가 아니게 되는 항목입니다
- **권장**: 기본값입니다. 이유가 있으면 바꿀 수 있고, 바꾼 이유를 결과에 적습니다
- **선택**: 상황에 맞게 정합니다

사용자가 색·폰트·간격을 지정하지 않은 모든 경우에 이 문서의 값을 씁니다. 사용자가
값을 지정했으면 그 값이 우선합니다.

## Overview

세일즈맵은 B2B 영업팀이 하루 종일 쓰는 CRM입니다. 세일즈맵 페이지는 **정보 밀도가
높지만 강조색과 장식을 적게 쓰고 판단 속도를 우선합니다.**

세일즈맵 페이지에서는 아래 특징을 볼 수 있습니다.

- 첫 화면에서 "그래서 지금 어떤가"에 대한 답이 보입니다
- 관련된 정보가 하나의 질문 아래에 묶여 있습니다
- 같은 의미는 페이지 어디서나 같은 색과 같은 표기로 나옵니다
- 클릭할 수 있는 것과 없는 것이 겉모습만으로 구분됩니다
- 흰 페이지 위에서 섹션을 간격과 제목으로 나누고, 강조색은 인디고(main) 하나입니다
- 화면마다 강조하는 곳은 한 곳입니다. 무엇을 강조할지는 화면 내용에 따라 정합니다

세일즈맵 페이지는 아래 네 가지를 일부러 하지 않습니다.

- 모든 요소를 카드에 담거나, 카드를 같은 크기와 같은 무게로 나열하지 않습니다
- 그라데이션 배경, 글로우, 유리 질감, 스크롤 연출을 쓰지 않습니다
- 같은 정보를 여러 곳에 반복하지 않습니다
- 차트마다 색의 의미를 새로 정하지 않습니다

페이지가 정돈되어 보이려면 관련된 정보가 묶이고 중요한 것이 먼저 나와야 합니다.
모든 요소에 같은 색을 입혀서 정돈된 인상을 만들지 않습니다.

## Scope and precedence

### 대상

세일즈맵 데이터로 만드는 대시보드·리포트, 폼·설정 화면, 세일즈맵 연동 안내
페이지, 기능 소개 랜딩, 고객에게 보내는 안내 문서가 대상입니다.

이 문서는 세일즈맵 제품의 소스 코드, 저장소 구조, 사내 디자인 시스템, 구현 API를
설명하지 않습니다. `components.md`의 CSS는 결과를 재현하기 위한 참고 구현이며
세일즈맵 제품의 클래스 이름이 아닙니다.

### 충돌할 때의 우선순위

위에서 아래로 양보합니다.

1. 사용자가 준 사실, 숫자, 단위, 단서 조항, 명시한 제약
2. 읽는 사람이 해야 하는 판단과 그 판단에 필요한 정보 위계
3. 접근성 (대비, 키보드 조작, 색에만 의존하지 않는 표시)
4. `patterns.md`의 페이지 패턴
5. `components.md`의 컴포넌트 동작
6. `style.md`, `token.md`의 시각 스타일

사용자가 쓰던 프레임워크, 파일 경로, 이미 적용된 세일즈맵 토큰은 그대로 둡니다.
사용자 요청이 이 문서와 충돌하면 사용자의 실제 목적은 지키되 심각한 위계·가독성·
접근성·인터랙션 문제는 함께 고칩니다.

## Working process

### 새 페이지

1. 읽는 사람이 내려야 할 판단을 한 문장으로 적습니다
2. `patterns.md`에서 패턴을 고릅니다
3. 판단 → 근거 → 세부 순서로 정보 위계를 정합니다 (Information hierarchy)
4. 강조할 대상 하나를 정합니다 (`style.md` Emphasis)
5. 각 정보를 담을 컴포넌트를 고릅니다 (`components.md`)
6. 스타일과 토큰을 마지막에 적용합니다

골격은 출발점으로만 씁니다. 템플릿처럼 칸을 다 채우지 않습니다. 보여 줄 것이 세
가지가 안 되면 3컬럼 그리드를 만들지 않습니다. 근거가 되는 숫자가 없으면 지표
영역을 만들지 않습니다.

### 기존 페이지

**필수**: 리디자인을 색 바꾸기로 끝내지 않습니다.

색을 바꾸기 전에 아래를 먼저 검사하고, `patterns.md` Existing-page retrofit
절차대로 고칩니다.

- 정보 순서: 가장 중요한 답이 첫 화면에 있는가
- 중복: 같은 정보(숫자, 이름, 상태)가 여러 곳에 나오는가
- 묶음: 관련된 카드와 차트가 한 질문 아래 모여 있는가
- 폭과 밀도: 콘텐츠 폭이 1200px 안에 있는가, 카드 패딩이 제각각이지 않은가
- 차트 선택: 비교가 목적인데 파이 차트나 분리된 차트를 쓰고 있지 않은가
- 색의 의미: 같은 항목이 차트마다 다른 색으로 나오지 않는가
- 인터랙션: 클릭할 수 없는 글자에 링크 색을 쓰지 않았는가
- 상태: 불러오는 중, 데이터 없음, 오류 상태가 있는가

사용자가 "디자인만 조금 바꿔줘"라고 해도 "조금"을 색 변경으로 해석하지 않습니다.
구조를 크게 바꾸지는 않되 위 목록에서 걸리는 오류는 최소 범위로 고칩니다.

## Information hierarchy

읽는 사람이 판단하는 데 필요한 순서대로 정보를 놓습니다.

분석형 페이지(대시보드, 리포트)는 기본적으로 아래 순서로 정보를 놓습니다.

1. **맥락과 조작**: 페이지 제목, 기간, 필터
2. **핵심 지표**: 판단에 직접 쓰이는 숫자 3~4개
3. **판단을 돕는 비교**: 목표 대비, 기간 대비, 그룹 간 비교
4. **세부 근거**: 분포, 목록, 원본 테이블

규칙은 다음과 같습니다.

- **필수**: 모든 카드에 같은 시각적 무게를 주지 않습니다. 핵심 지표와 주요 비교는
  세부 근거보다 크고 먼저 나옵니다
- **필수**: 같은 정보는 한 번만 보여 줍니다. 숫자뿐 아니라 이름, 상태, 설명도 해당합니다. KPI에 있는 숫자를 아래 차트 제목이나
  다른 카드에서 다시 크게 보여 주지 않습니다
- **필수**: 관련된 차트는 하나의 질문 아래 섹션으로 묶습니다. 섹션 제목은 명사형으로 짧게
  쓰고("등급별 질문유형 비중"), 결론은 제목 아래 설명 한 줄에 수치로 적습니다. 제목과 설명에
  같은 단어를 반복하지 않습니다
- **권장**: 부차적인 진단 정보(데이터 품질, 보조 지표)는 주요 업무 정보 아래로 내립니다.
  다만 수치 전체를 믿기 어렵게 만드는 오류는 예외로, KPI 위에 둡니다
- **권장**: 한 섹션에는 차트 1~3개를 둡니다. 더 많으면 섹션을 나누거나 합칠 수 있는
  차트를 합칩니다

## Pattern selection

| 페이지 목적 | 패턴 (`patterns.md`) |
|---|---|
| 현황을 보고 문제를 찾는다 | Dashboard |
| 기간 결과를 정리해 공유한다 | Report |
| 정보를 입력하거나 설정한다 | Form / Workflow |
| 기능을 소개하거나 방법을 안내한다 | Landing / Guide |
| 이미 있는 페이지를 고친다 | Existing-page retrofit + 위 패턴 중 하나 |

맞는 패턴이 없는 화면은 새 패턴을 만들지 않고 Information hierarchy와 `style.md` Emphasis로
판단합니다. 패턴을 고르기 전에 스타일을 적용하지 않습니다. 두 패턴에 걸치면 읽는 사람의 첫
번째 목적에 맞는 쪽을 고릅니다.

## Content and interaction tone

### 문구

- **필수**: 명확하고 쉬운 문구를 씁니다. 멋있는 표현보다 바로 이해되는 표현을 고릅니다
- **필수**: 사내 용어와 개발 용어 대신 사용자가 쓰는 업무 용어를 씁니다
- **필수**: 오류 문구는 무엇이 실패했는지와, 가능하면 다음에 할 행동을 적습니다
- 상세 기준은 `style.md` Voice and tone에 있습니다

### 인터랙션

- **필수**: 클릭할 수 있어 보이는 것은 실제로 클릭할 수 있어야 합니다
- **필수**: 링크는 `main-600` 글자와 밑줄로 표시합니다. 밑줄은 링크에만 씁니다
- **필수**: 보기 전환, 펼치기 같은 행동은 링크 모양이 아니라 버튼(Text Button, Default)으로 만듭니다
- 클릭할 수 없는 핵심 수치도 `main-600`으로 강조할 수 있습니다. 이때 밑줄은 넣지 않습니다
- **필수**: 한 판단 맥락에 Primary 버튼은 하나입니다

## Do and don't

| Do | Don't |
|---|---|
| 정보를 정리한 뒤 스타일을 입힙니다 | 기존 화면 색만 바꾸고 리디자인이라 부릅니다 |
| 같은 의미에는 페이지 전체에서 같은 색을 씁니다 | 차트마다 색의 의미를 새로 정합니다 |
| 의미가 있는 항목(등급, 상태)에는 의미색을 씁니다 | 의미 있는 항목에 계열 순서색을 기계적으로 붙입니다 |
| 관련된 정보를 질문 단위 섹션으로 묶습니다 | 모든 요소를 카드에 담거나 같은 무게의 카드를 나열합니다 |
| 화면마다 강조할 곳 하나를 정합니다 | 모든 것을 회색으로 두거나 여러 곳을 동시에 강조합니다 |
| 비교가 목적이면 막대 차트를 씁니다 | 비교해야 하는 데이터를 파이 여러 개로 나눕니다 |
| 예외와 오류를 눈에 띄게 표시합니다 | 오류를 회색 작은 글씨로 숨깁니다 |
| 기존 페이지의 쓰지 않는 스타일을 지웁니다 | 옛 색·그림자·폰트를 지우지 않고 그 위에 토큰을 적용합니다 |
| 공개 토큰 값을 씁니다 | 토큰이 있는데 임의 hex·간격을 만듭니다 |

## Accessibility

- 색만으로 의미를 전달하지 않습니다
- 포커스와 인터랙션 상태가 항상 보이게 합니다
- 본문 텍스트는 배경 대비 4.5:1 이상입니다
- 지원하는 화면 폭에서 읽는 순서와 위계가 유지되게 합니다

색별 사용 기준과 컴포넌트별 요건은 `style.md` Accessibility에 있습니다.

## Self-check (내보내기 전에 필수)

구성

- 토큰을 적용하기 전에 패턴을 골랐는가
- 기존 페이지였다면 스타일뿐 아니라 구조도 검사했는가
- 첫 화면에 가장 중요한 답이 가장 크게 보이는가
- 관련된 정보가 한 섹션에 묶여 있고, 섹션 제목이 명사형이며 설명과 단어가 겹치지 않는가
- 이 화면의 강조 대상 하나가 한눈에 드러나는가
- 카드마다 카드를 쓴 이유가 있는가
- 같은 정보가 두 번 나오지 않는가
- 같은 대상을 화면 전체에서 같은 용어로 부르는가

시각

- 같은 의미가 모든 차트에서 같은 색인가
- 클릭할 수 있는 것과 없는 것이 구분되는가. 링크 모양(밑줄)이 링크에만 쓰였는가
- 임의 hex, 4 / 8 / 12 / 9999px 밖의 radius, 홀수 px 간격이 없는가
- 본문 색이 `gray-700` 이상인가

상태와 접근성

- 데이터를 보여 주는 페이지에 불러오는 중, 데이터 없음, 오류 상태가 있는가
- 키보드 탭만으로 모든 버튼과 입력에 닿고 포커스가 보이는가
- 화면 폭을 375px까지 줄였을 때 가로 스크롤이 생기지 않는가 (테이블 내부 스크롤은 예외)
- 이 문서와 하위 문서에 있는 공개 정보만 썼는가

하나라도 걸리면 그 부분만 고칩니다. 전체를 다시 만들지 않습니다.

## License

| 항목 | 내용 |
|---|---|
| 색·타이포·레이아웃 토큰 | 자유롭게 사용 가능 |
| 세일즈맵 로고, 상호, 브랜드 자산 | 세일즈맵과의 연동·소개 맥락에서만 사용 가능 |

세일즈맵이 만들지 않은 페이지에 세일즈맵 로고를 넣거나, 세일즈맵이 제공하는
서비스인 것처럼 표기하지 마세요.

변경 이력은 [`./design/CHANGELOG.md`](./design/CHANGELOG.md)에 있습니다.