밀도와 훑어보기

목적

Dot의 밀도는 많은 정보를 좁게 넣는 정도가 아니라 사용자가 비교하고 이상을 찾고 다음 행동을 선택하는 속도로 판단한다. 운영 화면은 충분히 촘촘해야 하고, 작성과 학습 화면은 읽고 생각할 여백이 있어야 한다.

Flexible은 동일한 정보 본질을 유지하면서 작업과 화면 맥락에 맞게 밀도와 표현을 바꾸는 기준이다.

밀도 선택

같은 목록 안에서는 하나의 밀도를 유지한다. 중요 항목만 높이를 키우기보다 강조, 상태, section 분리로 우선순위를 표현한다.

밀도를 정하는 질문

1. 사용자는 읽는가, 비교하는가, 입력하는가?
2. 한 번에 몇 개 항목을 봐야 이상을 찾을 수 있는가?
3. 각 항목에 필요한 행동 수와 설명 길이는 얼마인가?
4. touch, pointer, keyboard 중 어떤 조작이 중심인가?
5. 좁은 화면에서 핵심 정보가 재배치될 수 있는가?

비교가 중심이면 행·표, 설명과 선택이 중심이면 여유 있는 목록, 긴 입력이 중심이면 section form을 선택한다.

훑어보기 구조

• 반복 항목의 시작점, 상태, 수치, 행동 위치를 고정한다.
• 한 열 안에서 날짜, 단위, 소수점, 상태 용어의 형식을 통일한다.
• 기본 식별자는 ink-strong, 본문은 ink-default, 메타데이터는 ink-subtle로 계층을 나눈다.
• 숫자 비교에는 tabular-nums를 사용한다.
• 예외는 행 전체를 강한 색으로 칠하기보다 상태 레이블과 필요한 설명으로 표시한다.
• 열 제목은 짧게 쓰고 정렬·단위·범위를 사용자가 예측할 수 있게 한다.
• 스캔 경로를 방해하는 장식 아이콘과 반복 버튼을 줄인다.

표와 record list

표를 사용한다.

• 두 개 이상의 속성을 여러 항목 사이에서 수직 비교한다.
• 정렬과 열 단위가 판단에 중요하다.
• 동일한 작업을 여러 행에 반복한다.

record list를 사용한다.

• 항목마다 설명 길이와 정보 구조가 다르다.
• narrow layout에서 표 열을 유지하기 어렵다.
• 한 대상의 핵심 정보와 행동을 묶어 읽는 것이 중요하다.

작은 화면에서 표를 단순 축소하지 않는다. 각 행을 이름 → 핵심 상태 → 주요 값 → 행동 순서로 재배치하고 원래의 핵심 정보와 행동을 보존한다.

카드와 section

• 독립된 대상이나 별도 표면이 필요한 콘텐츠에만 Card를 사용한다.
• 모든 지표를 카드 하나씩으로 분리하지 않고 MetricStrip의 균일한 셀로 비교한다.
• 카드 안에 카드를 중첩하지 않는다. 반복 데이터는 border row로 나눈다.
• 관련 콘텐츠는 Section 제목, 설명, 여백으로 먼저 묶는다.
• background와 shadow보다 proximity와 alignment를 우선한다.

카드를 많이 사용하면 모든 정보가 같은 중요도로 보이고 페이지가 세로로 길어진다.

필터와 bulk action

• 검색과 필터는 영향을 주는 데이터 바로 위 PageToolbar에 둔다.
• 적용된 필터는 결과 수와 함께 확인할 수 있게 한다.
• 필터가 많으면 빈번한 조건을 먼저 두고 나머지는 명시적인 추가 필터 흐름으로 제공한다.
• 다중 선택이 시작되면 선택 수, 전체 선택 범위, 가능한 bulk action을 같은 bar에 표시한다.
• bulk action은 숨겨진 페이지나 전체 결과까지 적용되는지 분명히 말한다.
• 선택이 해제되는 조건을 예측 가능하게 유지한다.

텍스트와 truncation

