Daum 웹표준을다루다 Web Standards Darum

접근성은 특별한 것이 아닙니다. 특별한 누군가를 위해서, 일부러 계획해서, 특별하게 준비해야만 가능한 것이 아닙니다.‘누구나 동등하게 이용할 수 있게 하자.’는 생각과 ‘기본을 지키자.’는 마음이면 충분합니다. 그런 마음을 갖고 있으면 때로는 ‘우연’이 일어나기도 합니다. 마법처럼, 바로 ‘마이피플’처럼 말이죠. 

Daum 서비스에는 QA 업무를 담당하는 시각장애인 직원이 있습니다. 그런데, 올해 초에 이 직원이 마이피플을 업무에 활용하는 것이 다른 동료들의 눈에 띄었습 니다. 마이피플에 등록된 동료를 찾아 외부에 있는 직원에게 업무 협의를 하거나, 음성 통화를 하는, 이 당연한 일이, 다른 직원들에게는 신기하게 보였 습니다. 왜냐하면, 마이피플은 아직 접근성 개선 프로젝트를 공식적으로 진행한 적이 없었기 때문입니다.

알고 보니, 이유는 간단했습니다. 지난해 11~12월 사이에, 마이피플의 글로벌 버전을 준비하는 작업을 했는데, 이 때, 이미지 속에 포함되어 있는 텍스트를 분리 하여 시스템 폰트로 구현했던 것입니다. 기존의 방식대로라면, 16개 국가의 언어를 지원하기 위해서 16 종류의 이미지 파일을 만들어야 하는데, 이 경우 서비스 로딩 속도가 매우 느려지게 됩니다. 그래서, 외국어는 용량이 적은 텍스트 정보로 이미지에서 분리한 후, 이미지 파일 한 종류와 16 종류의 텍스트 정보를 제공하게 되었는데, 이것이 자연스럽게 토크백(TalkBack)↓에 읽혀 시각장애인 직원이 이를 업무에 사용하게 되었던 것입니다. 이와 함께, 단축키를 이용해 화면 낭독기에서 왼쪽 또는 오른쪽으로 쓸어 넘기기를 하거나, 스크린을 터치해 정보를 탐색할 때, 중요한 정보 순서대로 이동하게 하는 ‘논리적 이동’도 개선하였습니다.  

이처럼, 이미지 글자를 모바일 기기에서 지원하는 시스템 폰트로 변경한 것 만으로도 접근성의 가장 중요하면서도 기본인 대체 텍스트 지원 사항을 모두 준수하게 되었습니다. 서비스를 이용하기 위한 주요한 정보들이 대체 텍스트로 제공되고, 음성통화와 영상통화의 통화 품질이 우수하기 때문에, 시각장애인 이용자들이 안드로이드 운영 체제에서도 모바일 메신저를 이용할 수 있게 되었습니다. 다만, 토크백의 문제이긴 하지만, 음성 및 영상 통화 시에, 카메라를 제어하는 버튼들의 대체텍스트('카메라버튼', '종료버튼' 등)가, 이어폰을 사용할 때에만 들려, 이어폰을 사용하지 않으면, 영상통화시 카메라 영상을 제어하기 어려운 등의 문제는 개 선해야 할 사항으로 남아 있습니다.

마이피플앱 접근성 개선 사례는 많은 Daum人들에게 ‘접근성이란 무엇인가?’를 다시 생각해 보게 하는 계기가 되었습니다. 접근성은 뭔가 어렵고 거창한 작업을 통해서가 아니라, 가장 간단하고 쉬운 방법으로 기본을 지키는 것에서 출발한다는 것, 그리고, 그것이 장애인 이용자들에게는 기존에는 접근조차 할 수 없었던 서비스를 이용할 수 있게 만든다는 사실을 깨닫게 되었습니다.  

• “기본 기능을 이용하는 데는 문제가 전혀 없지만, 아직 100% 접근성을 준수하고 있다고 보기에는 어려운 면이 있습니다. ‘폰트의 크기를 아주 크게도 변경할 수 있게 해달라’거나 ‘모든 스티커에도 대체텍스트를 제공해야 하지 않는가?’ 하는 내· 외부 의견에 귀기울여, 지속적으로 개선해 나갈 예정입니다.”
  
  - 박가영, 마이피플 담당 -

Daum은 많은 업체들과 협력하여 서비스를 제작하거나 광고를 제공하고 있습니다. 이들은 고객과 임직원, 주주 및 투자자, 지역사회와 정부 및 동종업계, 시민단체 등과 함께 Daum의 주요한 이해관계자입니다. Daum의 지속가능경영활동은 이 모든 이해관계자의 이익을 위해 존재하고, 접근성 개선 또한 이 모든 이해관계자들의 이익과 혜택을 위한 활동입니다. Daum은 접근성 개선을 통해 서로 다른 이해관계자의 이익이 함께 증진될 수 있도록 노력하고 있습니다. 

