목적과 우선순위

목적

Dot 화면은 사용자가 복잡한 운영·학습·AI 작업을 차분하고 확실하게 끝내도록 돕는다. 화면을 단순해 보이게 만드는 것보다 지금 무엇을 판단하고 다음에 무엇을 해야 하는지 분명하게 만드는 것이 우선이다.

Quiet confidence는 장식을 줄이는 취향이 아니라 다음 결과를 만드는 운영 원칙이다.

• 사용자는 첫 5초 안에 화면의 목적과 현재 상태를 설명할 수 있다.
• 가장 중요한 다음 행동을 다른 행동과 혼동하지 않는다.
• 세부 기능이 많아도 작업 순서와 결과를 예측할 수 있다.
• 정상·예외·복구 상태가 같은 구조 안에서 이어진다.
• 브랜드 표현은 중요한 순간을 설명하며 업무보다 앞서지 않는다.

우선순위의 기준

화면에 들어갈 정보와 행동은 다음 순서로 판단한다.

1. 사용자의 완료 기준: 이 화면을 떠날 때 무엇이 끝나 있어야 하는가?
2. 판단에 필요한 현재 상태: 사용자가 행동 전에 반드시 알아야 하는 상태는 무엇인가?
3. 주 행동: 완료 기준에 가장 직접적으로 도달하는 행동은 무엇인가?
4. 예외와 위험: 실패, 미저장, 권한, 데이터 신뢰도처럼 결정을 바꾸는 조건은 무엇인가?
5. 보조 정보와 행동: 주 행동을 준비하거나 확인하는 데 필요한 것은 무엇인가?
6. 참고 정보: 없어도 작업을 끝낼 수 있지만 이해를 돕는 것은 무엇인가?

구현 편의, 데이터 모델 순서, 조직 내부 용어는 이 순서를 바꾸는 근거가 되지 않는다.

화면 목적 문장

새 화면을 설계하기 전에 아래 형식으로 목적을 한 문장으로 고정한다.

[사용자]가 [현재 맥락]에서 [대상]을 판단하거나 변경해 [확인 가능한 결과]를 만든다.

좋은 예:

• 운영자가 실패한 학습 알림을 원인별로 확인하고 다시 발송할 대상을 결정한다.
• 콘텐츠 담당자가 커리큘럼의 미완성 항목을 수정해 검증 가능한 초안을 만든다.
• 강사가 AI가 제안한 피드백을 검토하고 학습자에게 보낼 최종 문장을 확정한다.

피해야 할 예:

• 커리큘럼 관리 화면을 제공한다.
• 데이터를 보여준다.
• 다양한 AI 기능을 사용할 수 있다.

목적 문장에 완료 결과가 없으면 화면의 범위와 주 행동도 결정할 수 없다.

화면 유형과 한 가지 결정

한 화면은 하나의 중심 결정을 돕는다. 다음 유형이 한 화면에서 경쟁하면 경로 또는 단계로 나눈다.

탐색과 대규모 편집, 현황 감시와 신규 생성, 검토와 원본 작성이 동시에 주목을 요구하면 별도 화면이나 명확한 모드로 분리한다.

시각 우선순위

시각 강조는 정보의 중요도와 일치해야 한다.

• 페이지 제목은 현재 대상과 작업을 식별한다.
• 설명은 사용자가 할 수 있는 일과 범위를 한두 문장으로 제한한다.
• 상태·최근 저장·환경 정보는 행동 결과를 바꿀 때 제목 가까이에 둔다.
• 주 행동은 한 화면에서 하나만 가장 강한 버튼 스타일을 사용한다.
• 보조 행동은 outline, secondary, ghost 또는 메뉴로 낮춘다.
• 위험 행동은 자주 쓰인다는 이유로 항상 강조하지 않는다. 실행 맥락에서만 destructive tone을 사용한다.
• 숫자가 많아도 핵심 판단에 쓰이는 지표만 metric 계층으로 올린다.

크기, 색, 위치, 여백을 모두 강하게 사용해 중요도를 중복 표현하지 않는다. 한 단계의 강조에는 한두 가지 신호면 충분하다.

Flexible, Link, Glow의 적용