• 식별에 필요한 이름은 가능한 한 한 줄에서 충분히 보여준다.
• 보조 설명은 1–2줄로 제한할 수 있지만 전체 내용을 확인할 경로를 제공한다.
• ID나 긴 경로는 앞뒤 식별 부분을 보존하는 형식을 검토한다.
• tooltip은 필수 정보의 유일한 접근 경로가 될 수 없다.
• 줄임표가 여러 열에 반복되면 열 구성이나 상세 진입 구조를 다시 설계한다.
• 줄 길이는 설명 문장에서 약 72자를 넘기지 않도록 한다.

운영·학습·AI 맥락

• 운영 현황은 정상 값보다 실패·대기·재시도 대상을 먼저 찾게 한다.
• 학습 콘텐츠 목록은 과정 이름, 대상, 진행 상태, 다음 학습 시점을 일관된 위치에 둔다.
• 편집 화면은 전체 구조와 현재 항목을 분리해 한 번에 하나의 입력 묶음에 집중시킨다.
• AI 결과 목록은 생성 여부보다 검토 상태, 적용 대상, 확정 여부를 우선한다.
• 긴 AI 답변은 요약을 임의로 대체하지 말고 핵심 제안과 원문을 명확한 계층으로 연결한다.

Flexible, Link, Glow의 적용

• Flexible: 작업 성격과 viewport에 따라 표, 행, 순차 목록으로 바꾸되 판단 정보는 유지한다.
• Link: 목록의 선택과 상태가 상세·편집으로 이어지고, 돌아왔을 때 같은 비교 위치를 복구한다.
• Glow: 비교 화면의 장식이나 정상 수치에 쓰지 않는다. 예외 후 다음 행동을 안내하는 드문 순간에만 사용한다.

예외와 피해야 할 사용

• compact 행에 12px 미만 정보 텍스트를 사용하지 않는다.
• 모든 행에 여러 색 badge와 icon button을 반복하지 않는다.
• 비교 데이터를 반응형 카드 grid로 바꾸어 열 정렬을 잃지 않는다.
• 많은 정보를 담았다는 이유로 horizontal scroll을 무조건 금지하지 않는다. 필요한 경우 고정된 식별 열과 scroll 맥락을 제공한다.
• whitespace를 줄이는 대신 레이블과 설명을 제거하지 않는다.
• 모바일에서 중요한 열을 단순히 display: none으로 없애지 않는다.
• 카드 여백과 shadow로만 계층을 만들지 않는다.
• 긴 목록의 각 항목에 캐릭터나 Glow를 반복 사용하지 않는다.

상태와 접근성

• interactive row와 내부 action의 click·keyboard 영역을 겹치지 않는다.
• 최소 interactive target은 밀도와 무관하게 40×40px이다.
• 표 header와 cell 관계를 programmatically 유지한다.
• 정렬 상태와 변경 결과를 텍스트로 전달한다.
• color만으로 선택·예외·변경 상태를 표현하지 않는다.
• keyboard focus가 viewport 밖으로 이동하면 해당 행이 보이도록 scroll한다.
• loading skeleton은 최종 행 구조와 비슷하게 만들어 layout shift를 줄인다.
• virtualized list를 사용하면 focus, screen reader count, 검색 결과 위치를 별도로 검증한다.

검토 질문

• 이 화면의 중심 작업은 읽기, 비교, 입력 중 무엇인가?
• 선택한 밀도가 그 작업 속도를 실제로 높이는가?
• 반복 항목의 식별자, 상태, 수치, 행동이 같은 위치에 있는가?
• 정상 정보보다 조치가 필요한 예외를 빠르게 찾을 수 있는가?
• 모든 것을 카드로 나누어 비교 축을 잃지 않았는가?
• 좁은 화면에서도 핵심 정보와 행동이 보존되는가?
• truncation 없이 보여줘야 할 식별 정보를 충분히 확보했는가?
• 40×40px target과 12px 이상 정보 텍스트를 유지하는가?
• 표와 record list 중 사용자의 판단 방식에 맞는 것을 선택했는가?
• 화면을 촘촘하게 만든 결과 맥락과 다음 행동이 더 분명해졌는가?