Daum 첫 화면에 제공되는 배너 광고 영역에 대한 개선 필요성은 항상 제기되어 왔습니다. 우선, 마우스를 오버하면 갑자기 배너 광고가 큰 팝업으로 전환되는 경우, 시각장애인들에게는 광고의 소리가 예기치 않게 크게 들려, 순간적인 놀라움이나 청각의 통증, 불안감을 야기한다는 점이었습니다. 다음으로 대부분 이미지나 플래시 애니메이션으로 제작되는 광고의 경우, 시각장애인은 그 내용을 알기 어렵다는 점이었습니다. 하지만, 다수의 비장애인 이용자를 대상으로 하는 광고 효과의 반감과 ‘장애인 이용자에게 광고가 필요할까?’ 하는 식의 인식으로 개선 작업은 속도를 내지 못했습니다.

그러나 올해, 사내에서 접근성에 관한 관심이 높아지고 인식의 변화가 생기면서 Daum 첫 화면 광고에 대한 개선 작업이, 2월부터 4월 사이에 진행되었습니다. 

2013년 4월 접근성을 개선한 다음앱과 모바일웹

첫째, 스크린리더기를 사용하는 시각장애인의 경우 Daum 첫 화면에서 ‘설정’ 기능을 통해, 확대 광고(팝업 광고)의 노출 여부를 설정할 수 있도록 했습니다. 이는 웹접근성TFT에서 개선을 권고하기 이전에, 실무 부서에서 관련 C/S 사항을 접하고, 시급히 개선해야 할 사항으로 제안하여 빠르게 개선되었습니다. 우려와 달리, 광고주들도 그 취지에 공감하여 적극적으로 호응해 주셨습니다. 실무 부서와 웹접근성TFT는 이러한 호응에 힘입어 애초에 계획했던 Daum 첫 화면 뿐만 아니라, 사이트 전체의 모든 광고에 동일한 개선 사항을 적용했습니다.

둘째, 배너 광고에 대체 텍스트를 넣기 시작했습니다. 특히, 국내 업계 최초로 모바일 광고에도 대체 텍스트를 제공하였습니다. 광고 또한 일종의 정보입니다. 그래서, 광고를 볼 수 없는 환경은 정보를 볼 수 없는 것을 의미합니다. 어떤 정보(광고)는 '장애인 이용자들이 이용하지 않을 것’이라는 것은 편견이라고 할 수 있습니다. 그리고, 장애인 이용자를 포함해서 더 많은 이용자가 볼수록 그 효과는 높아집니다. 따라서, 배너 광고의 접근성을 개선하는 것은 새로운 이용자 그룹이 생겨남을 의미합니다. 

이용자가 광고 실행 여부를 설정할 수 있는 자동실행 광고 설정 화면

광고는, 광고주 또는 미디어렙↓에 서 직접 그 정보를 입력하고, 그 종류만 해도 100여 종이 넘는 특수성을 갖고 있습니다. Daum 첫 화면 담당자는 사내 마케팅, 운영, 기획자와 함께 광고주 및 미디어렙 담당자 분들께 접근성 개선의 필요성을 설명하고 협조를 구했습니다. 광고 관리 사이트를 개선하여, 광고를 등록할 때, 그 광고를 설명하는 문구를 입력하도록 했습니다. 또, 접근성 안내와 별도로 장애인차별금지법 공지를 통해 광고를 등록할 때, 대체 텍스트를 입력할 수 있도록 유도했습니다. 광고뿐만 아니라, Daum에서 서비스를 제공하는 협력업체들의 웹 페이지들에 대한 접근성 평가를 실시하여, 그 결과와 개선 방법을 알려줌으로써, 협력업체들의 부담을 줄여주고 있습니다. Daum 첫 화면은, 접근성 개선이 이해관계자들의 이익과 이해를 침해하는 것이 아니라, 오히려 증진할 수 있다는 사실을 잘 보여주는 예라고 할 수 있습니다. 

• 
  

  접근성 안내와 별도로 장애인차별금지법 공지를 통해 광고 운영시 대체 텍스트를 입력하도록 유도

• 
  

  광고 등록 시에 해당하는 설명을 입력할 수 있도록 개선한 광고 운영 툴 제공