Flexible

작업과 화면 크기에 따라 정보 밀도와 배치를 바꾸되 핵심 정보와 행동은 보존한다. 좁은 화면에서 열을 숨기는 대신 행을 재구성하고, 전문가 기능은 제거하는 대신 단계적으로 공개한다.

Link

목록의 필터, 선택한 대상, 저장 상태, 검토 결과가 다음 화면에서도 이어져야 한다. 사용자는 어디서 왔는지, 무엇이 바뀌었는지, 어디로 돌아갈지 알아야 한다.

Glow

브랜드 강조는 AI가 실제로 처리 중이거나, 온보딩·완료·의미 있는 빈 상태처럼 드문 순간에만 쓴다. 일반 저장, 탐색, 표 행, 기본 버튼에는 적용하지 않는다.

적용 순서

1. 사용자와 완료 결과를 정의한다.
2. 결정에 필요한 상태와 위험을 나열한다.
3. 주 행동 하나를 정한다.
4. 정보를 즉시 필요 / 행동 전에 필요 / 요청 시 필요로 분류한다.
5. PageScaffold → PageHeader → context 또는 PageToolbar → content 순서가 맞는지 확인한다.
6. loading, empty, error, disabled, success/result 상태에서도 목적과 다음 행동이 유지되는지 확인한다.
7. small, medium, wide 화면에서 같은 우선순위가 유지되는지 검토한다.

예외와 피해야 할 사용

• 법적 동의처럼 여러 항목을 각각 명시적으로 결정해야 하면 한 화면에 여러 필수 선택이 있을 수 있다. 그래도 최종 제출 행동은 하나다.
• 병렬 운영 작업이 핵심인 전문가 도구는 여러 보조 행동을 노출할 수 있다. 가장 빈번하다는 이유만으로 모두 primary가 되어서는 안 된다.
• 대시보드가 여러 지표를 보여줘도 각 카드가 별도의 주 행동을 가져서는 안 된다. 예외를 선택하면 해당 작업 화면으로 이동시킨다.
• 마케팅 문구, 캐릭터, 큰 숫자로 화면의 실제 상태를 가리지 않는다.
• 내부 API 상태명이나 테이블 컬럼 순서를 그대로 화면 위계로 사용하지 않는다.
• “깔끔하게 보이기 위해” 오류, 조건, 복구 방법을 숨기지 않는다.

상태와 접근성

• 화면 제목은 하나의 h1로 제공하고, 주요 영역은 논리적인 제목 계층을 따른다.
• 주 행동은 DOM 순서와 키보드 순서에서도 자연스럽게 도달할 수 있어야 한다.
• 상태는 색뿐 아니라 텍스트로 이름을 제공한다.
• loading 중에도 사용자가 기다리는 대상과 진행 중인 행동을 알 수 있어야 한다.
• empty와 error 상태는 원래 콘텐츠와 같은 frame 안에서 이유와 다음 행동을 제공한다.
• disabled 행동은 이유를 인접한 설명으로 알 수 있어야 한다. 이유를 설명할 수 없다면 숨김, 읽기 전용 또는 실행 후 안내가 더 적절한지 검토한다.
• 화면 전환 후 h1 또는 변경된 주요 영역으로 focus를 이동할 수 있어야 한다.

검토 질문

• 사용자는 이 화면을 열고 5초 안에 목적과 현재 상태를 말할 수 있는가?
• 완료 기준이 화면 제목과 주 행동에 드러나는가?
• 가장 강하게 보이는 요소가 실제로 가장 중요한 판단 또는 행동인가?
• primary로 보이는 행동이 하나뿐인가?
• 보조 기능을 제거하지 않고 적절히 단계화했는가?
• 예외와 위험이 행동 전에 필요한 위치에 있는가?
• loading, empty, error에서도 사용자가 다음에 무엇을 할지 아는가?
• 좁은 화면에서도 핵심 정보와 주 행동이 남아 있는가?
• 브랜드 표현이 업무를 설명하는가, 아니면 업무보다 먼저 보이는가?
• 데이터 구조가 아니라 사용자의 언어와 순서로 화면을 구성했는가?