🎨 06 디자인 카타 "채팅 내 금칙어 표시, 각 방식에 어떤 차이가 있을까요?"

Q. 채팅 내 금칙어 표시, 각 방식에 어떤 차이가 있을까요?

나의 선택: 색상/토스트 메시지

왜 이 방식 (색상/토스트 메시지)가 더 좋을까?

• 대화 흐름을 방해하지 않는다
  → 모달처럼 사용자의 행동을 멈추게 하지 않고, 자연스럽게 피드백을 받을 수 있다.

• 어떤 단어가 금칙어인지 명확하게 보여준다
  → 금칙어에 색상이 적용되어 있어, 어떤 단어가 문제가 되는지 직관적으로 파악 가능하다.

• 토스트 메시지는 사용자에게 정보 전달하기에 적합하다
  → 화면 하단에 자연스럽게 뜨는 알림은 사용자의 집중을 방해하지 않으면서도 중요한 정보를 전달할 수 있다.

나머지 하나의 UI (모달)을 선택하지 않은 이유

• 대화 흐름을 강제로 끊는 느낌
  → 금칙어 사용이라는 상대적으로 '작은 피드백'에 비해 사용자 경험을 지나치게 방해한다고 생각.

• ‘확인’ 버튼의 목적이 불명확
  → 색상이 강조된 버튼은 보통 사용자에게 어떤 행동을 하라고 유도하는 CTA인데, 여기서의 확인버튼은 단순히 "알겠습니다" 수준의 응답일 뿐, 실제로 유저가 다음에 해야 할 구체적인 행동이 없다.
  → 게다가 이 버튼을 누르기 위해 사용자는 대화 흐름을 끊고 손을 움직여야 하는데, 이 모든 행동에 비해 결과는 너무 소극적이다.
  → 즉, 버튼의 존재감에 비해 기능이 너무 약해서 오히려 혼란을 줄 수 있다고 생각.

• 어떤 단어가 금칙어인지 알려주지 않음
  → 실제 어떤 단어를 수정해야 하는지 알 수 없어 불편함을 준다.

추가 고려사항 - 접근성 측면에서 본다면?

하다보니 자연스럽게 접근성 측면도 생각해보게 됐다.
이번 케이스에서는 색상/토스트 메시지가 모달보다 더 나은 UI인 건 확실하지만,
색으로만 금칙어를 표시하는 방식이 과연 충분할까? 하는 의문이 생겼다.

웹 접근성 가이드라인(WCAG 2.1)에서는 "색상만으로 정보를 전달하지 말 것"을 명확히 권장하고 있다. 특히 색약이나 색맹 사용자에게는 분홍색, 연보라색, 회색 등 일부 색상 간 차이를 식별하는 것이 어렵기 때문에, 색상 외에도 다른 시각적 요소들 (밑줄, 아이콘, 텍스트 강조 등) 이 함께 제공되어야 한다.

개선 아이디어 ✍️

• 금칙어 단어에 밑줄을 함께 표시
• 토스트 메시지에 금칙어 단어를 직접 명시

이런 식으로 접근성까지 챙기면 더 많은 사용자에게 친절한 경험을 줄 수 있지 않을까 생각했다.