✏️ [아티클] 이모지 접근성을 고려한 콘텐츠 디자인

안녕하세요 캡찹 여러분! 🥹

문장 마지막에 붙인 이모지 때문에 '에디터 점점.. 무슨 일 있나' 하는 생각이 드셨나요?

어느 순간부터 이모지는 의사소통의 수단으로 사용되고 있어요.문자가 충분히 전달하지 못하는 감정이나 상황적 맥락을 압축적으로 잘 설명해 주죠. 하지만 정말 모두에게 유용할까요?

오늘 제가 가져온 아티클은 '모두'를 위한 이모지 사용법을 다루고 있어요.

너무나 당연하게 당연하지 않은 것들을 누리고 있는 저는 아티클을 읽는 내내 '앗차차, 이거까지는 생각하지 못했네!' 라는 생각을 했어요. 캡찹 여러분은 어떤 생각을 하실지 궁금하네요. 

그럼 오늘도 재밌게 봐주세요.

이모지는 우리가 디지털 세계에서 감정을 전달하는 방식에 큰 변화를 가져왔어요. 특히 브랜드들이 고객과 소통하기 위해 이모지를 사용하는 경우가 많아졌죠. 하지만 보조 읽기 기술*에 의존하는 사람들은 이모지에 의존한 콘텐츠를 이해하는 데 어려움을 겪을 수 있어요. 그렇다면 콘텐츠 디자인을 통해 어떻게 이모지에 접근성을 부여할 수 있을까요?

예를 들어, 스크린 리더는 웹 페이지나 문서의 텍스트를 음성으로 읽어 주거나 점자로 변환해 줘서 시각 장애인들이 정보를 얻을 수 있도록 도와줍니다. 이런 기술들은 디지털 콘텐츠의 접근성을 높여 주는 중요한 도구예요.

접근성 문제를 해결하는 방법은 여러 가지가 있어요. 어떤 방법은 더 많은 노력이 필요하기도 해요. 여기 세 가지 중요한 문제를 살펴볼게요:

1. 스크린 리더로 이모지를 읽을 때, 이모지의 기본 설명이 텍스트의 핵심 메시지를 바꿀 수 있어요.
2. 마찬가지로 음성으로 읽을 때, 이모지의 기본 설명이 메시지의 중요한 정보를 전달하지 못할 수 있어요.
3. 비슷한 색깔과 모양의 이모지는 화면 확대를 사용해도 다양한 시각 능력을 가진 사람들에게 구별하기 어려울 수 있어요.

이모지와의 첫 만남을 소개할게요

저는 Chime에서 콘텐츠 디자인 리드를 맡은 첫 몇 주 동안 이모지에 대해 생각하기 시작했어요. 결론은 분명했어요: Chime은 이모지를 좋아했고, 이모지를 콘텐츠 디자인 요소로 활용하는 방법에 대해 더 배우고 싶어 했죠.

그래서 저는 Content Design London의 이모지 가이드라인에 대해 Slack에서 대화를 시작했어요:

1. 절대 이모지를 단어 대신 사용하지 말 것.
2. 전달하려는 감정을 표현하는 유일한 방법으로 이모지를 사용하지 말 것.
3. 널리 인식되는 인기 있는 이모지를 사용할 것.
4. 다양한 기기에서 잘 보이는 이모지를 사용할 것.
5. 이모지를 문장의 끝에 배치하고, 반복 사용하거나 너무 많은 이모지를 사용하지 말 것.
6. 이모티콘 대신 이모지를 사용할 것.
7. 어두운 모드와 밝은 모드 모두에서 잘 보이는 이모지를 쓸 것.

우리는 그룹으로서 Chime이 제품 내에서 이모지를 사용할 때, Content Design London의 가이드라인에 맞춰 평가해 보았어요.

글머리 기호로 이모지를 사용하는 건 이제 너무 흔한 콘텐츠 패턴인데 Content Design London의 가이드라인에 없는 게 놀랍네요. 스크린 리더가 이런 이모지의 대체 텍스트를 읽는다면 어떻게 될까요? “3월 1일, 돈자루를 통해 Chime에서 무료 부스트를 받으세요. 입장권 부스트는 이월되지 않아요…”

신규 사용자는 “입장권 부스트”라는 표현을 실제 기능 이름으로 오해할 수 있어서, 부스트를 이해하는 걸 더 어려워할 수 있어요.

