이 글은 누구를 위한 것인가
- 도메인 용어가 많아 신규 사용자가 초반에 이탈하는 서비스
- 툴팁을 붙였는데 아무도 안 누른다는 데이터를 받은 팀
- 용어집 페이지를 만들었지만 유입이 거의 없는 경우
들어가며
전문 용어가 많은 화면에서 흔히 하는 처방은 셋이다.
① 용어 옆에 (?) 아이콘 → 툴팁
② 별도 용어집 페이지
③ 온보딩 튜토리얼에서 한 번에 설명
셋 다 붙였는데도 사용자가 여전히 막힌다면, 이유는 대체로 하나다. 설명이 필요한 순간과 설명이 있는 위치가 어긋나 있다.
용어 UX의 문제는 "설명을 제공했는가"가 아니라 **"사용자가 판단을 내려야 하는 그 지점에 설명이 있는가"**다.
1. 세 가지 용어를 구분한다
모든 용어를 똑같이 다루면 화면이 물음표로 뒤덮인다. 먼저 분류한다.
[A] 결정에 필요한 용어
이 뜻을 모르면 다음 행동을 정할 수 없다
예: "수수료 부과 방식", "해지 위약금 산정 기준"
→ 인라인 설명. 툴팁으로 숨기면 안 된다.
[B] 이해를 돕는 용어
몰라도 진행은 되지만 알면 판단이 정확해진다
예: "연환산 수익률", "실효세율"
→ 툴팁 적합.
[C] 참조용 용어
가끔 궁금해지는 것. 흐름을 끊으면서까지 볼 필요 없음
예: 업계 약어, 규격 이름
→ 용어집 페이지.
A를 툴팁에 넣는 것이 가장 흔한 실수다. 툴팁은 "누르면 나오는 것"이고, 누르는 행동은 이미 모른다는 걸 자각한 사용자만 한다. 자기가 뭘 모르는지 모르는 사용자는 그냥 지나간다.
[판별 질문]
"이 용어를 오해한 채로 진행하면
사용자가 나중에 후회할 결정을 내리는가?"
→ 예: A. 인라인으로 쓴다.
→ 아니오: B 또는 C.
2. 첫 등장에서 한 번 풀어쓴다
가장 비용이 낮고 효과가 큰 처방이다. 용어의 첫 등장에 짧은 동격 설명을 붙인다.
❌ 환수율이 96%인 상품입니다.
✅ 환수율(장기적으로 이용자에게 돌아가는 비율)이 96%인 상품입니다.
❌ 이 항목은 실효세율 기준으로 계산됩니다.
✅ 이 항목은 실효세율(공제를 반영한 실제 부담 세율) 기준으로 계산됩니다.
규칙은 단순하다.
· 괄호 안은 최대 한 줄 (15~25자)
· 정의가 아니라 "이 화면에서 이게 왜 중요한지"
· 첫 등장에만. 같은 페이지에서 반복하지 않는다
· 정확성보다 방향성 — 완전한 정의는 용어집으로
세 번째 규칙이 자주 깨진다. 같은 용어에 매번 괄호를 달면 본문이 읽히지 않는다. 세션 단위로 한 번만 보여주고 이후에는 용어만 노출하는 처리가 필요하다.
HTML에서는 <dfn>으로 "이 문서에서 이 용어를 정의하는 지점"을 표시할 수 있다. MDN의 <dfn> 문서에 정의 대상과 설명을 연결하는 방식이 정리돼 있고, 스크린 리더가 이를 구분해 읽는다.
3. 툴팁 — 모바일에서는 툴팁이 아니다
툴팁은 데스크톱의 호버를 전제로 만들어진 패턴이다. 모바일에는 호버가 없으므로, 툴팁은 실제로는 "탭하면 열리는 작은 팝오버"다.
[모바일 툴팁의 실패 조건]
✗ 터치 타겟이 작다 — (?) 아이콘이 16px
✗ 열린 툴팁이 정작 설명 대상 용어를 가린다
✗ 바깥을 탭해야 닫히는데 그 안내가 없다
✗ 스크롤하면 툴팁만 남고 대상은 사라진다
특히 두 번째가 치명적이다. 사용자는 "이 단어가 무슨 뜻이지?"를 확인하려고 열었는데, 열린 팝오버가 그 단어를 덮으면 맥락을 잃는다.
/* 툴팁 트리거는 시각 크기와 무관하게 히트 영역을 넓힌다 */
.term-trigger {
position: relative;
}
.term-trigger::after {
content: '';
position: absolute;
inset: -12px; /* 최소 24×24 확보 */
}
터치 타겟 최소 크기는 WCAG 2.2의 기준에 24×24 CSS 픽셀로 규정돼 있다. 시각적으로 작게 보이더라도 히트 영역은 이를 만족해야 한다.
용어 자체를 트리거로 만드는 편이 (?) 아이콘보다 낫다. 타겟이 크고, 무엇에 대한 설명인지 자명하다. 점선 밑줄 정도로 구분하면 링크와 혼동되지 않는다.
<button type="button" class="term" aria-expanded="false" aria-controls="def-rtp">
환수율
</button>
<div id="def-rtp" role="region" hidden>
장기적으로 이용자에게 돌아가는 비율입니다. 개별 회차의 결과와는 무관합니다.
</div>
여닫이 구조는 ARIA disclosure 패턴을 따른다. aria-expanded로 상태를 전달하지 않으면 스크린 리더 사용자는 열렸는지조차 알 수 없다.
4. 용어집 — 목적지가 아니라 경유지
별도 용어집 페이지는 만들어두고 유입이 없어 방치되는 대표적 자산이다. 원인은 사용자가 용어집을 찾아갈 이유가 없어서다.
[용어집이 실제로 쓰이는 경로]
✗ 메뉴 → 도움말 → 용어집 거의 안 씀
✓ 본문 용어 → 툴팁 → "자세히" ← 주 경로
✓ 검색엔진에서 용어 직접 검색 ← 의외로 큰 비중
두 번째 경로 때문에 툴팁과 용어집을 연결하는 것이 중요하다. 툴팁은 한 줄 요약, 그 아래 "자세히 보기"가 용어집의 해당 항목으로 간다. 툴팁만 있고 더 깊이 갈 곳이 없으면 사용자는 거기서 멈춘다.
세 번째 경로 때문에 용어집 항목마다 고유 URL이 있어야 한다. 한 페이지에 아코디언으로 전부 넣으면 개별 용어가 검색 결과에 잡히지 않는다.
용어집의 서술 밀도도 결정해야 한다. 정보 제공을 목적으로 하는 사이트들이 이 부분을 어떻게 다루는지 보면 기준이 잡힌다. 카지노게임.kr의 용어 정리 페이지는 용어마다 정의에 그치지 않고 "왜 이 수치를 오해하기 쉬운지"를 함께 적는 방식인데, 사용자가 용어집을 찾는 이유가 대개 정의가 궁금해서가 아니라 판단이 안 서서라는 점을 감안하면 합리적인 선택이다.
[용어집 항목 구성 — 권장]
1. 한 줄 정의 (툴팁과 동일한 문장)
2. 왜 중요한가 이 값이 사용자 결정에 어떻게 작용하는지
3. 흔한 오해 "~라고 생각하기 쉽지만 실제로는"
4. 관련 용어 링크 함께 봐야 이해되는 것들
3번이 실질적으로 가장 유용하다. 정의를 읽고도 오해하는 지점이 대개 정해져 있기 때문이다.
5. 점진적 공개 — 언제 얼마나 보여줄 것인가
용어 설명을 전부 펼쳐두면 화면이 무거워지고, 전부 접어두면 아무도 안 본다. 점진적 공개 원칙을 적용하되, 무엇을 기본 노출로 둘지의 기준이 필요하다.
[기본 펼침 vs 기본 접힘]
펼침: A유형(결정에 필요) + 해당 화면에서 처음 등장하는 용어
접힘: B유형 + 이미 본 적 있는 용어(세션 기준)
→ "이 사용자가 이 용어를 본 적 있는가"를 상태로 관리
신규 사용자와 재방문자에게 같은 밀도를 보여줄 이유가 없다. 다만 "본 적 있음"을 영구 저장하면 오랜만에 돌아온 사용자가 불리해진다. 세션 또는 30일 정도의 기한을 두는 편이 낫다.
const SEEN_TTL = 30 * 24 * 60 * 60 * 1000;
function shouldExpand(term) {
if (term.type === 'A') return true; // 결정에 필요한 용어는 항상
const seen = store.get(`term:${term.id}`);
return !seen || Date.now() - seen > SEEN_TTL;
}
6. 마이크로카피 — 정의보다 결과를 쓴다
같은 용어라도 어떻게 설명하느냐에 따라 이해도가 크게 다르다.
❌ 사전적 정의
"환수율: 총 배당금을 총 투입금으로 나눈 비율"
→ 정확하지만 사용자는 여전히 뭘 해야 할지 모름
✅ 결과 중심
"장기적으로 돌아오는 비율입니다.
한 번의 결과를 예측하는 값은 아닙니다."
→ 오해 지점을 먼저 차단
"~가 아니다"를 명시하는 것이 효과적인 경우가 많다. 사용자가 이미 갖고 있는 잘못된 모델을 교정하는 것이 새 개념을 주입하는 것보다 빠르다.
[마이크로카피 체크]
□ 다른 전문 용어로 설명하지 않았는가
□ 사용자가 이 화면에서 할 행동과 연결되는가
□ 흔한 오해를 직접 부정하는 문장이 있는가
□ 25자 이내인가 (툴팁 기준)
첫 항목이 가장 자주 위반된다. "실효세율: 명목세율에서 공제를 반영한 세율"은 '명목세율'을 모르는 사용자에게 아무 도움이 안 된다.
7. 측정 — 툴팁 클릭률만 보면 안 된다
용어 UX의 성과를 툴팁 클릭률로만 보면 잘못된 결론에 도달한다.
툴팁 클릭률이 낮다
→ 해석 A: 아무도 관심 없다 (제거해도 됨)
→ 해석 B: 인라인 설명이 잘 돼서 툴팁이 불필요하다 (성공)
둘을 구분하려면 다른 지표가 필요하다
[함께 볼 지표]
· 해당 단계 이탈률 설명이 부족하면 여기서 떨어진다
· 용어 관련 CS 문의 수 가장 직접적인 신호
· 용어집 페이지 유입 경로 검색 유입이 많다면 인앱 설명이 부족한 것
· 결정 번복률 잘못 이해하고 진행한 비율의 대리 지표
용어 관련 CS 문의 수가 가장 신뢰할 만하다. 문의 내용을 용어별로 태깅해두면 어느 용어의 설명이 실패하고 있는지 직접 보인다. 툴팁을 100개 붙이는 것보다, 문의가 가장 많은 3개를 인라인으로 올리는 편이 효과가 크다.
8. 정리
1. 용어를 A(결정 필요)/B(이해 보조)/C(참조)로 나눈다
2. A는 인라인, B는 툴팁, C는 용어집 — A를 툴팁에 넣지 않는다
3. 첫 등장에 한 줄 동격 설명 (한 페이지에 한 번만)
4. 툴팁 트리거는 용어 자체로, 히트 영역 24×24 이상
5. 용어집 항목마다 고유 URL, "흔한 오해" 절을 넣는다
6. 정의보다 결과와 "~가 아니다"를 쓴다
7. 클릭률이 아니라 CS 문의 수로 측정한다
가장 효과가 큰 건 1번과 3번이다. 분류만 제대로 해도 물음표 아이콘의 절반은 사라지고, 첫 등장 한 줄이 툴팁 열 개보다 많은 사람을 돕는다.