Dot Product Design Language

한 문장

Quiet confidence — 복잡함은 시스템이 품고, 사용자는 다음 한 걸음에 집중하게 한다.

Dot은 복잡한 운영과 배움의 과정을 단순하게 축소하지 않는다. 필요한 정보와 전문 기능은 보존하되, 지금 판단할 것과 다음 행동이 먼저 보이도록 구조를 만든다. 사용자는 제품의 내부 구조를 배우는 대신 자신의 목표를 이해하고, 안전하게 행동하고, 결과를 확인할 수 있어야 한다.

Dot의 역할

Dot은 학습의 한 고리를 완결하고 다음 배움의 방향을 밝히는 동반자다. 답을 대신 결정하는 존재가 아니라 사람, 데이터, 이전 맥락과 다음 행동을 연결해 사용자가 더 확실하게 판단하도록 돕는다.

이 역할은 캐릭터나 Gradient를 사용하는 순간에만 드러나지 않는다. 정보의 순서, 버튼의 문장, 저장 상태, 오류의 복구 방법, 화면 전환 뒤 보존되는 맥락까지 모두 브랜드 경험이다.

세 가지 브랜드 행동

Flexible — 맥락에 맞게 적응한다

사용자의 역할, 데이터 양, 숙련도와 화면 크기에 따라 정보 밀도와 조작 방식을 바꾼다. 모든 사람에게 같은 화면을 강요하지 않지만, 같은 상태와 행동은 같은 의미를 유지한다.

• 운영자는 많은 항목을 빠르게 비교할 수 있어야 한다.
• 작성자는 선택한 항목 하나에 집중할 수 있어야 한다.
• 처음 온 사용자는 안전한 기본 경로에서 시작할 수 있어야 한다.
• 숙련 사용자는 반복 작업을 줄이는 단축 경로를 사용할 수 있어야 한다.
• 좁은 화면에서는 구조를 재배치하되 핵심 정보와 행동을 제거하지 않는다.

Flexible은 옵션을 끝없이 추가한다는 뜻이 아니다. 사용 사례가 다른 지점을 찾아 적절한 primitive, composition과 pattern으로 대응한다.

Link — 관계와 맥락을 이어준다

사람과 데이터, 목록과 상세, 질문과 답변, 초안과 발행본, 이전 행동과 다음 행동의 관계가 끊기지 않아야 한다.

• 목록에서 상세로 이동해도 검색어, 필터와 선택 위치를 보존한다.
• 편집 화면에서 현재 대상, 저장 상태와 전체 구조를 계속 보여준다.
• 상태 변화에는 원인이 된 행동과 영향을 받는 대상을 함께 표시한다.
• AI가 만든 결과에는 입력, 근거, 검토 상태와 후속 행동을 연결한다.
• 오류가 발생해도 입력값과 작업 맥락을 잃지 않는다.

Link는 모든 정보를 한 화면에 모은다는 뜻이 아니다. 화면을 나누더라도 사용자가 관계를 다시 기억하거나 추론하지 않게 한다.

Glow — 필요한 방향만 밝힌다

강한 색과 브랜드 표현은 사용자가 불확실한 순간에 다음 방향을 찾도록 돕는 데 사용한다. 일반적인 업무 표면을 장식하거나 모든 중요도를 높이는 용도로 사용하지 않는다.

• 주 행동, 실제 AI 처리, 의미 있는 시작·완료와 드문 빈 상태에 제한한다.
• 상태색은 의미를 전달하고, Gradient는 브랜드 순간을 전달한다.
• 강조는 한 작업 영역에 하나만 우세하게 만든다.
• 텍스트, 구조와 위치만으로 이해되지 않는 문제를 색으로 덮지 않는다.
• 모션과 캐릭터가 콘텐츠보다 먼저 주의를 가져가지 않게 한다.

세 행동의 자세한 적용 기준은 브랜드 행동에서 다룬다.

네 가지 사용자 비용

Dot은 화면을 단순해 보이게 만드는 것보다 사용자가 실제로 지불하는 비용을 낮춘다.

새 컴포넌트나 화면은 시각적 완성도와 함께 어떤 비용을 낮추는지 설명할 수 있어야 한다. 비용 하나를 낮추기 위해 다른 비용을 숨겨서 늘리지 않는다. 예를 들어 선택지를 감추어 화면은 짧아졌지만 결과를 예측하기 어려워졌다면 개선이 아니다.

제품 원칙

1. 목적과 완료 기준부터 보여준다

화면을 열면 현재 대상, 이 화면에서 끝낼 일과 완료 여부를 먼저 이해할 수 있어야 한다. 내부 데이터 구조나 구현 용어보다 사용자의 목표를 앞에 둔다.

2. 한 작업 영역에는 하나의 전진 방향을 둔다

페이지에 여러 정보 블록이 있어도 지금 가장 중요한 다음 행동은 하나만 우세해야 한다. 주 행동이 둘 이상이면 화면을 나누거나 행동의 순서를 정한다.

3. 단계를 다듬기 전에 제거한다

이미 알고 있는 값을 다시 묻지 않는다. 단일 선택 뒤 불필요한 확인을 추가하지 않는다. 사용자가 시스템의 분류를 먼저 배워야 하는 단계는 목표 중심으로 다시 구성한다.

4. 사용자가 지금 아는 것으로 판단하게 한다

질문은 관찰 가능한 현재 상태와 익숙한 용어를 사용한다. 구현 방식이나 이후 결과를 먼저 추측하게 하지 않는다. 한 질문에는 하나의 판단만 담는다.