아하! 이모지는 일부 사용자를 혼란스럽거나 이해하기 어렵게 만들 수 있군요

디자인 프로세스에 이모지 고려사항을 포함하세요

이모지에 접근할 수 없는 문제를 해결할 수 있는 여러 잠재적 방법이 있어요. 디자인, 제품, 연구, 엔지니어링 팀과 대화해 팀에 가장 적합한 접근 방법을 파악해 보세요.

Chime에서는 우리가 할 수 있고 해야 하는 첫 번째 단계로 간단한 체크리스트를 만들었어요. 체크리스트는 다음과 같아요:

• 이모지가 단어 대신 사용되지 않도록 하세요.
• 이모지가 감정을 표현하는 유일한 방법이 되지 않도록 하세요.
• 널리 인식되고 인기 있는 이모지를 사용하세요.
• 다양한 기기에서 잘 보이는 이모지를 사용하세요.
• 이모지를 문장의 끝에 배치하고, 반복 사용하거나 너무 많이 사용하지 마세요.
• 이모티콘이 아닌 이모지를 사용하세요.
• 다크 모드와 라이트 모드 모두에게 잘 보이는 이모지를 사용하세요.

체크리스트 확인 후, 마지막 단계가 있어요: 이모지의 기본 설명과 함께 메시지를 작성해 보세요. 의도한 의미와 감정이 잘 전달되나요? 그렇다면 계속 그대로 사용해도 좋아요. 그렇지 않다면, 접근성 레이블을 추가로 작성하세요.

앞으로는 어떤 걸 할 수 있을까요?

Chime의 엔지니어인 Lucy Liu 덕분에 현재와 미래에 실험할 수 있는 다양한 해결 방법을 발견했어요.

전반적으로 콘텐츠 관리의 맥락을 이해하는 것이 중요해요. 예를 들어, 하드코딩된 콘텐츠의 경우 접근성 레이블을 손쉽게 추가할 수 있지만, 반드시 앱을 업데이트 해야 한다는 단점이 있어요.

서버 기반 콘텐츠의 경우, 접근성 레이블을 제공할 기능을 구축할 수 있지만, 추가적인 검토와 엔지니어링 작업이 필요할 수 있어요.

스크린 리더를 위한 일관된 접근성 레이블 제공하기

Lucy에 따르면, 스크린 리더는 자동으로 이모지의 기본 설명을 읽어줘요. 이것은 대부분의 스크린 리더의 기본 설정이에요. 하지만, 스크린 리더가 사용자 정의 접근성 레이블을 읽도록 설정할 수 있어요.

예를 들어볼게요:

<text accessibilityLabel=”Just kidding haha”>Just kidding 😂 </text>

이렇게 영어로 쓰인 한 줄이 있다면, 다른 언어와 접근성 레이블을 함께 제공해 주세요.

{ title:

{ en: “Just kidding 😂” },

{ es: “<es uno broma> 😂” },

{ ac: “Just kidding haha” },

}

어떤 언어로 작성됐든 스크린 리더가 “😂”를 “haha”로 읽을 수 있게요.

세세한 부분까지 접근성을 신경 쓰세요

이 문서에서 다룬 내용과 해결책은 접근 가능한 콘텐츠 디자인을 위해 해야 할 일의 일부에 불과해요. 결국, 이건 이모지에 관한 것이니까요! 하지만 세부 사항을 제대로 맞추는 데는 시간이 걸릴 수 있으니 지금부터 시작해 보세요. 가능한 모든 방법을 취하는 것이 다양한 능력을 가진 사람들이 우리의 디지털 제품을 사용할 수 있도록 도와줄 수 있어요.

Chime는 이모지 접근성 문제를 디자인 프로세스에 포함시켰고, 접근성과 포용성 팀이 매주 만나서 작은 개선이라도 계속 이루어지고 있는지 확인하고 있어요.

Jason Fox는 Chime의 그로스 콘텐츠 디자이너예요. LinkedIn에서 그와 연락해 보세요!

여러 기업에서 콘텐츠 디자이너로 커리어를 쌓고 지금은 Jira, Confluence 등 협업 소프트웨어를 운영하는 아틀라시안의 콘텐츠 디자이너 리드로 일하고 있어요.