• "Daum 첫 화면 광고는 예기치 않게 광고가 확대되면서 시각장애인들에게 큰 소리가 들리는 불편을 제거하기 위해 광고 영역의 특수성까지 포기한 예입니다. 하지만, 광고 영역이 줄어들었다기 보다는, 오히려 새로운 이용자가 생겼다고 이해하는 편이 맞을 것 같아요. 이제, 시각장애인들도 불편함이나 우려 없이 배너광고에 마우스를 올려 놓고 대체 텍스트 를 통해 광고에 대한 정보를 이용할 수 있게 되었기 때문이죠. 여기서, 접근성 개선이 우리 모두를 위한 것이라는 사실을 알 수 있습니다.”
  
  - 최재성, 다음커뮤니케이션 웹표준기술팀 -

이지성 개발선임,
다음서비스 TX Center 접근성파트

“보이지 않던 것들을 보게 되었어요. 관심 없던 것들에 관심을 갖게 되었고 요. 제 자신이 바뀌고, 세상을 바라보는 눈도 변한 것 같아요. 많은 분들이 내 주변 사람을 사랑하는 마음을 타인에게도 나누어 주었으면 합니다.”

최미혜,
다음서비스 TX Center 접근성파트

“일상생활 속에서도 항상 접근성과 연관해 생각하는 모습을 발견했어요. 접근성이란 게 장애인에게만 필요한 것이 아니라 비장애인들도 편리해지는 것이거든요. 좀 더 따뜻한 시각으로 바라봐 주시고, 배려하는 마음을 가졌으면 좋겠어요.”

최재성,
다음커뮤니케이션 웹표준기술팀

“공평한 세상을 만들어 가는 중이에요. 다양한 환경이나 사용자들이 서로 교류할 수 있는 공평한 세상 말이죠. 어떻게요? 새로운 기술이 필요한 것이 아니라 내 주위 사람이 이용할 수 있

게 고려하고 관심을 가지는 것만으로도 충분합니다.”

임정화 팀장,
다음커뮤니케이션 UX1팀

“벽 을 조금씩 허물고 있다고 생각해요. 접근성을 위해 추구하고 노력하는 사람들이 있다는 것 자체가 벽 같은 것을 없애주는 것이 아닌가 생각해요. 특정한 사람들만을 위한 것이 아니라, 모든 사람을 위한 것이니까요. 기대하지 못했던 놀라운 경험을 드리는 것이 목표입니다.”

허유진,
다음커뮤니케이션 BX2팀

“할 일이 많아졌어요^^. 명도 대비나 텍스트 크기에 대해 생각할 것이 많아졌죠. 일이 많은 게 저에게는 즐거운 변화네요. 재미있고 신나고 즐거운 콘텐츠들을 다른 모든 사람들이 같이 즐기고 공유할 수 있어서 좋아요.”

윤정묵 팀장,
다음커뮤니케이션 모바일기획팀

“액정 너머에 있던 서비스를 액정 밖으로 꺼냈다고 할까요? 좀 더 오프라인으로 가까이 오지 않았나 생각합니다.”

홍윤표 팀장,
다음서비스 TX Center 웹표준개발1팀

“제 자신이죠! 지금은 필요하지 않을 수도 있지만, 앞으로는 필요하게 될, 저 뿐만 아니라, 부모님이나 제 주변 사람들 누구나 나이가 들면서 필요해질, 누구에게나 필요로 하는 순간이 분명히 올, 바로 그런 게 접근성이 아닐까 생각 합니다.”

연수진,
다음서비스 TX Center 접근성파트

“타인에 대한 작은 배려입니다. 장애인 뿐이 아니라 비장애인들도 편리하고 합리적으로 이용하는 것을 목표로 하기 때문에 일회적인 것이 아닌 필수적인 것으로 Daum의 모든 서비스가 접근성을 보장해서 앞으로도 꾸준하게 개선되고 보완되어야 한다고 생각합니다.”

박현준,
다음서비스 TX Center 접근성파트

“일상생활입니다. 제가 시각장애인이다보니까 접근성이 잘 되어 있는 페이지는 정보 접근이 용이하고, 잘 되어 있지 않은 페이지는 이용하기 어렵죠. 그렇게 늘 마주치는, 일상생활이라고 생각합니다.”

박유정,
다음서비스 TX Center 접근성파트

“새로운 감각입니다. 다른 누군가의 또 다른 감각을 제가 생각하고, 그들이 느끼는 것들을 적용시켜 좀 더 편리하게 만들기 때문이지요.” 

이원주 팀장,
다음커뮤니케이션 웹표준기술팀

“사람과 사람 사이의 커넥션입니다. 접근성은 장애인과 일반인을 구분하는 것이 아니라, 사람과 사람, 사람과 서비스가 소통하는 것이라고 생각합니다.”

정자영,
다음커뮤니케이션 UX2팀