5. 비용을 요구하기 전에 결과를 설명한다

긴 입력, 권한, 업로드나 중요한 동의를 요구하기 전에 사용자가 얻을 구체적인 결과와 필요한 이유를 보여준다. 가치와 비용, 제한을 같은 판단 맥락 안에서 투명하게 제공한다.

6. 기본 경로는 좁히고 선택권은 보존한다

합리적인 기본안이나 다음 행동을 먼저 제안하되 근거, 대안과 변경 경로를 남긴다. 불확실한 추천을 확정된 답처럼 표현하거나 다른 선택지를 숨기지 않는다.

7. 복잡함은 필요한 순서로 공개한다

전문 기능을 제거하지 않는다. 요약에서 세부로, 정상 흐름에서 예외로, 자주 쓰는 선택에서 고급 설정으로 단계화한다. 지금 결정을 바꾸지 않는 정보는 다음 맥락으로 미룬다.

8. 행동 결과를 누르기 전에 알게 한다

버튼은 확인보다 초안 저장, 검증 실행, 커리큘럼 발행처럼 결과를 말한다. 되돌리기 어려운 행동은 대상, 영향, 복구 가능성과 대안을 행동 전에 보여준다.

9. 상태까지 설계해야 경험이 완성된다

기본 화면만 설계하지 않는다. loading, empty, partial, stale, error, disabled, read-only, 권한 없음, success와 destructive 상태에서 정보와 행동이 어떻게 이어지는지 정의한다.

10. 위계가 장식을 이긴다

여백, 정렬, 타이포그래피와 구분선으로 먼저 관계를 만든다. 모든 정보를 Card로 감싸거나 강한 색, 아이콘, Shadow와 Gradient로 중요도를 경쟁시키지 않는다.

11. 움직임은 인과관계를 설명한다

모션은 입력 피드백, 공간 전환, 실제 진행과 중요한 변화만 설명한다. 장식적 반복, 기다리게 하는 전환과 레이아웃을 흔드는 로딩을 사용하지 않는다.

12. 모든 사용자가 핵심 과업을 끝낼 수 있게 한다

키보드, 화면 읽기, 확대, 긴 텍스트, 좁은 화면과 모션 감소 환경에서도 같은 핵심 정보와 행동을 제공한다. 접근성은 별도 버전이 아니라 모든 컴포넌트의 기본 상태다.

13. 공통 경로는 빠르게, 예외 경로는 막지 않는다

자주 쓰는 단순한 경우에는 안전한 기본 조합을 제공하고, 구조적 변형이 필요한 경우에는 의미 있는 slot과 composition을 제공한다. 반복되는 로컬 우회는 사용자의 잘못이 아니라 시스템이 아직 해결하지 못한 수요로 본다.

경험의 성격

• Clear: 첫 시선에서 목적, 현재 상태와 다음 행동을 찾을 수 있다.
• Calm: 정보와 예외를 과장하지 않고 구조와 문장으로 설명한다.
• Capable: 전문 기능을 축소하지 않으면서 조작 순서를 분명히 한다.
• Connected: 사람, 데이터, 탐색, 선택과 저장 상태가 계속 이어진다.
• Guiding: 사용자를 대신 통제하지 않고 판단할 방향을 밝힌다.
• Human: 짧고 구체적인 한국어로 결과와 복구 방법까지 알려준다.

화면 설계 순서

새 화면을 그리기 전에 다음 질문에 답한다.

1. 목표 — 누가 어떤 상황에서 무엇을 끝내려는가?
2. 맥락 — 판단에 필요한 대상, 상태와 이전 행동은 무엇인가?
3. 전진 방향 — 지금 가장 중요한 다음 행동은 무엇인가?
4. 상태 — 기다림, 비어 있음, 실패, 권한 제한과 완료는 어떻게 이어지는가?
5. 복구 — 사용자가 취소하고 수정하고 다시 시도할 수 있는가?
6. 적응 — 좁은 화면, 긴 콘텐츠, 키보드와 보조 기술에서도 목표를 끝낼 수 있는가?

이 답이 없으면 컴포넌트를 고르기 전에 문제를 더 정의한다. 상세한 판단법은 목적과 우선순위, 정보 위계, 피드백과 복구를 따른다.

페이지 평가 체크리스트

• 제목과 첫 콘텐츠만 보고 대상, 상태와 목적을 설명할 수 있는가?
• 주 행동이 두 개 이상 같은 강조도로 경쟁하지 않는가?
• 사용자가 모르는 내부 용어나 미래 상태를 먼저 선택하게 하지 않는가?
• 지금 판단을 바꾸지 않는 설명과 옵션이 기본 경로를 방해하지 않는가?
• 필터가 영향을 주는 데이터 가까이에 있고 결과 범위가 보이는가?
• 반복 데이터가 불필요한 카드 묶음 대신 행이나 표로 비교되는가?
• loading, empty, error와 권한 없음이 같은 맥락과 다음 행동을 유지하는가?
• 버튼만 읽어도 결과와 대상을 예측할 수 있는가?
• 저장·검증·발행 상태가 색상 없이도 이해되는가?
• 잘못된 행동에서 입력과 맥락을 잃지 않고 돌아올 수 있는가?
• 캐릭터, Glow나 모션이 실제 안내 역할 없이 정보보다 먼저 보이지 않는가?
• 키보드, 확대, 긴 텍스트와 좁은 화면에서도 핵심 과업이 유지되는가?