Improvements in the Color Universal Design of Mobile Web Sites for Colorblind People

1-1. 연구배경 및 목적

최근 무선 통신 인프라의 보급과 스마트폰, 태블릿 PC 등의 확산으로 사용자가 활용할 수 있는 인터넷 환경이 급속히 확대되면서 빠르고 편리하게 정보에 대한 접근이 이루어지고 있다. 그러나 정보를 마음껏 이용할 수 있는 일반인에 비해, 다른 시각으로 컬러를 보는 색각이상자들은 컬러 때문에 혼동을 일으키거나 정보에 접근 자체가 어려워 정보격차(Digital Divide)가 벌어지고 있다.

2011년 보건복지부에서 시행한 ‘장애인 통계’ 결과에 의하면 우리나라 등록장애인 수는 2010년 12월 말을 기준으로 2,517,312명이었다. 등록 시각 장애인은 총 249,259명으로 전체 장애인 수의 9.9%를 차지하며, 그중 남성은 59.9%, 여성이 40.1%인 것으로 나타났다. 시각 장애인 중에서 색각이상은 대단히 흔한 증상으로 국내 통계에서는 전체 남자인구의 5.9%(약 122만 명), 전체 여자의 0.4%(약 10만 명)가 색각이상자인 것으로 조사되었다¹⁾. 국외의 복지 선진국에서는 1980년대부터 개인의 신체적 특성의 차이를 다양성이라는 측면에서 포용하고 그 차이를 줄이기 위한 디자인의 방법으로 유니버설디자인(Universal Design)을 보편적 디자인의 원리로 삼고 있다.

한편, 국내에서도 ‘장애인 차별 금지 및 권리구제에 관한 법률²⁾’의 발효를 계기로 모바일 웹 접근성에 대한 인식이 정부 및 공공기관들로부터 일반인들에게까지 점차 확산되고 있지만, 아직 민간분야 및 국공립대학교의 웹 접근성 수준은 매우 낮은 것으로 나타났다³⁾. 2011년 10월 7일, 한국 웹 접근성 인증위원회(KWAC)와 웹 발전연구소(www.smartebiz.kr)에서 시행한 “대학 모바일 웹 표준 준수에 대한 실태조사”에서도 대부분 대학이 웹 표준의 준수와 컬러계획 없이 운용되고 있어 많은 개선이 필요한 것으로 보고되었다⁴⁾. 이렇듯 지금은 대부분의 학습과 관련된 정보 서비스가 제공되는 대학 모바일 웹사이트의 접근성을 향상해 정보격차를 좁히려는 노력이 필요한 상황이다. 그러므로 대학들은 일반인뿐만 아니라, 색각이상자도 쉽게 웹사이트의 컬러정보를 이해하고 접근할 수 있도록 컬러유니버설디자인 관점에서 컬러를 구성해야 할 것이다. 본 연구는 컬러유니버설디자인(Color Universal Design) 관점에서 대학 모바일 웹사이트 컬러의 현황을 분석하고 문제점에 대한 개선 방향을 제안하여 색각이상자들을 고려한 컬러디자인의 조건들을 제시하고자 한다.

1-2. 연구범위 및 방법

본 연구는 컬러유니버설디자인 관점에서 국내의 대학 모바일 웹사이트의 색채를 분석하고 문제점에 대한 컬러개선의 방향을 제안하는 것을 목적으로 한다.

본 연구에서 다룰 색각이상자의 범위는 적색맹, 녹색맹, 청황색맹, 전색맹으로 연구의 방법은 다음과 같다. 먼저 컬러유니버설디자인 및 웹 표준의 개념에 관한 이론적 고찰을 하였다. 이후 색각이상에 대한 이해와 국내의 현황 및 색각이상자를 고려한 모바일 웹사이트 컬러의 조건에 대하여 논의하였다. 현황 분석을 위해 색각이상 시뮬레이션 프로그램인 Fujitsu Color Doctor 2.1을 사용하여 4곳의 대학 모바일 웹사이트의 컬러를 색각이상자의 시각에서 재현하여 문제점을 살펴보았다. 그리고 분석결과에 따라 개선컬러를 제안하고 시뮬레이션하여 검증을 시행하여 연구의 결과를 도출하고 모바일 웹사이트의 컬러계획시 고려해야 할 컬러의 조건들을 제시하였다.

