월별 글 목록: 2014년 12월월

프로젝트의 성공을 좌우하는 요소들

프로젝트에서 웹 퍼블리싱 파트의 업무 공정과정을 정리하던 중 실무에 도움이 될만한 좋은 글 발견. PM의 관점에서 풀어낸 이야기이지만, 팀원일지라도 읽어둔다면 부서간 이해관계 파악과 통찰력 증대에 큰 도움이 될 것이다.

웹 접근성 프로젝트에서 웹 퍼블리셔가 할 일 – 0. 배경

관련 글

웹 접근성 프로젝트를 진행하다보면, 자주 발생하는 문제 상황임에도 미리 대비하지 못해 뒤늦게 수습하려는 경우를 심심찮게 보곤 한다. 퍼블리싱 파트만 웹 접근성을 준수했다고 웹 사이트의 웹 접근성이 우수한 것은 결코 아니지만, 현실적으로 이것에 대해 가장 많이 알고 있으며 업무 전반에 영향을 받는 부서가 바로 퍼블리싱 팀이기에… 그렇다, PM은 웹 퍼블리셔가 이 모든 위험요소를 점검하고 해결하리라 기대할 것이다. 그에 반해 타 부서의 팀원들은 웹 접근성 관련 작업에 굳이 시간과 노력을 할애하려 하지는 않을 것이다. 이는 사이트 구축의 목적이 기능 또는 콘텐츠이지 웹 접근성 그 자체는 아니라는 안일한 생각에서 기인한다.

웹 접근성은 목적이 아니라 ‘기본’이다. 기본을 중시하지 않는 프로젝트가 잘 된 프로젝트일 리 없을테지만, 어쩌다 이 기본을 잘 아는 타 부서 팀원을 마주치게 되면 감개무량하게 되는 슬픈 현실인 것이다. 차라리 팀원들의 웹 접근성 인식에 관해 어느 정도 체념하는 편이 정신건강에 이로울 지경이다. 그 인식의 빈 공백을 퍼블리싱 PL이 채워 넣기 위해서는 동분서주 챙길 것이 많다. 초반에 삐끗하면 프로젝트 막바지에 일이 산더미처럼 몰리고 웹 접근성 관련 이슈는 모두 퍼블리싱 팀이 덤터기쓰기 십상이다. 이러한 여러가지 위험요소들을 슬기롭게 해결하기 위해 적당한 타이밍에 적절한 사전작업을 해두어야만 한다.

다음번엔 웹 접근성 인증마크 획득을 과업으로 둔 중소형 프로젝트에서 마크업 개발을 주도하는 웹 퍼블리싱 PL의 경우를 상정하여 이야기를 풀어나가겠다. 또한 여력이 날 때마다 관련 자료를 보강할 생각이다. PL로서 프로젝트가 어떻게 돌아가는지 정도는 미리 숙지하고 있어야 하니, 프로젝트의 성공을 좌우하는 요소들을 먼저 파악하고 난 뒤 실무에 접근해보도록 하자.

관련 글

TV수신료 환불은 국민신문고에서.

TV수신료가 전기요금에 기본으로 포함되어 있다는 사실을 알게 된 것이 그리 오래되지 않았다. 수상기만 있어도 수신료를 내야한다는 얘기는 어디선가 들어봤던 것 같기는 한데, 집에 TV는 항상 있어왔기 때문에 대충 흘려들었던 것 같다. 그러다 지난해 이사하게 되면서 평소 잘 보지 않는 TV를 동생에게 넘겨주고 나왔다.

지난달인 11월 중순쯤, 평소에는 잘 들여다보지도 않았던 장문의 전기요금 통지 SMS가 우연히 눈에 들어왔다. 언뜻 스친 항목을 다시 확인하며 뜨악하고 말았다. 들여놓은 적도 없었던 TV수신료가 2,500원 청구되어 있는 것이다. 어느새 15개월 동안이나 꼬박꼬박 요금을 내왔고, 이는 모이면 37,500원이라는 금액에 달했다. 누군가는 그리 큰 돈이 아니라고 대수롭지 않게 생각할 지 모르지만, 금액의 많고 적음이 중요한 게 아니다. 억울하다. 보지도 않은 TV수신료를, 어떠한 동의 또는 서명도 없이 꼬박꼬박 내고 있었던 것이다.

