• Mute On 🔇
• Mute Off 🔊

수업에 참여하는 온라인 강의실에 이 두 버튼이 있다고 해보자.

발표를 하기위해서 마이크를 키려고 할 때, 당신은 어떤 버튼을 누르겠는가?

순간적으로 ‘Off’라는 단어에 Mute Off 버튼을 누르기 0.1초라도 망설이지 않았나? 🧐

왜 망설였을까?

1. 사용자의 인지부조화의 경험

하려고하는 액션은 ‘마이크를 킨다’= ‘활성화한다’ 는 의미의 ‘ON’이 연상되지만,

실제로 눌러야 하는 버튼의 라벨은 ‘OFF’의 부정형 의미를 가지기 때문에, 사용자는 인지부조화를 경험하고 과업을 수행하기 까지 어려움을 겪을 가능성이 높다.

2. 이중 부정

가끔 한국어를 배우는 외국인이 정말 어렵겠다 싶은 문장들이 있다. 여러 번 부정문을 사용했을 때가 그렇다.

“그렇게 썩 좋지 않지 않아요?” 같은 류의 문장이다.

여기서도 마찬가지다. ‘Mute’라는 단어는 동사로는 “소리를 작게하다, 줄이다”, ‘말 없는’이라는 부정의 의미가 담겨있는 단어다. 그런데 여기 ‘Off’라는 ‘제거’의 의미를 가지고 있는 단어를 함께 사용하니 이중 부정이 사용되어 의미를 빠르게 인지하기 어렵게 된 것이다.

*인지부조화?: 개인이 가진 신념, 생각, 태도와 행동 사이의 부조화가 유발하는 심리적 불편함.

왜 이런 텍스트가 나타났을까?

국내 서비스가 I18n(internalization)을 지원하기 위해 UI 텍스트를 번역하면서, 기존 한국어의 쓰임새를 번역하는 과정에 그대로 반영하기 때문이 아닐까 싶다.

위의 경우 나의 (귀여운) 인턴분께서 i18n 작업을 할 때 ‘음소거’, ‘음소거 해제’를 번역한 실제 사례이다.

UX writing 팀이 있는 큰 규모의 회사에서는 UX writer가 서비스의 화면에서 나타날 모든 텍스트들을 검수하고, 직접 작성하겠지만 이런 팀이 별도로 존재하지 않는 우리 팀에서는 프론트엔드 개발자가 직접 피그마에 있는 UI 텍스트들을 번역해서 작성한다. 개발로도 충분히 시간이 부족하기 때문에, 우리 회사의 경우 ‘파파고’, ‘구글 번역기’를 사용해서 그대로 복사 붙여넣기하도록 안내하고 있다.

그럼 어떻게 번역해야할까?

UI 텍스트를 작성할 때 ‘간결성’, ‘명확성’이 중요하다지만, 정답이 있는 것은 아니다.

따라서 내가 제안한 방식이 정답이라고 할 수 없고, 어떻게 의사결정했는지 판단의 근거를 참고하면 좋을 것 같다.

나는 위의 케이스를 기술하는 두 가지 방식이 있다고 판단했다.

1. 사용자의 행위를 라벨링하기
2. 현재 장치의 상태를 라벨링하기

1번의 경우 ‘마이크 켜기’ ‘마이크 끄기’와 같이 사용자가 하려는 행위를 작성하는 것이다.

• ‘Mute On 🔇’, ‘Mute Off 🔊’도 이에 해당한다.
• ‘Turn On 🔊’, ‘Turn Off 🔇’로도 번역할 수 있다.

대부분의 버튼의 라벨링은 사용자가 하려는 행위를 기술하지만, 아이콘이 갖는 의미가 현재 상태와 반대되기 때문에 이 또한 인지부조화를 일으키지 않을까? 싶었다. 예를 들어, ‘Turn On’의 경우 현재 상태는 음소거 상태이지만 표시되는 아이콘은 활성화된 아이콘이며, 텍스트를 읽지 않고 아이콘만 보는 경우(많은 사용자들은 UI 텍스트들을 잘 읽지 않는다.) 혼란을 겪을 여지가 충분하다고 생각했다.

2번의 경우

• Mic 🔊
• Mic 🔇

행위는 아이콘, 대상은 라벨로 분리하여 빠르게 의미를 파악할 수 있다는 장점이 있다.

대상만 라벨링하는 경우 아이콘은 현재 상태를 보여주기 때문에 사용자가 덜 헷갈리지 않을 것 같아 디자이너에게 2번의 방식을 제안했고, 이 방식이 채택되었다.

과연 정답일까?

하지만 이 글을 작성하는 지금, 2번에서 간과한 사실이 있다는 것을 깨달았다.

바로 스크린리더 사용자이다.

아이콘 버튼을 사용할 때 라벨을 함께 제공하는 것은 분명 접근성을 고려한 것임에도, 라벨만 놓고 보았을 때 사용자에게 어떤 결정적으로 유용한 의미를 전달해주지 못하고있다.

스크린리더 사용자는 아마도 해당 버튼을 몇번씩 눌러보며 언제 마이크가 켜지는지 확인하게 될 것이다.

다른 서비스에서는 어떻게 사용하고 있을까?

1. 구글 미트: 툴팁으로 대상과 행위를 명시

1. iPhone: Slider UI 사용

UI 텍스트의 중요성

이처럼 UI 텍스트에 대한 가이드라인이 없기 때문에 코드리뷰 시에 이런 번역 텍스트에 대해 따로 코멘트를 달지 않으며, 서비스 전체적으로 사용하는 용어의 통일이나 보이스, 톤앤매너는 물론 어색한 문장을 많이 발견할 수 있다. 하지만 UI 텍스트는 사용자가 서비스를 사용하면서 접하는 화면의 많은 것들을 결정짓는 중요한 요소이며, 서비스를 구성하는 콘텐츠의 거의 대부분이라고해도 과언이 아니다.

우리가 사용하는 많은 서비스에서 UI 텍스트를 모두 지운다면 아마 그 서비스를 제대로 사용하기는 매우 어려울 것이다. 서비스를 개발하다보면 이러한 텍스트들을 ‘어쩔 수 없이 고민해야하는’ 요소로 치부하게 되는 경우가 종종 있다. 개발에서 가장 어렵다고 말하는 ‘변수 이름 짓기’처럼, 액션 버튼의 적절한 라벨링은 수수께끼처럼 어렵다.

하지만 ‘예쁜 UI’위에 어쩔 수 없이 올라가는 ‘텍스트’는 사용자가 서비스를 잘 사용할 수 있도록 안내하는 중요한 요소이며, 충분히 고민할 가치가 있다고 생각한다.

지금은 프론트엔드 개발자가 어쩔 수없이 개발 도중 번역기를 돌리고 있지만,

훗날 우리팀에서도 ‘어떻게 하면 더 좋은 라이팅을 할 수 있을지’를 고민하며 가이드라인이나 원칙들을 만들어가면 좋겠다.

• 왜 개발자가 이런 것까지 고민하나?라는 생각을 할 수도 있다.
• 하지만 개발자들이 오히려 적절하고 명쾌한 UI 텍스트를 제안할 수 있는 경우도 많고, UX writing 팀이 있더라도 오류 케이스별 안내 문구를 작성할 때 개발자가 적절한 문구를 제안할 수 있다고 생각한다.
• 어쨌든 우리는 한 서비스를 더 좋게 만들기 위해 모인 사람들이기 때문에…

나와 비슷한 고민을 한 분이 있어 첨부해본다.

Mute On, Mute Off? | Infragistics Blog (opens in a new tab)