2-1. 유니버설디자인의 개념

유니버설디자인이란 ‘장애의 유무나 개인이 속한 환경에 구애 없이 누구나 공평하게 사용할 수 있는 디자인’을 말한다. 장애인의 환경 개선을 위한 베리어프리(Barrier-Free)에서 출발한 유니버설디자인은 1985년 미국의 건축가 론 메이스(Ronald L. mace)에 의해 그 대상이 기존의 장애인에서 “가능한 많은 사람이 이용할 수 있는 디자인을 위한 총체적 접근”으로 재정의되었다.

2-2. 컬러유니버설디자인의 개념

유니버설디자인의 대상인 모든 사람 중에서는 선천적인 질병이나 사고와 같은 원인으로 장애를 갖게 되는 예도 있지만, 비장애인일지라도 환경의 대응에 따라 신체적인 제약이 발생하기도 한다

컬러유니버설디자인(Color Universal Design)은 처음 일본에서 시작된 것으로 일반인뿐 아니라, 개인의 유전자 특성이나 눈의 질환 등에 의해 다양한 색각을 가지는 모든 계층을 배려하는 컬러디자인을 말한다. 일본은 2003년 CUD(일본 컬러유니버설디자인협회)를 설립하고, 공공시설물, 간행물, 웹사이트 등에서 색각이상자의 고려를 평가하고, 개선점을 제안하는 등 사회의 의식개혁을 위한 활동을 꾸준히 하고 있다. 그러나 아직까지 국내의 색각이상자들이 웹을 이용하는 데에는 어려움이 많이 있다. 컬러유니버설디자인 관점에서 중요사항은 모든 사람이 쉽게 컬러를 이해하여 원하는 정보에 접근할 수 있는가이다. 따라서 컬러유니버설디자인은 보편적인 컬러 환경을 추구하는 것으로 정의할 수 있으며, 모두에게 편리하다면 그 요건에 충족될 수 있을 것이다.

2-3. 모바일 웹사이트의 특징

2-3-1. 모바일의 웹 접근성 및 표준

모바일 웹이란 이동 단말기에서 일반 웹에 접속할 수 있는 브라우징 기술을 말하는 것으로, 모바일 환경을 고려하여 최대한 효율적으로 정보를 배치하는 것이 필요하다. 따라서 모바일 웹사이트를 제작할 때에는 다음의 사항들을 고려해야 한다.

첫째, 휴대성과 이동성을 기반으로 하는 작은 모바일 환경에 최적화된 직관적인 화면구성이 필요하다. 둘째, 모바일의 네트워킹 환경이 저속이라는 점을 고려해야 한다. 셋째, 수많은 종류의 모바일 기기만큼이나 다양한 운영체제(OS)가 존재한다는 것을 고려해야 한다.

모바일 웹 접근성(Web Accessibility)이란 일반인뿐 아니라, 장애를 가진 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 지식경제부는 2010년 7월 모든 모바일기기에 같은 규격의 웹서비스를 제공하기 위하여 ‘스마트폰용 모바일 웹 KS 표준’을 제정하였다. 국제 웹 기술 표준화기구인 W3C의 모바일 웹 모범사례(MWBP) 1.0 규격을 발전시킨 한국형 Mobile Web Best Practice의 표준 규격 "모바일 OK"에서 제정한 지침의 내용은 다음과 같다.

[표 1]

모바일화를 위한 10가지 가이드라인5)

3-1. 색각이상의 개념 및 분류

색각이란 우리 눈의 망막에 존재하는 3가지 추상체 세포가 가시광선(약 380nm ~ 780nm) 내에서 빛의 파장 차이를 느껴 컬러를 분별하는 감각을 말하며, 색각이상이란 이 3가지의 추상체 중 어느 것이나 혹은 모든 것이 결핍하여 정상인과는 다른 색각을 보이는 것을 말한다.

[그림 1]

안구의 단면도와 추상체, 간상체7)