고객센터에 다짜고짜 전화를 걸기 전에, 이와 같은 사례가 있는지 검색해보았다. 매우 많은 검색 결과가 나왔는데 목록을 훑어보니 대부분 환불에 대한 성공기였다. 개 중 상단에 노출된 글을 한 두 건 읽어보고는 무리없으리라 여겨 고지서를 청구한 한전에 전화했다. 한전은 대행사인지라 최근 3개월치만 환불이 가능하니 그 이전 금액까지 환불을 희망한다면 KBS 콜센터에 전화하라고 친절히 일러주었다. 다시 KBS 콜센터에 전화를 연결했고, 순조로울 것이라는 예상과는 달리 난관에 부딪혔다. 환불은 절대로 해줄 수가 없다는 것이다. 나와 같은 사례가 꽤나 많았는지 남자 상담사는 잔뜩 독이 올라 있었다. 말빨로는 절대 질 수 없다는 기세다. 규정상 환불을 해준 적도, 해줄 수도 없다는 매뉴얼만 읊어대는 그와 근 5분 이상 통화하면서 혈압이 오를대로 올랐다.

콜센터 직원은 교육받은 대로 읊을 뿐일테니, 이대로는 아무런 의미가 없다는 것을 깨달은 나는 일보 후퇴하여 전화를 끊은 뒤 다시 검색하기 시작했다. 이내 감사하게도 좌충우돌 tv 수신료 환불 받기 : 네이버 블로그라는 아주 친철한 체험 후기(?)를 만날 수 있었다. 정독한 결과 방통위나 국민신문고에 민원을 넣는 것이 가장 깔끔하고 확실하다는 결론에 도달했다. 상담사와의 전투적인 통화로 풀로 올라간 분노 게이지를 타자에 실어 글에 쏟아부었다. 신문고답게 읍소하는 어투를 구사하는 디테일도 빠뜨리지 않았다.

KBS TV수신료 환불의 건

[개요]
이사할 때부터 TV가 없었는데, KBS측에서 해당 기간동안(15개월)의 TV수신료 환불을 거부합니다.

[경위]
2013.06.** 이사한 이래로 집에 TV가 한번도 없는데 전기세에 TV수신료가 함께 포함되어있더군요. 그것을 2014.11 되어서야 알게 되어 한전에 전화하여 청구 중단 신청 및 환불요청을 했습니다. (한전고객번호: 0*-0***-****)

한전에서는 청구 중단은 처리해주었으나, 지난 납부 환불건에 대해서는 KBS대행역이므로 3개월치에 한해서만 환불가능하다고 하기에, 나머지 금액에 대한 부분도 환불받고자 한다면 KBS 고객센터(1588-1801)에 문의해보라고 안내해 주었습니다.

그런데, KBS 콜센터 상담 직원은 지난 납부건에 대한 환불은 전면 불가하다고 말합니다. 한전에서 제시한 지난 3개월 환불에 대한 건도 사실은 한전 콜센터 안내가 잘못된 것이며, 지난 납부액은 자기들 책임이 없으므로 전혀 환불되지 않는다고 말합니다.

인터넷 검색 조금만 해봐도 환불받은 전례가 다양하며, 한전에서조차 편의를 보아 3개월치는 환불해준다고 말하는데 자기들끼리도 서로 말이 다르니, 이것이 국민을 우롱하는 행위가 아니고 무엇입니까? 라고 따지니 TV란 어느날 있을 수도, 갑자기 없어질 수도 있는 것이라 KBS측에서 확인할 방법이 없기때문에 사용자의 신고가 들어간 시점에서만 반영해 준다는 말만 계속 되풀이 하였습니다.

이는 다른 사용자도 마찬가지이며, 저에게만 해당하는 사항은 아닙니다. 그러면 청구 중단 신청은 왜 전화 신청만으로도 접수해 주는 겁니까? 집에 TV가 있는지 없는지 방문 확인도 안해보고 청구 중단 접수는 해주면서, 어째서 지난 기간에 대한 환불은 안된다는 것인지요? 세세히 읽어보지도 않는 고지서 규정 사이에 슬쩍 끼워넣은 일방적인 공지만으로도 이런식의 요금 징수가 가능한 것은 정당하고, 환불 요구하는것은 정당치 않다는 말입니까? 납득할 수 없습니다. 보지도 않는 TV 수신료를 동의없이 계속 내온 것도 억울한데, 끝까지 투쟁하는 사람만 환불을 해주려는 KBS의 행태가 참으로 괘씸하며 개탄스럽습니다.

KBS측의 시정을 촉구하며, 더불어 지난 15개월간의 TV수신료 환불을 요청합니다.

감사합니다.

그리고 글을 올린지 정확히 52일이 지난 오늘, 환불해주겠다는 KBS측의 전화를 받았다. 환불받을 계좌번호 및 간략한 본인확인을 거쳤으며, 참고한 후기글과 동일한 안내멘트를 받았다. KBS 담당자와 전화를 끊고 난 직후 쓰는 글이라 아직 입금은 되지 않았다.

그러나 KBS는 극단적으로 대응하지 않는 한 온순(?)한 고객에게는 여전히 환불해주지 않을 것이다. 오죽하면 TV수신료 납부거부사건이라는 영화까지 있겠는가. 콜센터 직원과 입씨름으로 기운빼지 말고 TV수신료 환불은 국민신문고에서.

