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

안내는 바꿔도, 동작은 절대

~9 min · ux, verbose-mode, design

Level 0침묵
0 XP0/36 lessons0/12 achievements
0/100 XP to next level100 XP to go0% complete
"Verbose 모드는 컨트롤에 대해 뭐라고 들려주는지를 바꿔. 컨트롤이 하는 일은 안 바꾸고."

조용한 기본과 설명기

Bellows는 Simple 모드로 열려. 컨트롤들, 그 외엔 별거 없어. Verbose 켜면 컨트롤마다 설명이 자라. 동작, 지속성 경계, 크레딧 영향, 재생 대상, 비활성이면 왜인지, 파괴적이면 뭘 부수는지까지. 말이 많지. 그래서 기본으로 숨기는 게 맞아. 도구를 아는 운영자가 버튼 하나 누르자고 문단을 헤칠 필욘 없으니까.

그걸 안전하게 만드는 규칙

중요한 선은 이거야. 토글은 안내만 바꾸고 동작은 안 바꿔. Verbose 모드의 Speak 버튼은 Simple 모드의 Speak 버튼이 하는 일을 그대로 해. Verbose는 기계를 비추는 렌즈지 다른 기계가 아니야. 당연해 보이지만 이걸 깨는 도구가 얼마나 많은데. 확인창까지 붙이는 '도움말 모드', 날카로운 기능을 슬쩍 꺼버리는 '초보 모드'. help-mode가 동작을 바꾸는 순간 그 설명은 거짓말이 돼. 읽는 동안에만 존재하는 기계를 그리니까.

왜 이 규율이 값을 하나

안내랑 동작이 붙어 있으면, Simple 모드에서도 Verbose가 하는 말을 믿을 수 있어. 그 설명이 진짜, 유일한 기계 얘기니까. Verbose 설명을 스크린샷 떠서 Simple 쓰는 사람한테 건네도 그대로 맞아. 컨트롤이 하는 것과 그것에 대해 들려주는 것을 갈라놓는 건, 작은 규칙인데 신뢰에선 크게 남는 거야.

Code

동작 하나, 설명은 두 분량·typescript
// Verbose changes what you are TOLD, never what the button DOES.
function SpeakButton({ verbose }: { verbose: boolean }) {
  const speak = useSpeak();          // identical action in BOTH modes

  return (
    <div>
      <button onClick={speak}>Speak</button>
      {verbose && (
        <Guidance>
          Persists this profile as your default. A cache hit is free;
          a miss spends credits. Plays on the owned audio output.
        </Guidance>
      )}
    </div>
  );
}

// WRONG: this would make the explanation a lie.
// if (verbose) return <button onClick={confirmThenSpeak}>Speak</button>;

External links

Exercise

'도움말 모드', '초보 모드', '고급 모드' 있는 소프트웨어를 찾아. 그 모드가 들려주는 걸 바꾸는지, 컨트롤이 하는 일을 바꾸는지, 둘 다인지 판단해. 동작을 바꾼다면, 모드를 갈아탄 순간 그게 도구를 믿기 어렵게 만드는 방식을 하나 대봐.
Hint
모드의 정직한 버전은 렌즈야. 같은 기계에 말이 더 많거나 적거나. 부정직한 버전은 같은 버튼을 쓴 다른 기계고.

Progress

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

댓글 0

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

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