망막에는 명암만을 인식하는 간상체와 컬러를 인식하는 추상체 세포가 존재하는데 간상체는 1가지의 색소만을 가지고 있어 회색 조의 색만을 감지하고, 추상체는 3가지(적(R), 녹(G), 청(B))의 색소를 가지고 있어, 정상인은 이 3가지 빛의 혼합으로 모든 컬러를 식별한다. 추상체는 장파장에 반응하는 L 추상체(적), 중파장에는 M 추상체(녹), 단파장에 반응하는 S 추상체(청)로 불리기도 한다.

[그림 2]

가시광선과 3가지 추상체의 파장 분포도8)

색각이상은 크게 3가지로 구분된다. 3종류의 추상체 중 어느 하나의 감도가 낮은 이상 3색 형과 그중 어느 하나가 없는 2색 형, 모든 색을 무채색으로 지각하는 1색 형, 정상인은 삼색 형 색각에 속한다.

[표 2]

색각이상의 분류와 용어9)

국가인권위원회에서 발표한 선천성 색약타입의 특징을 살펴보면 다음과 같다.

• 이상 3색 형 색각(색약: Anomalous trichomatism)은 3종류의 추상체 중 어느 한 종류의 감도가 낮은 경우를 말하며, L 추상체의 감도가 낮은 제1 색약(적색약), M 추상체의 감도가 낮은 제2 색약(녹색약), S 추상체에 해당되는 제3 색약(청·황색약)으로 나뉜다.

• 2색 형 색각(색맹: Dichromatism)은 3가지 추상체 중 2가지의 추상체만을 가지고 있어, 이 2가지로 모든 컬러를 인식한다. L 추상체가 없는 제1 색각(적색맹), M 추상체가 없는 제2 색각(녹색맹), S 추상체가 없는 제3 색각(청·황색맹)으로 분류된다. 제1 색각(적색맹)과 제2 색각(녹색맹)은 적색과 녹색의 색각에 장애가 있어 컬러 인식에 약간의 차이가 나타난다.

• 1색 형 색각(전색맹: Total color blindness)은 1가지의 추상체만을 가지므로, 1가지 컬러의 명암 또는 농담만을 식별할 수 있다. 대부분 선천적으로 시력이 매우 나쁘며, 눈부심과 같은 증상을 동반한다.

색각이상의 비율을 살펴보면 제2 색약(녹색약)과 제2 색각이상(녹색맹)이 가장 많으며, 그다음으로 제1 색약(적색약), 제1 색각이상(적색맹)의 순서이다.

제3 색각이상(청·황색맹)은 비교적 적으며, 제1색 형 색각(전색맹·색약)은 극히 드문 것으로 알려졌다.

3-2. 색각이상자의 국내 현황

2011년 보건복지부의 발표에 의하면 선천성 색각이상은 X염색체를 통한 성염색체 열성유전으로, X염색체에 이상이 있을 때 남자는 색각이상자가 된다. 하지만 여자의 XX 염색체 중 한쪽의 X만 색각이상과 관련되면 색각은 정상이지만 자녀에서는 색각이상이 나타날 수 있는 보인자(carrier)가 되는데, 이는 전체 여성 인구의 약 10% 정도이다(국가인권위원회, 2004).

후천성 색각이상은 망막의 이상으로 추상체가 손상된 경우와 안질환, 녹내장, 시신경 질환, 그리고 고령자는 시각기능의 퇴화 등이 원인으로 알려졌다. Steward 등의 보고에 의하면 이색형 색각이상자의 90%와 이상 3색 형색각자의 66%가 일상생활에 불편을 느낀다고 하며, 국내의 논문에서는 색각이상자의 77.3%가 컬러 때문에 혼동을 느낀 적이 있다고 응답하였다(이미리 외. ; 1988, Steward & Cole; 1989)¹⁰⁾(국가인권위원회, 2004).

