널리

안녕하세요.

엔비전스입니다.

 

많이들 알고 계시겠지만 html은 웹 표준을 기반으로 문서를 구조하는데요. 웹 표준을 기준으로 만든 문서는 다양한 브라우저 환경에서 대응이 가능해지기 때문에 만약 html을 조금이라도 다룰 수 있는 사용자들이라면 이를 통해 문서를 작성하는 것으로 조금 더 다방면에서 도움이 될 수 있습니다. 근래에는 이 같은 이유로 블로그, 이전의 아티클에서 언급한 판매자용 문서, 이메일과 같은 페이지들에서도 html로 작성할 수 있는 모드를 기본적으로 제공하고 있는 편인데요.

오늘은 그중 이메일에서 대체 텍스트를 제공하는 방식에 대해 간단히 살펴보겠습니다.

일전에 판매자 입장에서의 대체 텍스트 제공 방식 사례 html 에디터에 관한 이야기를 다룬 적이 있었는데요.

우선 중요 결론부터 말하자면 아쉽게도 많은 사용자들이 자주 사용하는 이메일 사이트에서는 아직까지 판매자 입장에서의 대체 텍스트 제공 방식 사례 에서와 같이 html 에디터를 이용하여 아주 간단히 이미지 대체 텍스트를 제공하는 식의 방식은 제공된 사례를 발견하기가 어렵습니다.

때문에 삽입한 이미지에 대체 텍스트를 제공하려면 가장 기본적으로는 앞서 말한 html을 사용하게 될 수밖에 없는데요. 우선 html 모드를 활용한 방식은 아주 간단합니다.

사례는 네이버 메일에서 살펴보겠습니다.

   

1. html 모드를 활용한 대체 텍스트 (ex 네이버)

 

네이버 메일에서 메일쓰기 화면을 들어가 보면 시각적으로는 오른쪽 맨 하단에 Editor, HTML, TEXT 모드를 선택할 수 있는 영역이 존재합니다. 해당 영역에서 HTML을 선택하게 되면 HTML을 작성할 수 있는 화면으로 입력창이 전환되고, 우리는 이 텍스트 화면에 이미지 태그를 입력해 주기만 하면 되는데요. 이미지 태그를 삽입하며 대체 텍스트를 제공하는 방식의 예시는 다음과 같습니다.

 

img 태그에 들어간 alt 안에는 대체 텍스트가, src 안에는 이미지 경로가 들어가게 됩니다. 이렇게 html 모드 편집창 본문에 이미지 태그를 입력해 준 후 앞서 본 영역에서 다시 Editor를 눌러 모드를 전환합니다.

이미지 경로를 정확히 입력했다면 이런 식으로 이미지가 에디터에 정상적으로 나타나게 됩니다. 개발자 검사를 통해 확인해 본다면 사진에서 보시다시피 대체 텍스트 역시 정상적으로 들어가 있는 걸 확인할 수 있습니다. 이렇게 들어간 이미지를 이메일에서 스크린 리더를 통해 확인하는 경우에도 역시 대체 텍스트를 잘 읽어 주게 됩니다.

다만 이런 식의 방식은 html을 전혀 모르는 사용자 입장에서는 조금 접근이 어려울 수 있는데요. 비슷한 이유로 판매자 입장에서의 대체 텍스트 제공 방식 사례 아티클에서의 Html 에디터들의 경우 그런 사용자들을 대상으로 더 간단히 대체 텍스트를 넣을 수 있는 방식들을 도입하고 있었죠. 그와 비슷한 완전한 해결책은 아니지만 Gmail에서는 조금 더 간단하게 대체 텍스트를 넣어 볼 수 있는 방법이 존재하기는 합니다.

구글 드라이브에서 제공되는 구글 문서를 사용할 수 있습니다.

   

2. Google 문서를 활용한 대체 텍스트 삽입

 

기본적으로 이미지를 삽입하는 방식에는 파일 첨부를 열어 가져오는 방법과 다른 페이지에서 이미지 자체를 복사하여 붙여넣기를 하는 방식이 존재하는데요. 우선 어떤 방식으로든 이메일에 첨부될 이미지를 구글 문서에 먼저 삽입합니다.

이후 이미지를 우클릭할 시 나오는 대체 텍스트를 동작하면 간단하게 이미지에 대체 텍스트를 넣을 수 있는 영역이 나오는데요. 여기서의 제목은 html 상에서 title로 나타나며 설명은 대체 텍스트에 해당합니다.

