색보다 값

"숫자는 사실이야. 색은 의견이고. 사실을 앞세워."

빨강/초록은 중립이 아냐

전형적인 브로커 앱을 열면 눈이 처음 잡는 건 색이야: 빨강의 벽, 초록의 얼룩. 이건 설계의 우연이 아냐 — 색은 화면이 가진 가장 빠른 감정 채널이고, 그걸 앞세우는 건 사실보다 감정을 앞세우는 거야. 큰 빨간 숫자는 뇌가 그게 뭔지 읽기도 전에 나빠, 반응해 라고 말해. Keep 는 위계를 일부러 뒤집어: 값·날짜·출처·staleness 가 먼저; 색은 조용한 부차적 악센트. 어떻게 되고 있는지 느끼기 전에 그게 뭔지 읽어.

provenance 는 숫자의 일부야

가격 혼자는 반쪽 사실이야. Keep 는 모든 quote 를 자기 서류를 지닌 observation 으로 다뤄: 어느 market date 용인지, 언제 fetch 됐는지, 어떤 source 가 줬는지, 지금 얼마나 stale 한지. 그 메타데이터는 깨알 글씨가 아냐 — 값 옆에 보여져, provenance 없는 숫자는 마땅한 것보다 더 믿게 유혹하니까. "$X, source Y 에서, date Z 기준, 4시간 됨" 은 차분하고 완전한 사실이야. 깜빡이는 초록의 "$X" 는 nudge 야.

표시 위계는 미학만이 아니라 윤리적 선택이야. 가장 크고 밝게 렌더하는 게 유저한테 먼저 느끼라고 말하는 거야. provenance 와 값을 앞세우면 유저는 추론해. 빨강/초록 urgency 를 앞세우면 유저는 반응해. CSS 가 윤리가 실체화되는 곳이야.

쉬는 상태에선 이렇게 보여

Keep 의 차분한 표면 — Simple 모드, Family scope, 스트리밍 pause — 은 durable 하고 잘 출처 밝힌 그림을 보여줘: 뭘 가졌는지, 마지막 completed close 에 얼마였는지, 각 숫자가 어디서 왔는지, 얼마나 신선한지. tick 도, 맥동도, 무버 리더보드도 없어. live overlay 를 원하면 일부러 켜고(Track 5), 그때도 live tick 은 raw delta 를 소리치는 대신 안정된 baseline 에 대고 재. 기본은 심박 모니터가 아니라 사진이야.

어떤 데이터 UI 든 빠른 감사: 글자가 흐려질 때까지 화면을 째려봐. 남는 것 — 아직 인지되는 모양과 색 — 이 설계가 진짜로 외치는 거야. 답이 '빨강 초록 덩어리' 면 인터페이스가 감정을 앞세우는 거야. '값들의 차분한 그리드' 면 사실을 앞세우는 거고.

색은 여전히 있어 — 강등됐을 뿐. 이건 흑백 수도승 방이 아냐. 빨강/초록은 방향의 부차적 신호로 존재해; 그냥 화면에서 가장 시끄러운 게 아니고 네가 처음 처리하는 게 절대 아냐. 삭제가 아니라 강등 — 차분함은 정보를 없애서가 아니라 위계에서 와.

Code

provenance 가 값과 함께 다녀 (예시 모양)·typescript

// quote 는 맨숫자가 절대 아냐 — 자기 서류를 지녀.
type Observation = {
  value: number;        // 가격/값 자체
  marketDate: string;   // 적용되는 거래일
  fetchedAt: string;    // 실제로 가져온 시각
  source: string;       // 어느 provider 가 줬는지
  ageSeconds: number;   // 지금 얼마나 stale 한지
};

// 렌더는 값 + provenance 를 앞세우고; 방향 색은
// 차분한 부차적 악센트, 절대 헤드라인 아냐.
function render(o: Observation): string {
  return `${o.value}  · ${o.source} · as of ${o.marketDate} · ${fresh(o.ageSeconds)}`;
}

Exercise

쓰는 대시보드를 찾아 째려보기 시험을 해: 눈을 흐리게 하고 뭐가 가장 시끄러운지 봐. 그다음 사실이 앞서고 감정 색이 따라오게 시각 위계를 종이에 다시 써. 한 지표에 대해, 숫자와 함께 다녀야 할 provenance 를 전부 나열해(출처, timestamp, 신선도) — 반응을 구걸하는 맨숫자 대신 완전하고 차분한 사실로 읽히게.

Hint

색을 다 없앴더니 대시보드가 쓸모없어졌으면, 값과 라벨이 스스로 지녔어야 할 의미를 감정에 기대 나른 거야. 좋은 데이터 UI 는 흑백에서도 여전히 읽혀 — 색은 이미 완전한 사실 위의 악센트지 사실 자체가 아냐.

빨강/초록은 중립이 아냐

provenance 는 숫자의 일부야

쉬는 상태에선 이렇게 보여

Code

External links

Exercise

Progress

댓글 0