색각이상자들은 일상생활에서 종종 불편이나 차별을 감내해야 하는 상황에 놓이게 되며, 사회적 인식 때문에 본인들 스스로 커다란 부담을 가지기도 한다. 색각이상자가 직업선택과 교육의 기회 결정과정에서 차별을 받는 사례는 흔히 접할 수 있는데 대표적으로 색각이상자에 대한 제한적 고용을 들 수 있다. 국내의 경찰직과 소방공무원, 일반 공무원, 운수업종, 그리고 방송사의 카메라, 촬영 및 그래픽분야에서는 색각이상자에 대해 고용의 기회를 제한하고 있다. 하지만 일본과 미국, 영국은 색각이상자의 소방직과 경찰직 채용을 허용하고 있으며, 색약의 종류에 대한 차이를 두거나 의사의 소견을 통해 채용 여부를 판단하고 있다. 이렇듯 국내의 색각이상자들이 겪는 사회적 불이익은 크며, 국외와 비교하여 볼 때에 색각이상자의 업무수행 능력에 대한 우리 사회의 인식과 평가가 의학적·현실적 검증이 이뤄지지 않은 차별과 편견에 의한 것이 대부분이라는 것을 알 수 있다.

3-3. 색각이상자를 위한 모바일 웹사이트의 컬러

현재까지 색각이상자가 웹페이지에서 식별하기 어려운 컬러에 대한 연구에 따르면 하나의 컬러보다는 특정 컬러의 조합에서 식별이 어려운 것을 알 수 있다. 일반적으로는 명도차이가 크거나 보색관계에서 쉽게 컬러를 구분하지만, 적색과 녹색과 같은 특정한 보색조합에서는 식별이 어렵다고 한다¹¹⁾. 다음 [그림 3]은 정상색각과 제1 색맹(적색맹), 제2 색맹(녹색맹)자가 본 컬러 시뮬레이션을 나타낸 것이다.

[그림 3]

색각별 컬러 시뮬레이션12)

첫 번째와 두 번째 줄의 시뮬레이션 화상을 통해 알 수 있듯이 적색맹과 녹색맹자는 유사색상의 조합에서 식별이 어려우며, 녹색과 적색의 보색조합에서도 컬러를 구분하기 어렵다. 그리고 연두색은 난색으로 혼동하여 황색으로 본다는 것을 알 수 있다. 따라서 색각이상자를 고려하여 웹사이트의 컬러를 계획할 때에는 이러한 사항들을 주의해야 할 것이다.

4-1. 분석 대상 선정 및 분석 방법

본 연구에서 다룰 대학 모바일 웹사이트의 범위 및 분석 방법은 다음과 같다.

첫째, 현재 각 대학에서 운용하고 있는 모바일 웹사이트의 웹 표준 준수율을 알아보기 위하여 인터넷 보도 자료를 중심으로 조사하였다. 인터넷 한국대학신문 및 여러 인터넷 뉴스 보도를 통하여 2011년 10월 07일 한국 웹 접근성 인증위원회(KWAC)와 웹 발전연구소(www.smartebiz.kr) 및 마중물 소프트(www.mjmsoft.co.kr)가 공동으로 조사해 발표한 “국내 대학 모바일 웹 표준 준수율” 결과를 참고하였다. 그리고 결과를 통해 웹 표준 준수율이 ‘매우 미흡’하다고 평가를 받은 다음 [표 3]의 4곳의 대학을 본 연구의 분석 대상으로 선정하였다.

[표 3]

분석 대상 모바일 웹사이트13)

둘째, 분석 방법은 애플사의 아이폰(iPhone 4)을 이용하여 모바일 웹사이트 메인화면을 해상도 640×960 모드로 캡처하였다.

셋째, 캡처된 화면을 색각이상자의 시각으로 재현하기 위해 시뮬레이션 프로그램 「Color Doctor 2.1」¹⁴⁾을 사용하였다. 색각이상자를 위한 시뮬레이션 프로그램의 종류에는 Color Doctor 2.1 외에도 미국 Wandall에서 개발한 Vischeck, Adobe사의 Photoshop 프로그램 등이 있다. 그러나 그중에서 Color Doctor 2.1 프로그램은 미국 WAI의 웹 접근성 평가 도구로 등록된 것으로, 우리나라 한국정보화진흥원의 "웹 접근성 점검 매뉴얼"에서도 색상의 접근성 여부 점검 도구로써 활용을 권장하고 있다. 따라서 본 연구자는 Fujitsu사의 Color Doctor 2.1 프로그램을 분석도구로 사용하기로 하였다.

