본문 바로가기
C.W.K.
Stream
Lesson 02 of 04 · published

색보다 값

~11 min · visual-hierarchy, provenance, calm-ui, staleness

Level 0Open Gate
0 XP0/36 lessons0/12 achievements
0/100 XP to next level100 XP to go0% complete
"숫자는 사실이고 색은 의견이야. 사실을 앞에 세워."

빨강 초록은 중립이 아니야

흔한 브로커 앱을 열면 눈에 제일 먼저 들어오는 건 색이야. 온통 빨갛거나, 군데군데 초록이거나. 우연히 그렇게 된 게 아니야. 색은 화면이 가진 가장 빠른 감정 채널이고, 색을 앞세운다는 건 사실보다 감정을 먼저 건드리겠다는 뜻이거든. 큼지막한 빨간 숫자는 뇌가 내용을 읽기도 전에 나쁘다, 반응해 부터 외쳐. Keep 는 이 위계를 일부러 뒤집었어. 값과 날짜와 출처와 staleness 가 먼저 오고, 색은 조용한 보조 악센트로 물러나. 어떻게 되고 있는지 느끼기 전에, 그게 뭔지부터 읽게 되는 거야.

provenance 는 숫자의 일부야

가격 하나만 달랑 있으면 반쪽짜리 사실이야. Keep 는 모든 quote 를 서류가 딸린 observation 으로 다뤄. 어느 거래일의 값인지, 언제 가져왔는지, 어느 source 가 줬는지, 지금 얼마나 낡았는지가 늘 붙어 다니지. 이 메타데이터는 깨알 각주가 아니라 값 바로 옆에 나란히 보여. provenance 없는 숫자는 실제보다 더 믿음직해 보이는 함정이거든. "$X, source Y, date Z 기준, 4시간 경과" 는 차분하고 완전한 사실이야. 초록으로 깜빡이는 "$X" 는 그냥 nudge 고.

표시 위계는 미학이기 전에 윤리적 선택이야. 제일 크고 밝게 그린 것이 곧 유저더러 제일 먼저 느끼라고 시키는 거야. provenance 와 값을 앞세우면 유저는 생각하고, 빨강 초록 urgency 를 앞세우면 유저는 반응해. 윤리가 실물이 되는 자리는 결국 CSS 야.

쉬는 화면은 이렇게 생겼어

Keep 의 차분한 기본 화면, 그러니까 Simple 모드에 Family scope 에 스트리밍 pause 상태를 떠올려 봐. 뭘 갖고 있는지, 마지막 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;   // 지금 얼마나 낡았는지
};

// 렌더는 값과 provenance 를 앞세워.
// 방향 색은 차분한 보조 악센트일 뿐, 헤드라인이 아니야.
function render(o: Observation): string {
  return `${o.value}  · ${o.source} · as of ${o.marketDate} · ${fresh(o.ageSeconds)}`;
}

External links

Exercise

네가 쓰는 대시보드로 째려보기 검사를 해 봐. 눈을 가늘게 뜨고, 뭐가 제일 시끄러운지 확인해. 그다음 종이에 시각 위계를 다시 그려 봐. 사실이 앞서고 감정 색이 따라오게. 지표 하나를 골라서, 그 숫자와 함께 다녀야 할 provenance 도 전부 적어 봐. 출처, timestamp, 신선도까지. 반응을 구걸하는 맨숫자가 아니라 완전하고 차분한 사실로 읽히게 만드는 거야.
Hint
색을 전부 빼 봤더니 대시보드가 무용지물이 된다면, 값과 라벨이 스스로 전했어야 할 의미를 색이 대신 나르고 있었던 거야. 좋은 데이터 UI 는 흑백에서도 읽혀. 색은 이미 완전한 사실 위에 얹는 악센트지, 사실 그 자체가 아니야.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.