설명 내에 알맞은 대체 텍스트를 입력 후 해당 이미지를 우클릭 > 복사, 혹은 ctrl+c를 이용하여 복사합니다.

이렇게 대체 텍스트를 넣은 해당 이미지를 다시 gmail 메일 쓰기 내로 가져와 붙여넣기(ctrl+v)를 이용해 첨부합니다. 이 같은 방식을 사용해 이미지를 보내게 되면 마지막 사진과 같이 대체 텍스트가 들어간 이미지를 이메일에 첨부할 수 있게 됩니다.

   

3-1. Web Outlook에서의 이미지 대체 텍스트

 

Microsoft의 무료 개인 전자 메일 서비스인 outlook의 web에서 볼 수 있는 대체 텍스트 삽입 방법입니다. 이는 메일에서 직접적으로 제공될 수 있는 대체 텍스트 기능에 가장 근접한 기능으로 볼 수 있을 것 같습니다.

방법은 매우 간단합니다. outlook 메일 쓰기 본문에서 이미지를 삽입한 후 삽입된 이미지 우클릭, 나타나는 항목 중 대체 텍스트 추가를 눌러 대체 텍스트를 삽입할 수 있는 영역으로 이동할 수 있습니다.

키보드를 통해서는 우클릭과 같은 기능인 컨텍스트 메뉴 키가 먹히지 않기 때문에 조금 다른 방법으로 해당 영역에 접근할 수 있습니다.

이미지 블록 잡기 > 본문 하단에 있는 서식 메뉴 접근(alt+F10) > 대체 텍스트 추가 버튼

대체 텍스트를 넣을 수 있는 편집창이 크지 않아 시각적으로 문장을 한눈에 확인하는 데에는 어려움이 있지만, 사진과 같이 해당 영역에서 대체 텍스트를 삽입할 수 있습니다. 마무리로 outlook에서 대체 텍스트를 넣은 이미지를 타 이메일로 수신해 확인해 보겠습니다.

사진에서 볼 수 있다시피 수신한 이미지의 대체 텍스트를 정상적으로 확인할 수 있습니다.

   

3-2. Outlook 응용 프로그램에서의 대체 텍스트

 

마지막으로, outlook 클라이언트 응용 프로그램 내에서 이미지 대체 텍스트를 삽입하는 방식입니다.

우선 기본적으로 삽입 메뉴를 통해 이미지를 삽입하는 과정까지는 웹 outlook에서의 방식과도 동일합니다.

차이점이라면, 응용 프로그램 내에서는 삽입한 이미지로 바로 초점이 맞춰져 있는 상태이기 때문에 해당 이미지의 초점을 둔 상태에서 키보드를 통해 컨텍스트 메뉴(우클릭 기능과 동일)를 열어 "대체 텍스트 편집" 메뉴에 접근하는 것이 가능합니다.

이 외 이미지에 초점을 잡아 둔 상태로, 그림 서식 탭에서 대체 텍스트 메뉴를 눌러 접근하는 방식 역시 존재합니다.

이렇게 접근한 대체 텍스트 입력 영역에서, 역시 위 방식들과 동일하게 편집창 내에 텍스트를 삽입하는 것으로 이미지에 대체 텍스트를 넣어 볼 수 있습니다. 해당 영역에서는 만약 인공지능이 인식 가능한 범위에 있는 이미지일 경우 자동으로 인식한 대체 텍스트가 미리 입력되기도 하지만, "텍스트가 있는 이미지"같은 식으로 정확성이 떨어지기 때문에 그렇다 하더라도 사용자가 직접 대체 텍스트를 넣어 주시는 것이 좋습니다.

오늘은 현재 이메일에서 활용할 수 있는 대체 텍스트 제공 방식 사례를 간단하게 알아보았는데요. 2번의 경우, google 문서에서 사용할 수 있는 방식이기는 하지만 이미지 자체에 대체 텍스트가 들어가기 때문에 복사+붙여넣기를 이용한다면 gmail이 아닌 다른 이메일에서 역시 대체 텍스트가 들어간 이미지를 첨부할 수 있습니다.

물론 이는 어디까지나 기존에 제공돼 있는 기능들을 돌려 활용한 방식에 불과하기 때문에 직접적으로 alt가 달린 에디터들과 직관성이나 활용도를 놓고 비교할 수는 없는 영역입니다. 때문이 이와 관련된 접근성들이 다방면에서 좀 더 적극적으로 도입된다면 지금보다 접근성에 관한 사용자들의 관심도와 장벽 역시 더 좋아지지 않을까 싶은 생각이 있습니다.

읽어 주셔서 감사합니다.