넷째, 캡처한 모바일 웹사이트 화면에서 시인성이 낮은 부분을 선정하여 RGB값과 먼셀(Munsell) 값을 제시하고 이를 먼셀 10 색상환과 KS 톤 분류에 대입하여 색상, 채도, 명도차이 관계를 비교·분석하였다.

4-2. 대학 모바일 웹사이트의 컬러 분석

4-2-1. 색각이상 현상 시뮬레이션

(1) 한밭대학교 시뮬레이션

[표 4]

한밭대학교 메인 화면 컬러분석

[표 5]

색각이상자의 시각에서 본 한밭대학 웹 컬러

시뮬레이션 결과 적색맹과 녹색맹자의 시각에서는 적색과 녹색의 식별이 어렵다. 배경과 아이콘 컬러의 색상 및 명도차이 또한 작아 시인성이 부족하다.

(2) 삼육대학교 시뮬레이션

[표 6]

삼육대학교 메인 화면 컬러분석

[표 7]

색각이상자의 시각에서 본 삼육대학 웹 컬러

삼육대학교에서도 적색맹과 녹색맹에서 문제가 나타나는데, 적색과 녹색의 조합에서 두 색이 유사해지는 현상이 그것이다. 적색맹과 녹색맹은 작은 색상과 채도의 변화를 느끼지 못하여 명확한 명도차이가 필요하지만, 분석결과에 나타난 것처럼 배경과 아이콘간의 명도차이가 없어 콘텐츠를 식별하기 어렵다.

(3) 경남과학기술대학교 시뮬레이션

[표 8]

경남과학기술대학교 메인 화면 컬러분석

[표 9]

색각이상자의 시각에서 본 경남과학기술대학 웹 컬러

시뮬레이션 결과 바탕에 사용된 혼합색과 아이콘의 흰색이 모두 고명도로 서로 간의 구분이 어렵고 전체적으로 화면이 흐릿하게 보인다. 특히, 연두색의 사용 빈도가 높아 적색맹과 녹색맹자는 식별하기 어려우며, 헤더(Header) 영역의 텍스트 또한 배경과 명도차이가 작아 대학 로고의 식별이 어렵다. 대체로 컬러표현이 선명하지 않아 시인성이 좋지 못하다.

(4) 중부대학교 시뮬레이션

[표 10]

중부대학교 메인 화면 컬러분석

[표 11]

색각이상자의 시각에서 본 중부대학 웹 컬러

중부대학교는 메인 화면에 유채색의 배경색을 적용하였는데, 배경색과 아이콘 컬러 간의 채도차이가 작아 선명하게 정보를 인식하기 어렵다. 배경색을 저채도, 고명도의 컬러로 변경한다면 시인성이 더욱 향상될 것이다. 또한, 다른 대학에 비해 다양한 색상의 수를 사용하였지만, 명도와 채도 간격을 주지 못하여 오히려 산만하게 보인다. 특히, 텍스트의 명도를 저명도로 변경할 필요가 있다. 중앙에서 좌측 첫 번째와 두 번째, 우측의 아이콘은 혼합색의 적용 때문에 구분이 모호하여 좀 더 명확한 표현이 필요하다.

4-3. 모바일 웹사이트 개선컬러 방향 및 제안

4-3-2. 대학 모바일 웹사이트 개선컬러 제안

지금까지 4곳의 대학 모바일 웹사이트 컬러 분석으로 바탕으로 개선방향을 제시하였다. 이상의 개선방향에 따라 한밭대학교 모바일 웹사이트를 대상으로 일반적인 시 지각에서도 컬러 식별이 어렵고 시인성이 낮은 컬러영역의 수정을 시행하였다. 그리고 개선 후 색각이상자의 시각에서 알아보기 위하여 Fujitsu Color Doctor 2.1 프로그램을 이용하여 시뮬레이션하면 다음 [표 12], [표 13]와 같다.

[표 12]

