Daum 웹표준을다루다 Web Standards Darum

TTS기술을 적용하여 색다르게 KBO리그를 즐길 수 있는 음성 캐스터중계가 있다는 걸 아시나요?

올해  대한민국 야구는 마리한화 열풍이 대단하죠. 야구 관중뿐만 아니라 중계를 즐기는 야구팬도 늘고 있는 추세입니다.

다음카카오에서 지난 5월 TTS기술을 이용하여 캐스터 중계를 음성으로 들을 수 있는 서비스를 시작하였습니다.

TTS(TTS ; Text-To-Speech )는 문자를 자동으로 사람이 들을 수 있는 음성으로 변환해 주는 기술을 말합니다.
 
이전부터 다음스포츠에서는 홈/원정 팀을 각각 응원하는 편파 캐스터중계를 제공하고 있었고, 이와 TTS기술을 결합하여 음성 캐스터중계 서비스를 제공하게 되었습니다.

다양한 스포츠 방송 활동으로 야구 팬들에게 낯익은 정우영, 정순주 아나운서의  목소리를 이용하여 홈/원정 팀 중계를 제공합니다.

현장감 있는 TTS 중계를 위해 볼카운트, 점수, 타율 읽기 등 야구 특화 언어처리를 적용하였으며 역전 홈런, 호수비 등 주요 경기 상황에는 아나운서의 음성에 편파적 감정이 반영되도록 했습니다.

그동안 캐스터 중계 서비스를 이용한 시각장애인 사용자는 실시간으로 갱신되는 정보를 바로 인식할 수 없어서 새로운 중계정보가 있는지 수시로 일일이 확인해야 했습니다.

하지만 TTS기술를 적용한 음성 캐스터중계를 이용하게 되면 실시간으로 음성을 출력해 주어 편리하게 야구 진행 상황을 파악할 수 있습니다.

딱딱한 TTS 음성이 아닌 스포츠 전문 아나운서의 음성으로 들려줌으로써 생생한 현장감을 느낄 수 있습니다.

시각장애인 사용자가 야구 중계를 시청하기 위해 그동안은 영상중계를 선택하여 듣다보니 불필요하게 데이터를 많이 사용하게 되었습니다.  음성 캐스터중계는 영상 중계에 비해 데이터 사용이 적다 보니 테이터 부담을 줄여줄 수 있습니다.

이용방법

