[5월 TIL #1] 옵션 간 차이를 직관적으로 만든다는 것

옵션을 추가한다는 건, 옵션 간 차이를 직관적으로 만드는 일이었다.

이번 페이지 번역 옵션 추가 작업이 딱 그랬다. 처음에는 번역 방식을 하나 더 넣는 문제라고 생각했다. 그런데 작업을 하다 보니, 단순히 버튼을 추가하는 일이 아니었다.

기존 번역은 원문 PDF 옆에 번역 텍스트 패널을 붙여 보여준다. 새 번역은 원본 PDF와 번역 PDF를 나란히 보여주거나, 번역 PDF만 따로 보여준다. 기능의 목적은 모두 “번역해서 읽기”다. 하지만 사용자가 보게 되는 화면과 읽는 방식은 다르다. 그럼 사용자는 이 세 가지 방식을 어떻게 구분해야 할까?

이 질문을 붙잡고 있다가 NN/g의 「Explicitly State the Difference Between Options」을 읽고 도움을 받을 수 있었다.

---

글의 핵심 — 5가지 원칙

선택지의 차이를 사용자가 추측하게 하지 않기
이 글의 핵심은 명확했다. 선택지 사이의 차이를 암시하지 말고, 명시적으로 보여줘야 한다는 것.

사용자는 우리가 생각하는 것만큼 옵션 간 차이를 알아서 비교하지 않는다. 차이가 잘 보이지 않으면 모든 선택지를 비슷하게 받아들이거나, 반대로 작은 차이에 과하게 신경 쓰게 된다. 그래서 좋은 UX는 단순히 선택지를 나열하는 것이 아니라, 사용자가 판단해야 할 차이를 먼저 보여주는 일에 가깝다.

 

[읽으면서 정리해본 5가지]

 

1. 차이가 적을 때 → 차이를 시각적으로 부각

옵션들이 거의 비슷하다면, 같은 속성은 차분하게 두고 다른 속성만 색이나 강조로 도드라지게 한다. 글에선 Amazon의 Breville 에스프레소 머신 비교표를 예로 들었다. 6가지 기능 중 다른 2개만 시각적으로 튀게 만들어서, 사용자가 1초 만에 "아, 이 두 개가 다르구나" 라고 알 수 있다.

w. Claude

 

2. 차이가 많을 때 → 핵심만 노출 + Progressive Disclosure

옵션이 여러 면에서 다를 땐 모든 차이를 한 번에 보여주면 부담된다. 핵심 차이만 부각하고, 디테일은 "더 보기" 버튼으로 숨긴다. 글에선 Great Clips의 헤어스타일 비교를 예로 들었다. 사진 + 키워드 3개 + "Check it out" 버튼. 헤어스타일은 비교 항목이 많은데, 시각으로 압축하고 디테일은 클릭 시.

w. Claude

 

3. 기술 용어 → 결과 표현으로 변환

Le Creuset 냄비 사례. "4.5 qt" 라고만 쓰면 미국 사람이 아닌 이상 와닿지 않는다. 그래서 "4.5 qt — 4-5인분" 처럼 사용자가 진짜 알고 싶은 정보(몇 명 먹을 수 있나)로 변환해 적었다.

 

4. 가정하지 말고 명시

대학교 학비 사례. West Virginia 대학은 "in-state tuition" 이라고 적었는데, 처음 대학을 알아보는 십대한텐 "in-state가 뭐지?" 부터 막힌다. UC San Diego는 "California resident" 라고 적어서 어느 주 기준인지 명확히 했다. 우리 도메인 안에서 명백한 단어가, 밖에선 안 그럴 수 있다.

 

5. You are not the user

팀에 있는 사람들은 시스템을 너무 잘 안다. 그래서 모든 게 명백해 보이는 상태에 빠진다. 근데 사용자는 우리만큼 알지 못한 채로 들어온다.

"디자인 회의에서 누군가 'X는 명백하잖아'라고 말하는 게 들리면 — 그건 우리 조직 바깥 사람에겐 명백하지 않을 수 있다는 신호다."

 

원칙을 체크리스트로

글을 읽고 나서, 내용을 금방 잊을 것 같았다. 그래서 실제 화면을 볼 때 던질 수 있는 질문으로 바꿔봤다.

1. 차이 적을 때	같은 속성이랑 다른 속성을 시각적으로 구분했나?
2. 차이 많을 때	핵심만 노출하고 나머지는 숨겼나?
3. 결과 표현	기술 용어가 아니라 사용자가 이해하는 결과로 적었나?
4. 가정 없음	사용자가 모를 단어를 가정하고 쓰지 않았나?
5. You are not the user	팀 바깥 사람에게 보여줘봤나?

질문 형태로 바꾸고 나니 원칙이 조금 더 쓸 수 있는 도구가 됐다. 화면을 보면서 “좋다 / 별로다”로 끝나는 게 아니라, 어디가 왜 애매한지 짚어볼 수 있었다.

 

그러고 보니 — Pricing 페이지

이 다섯 가지 질문을 머리에 넣고 나니까, 갑자기 우리 제품의 Pricing 페이지가 떠올랐다. 예전에 봤을 때 "뭔가 아쉬운데.."라고만 생각하고 넘어갔던 페이지였다. 다시 들어가서 다섯 가지 질문을 순서대로 던져보니 잘된 부분과 약한 부분이 나뉘어 보였다.

 

✅ 잘된 부분

- 카드 3개 (Free / Pro / Premium) 위쪽 + 비교표 아래쪽 → progressive disclosure 구조 자체는 좋다 (질문 2 통과)
- 각 카드의 한 줄 설명 ("AI와 함께 논문을 완벽 이해하세요") → 결과 기반 표현 (질문 3 통과)

⚠️ 약한 부분
- 비교표의 "Limited" 표기 → 무엇이 limited 한지 표면에서 안 보임. 횟수? 깊이? 모델 종류? (질문 4 실패)
- AI 모델 라벨 ("Reasoning Models", "GPT-5 nano") → 사용자(논문 읽는 연구자/학생)가 진짜 이해하는 용어인가? (질문 3, 4 실패)
- 물음표(?) 아이콘이 많다는 자체가 "기본 라벨이 충분히 명시적이지 않다" 는 신호 같았다.

✏️ 깨달은 점 — 기준이 생기니까
전이라면 그냥 "디자인이 별로이고, 이해가 잘 안 돼요" 정도로밖에 얘기하지 못했을텐데, 이제는 어디가 잘됐고 / 어디가 약하고 / 왜 그런지 말로 풀 수 있게 됐다. 다섯 개의 질문이 머릿속 어딘가에 자리잡으니까 가능해졌다.
이게 학습이 자리잡았다는 신호인 것 같다. 자료를 외운 게 아니라, UX/UI를 판단하는 새 렌즈가 하나 가지게 된 것 같아 기뻤다.

---

마무리 — 그래서 페이지 번역은

처음 글을 펼친 이유로 돌아와보면, 페이지 번역에 새 옵션을 어떻게 넣을지에 대한 결정은 아직 논의 중인 상태이다. 다만 복잡했던 것들이 몇 가지로 정리됐다. 이건 차이가 많은 케이스고, 그래서 모든 차이를 동등하게 보여주는 대신 핵심 하나를 정해야 한다. 라벨에 "텍스트 패널 vs PDF 형식" 같은 기술 용어가 들어가 있다면 결과 표현으로 다시 써야 한다. 그리고 결정 전에 팀 바깥의 시선이 한 번은 필요하다. 답은 아직 없지만, 무엇을 정해야 하는지가 보이는 것만으로 도움이 되는 공부였다. 굿!!