한밭대학교 모바일 웹사이트 개선컬러

[표 13]

한밭대학교 웹사이트 컬러 개선 전후 비교

한밭대학교 모바일 웹사이트의 컬러개선 안을 [표 13]과 같이 색각이상자의 시각으로 변환하였다. 개선된 메인 화면은 일반인이 보더라도 각 콘텐츠 컬러의 구분이 명료해진 것을 확인할 수 있다. 적색맹과 녹색맹에게 있어 식별이 어려웠던 적색을 저명도, 고채도의 청색으로 변경함으로써 시인성을 높였고, 또한 배경과 콘텐츠 컬러의 구분이 모호했던 아이콘 이미지의 명도를 어둡게 조정함으로써 구분이 쉽도록 개선하였다.

5-1. 연구결과

유니버설디자인의 기본원칙은 모든 사용자에게 공평한 사용과 편의를 제공할 수 있도록 장애가 되는 요소를 개선해 나가는 것이다. 그러나 지금까지 국내에서는 사회구성원에 대한 다양성의 포용이라는 측면에서 색각이상자의 편의를 고려한 모바일 웹사이트 컬러에 대한 논의와 연구가 부족했던 것이 사실이다. 모바일 웹사이트 이용 시 색각이상자들이 겪는 다양한 불평등을 해결하기 위해서는 이들의 시각적 특성에 대한 이해를 바탕으로 컬러디자인에 대한 명확한 컬러규정과 관리가 뒷받침 되어야 한다. 이에 본 논문은 컬러유니버설디자인 관점에서 현재 대학에서 운용되고 있는 모바일 웹사이트 메인 화면의 컬러구성에 대해 분석하고 개선점을 제안하였다. 또한, 색각이상자 시각에서의 실험과 분석을 통해 모바일 웹사이트의 컬러계획 시 다음과 같은 조건들을 제시할 수 있게 되었다.

① 단순하고 직관적인 화면구성을 제공한다.

② 배경색과 텍스트 그리고 아이콘간의 명도차이를 크게 하여 시인성을 높인다.

③ 유사색상과 유사색조를 이용할 때에는 명도대비를 높이거나 외곽선 등을 표현하여 서로 구분한다.

④ 적색과 녹색처럼 보색관계에서 식별에 혼동을 일으키는 컬러의 조합을 가능한 피한다.

⑤ 컬러 정보가 사라지고 흑백으로 보더라도 화면을 이해할 수 있어야 한다.

⑥ 컬러계획 시 배경, 내비게이션, 콘텐츠 등 각 영역에 컬러와 톤을 선정하고 색각이상자의 시각에서 시뮬레이션하여 사전 검증을 시행한다.

⑦ 선택한 컬러는 색상, 톤 분류에 의한 컬러 값을 정확히 표시하여 웹사이트를 갱신하거나 추가 작업 시 수정이 쉽도록 한다.

5-2. 향후 과제

본 연구의 향후 연구과제는 다음과 같다.

색각이상자에게 더욱더 편리한 대학 모바일 웹사이트의 컬러구성을 위해서는 더 많은 자료를 바탕으로 실제 색각이상자들로부터 불편함을 느끼는 부분을 확인하여 그것을 개선하는 연구가 이어져야 할 것이다. 또한, 본 연구는 컬러에 대해서만 연구를 진행하였지만, 앞으로는 색각이상자가 사용하기 편리한 모바일 인터페이스에 대한 연구가 함께 진행되어야 할 것으로 생각한다. 모바일 웹사이트에서 컬러의 중요성만큼이나, 인터페이스는 색각이상자의 사용 편의를 향상하는 데 필수적이기 때문이다. 이를 통하여 색각이상자들의 학습능력을 향상하고 역량을 강화시키는데 많은 도움을 줄 것이라고 기대한다.

끝으로 색각이상자를 위한 컬러유니버설디자인에 대한 연구가 다양한 디자인분야에서 지속되어 우리 사회에서 색각이상자를 비롯한 다양한 신체적·시각적 특성이 있는 사람들이 일상생활에서 차별받지 않고 동등하게 생활할 수 있는 환경이 조성되기를 바란다.