청취를 원하는 사용자는 다음스포츠 모바일 홈페이지(http://m.sports.media.daum.net/m/sports/) 에서 'KBO리그' 또는 '야구 - 일정/결과'에서 당일 캐스터중계 경기를 선택한 후 게임센터 경기중계 탭으로 이동하면 됩니다.

by. 접근성팀 Gio & Hale

그동안 시각장애인이 동영상 재생프로그램에서 영상에 표시되는 자막을 화면낭독프로그램으로 접근하는 것이 쉽지 않았습니다.

팟플레이어1.6.51480 (2014/12/16) 버전부터 화면에 표시되는 자막의 음성출력을 지원하게 되어 시각장애인의 팟플레이어 활용도가 매우 높아졌습니다.

자막을 음성으로 듣기 위해서 어떤 설정이 필요한 지 알아보겠습니다.

설정방법 

팟플레이어를 실행한 후 F5를 누르거나 상황에 맞는 메뉴를 연 후 환경설정 메뉴로 진입합니다.

환경설정 대화상자에서 "접근성(TTS/UIA)" 항목으로 이동하면 다음과 같은 설정 항목들을 확인할 수 있습니다.

음성출력 방법 (TTS / UIA) 간단  비교

자막을 음성으로 듣는 방법은 TTS와 UIA 를 활용하는 2가지 형태가 있습니다.

사용자 유형에 따라 어떤 방법을 선택하는 것이 좋을 지 알아보겠습니다.

STEP 1. 음성출력 방법(TTS/UIA) 선택하기

1. 센스리더를 사용자라면 "UI Automation (UIA)"를 설정하세요

센스리더가 설치된 경우, UIA를 이용해서 자막을 손쉽게 음성으로 들을 수 있습니다.

UIA 설정은 운영체제에 설치된 화면낭독프로그램을 활용해서 자막을 음성으로 출력하는 기능입니다.

전맹 시각장애인이 일반적으로 활용하는 화면낭독프로그램을 활용해서 자막을 음성으로 들을 수 있습니다.

기존에 사용하던 화면낭독프로그램을 이용하므로 자막의 음성을 조작하는 방식을 유지할 수 있기 때문에 전맹 시각장애인 사용자에게 조금 더 편리할 수 있습니다.

2. 센스리더를 사용하지 않는다면 "텍스트 음성출력(TTS)"을 설정하세요

텍스트 음성출력(TTS) 설정은 윈도우 운영체제에 설치된 음성엔진(TTS: text to speech)을 통해 자막을 음성으로 출력할 수 있는 기능입니다.

SAPI를 통해 자막 정보를 직접 음성엔진에 전달하므로 별도의 화면낭독프로그램은 필요하지 않습니다.

윈도우 8 이상에서는 한국어 음성엔진 혜미(Heami)가 포함되어 있으므로 "출력엔진" 옵션에서 한국어 음성엔진을 변경하면 한글 자막을 음성으로 들을 수 있습니다.

윈도우 7 이하에서는 운영체제에서 기본 한국어 음성엔진을 제공하고 있지 않기 때문에 별도의 구매하여야 합니다. 한국어 음성엔진을  설치 후 동일한 방법으로 설정하시면 한글 자막을 음성으로 들을 수 있습니다.

STEP 2. 음성출력 영역 설정하기

사용자 환경에 맞는 음성출력 설정이 완료되면 팟플레이어 영역 중 자막이나  메시지 등의 음성으로 듣고 싶은 정보를 선택하여  들을 수 있습니다.

1. 화면에 표시되는 자막을 음성출력

 2. 재생정보와 같은 메시지 정보를 음성출력

Q&A

Q. 환경설정을 했는데 UIA/TTS  설정 모두 자막이 음성으로 들리지 않아요.

• 자막파일의 이름을 확인하시고, 자막이 현재 제대로 연결되었는지 확인합니다.
• 영상에 삽입해서 영상화된 자막은 음성출력할 수 없습니다.
• DVD/Blu-ray 등의 이미지 자막은 음성출력 할 수 없습니다.

Q. UIA를 설정했는데 자막이 음성으로 들리지 않아요.

• UIA를 통한 자막 음성출력은 개별 화면낭독프로그램의 지원이 필요합니다. 자막이 음성으로 들리지 않는다면 화면낭독프로그램 개발사에 문의해주세요.

Q. 텍스트음성출력(TTS)를 설정했는데 자막이 음성으로 들리지 않아요.

• 음성엔진 옵션에 한국어 음성이 지원되는 TTS로 설정되었는지 확인합니다.
  
• 윈도우7 이하의 운영체제에서는 기본 한국어 음성엔진을 제공하지 않아 별도의 음성엔진을 구매하여 설치해야 사용가능합니다.
  

Q. 텍스트음성출력(TTS)를 설정했는데 한글 자막이 이상하게 들립니다.

• 영어 음성엔진이 선택되어 있어 한국어를 정상적으로 발음하지 못하는 경우입니다.
  환경설정 > 접근성(TTS/UIA) > 출력엔진 에서 한국어 음성엔진을 선택해주세요.
• 만약 출력 엔진 목록에 한국어가 나타나지 않는다면 한국어 음성엔진을 설치해주세요.

Q. 화면에서는 자막이 정상적으로 나오는데 음성이 뒤늦게 나와요

• 자막 내용의 음성출력이 끝나지 않았는데 다음 자막이 표시되면 이전의 내용을 모두 음성출력한 후 다음 내용이 음성으로 나오게 됩니다. 
  자막 내용이 계속 뒤늦게 밀려서 나온다면 우선 스페이스바를 눌러서 영상을 일시중지하고 자막 내용을 모두 들은 후 다시 재생하세요

팟플레이어 다운로드

접근성팀 Hale & Gio

카카오프렌즈를 만날 수 있는 국민메신저 카카오톡

시각장애인 사용자가 카카오프렌즈를 만날 수 있는 방법은 어떤게 있을까요?

카카오톡 채팅을 하다보면 이모티콘 사용도 하나의 재미로 빠질 수 없는데요. 이모티콘을 사용하므로써 대화 분위기도 한층 부드러워지고 대화를 재미있게 이끌어 가는 효과를 줍니다.

그런데 이 카카오톡 이모티콘에도 대체텍스트가 제공되어 있다는 사실 알고 계시나요?

기존에는 이모티콘에 대체텍스트가 제공되지 않아 시각장애인들에게 수만 가지 표정의 이모티콘은 그저 "이모티콘"이라는 네글자 소리에 불과했습니다.

시각장애인은 모바일 화면을 음성으로 읽어주는 모바일 화면낭독프로그램(Screen reader) 기능을 활용해 모바일 애플리케이션을 이용하는데 이모티콘이나 그림에 따로 텍스트를 적용하지 않으면 시각장애인은 인식할 수 없게 됩니다.

2014년 7월말, 시각장애인도 카카오톡 이모티콘을 사용할 수 있도록 약 200여개에 캐릭터의 표정과 이름을 설명해주는 기능을 적용했습니다.

캐릭터의 표정을 나타내는 이모티콘은 표정을 알 수 있는 대체텍스트를 제공하였고, 캐릭터의 동작이 표시되는 이모티콘은 캐릭터의 모습이나 동작을 '동작 - 캐릭터명 - 이모티콘' 형태로 대체텍스트를 제공하여 시각장애인 사용자가 이모티콘을 보다 정확히 인식하고 사용할 수 있도록 했습니다.

예를 들어 분노를 느끼면 입에서 불을 내뿜는 미친 공룡으로 변신하는 튜브 이모티콘을 예전에는 시각장애인이 인식하기 어려웠다면 이제는 '불같이 화난 튜브 이모티콘'이라고 음성이 나오니 상대방이 분노를 표현하고 있음을 알 수 있습니다.

반대로 이모티콘을 보낼 때에도 이모티콘을 표현해주는 음성 안내에 따라 원하는 표정을 선택할 수 있게되어 어떤 상황에서든 다양한 이모티콘의 표정이나 행동을 이용하여 재미있게 대화를 나눌 수 있게 된 것입니다.

이뿐만 아니라 시각장애인들이 카카오프렌즈를 만날 수 있는 방법이 하나 더 있는데요.

카카오프렌즈의 생김새를 느끼고 이모티콘을 이해할 수 있도록  캐릭터의 이름과 생김새 그리고 탄생스토리를 점자카드로 제작해 관련 단체에 배포하였습니다. 

시각장애인 사용자들이 단순한 텍스트가 아닌 카카오프렌즈 캐릭터를 생동감있게 이해할 수 있도록 도와, 이모티콘을 즐겁게 사용할 수 있게 되는 것이죠.

요즘은 얼굴을 맞대고 전하는 이야기보다 짤막한 카톡 한 줄이 더 편한 시대라지만

때로는 단순하게 말을 전달하는 것보다 어떻게 표현하는지가 더 중요할 때가 있습니다.

이렇게 감정표현 할 수 있는 수단이 시각장애인들에게도 늘어남에 따라 지인과의 대화가 훨씬 풍성해지고 즐겁게 대화를 이어나갈 수 있게 되었습니다. 

앱 다운로드 : iOS / Android

카카오프렌즈를 만날 수 있는 또 다른 방법!  카카오프렌즈 브랜드스토어

카카오프렌즈 브랜드스토어를 가다! (다음카카오 공식블로그)

카카오프렌즈 브랜드 스토어에서는 피규어, 인형 등 완구와 젤펜, 수첩, 노트 등 팬시용품을 비롯해 머그컵, 물통, 양말 등 60여 종 170여가지 상품을 만날 수 있습니다.

또한 카카오프렌즈 대형 피규어와 함께 사진을 찍을 수 있는 포토존, 카카오프렌즈 캐릭터 전시존 등의 공간이 마련되어 있어요.

아직 카카오프렌즈를 직접 만나보지 못 하신 분들도 스토어로 오셔서 즐거운 만남을 가져보시길 추천드립니다!!

• 코엑스점 >> 서울 코엑스몰 라이브플라자 지하 2층
• 신촌점 >> 신촌 현대백화점 유플렉스 지하 2층
• 대구점 >> 대구 현대백화점 지하 2층 아트리움 광장

더 많은 새로운 소식을 듣고 싶다면.  카카오프렌즈 카카오스토리

by. 접근성팀 Emilia & Ellen

요즘 디자인을 보면 투명도도 높고, 배경과 글자간 명도대비가 낮아 눈에 잘 안보이는 경우가 많아지고 있습니다.

저시력 시각장애인 사용자나 색각장애 사용자 그리고 나이가 많으신 노년층 사용자 등 여러 사용자들이 화면내 내용의 인식에 어려움을 겪고 있습니다.

글씨가 있는 것 같은데 뭐라 적혀 있는건지...?

글자나 배경에 투명도를 주거나, 배경과 글자간 명도대비를 낮게 제공하면 눈에 잘 띄지 않아 콘텐츠가 있다는 것을 알지 못합니다.

그중 화면에 표시되는 전경색과 배경색 간의 구분이 잘되지 않는 문제 때문에 내용을 인식하지 못하는 어려움을 겪는 경우가 가장 많이 발생하고 있습니다.

특히 전경색과 배경색이 흰색과 회색, 노란색과 주황색의 경우 처럼 유사한색으로 되어 있는 경우 더욱 인지하기 어렵습니다.

관련지침

디자인 작업시 고려해야 할 사항

1. 1. 전경색과 배경색의 명도대비를 높여 텍스트와 아이콘의 구분이 쉽도록 합니다.
2. 2. 명도대비를 높이는 것과 동시에 중요 텍스트에 Bold를 추가로 사용하면 콘텐츠의 인식에 도움이 됩니다.
3. 3. 직관적인 아이콘과 텍스트를 제공해야 오해가 발생하지 않습니다.
4. 4. 아이콘만 제공하기 보단 아이콘과 텍스트가 같이 제공되는것이 인식에 도움이 됩니다.
   
5. 5. 버튼의 크기는 너무 작지 않아야 합니다. 버튼의 크기가 작다면 인지하기 어렵습니다.
   
6. 6. 대다수의 시각장애인의 경우 눈부심으로 인해 흰색 배경보다 검정색 배경을 더 선호합니다.
7. 7. 특히 모바일은 화면의 크기가 작아 사용자가 접하는 실제 폰트크기가 데스크탑에 비해 더 작기 때문에 사용성을 고려한다면 명도대비를 좀 더 높게 제공하는 것이 바람직합니다.

기획단계부터 이러한 요구 사항을 고려한 사례를 소개드립니다.

요즘 휴대폰을 보면 예쁜 테마도 많은 데 글자가 잘 안보여서 답답하시죠?

그렇다고 테마를 직접 만들기는 더 힘들다구요?

그럼 버즈런처 고대비 홈팩을 추천 드립니다.

나온지는 조금 되었지만, 모르는 분들이 많네요...

홈팩 다운로드 : http://m.homepackbuzz.com/homepack/773464

큼직하고 눈에 잘 보이는 스타일의 아이콘으로 만든 홈팩(테마)입니다. 고대비로 제작되어 시력이 좋지 않으신 분들도 편리하게 쓰실 수 있어요.

부모님의 핸드폰에 버즈런처 고대비 홈팩을 설치해드리면 어떨까요?  간편하게 따뜻한 마음을 전해보세요.

"여보, 아버님폰에 버즈홈팩 놔드려야겠어요~"

• 버즈런처 소개페이지 : http://www.homepackbuzz.com/about
• 고대비 홈팩 : http://www.homepackbuzz.com/homepack/773464

by 접근성팀 Hale & Gio

최근 라디오 버튼에 디자인을 입히는 경우가 많아지고 있는데, 어떠한 디자인이 좋을까?

라디오 버튼의 속을 꽉 채운 디자인을 종종 보게 됩니다.

보통 선택되지 않은 라디오버튼의 내부에는 색상을 흐리게 채워 놓고, 선택된 라디오 버튼만 진하게 표시하는데요.

하지만 사용자에 따라 라디오 버튼을 클릭해서 선택하더라도 선택/해제 상태를 명확히 구분하기 어려운 경우가 많습니다.

특히 저시력 시각장애인의 특성상 비슷한 유형의 디자인 차이를 인식하지 못하고 오인하는 경우가 자주 발생하게 됩니다.

어려워, 어려워 ...

만약 활성화된 버튼과 비활성화된 버튼의 명도대비 차이가 적다면 더 구분하기 어려워집니다.

• + 관련지침 : 1.3.3 텍스트 컨텐츠의 명도 대비
  

종종 색상의 차이로만 버튼을 구분하는 경우도 있는데 색각장애 사용자의 경우 활성화 여부를 구분하기 어려울 수 있습니다.

• + 관련지침 : 1.3.1 색에 무관한 컨텐츠 인식

그럼 누구나 이용가능하도록 접근성을 높이려면 어떻게해야 할까요?

디자인을 적용한 라디오 버튼을 제공하더라도 기본적인 라디오버튼의 모습처럼 제공하는 것입니다.

기본적인 라디오 버튼처럼 선택되지 않은 라디오버튼은 내부에 채워진 색상을 제거하여 선택/해제 상태를 명확히 인지할 수 있게 합니다.

속이 꽉찬 남자 99.9~ NO NO

속이 꽉찬 디자인보다는 가끔은 속이 빈 디자인 좋습니다.

실제 적용된 검은사막 서비스 화면 - http://black.game.daum.net/

by 접근성팀 Hale & Gio