한국형 웹 접근성 지침 2.0

인식의 용이성 (Perceivable)

  • 1.1(대체 텍스트) 텍스트 아닌 콘텐츠에는 대체 텍스트를 제공해야한다.
    • 1.1.1(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
  • 1.2(멀티미디어 대체 수단) 동영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단을 제공해야 한다.
    • 1.2.1(자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
  • 1.3(명료성) 콘텐츠는 명확하게 전달되어야 한다.
    • 1.3.1(색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
    • 1.3.2(명확한 지시 사항 제공) 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
    • 1.3.3(텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
    • 1.3.4(배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.

운용의 용이성 (Operable)

  • 2.1(키보드 접근성) 콘텐츠는 키보드로 접근할 수 있어야 한다.
    • 2.1.1(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
    • 2.1.2(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.
  • 2.2(충분한 시간 제공) 콘텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다.
    • 2.2.1(응답시간 조절) 시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
    • 2.2.2(정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
  • 2.3(광과민성 발작 예방) 광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 한다.
    • 2.3.1(깜빡임과 번쩍임 사용 제한) 초당 3~50회의 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
  • 2.4(쉬운 내비게이션) 콘텐츠는 쉽게 내비게이션할 수 있어야 한다.
    • 2.4.1(반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
    • 2.4.2(제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
    • 2.4.3(적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

이해의 용이성 (Understandable)

  • 3.1(가독성) 콘텐츠는 읽고 이해하기 쉬워야 한다.
    • 3.1.1(기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
  • 3.2(예측 가능성) 콘텐츠의 기능과 실행 결과는 예측 가능해야한다.
    • 3.2.1(사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점변화 등)은 실행되지 않아야 한다.
  • 3.3(콘텐츠의 논리성) 콘텐츠는 논리적으로 구성해야 한다.
    • 3.3.1(콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.
    • 3.3.2(표의 구성) 표는 이해하기 쉽게 구성해야 한다.
  • 3.4(입력 도움) 입력 오류를 방지하거나 정정할 수 있어야 한다.
    • 3.4.1(레이블 제공) 입력 서식에는 대응하는 레이블을 제공해야 한다.
    • 3.4.2(오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

견고성 (Robust)

  • 4.1(문법 준수) 웹 콘텐츠는 마크업 언어의 문법을 준수해야 한다.
    • 4.1.1(마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
  • 4.2(웹 애플리케이션 접근성) 웹 애플리케이션은 접근성이 있어야 한다.
    • 4.2.1(웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

text-indent:-9999px를 활용하는 IR기법의 고도화

이미지 대체텍스트를 위한 CSS 기법인 IR기법에는 여러 방법이 있는데, 다룸에서 소개하는 IR기법에 다양한 기법에 대한 설명과 장단점이 잘 나와있다.

Phark Method

이 중 text-indent로 텍스트를 날리는 방법인 Phark Method가 가장 범용적으로 쓰이는 편인데, text-indent: -9999px와 같은 매우 큰 수치를 주어 화면 밖으로 밀어내버리는 원리이다.

.ir {
	display: inline-block;
	width: 200px;
	text-indent: -9999px;
	background: url(../images/blank.gif);
}

이는 화면상에 보이지 않더라도 실제 캔버스는 지정한 영역까지 뻗어있는 꼴이므로 text-indent: -9999px은 성능상 좋지 않다고 한다. 해법은 다음과 같으며, 특정한 경우가 아니라면 가장 애용하는 방식이다.

보완한 CSS

.ir {
	display: inline-block;
	width: 200px;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/blank.gif);
	overflow: hidden;
}

text-indent를 요소의 너비와 동일하게 설정하면 텍스트가 첫 줄을 비우고 그 다음 행으로 개행하게 되는데 white-space: nowrap;를 이용해 이를 막고, 요소의 우측으로 텍스트가 삐져나가게 한 다음 해당 부분은 overflow: hidden; 처리하여 숨긴다. 이렇게 하면 실제 생성되는 캔버스 영역은 -9999px일 때보다 훨씬 작아지게 될 것이다.

이슈 및 해결

  • background를 지정하지 않고 본 기법을 활용하려는 경우, ie에서는 해당 영역을 감지하지 못하여 클릭할 수 없는 버그가 있었다. 이를 위해 투명한 2px*2px짜리 blank.gif를 만들어 배경으로 지정하여 해결했다.
  • ie7에서 해당 요소에 padding 값이 좌측 또는 우측에 적용되어있을 때 text-indent: 100%;로 지정하면 글씨가 삐져나오는 버그가 있었으며, 이 경우 %가 아닌 너비와 동일한 px로 지정하여 해결 가능하다.