“놓치고 있었던 그 무엇! UX 업무를 담당하고 있으면서도, 정작 이용자분들에 대해서 깊이 생각하지 못했던 부분들을 다시 생각하게 된 계기가 되었습니다.”

안녕하세요. 

웹표준을 다루다! Darum 담당자입니다.

HTML5 Elements와 CSS3 Properties의 문서 내용이 업데이트되어 알려드립니다.
(각 메뉴명이 CSS Attribute → CSS Properties, CSS3 Attribute → CSS3 Properties 로 변경되었습니다.)

▶ HTML5 Elements 바로가기 : http://darum.daum.net/convention/html/html5_elements

▶ CSS3 Properties 바로가기 : http://darum.daum.net/convention/css/css3_properties

◈ HTML5 Elements 업데이트 사항

☞ 아래와 같이 HTML5 New Element 에 main 내용 추가 및 문서 하단에 HTML5 Changed Elements 와 HTML5 Obsolete Elements 내용이 추가되었습니다.

◈ CSS3 Properties 업데이트 사항

☞ CSS3 브라우저 지원현황과 아래와 같이 CSS3 속성별로 구분하여 타이틀이 제공되었습니다.

        - Borders

      - Backgrounds

      - Gradients

      - Text Effect

      - Fonts, Transitions

      - Transforms

      - Animations

      - Multiple Columns

      - User Interface

☞ 각 CSS3 속성에 1. Summary 2. Syntax 3. Example 로 정리되어 이전보다 가독성이 높아졌습니다.

예시)

box-shadow

1. Summary

박스모델의 그림자 효과를 주는 속성

2. Syntax

3. Example

box-shadow:10px 10px 5px #888;

 - 업데이트된 문서의 자세한 사항은 HTML5 Elements 와 CSS3 Properties 에서 확인하실 수 있습니다.

감사합니다.

▶ iOS 접근성 바로가기 : http://darum.daum.net/accessibility/tools/ios

  아이폰 iOS가  iOS7 로 업데이트 됨에 따라 iOS 접근성 > 손쉬운 사용 기능에 대한 내용이 업데이트되어 알려드립니다.

※ "손쉬운 사용" 접근성 기능의 업데이트된 내용을 간략히 살펴보면 다음과 같습니다.

ㆍ 제한된 운동 능력을 가진 사용자도 이제 스위치 제어를 사용해 장비 제어 가능

ㆍ 청각 장애인용 자막 스타일 사용자화

ㆍ VoiceOver의 손글씨 입력 지원

ㆍ VoiceOver에서 Nemeth 점자를 사용하여 수학 입력 지원

ㆍ 선택 항목 말하기 및 VoiceOver를 위한 향상된 품질의 다수 음성 선택 가능

ㆍ iPhone용 보청기 및 iPhone 5 및 iPod touch(5세대)용 스테레오 오디오 지원

◈ 업데이트 변경사항 비교

ㆍ 빨간박스 : 버전변화  (6.0, 6.0.1 → 7.0.2 버전 변화)

ㆍ 파란박스 : 기기변화 (4, 4s → 5 기기 변화)

iPhone4, 4S 변경사항 

ㆍ 6.0, 6.0.1 → 7.0.2 버전 변화로 인한 메뉴 추가 : 텍스트 설정 상세화됨. 

iPhone5 변경사항 

ㆍ 6.0, 6.0.1 → 7.0.2 버전 변화로 인한 메뉴 추가 : 텍스트 설정 상세화  

ㆍ 4, 4s → 5 기기 변화로 인한 메뉴 추가 : 동작 줄이기 

2. 듣기지원

iPhone4, 4S 변경사항 

ㆍ 6.0, 6.0.1 → 7.0.2 버전 변화로 인한 메뉴 추가  :  자막 및 청각 장애인용 자막 

iPhone5 변경사항 

ㆍ 6.0, 6.0.1 → 7.0.2 버전 변화로 인한 메뉴 추가 :  자막 및 청각 장애인용 자막  

ㆍ 4, 4s → 5 기기 변화로 인한 메뉴 추가 :  전화 소음 차단 

3. 신체 및 동작지원

iPhone4, 4S, 5 변경사항 

ㆍ 6.0, 6.0.1 → 7.0.2 버전 변화로 인한 메뉴 추가  :  스위치 제어 , 손쉬운 사용 단축키 

  위와 같이 보기지원, 듣기지원, 신체 및 동작지원 기능이 새롭게 업데이트되어 설정화면의 상세화 및 새로운 기능의 메뉴추가로 보다 더 다양한 기능이 제공됨으로서 원하는 기능을 쉽고 빠르게 직관적으로 사용할 수 있게 되었습니다.

- 업데이트된 기능의 자세한 사항은 iOS 접근성 페이지에서 상세 내용을 확인하실 수 있습니다.