[UX] 사용자의 관점에서 바라본 이모지의 사용법(부제: How to Make Emojis Accessible in HTML

프론트엔드의 관점에서 UX는 중요한 관심사입니다. 종종 다채롭고 직관적인 UI가 좋은 UX를 제공할 것이라고 생각하고 개발을 진행하기 쉽지만, 때로는 사용자의 편의를 위해 제공한 기능이 사용자에게 혼란을 가중시키곤 합니다. 이러한 측면에서 프론트엔드 개발자는 좋은 UX를 보장하는 원칙들에 대해 공부하고 고민해야 합니다. 

 

여러분들은 이모지(Emoji)를 언제 사용하시나요?

저의 경우엔 메신저를 통해 대화를 할 때, 사적인 메일을 보낼 때 이모지를 자주 사용합니다. 그리고 때로는 공적인 포스팅과 문서를 작성할 때도 분위기를 편하게 가져가기 위해 이모지를 사용하고 있습니다. 이처럼 이모지는 복잡한 아이디어를 쉽게 전달하는 데 도움이 됩니다. 하지만 부주의한 이모지의 사용은 일부 사용자에게 불편을 야기할 수 있습니다.

 

이번 포스팅에선 사용자의 관점에서 어떻게 이모지를 활용해야 웹에서의 접근성을 향상시킬 수 있는지에 대해 알아보겠습니다.   

 

이모지(Emoji)는 무엇일까?

이모지는 표의 문자(아이디어나 개념을 나타내는 그림)입니다. (.png, .gif 또는 .jpg) 파일에서 표시되는 이미지와 달리 이모지는 유니코드 문자를 사용하여 표시됩니다. 웹에서는 유니코드 문자의 16진수 또는 10진수 표현을 사용하여 수행되는 경우가 많습니다.

예를 들어 다음의 코드가 있습니다.

<span>&#9731;</span>

브라우저에 위의 코드는 눈사람 이모티콘(☃)이 표시됩니다. 

이모지와 이모티콘
이모티콘(Emoticon)은 키보드의 문자(letters)나 숫자(numbers), 문장 부호(punctuation)로 사람의 표정을 나타내는 기호입니다. 이모지(Emoji)는 감정이나 생각의 표현을 나타낸 이미지입니다. 이모지는 이메일(email)과 문자 메시지(text messages)에서 많이 사용되고 있습니다.

 

 

이모지 사용 시 발생하는 문제 

이모지의 사용은 대부분의 사용자에게 개발자가 의도한 대로 받아들여집니다. 하지만 이모지를 부주의하게 사용할 경우 몇가지 내재적인 문제점을 마주칠 수 있습니다. 

첫 번째 문제는 브라우저가 접근성 트리에 이모지를 항상 이미지로 노출하지 않는다는 것입니다. <span> 요소(element)는 의미상 중립적입니다. 따라서 그 역할이 브라우저에 의해 전달되지 않거나, 스크린 리더에 의해 사용되지 않을 수 있습니다. 그 결과 여러분이 스크린 리더를 통해 내용을 확인하는 것이 아니라면, 아마도 그 내용이 전혀 존재하지 않는다는 사실을 인식하지 못할 가능성이 있습니다.

두 번째 문제는 <span>요소의 내용(이모지)이 단지 문자 참조(character reference)일 뿐이라는 것입니다. 브라우저는 접근 가능한 이름이나 설명을 자동으로 할당하지 않을 수 있습니다. 결과적으로 일부 브라우저와 스크린 리더 조합에서는 이모티콘이 인식되지 않거나 부분적으로만 인식될 수 있습니다.

접근성 트리(Accessibility tree)
접근성 트리는 대부분의 HTML 요소에 대한 정보와 관련된 접근성을 포함합니다.
브라우저는 마크업을 DOM tree (en-US)로 불리는 내부적인 표현으로 전환시킵니다. DOM 트리는 모든 마크업의 요소, 특성, 텍스트 노드를 표현하는 객체들을 포함합니다. 그 다음 브라우저는 DOM 트리에 기반된 접근성 트리를 생성합니다. 이 트리는 플랫폼별 접근성 API에서 스크린 리더와 같은 보조 기술이 이해할 수 있는 표현을 제공하기 위해 사용됩니다.
접근성 트리 객체에는 4가지 속성들(이름, 설명, 역할, 상태)이 있습니다.

 

 

이모지 사용 시 접근성을 향상시키는 방법: 3 - Steps

이모지를 부주의하게 사용할 경우 위와 같은 문제로 인해 사용자에게 혼란을 야기할 수 있습니다. 하지만 위의 문제를 해결하기 위한 간단하지만 강력한 해결책이 있습니다. 비록 결과물은 한줄짜리 짧은 코드지만 3단계에 걸쳐 각 단계의 작업이 어떠한 의미를 갖는지 알아보겠습니다. 

 

1. span 요소를 사용하여 마크업합니다.

<span>요소는 주변의 인라인 콘텐츠 형식을 지정하는 데 사용하는 인라인 HTML 요소입니다.  <span>요소는 본질적으로 어떤 유형 의 콘텐츠도 표현하지 않기 때문에 스크린 리더의 입장에선 span의 내부는 빈 캔버스와 다름없습니다.

 

2. role=“img” 속성을 추가합니다.

HTML role속성(Attribute)은 사용자 인터페이스 요소를 정의합니다. 즉, 스크린 리더는 role을 바탕으로 사용자에게 어떤 유형의 요소에 대한 내용인지 전달할 수 있습니다.

여기서는 role="img"를 사용하여 스크린 리더에게 이모지가 이미지로 처리되어야 함을 알립니다.

 

3. aria-label 속성을 추가합니다.

다음으로 이모지에 aria-label속성을 추가해야 합니다.

aria-label속성을 사용하면 현재 요소에 대해 라벨을 정의할 수 있습니다. 이를 통해 스크린 리더에게 해당 요소를 사용자에게 설명하는 방법을 알려줄 수 있습니다. 이 때 주의해야 할 점은 의미 있는(Meaningful) 라벨을 사용해야 한다는 점입니다.

aria-label
aria-label은 DOM 안에 label로 참조되어질 수 있는 표시 가능한 적당한 텍스트가 없을 때, 상호작용을 하는 요소들 또는 다른 ARIA 선언들을 통해 상호작용하도록 만들어진 요소에 사용하기 위한 속성입니다. 

 

다음의 코드는 처음에 소개한 이모지 코드에 3단계의 해결책을 적용한 코드입니다. 다음 코드에서 사용된 이모지에 대해 '눈사람'이라고 정의했습니다.

<span role="img" aria-label="눈사람">&#9731;</span>

 

위의 코드에서 aria-label속성은 이모지의 대체 텍스트 역할을 수행합니다. aria-label을 선택할 때 좋은 컨벤션에 대해 알아보고 싶으신 분은 다음의 아티클을 참고해보시면 좋을거같습니다.

Five Ways to Write Better Alt Text

 

 

이모지 사용시 역할, 라벨 사용을 꼭 해야 하나요?

이모지 사용 시 span요소만 사용하여 코드를 작성하여도 스크린 리더의 VoiceOver는 이름을 사용하여 이모지를 읽으므로 역할(role)과 라벨(label)을 사용하지 않는 것이 반드시 최악의 방법은 아닙니다. 

하지만 모든 스크린 리더가 역할이나 라벨이 없는 이모티콘을 같은 방식으로 해석한다고 볼 수 없습니다. 시각적으로 불편함이 있는 사용자에게 가능한 최고의 경험을 제공하기 위해선 내가 사용한 이모지에 대해 ‘눈사람’과 같은 방식으로 명시적으로 선언하는 것이 좋습니다. 위와 같이 라벨을 지정하면 내가 실제로 의미하는 바를 명시적으로 전달하는 것을 보장할 수 있습니다.

 

불필요한 스크린 리더의 접근은 그만 !: aria-hidden 속성

단순 렌더링 목적, 즉 장식용으로만 이모티콘을 사용하고 싶은데 스크린 리더기에 읽힌다면 오히려 사용자의 접근성이 떨어지고, 그 결과 콘텐츠 본래의 내용을 파악하기 어려워질 수 있습니다.

 aria-hidden속성을 사용하면 요소에 장식용으로 간주될 수 있는 콘텐츠가 포함되어 있거나 페이지에 렌더링 된 동등하게 액세스 가능한 콘텐츠에 중복되는 요소를 보조기술 사용자에게 노출되지 않도록 설정할 수 있습니다. 이를테면, 시각적으로 렌더링 된 텍스트와 함께 SVG 또는 글꼴 아이콘을 포함하는 링크입니다. 이 상황에서 아이콘은 링크 텍스트와 중복될 수 있으므로 보조기술 사용자에게 아이콘 정보를 숨김으로써 콘텐츠 탐색을 용이하게 할 수 있습니다. 이처럼 aria-hidden속성을 적절히 사용한다면 사용자 접근성 향상에 도움이 될 수 있습니다. 

 

aria-hidden속성은 접근성 API(보조기기 접근 가능성) 차단 상태를 결정합니다. 예를 들면 다음과 같이 aria-hidden="true" 속성을 사용하면 보조기가 내용에 해당되는 부분을 무시합니다.

<div class="container" aria-hidden="true">
  // 보조기기가 무시하는 영역
</div>

 

 

마치며

지금까지 사용자의 관점에서 어떻게 이모지를 활용해야 웹에서의 접근성을 향상시킬 수 있는지에 대해 알아보았습니다.

항상 UX에 대해 공부하며 UX 카테고리를 시작하고 싶었습니다. 하지만 다른 프론트엔드 코드나 지식, 컨벤션에 비해 그 내용이 '경험'과 밀접하게 연관되어 포스팅으로 다루기 까다로워 계속 미뤄왔습니다. 최근 플로팅 라벨과 UX에 대해 다룬 아티클을 읽으며 다시금 UX 포스팅을 시도하고자 하였고, 그 시작으로 비교적 간단한 이모지의 사용과 UX에 대한 포스팅을 진행해봤습니다.

프론트엔드 개발자는 항상 사용자를 염두에 두고, 내가 사용하는 기술과 방식이 사용자 경험에 어떠한 영향을 끼치는지에 대해 고민해야한다고 생각합니다. 앞으로도 다루고 싶은 좋은 주제, 좋은 아티클이 있다면 UX 카테고리에서 다루어 보겠습니다. 상당히 '주관'이 많이 작용하는 영역이라고 생각합니다. 읽으시면서 '이런 방식으로 접근할 수도 있겠구나' 하고 편하게 구경하실 수 있도록 향후 포스팅들을 구성해보겠습니다. 읽어주셔서 감사합니다.

 

 

참고

https://tink.uk/accessible-emoji/ 

Accessible emoji - Tink - Léonie Watson

https://devyarns.com/accessible-emojis/

How to Make Emojis Accessible in HTML

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role

ARIA: img role - Accessibility | MDN