“색맹·색약 이용자 위해 지하철 노선도 다시 그렸어요”

[지촌]

““색맹·색약 이용자 위해 지하철 노선도 다시 그렸어요”

안상욱

2015.04.13

share공유

146

comment댓글

0

zoom_in 크게

zoom_out 작게

가 +

가 -

번역에서 제공

간단한 퀴즈를 풀어보자. 아래 동그라미 안에는 각각 다른 숫자가 써 있다. 그 숫자가 무엇으로 보이는가.

네이버 제공

학교에서 한번쯤 봤을 법한 그림이다. 정식 이름은 이시하라 색각 이상 검사지다. 흔히 ‘색맹’ 또는 ‘색약’이라고 불리는 색각이상자를 확인하는 수단이다. 색각이상이란 망막 원뿔세포 이상으로 눈이 색을 제대로 구분하지 못하는 현상이다. 태어날 때부터 색각이상인 경우도 있고, 사고 등 후천적 원인으로 색각이상이 되기도 한다. 어떤 색을 못 보는지에 따라 크게 3가지로 나뉜다.

첫 번째 그림과 세 번째 그림에서 숫자를 못 읽는 이는 적록색각이상자다. 색상 스펙트럼에서 빨간색부터 녹색에 걸친 색을 구분하는데 어려움을 겪는 사람이다. 전체 인구에서 약 3%가 적록색각이상자다. 첫번째 그림이 21로 보인다면 적색에서 황록색에 걸친 색을 구분하기 힘든 녹색각 이상자일 수 있다. 이들은 적색부터 녹색까지 색을 구분하지 못하는 적색각이상자와 함께 적록색각이상자로 구분한다.

네 번째 그림과 다섯 번째 그림에서 숫자를 구분하기 힘들다면 청황색각이상자다. 전체 인구 가운데 0.3% 정도가 청색 영역에서 색을 구분하기 어려워하는 청황색각이상자다. 만약 다섯 번째 그림에서 ‘4’만 보이면 적록색각이상자다.

드물게 모든 색을 감지하지 못하고 밝고 어두움만 구분하는 전색맹인도 있다. 또 색을 감지하는 원뿔세포가 4개 있어 무지개를 7개 색이 아닌 10가지 색으로 보는 사색형색각도 존재한다. 이들은 1억가지가 넘는 색을 본다고 한다. 이 두 유형은 전체 인구에서 0.001%에 해당한다. 색각이상자라고 해도 모든 색을 구분하지 못하는 것은 아니니 색맹이라고 부르는 것은 오류다. 색약이라고 부르는 편이 더 적합하다.

왼쪽부터 74, 12, 6, 2, 42로 보인다면 모든 색이 정상적으로 보인다는 뜻이다. 두 번째 사진은 색각이상자에게도 12로 보인다.

색으로 말하는 세상, 색각이상자에겐 무용지물

색각이상자가 보는 세상은 보통 사람이 보는 것과 상당히 다르다. 예를 들어 빨간색·노란색·녹색으로 보이는 신호등이 적록색각이상자에겐 노란색·노란색·노란색으로 보인다. 색으로 전하는 신호를 받을 수 없는 이들은 신호등에 불이 켜진 위치를 보고 빨간불인지 파란불인지 구분한다.

네이버 제공

신호등 말고도 색으로 정보를 전하는 매체는 많다. 이 중 가장 자주보는 게 지하철 노선도가 아닐까. 지하철 노선도에는 많은 정보가 복잡하게 얽혀 있다. 그래서 지하철 노선도는 다양한 색을 써서 서로 다른 노선을 구분한다. 서울 지하철에서 녹색만 봐도 2호선을 떠올리고, 파란색만 봐도 4호선임을 알 수 있는 것도 우리가 색으로 정보를 받아들이는데 익숙해진 덕분이다.

색으로 전한 정보를 구분하기 힘든 색각이상자는 어떨까. 보통 사람처럼 색만 보고 노선을 파악하긴 쉽지 않을 듯하다. 실제로 색각이상자에게 보이는 지하철 노선도는 아래 그림과 같다.

네이버 제공

2호선, 3호선, 7호선, 9호선, 분당선, 신분당선 등 6개 노선이 지나는 교대역 인근 지역이다. 색각이상자 가운데 다수를 차지하는 적록색각이상자의 눈에는 모두 짙고 옅은 갈색으로만 보인다. 색을 걷어둔 채 역 이름과 구불구불한 선만 보고 6개 노선을 모두 제대로 구분하기는 힘들어 보인다.

색각이상자 눈에 보이는 실제 지하철 노선도. 사진은 컬러오라클로 시뮬레이션한 결과물이다

네이버, 지하철 노선도 2차 개편에 팔 걷다

네이버가 색각이상자를 위해 지하철 노선도를 새로 그리겠다고 나섰다. 네이버는 지난해 공공디자인 프로젝트로 건축가겸 지도 디자이너 육 체로비츠와 손잡고 전국 지하철 노선도를 다시 그렸다. 올해 1월30일 네이버가 내놓은 새 지하철 노선도는 많은 관심과 호평, 질책을 함께 받았다.

김효정 네이버 검색디자인실장은 인터뷰할 당시 색각이상자용 노선도를 그릴 계획이라고 귀띔했다. 색각이상자용 지하철 노선도를 PC웹에 선보인 지난 4월9일 오후, 경기도 성남시 분당구 네이버그린팩토리에서 김효정 실장을 다시 만났다. 색각이상자용 지하철 노선도 개편 작업에 참여한 1년차 디자이너 양건 씨도 함께 인터뷰에 응했다. 이들에게서 소수 사용자를 위해 네이버 검색디자인실이 무엇을 고민했는지 물었다.

색각이상자 눈으로 세상을 보다

색각이상자는 전세계에 약 2억명, 국내에 150만명이 있다. 결코 적지 않은 숫자다. 네이버 검색디자인실이 색각이상자용 지하철 노선도를 그린 이유는 이들이 겪는 불편을 조금이나마 덜어주기 위해서다.

팀원은 컬러오라클(Color Oracle)이라는 시뮬레이션 프로그램을 이용해 색각이상자 눈에 네이버 지하철 노선도가 어떻게 보이는지 확인했다. 앞서 살펴봤듯 노선을 제대로 확인하기 힘든 문제가 드러났다.

색각이상자도 보기 쉬운 지하철 노선도를 만들기 위해 검색디자인실은 먼저 국내외 사례를 조사했다. 영국 런던 교통공사나 국내 기업 등에서 주최한 공공디자인 공모전에서 수상한 작품과 논문 등을 찾아봤다.

참고 자료를 살펴보니 한가지 생각이 떠올랐다. “이건 우리 눈으로 봐서는 좋은지 나쁜지, 의미 있는 변화인지 알 수가 없겠더라고요.” 김효정 실장은 네이버 안팎에서 개선 작업을 감수해 줄 색각이상자를 찾았다고 말했다. 색각이상 정도가 가벼운 사람부터 심각한 이까지 색각이상자 12명이 조사에 응했다.

심층 인터뷰와 동행 조사

조사에는 크게 2가지 방법을 활용했다. 먼저 연구실로 응답자를 데려와 개선안 여러가지를 보여주고 의견을 물었다. 심층 인터뷰(in-depth interview) 연구법이다.

응답자가 건넨 대답과 실제로 지하철 노선도를 찾는 행태는 다양한 방식으로 기록했다. 대화록을 기록하기도 하고 작업 로그도 남겼다. 직접 불편을 겪는 색각이상자를 만나니 통찰력 있는 대답이 돌아왔다.

“한평생 불편하게 살아오신지라 각자 불편을 극복하는 노하우가 있더라고요. 노선 끝에 숫자로 나온 지표를 따라 읽거나 아예 노선 형태를 외우는 분도 있었어요. 동그란 건 2호선, 세로로 가로지르는 건 3호선이라는 식으로요. 요새는 PC에서 한 노선을 클릭하면 그 노선만 따로 보이는 기능을 활용한다는 분도 계셨죠.”

심층 인터뷰를 진행 중인 양건 디자이너(왼쪽)와 응답자

색각이상자가 실제로 지하철을 이용 상황을 네이버 디자이너가 따라 나서기도 했다. 색각이상자 3명에게 가장 노선을 구분하기 힘든 교대역 인근에서 정해둔 경로대로 이동해달라고 부탁한 뒤, 이들이 실제로 언제 혼선을 겪는지 관찰했다. 이런 연구법을 동행 관찰(shadowing)이라고 부른다. 직접 조사에 나선 양건 디자이너는 색각이상자와 함께 돌아다니며 그들의 불편함을 간접적으로나마 경험했다.

“1시간 정도 걸릴 거라고 생각하고 조사 일정을 잡았는데, 예상치 못하게 15분, 20분씩 시간이 지체됐어요. 노선을 잘못 보고 엉뚱한 곳으로 가시는 거죠. 어떻게 하시나 봤더니, 승강장 앞에 서서 다음역을 보고 ‘여기가 아니네’하고 돌아가시는 거예요.”

양건 디자이너는 책임근무제 덕분에 탁상공론을 벗어나 현장에서 직접 색각이상자의 경험을 나눌 수 있었다고 밝혔다. 네이버가 올해 1월부터 정식 시행한 책임근무제는 할 일만 하면 출퇴근 시간을 스스로 결정할 수 있도록 한 제도다.

“저는 과제를 받고 나서 연구할 때도 그냥 콘셉트 내고 그걸로 끝냈다고 생각했는데, 그걸 진짜로 깊이 있게 고민하고 서비스로 구현할 수 있었어요. 실제로 보고 느낀 점을 작업에 반영할 수 있어 재밌고 감사했습니다.”

동행 조사에 나선 양건 디자이너(왼쪽)와 응답자

색각이상자는 숫자와 글자에 기대 노선을 찾았다. 지하철을 타기 전에 모바일 앱으로 검색하기도 하고, 이동 중에도 계속 노선을 확인했지만 길을 잘못 들기 십상이었다. 이런 조사 결과를 바탕으로 네이버 검색디자인실은 4가지 원칙을 세웠다. 김효정 실장이 밝힌 4가지 원칙은 아래와 같다.

해법 1. 방향성 있는 곡선과 직선 사용

첫 번째 해법은 1월말 공개된 새 지하철 노선도 디자인에도 반영된 내용이다. 서로 다른 노선이 교차하는 곳에 방향성을 확인할 수 있는 곡선과 직선을 활용해 선만 봐도 어디로 가는 노선인지 알 수 있도록 했다. 일반 사용자가 보기 좋게 만든 부분이 색각이상 사용자에게도 요긴하게 쓰일 수 있다는 점을 다시금 확인했다.

네이버 제공

해법2. 색상 조정

색각이상자에게 비슷하게 보이는 색깔은 조금씩 손봤다. 적록색각이상자에겐 하늘색 인천선과 파란색 4호선이 모두 연보라색으로 보인다. 또 갈색 계열인 6·7호선과 빨간색인 신분당선도 엇비슷한 갈색으로 보인다. 2호선과 3호선, 9호선도 밝은 청록색으로 보여 구분하기 어렵다.

색상 자체를 크게 바꾸지는 않았다. 실제로 지하철에서 쓰는 색상과 노선도에 쓴 색이 너무 다르면 혼선을 줄 수 있기 때문이다. 대신 색각이상자눈에 다른 색과 구분되게 명도와 채도를 바꿔 서로 대비가 잘 되도록 조정했다. 2호선은 밝게, 7호선은 어둡게 바꿨다. 다른 노선도 교차하는 노선과 확실히 구분돼 보이도록 색을 조금씩 바꿨다.

네이버 제공

해법3. 외곽선 삽입

2호선과 7호선이 교차하는 환승역에서 길을 찾기 힘들다는 응답자가 많았다. 두 노선에 쓴 밝고 어두운 녹색이 명도와 채도가 어중간한지라 다른 노선과 헷갈려보인 탓이다.

네이버 검색디자인실은 노선도에 외곽선을 그려 이 문제를 해결했다. 2·4·7·9호선에 외곽선을 넣었다. 일반인 눈에는 잘 안 띄지만 색각이상자 눈에는 확연히 대비돼 보이는 색을 외곽선으로 넣어 교차하는 선을 확실히 구분할 수 있도록 했다.

외곽선을 넣으니 전체 디자인은 해치지 않으면서도 노선의 방향성이 확실히 나타났다. 조사에 응한 색각이상자는 “구별이 훨씬 쉬워졌다”라고 입을 모았다.

네이버 제공

해법 4. 환승역에 정보 표기

지도 일부만 확대해 보면 어느 노선이 몇 호선인지 알아채기 어렵다. 색을 보고 짐작할 수도 없는 색각이상자는 더욱 노선을 구분하기 힘들다.

이런 문제점을 해결하려고 네이버 검색디자인실은 환승역에 숫자를 써 넣었다. 환승역 표기를 조금 더 크게 그리고 노선이 겹치는 곳에 노선을 적어넣으니 시의성이 한결 좋아졌다.

이 기능은 색각이상자뿐 아니라 일반인에게도 유용했다. 지하철 노선도 서비스 담당자가 일반인이 보는 노선도에도 환승역에 숫자를 넣어달라고 주문할 정도였다. 이 주문을 회사차원에서 공식적으로 검토 중이라고 김효정 실장은 전했다.

네이버 제공

노선도 보는 시간 절반으로 단축…일반인에게도 유용

김효정 실장은 자신있게 지하철 노선도 색약 모드를 보여줬다. 당황스러웠다. 뭐가 어떻게 달라졌는지 내 눈에는 잘 보이지 않았다. 자세히 보니 설명을 들은 대로 4개 노선에 외곽선과 환승역 안에 숫자가 들어간 점이 눈에 들어왔다. 그런데 이게 어쨌단 말인가. 고개를 갸우뚱하는 내게 김효정 실장이 말했다.

“색각이상자가 개편 전 노선도에서 특정 이동 경로를 찾는데 53초가 걸렸는데, 바꾼 노선도를 쓰니 25초가 걸렸습니다. 시간을 절반 이상 단축시킨 겁니다. 예기치 않았는데 일반인도 과업에 드는 시간이 21% 줄었습니다.”

색각이상자 눈에는 효과가 확실하다는 설명이다. 3%에 불과한 색각이상자를 위해 노선도를 개편하다보니 일반인 눈에도 잘 보이는 효과도 거뒀다. 이런 결과는 깨달음으로 이어졌다.

“소수사용자 눈높이에 맞추면 더 빨리 좋은 아이디어를 얻을 수 있다는 통찰이 나왔어요. 보통 디자인 방법론은 다수에 맞춰요. 불편을 겪는 분은 중요도를 낮게 볼 수밖에 없어서 기능을 덧붙이는 식으로 접근하죠. 그런데 아예 처음부터 소수 사용자 눈높이에 맞춰 디자인하니 일반인도 좋고 불편한 분들도 좋은 디자인으로 가더라고요. 장애인을 위해 계단 대신 경사로를 놓으면 일반 사용자도 편하게 쓰듯이요. 이런 디자인 방법론도 가능하겠다는 깨달음이 있었어요.”

김효정 실장은 다른 서비스 UI에도 소수자를 먼저 생각하는 디자인 방법론을 적용해보고 싶다고 말했다.

▲’외국인이 그린 서울 지하철 노선도’로 유명세를 탄 육 체로비츠(Jug Cerovic)의 작업 (출처 : 육 체로비츠 웹사이트)

“지하철 노선도, 사용자 의견 받아 계속 개선할 것”

사실 검색디자인실에서 의견을 냈지만 실제 서비스에는 구현되지 않은 부분도 있다. 지하철 역에 인근 지형지물을 표시하는 것이다. 예를 들어 서울 한복판에는 N타워를 그리고, 잠실종합운동장역 옆에는 운동장을 그리는 식이다. 사용자가 역 이름을 읽지 않아도 직관적으로 그곳이 어디인지 파악할 수 있어 일반인과 색각이상자 모두 유용하게 쓸 수 있다.

원래 다섯 번째 해법으로 적용하려 했던 지역 명소 아이콘은 몇가지 이유 때문에 서비스에 적용하지 않았다. 그 중 하나는 ‘이것도 넣어달라’는 민원이 빗발쳤기 때문이다. ‘남산은 그려 넣으면서 청계산은 왜 빼느냐’는 식으로 문의하는 사용자가 적지 않았다. 기준을 정하기 힘들어 일단 서비스에서는 걷어내기로 가닥을 잡았다.

1월말 새 지하철 노선도를 내놓고 한차례 홍역을 치렀지만 검색디자인실은 계속 사용자 의견을 받는다. 김효정 실장은 “사용자 의견으로 서비스를 완성하는 모습도 의미 있다”라고 말했다.

“내가 잘 만들었다고 사용자한테 던져주고 끝이 아니라, 고생해서 내놓아도 사용자가 ‘좋다 싫다’ 의견을 내면 정신이 버쩍 들어요. 이건 잘 한거고, 이건 못 본거고, 이건 다시 봐야 하는 거고…. 한번에 끝이 아니라 의견을 쌓아서 과제를 만들고 문제를 해결하고 결과를 확인하는 과정을 계속 반복하는 거죠. 색약 노선도가 딱 그겁니다. 결과물 양으로만 보면 3일이면 그릴 거 같아도, 이런 과정 없이는 나올 수 없는 결과물이거든요. 네이버의 디테일을 책임지는 사람이라는 책임감이 없었다면 이런 작업은 어려웠을 겁니다.”

김효정 실장은 기사 댓글이나 네이버 지도 공식 블로그에 사용자가 남긴 덧글을 통해 계속 의견을 모아 노선도를 개선해갈 방침이라고 덧붙였다.

공공디자인으로 사회에 기여, 보람차

김 실장은 지하철 노선도를 개편하며 네이버의 공공디자인 철학을 여러 사용자에게 전할 수 있어 기쁘다고 말했다.

“얼마전 인턴 면접을 봤는데, 한 지원자가 지하철 노선도 개편 기사를 보고 공공디자인 철학에 반해 꼭 입사하고 싶어졌다고 얘기하더라고요. 진정성 있게 사용자 입장에서 디테일을 고민했던 진심이 통한 것 같았어요. 물론 한계가 없는 건 아니죠. 100점 만점을 받을 수는 없으니까요. 몇몇 사용자는 서운하고 불편하다고 얘기하기도 하지만, 전체적으로 긍정적인 에너지를 만들어 갈 수 있다는 자신감이나 보람도 느껴요.”

왼쪽부터 네이버 검색디자인실 양건 디자이너, 김효정 실장

색약 모드는 PC용 네이버 지하철 노선도에 먼저 적용됐다. 노선도 오른쪽 위에 달린 ‘색약’ 단추를 누르면 색각이상자용 지하철 노선도를 볼 수 있다. 모바일에는 상반기 끄트머리에 적용될 예정이다. PC에는 단추를 넣었지만, 모바일에서는 색약 모드와 일반 모드 가운데 하나를 선택해서 쓸 수 있는 설정을 제공할 계획이다.

네이버가 말한 색각이상자를 위한 4가지 경로 디자인 포인트

네이버 제공

• 직선과 곡선으로 방향성 표시
• 겹치는 경로에는 명도채도 차이 확실한 색상 사용
• 색각이상자에게는 잘 보이지만, 정상인에게는 안 보이는 외곽선 삽입
• 환승 지점에 주요 정보 다시 제공

색각이상자를 위한 네이버 지하철 노선도 디자인 개편 from AhnSanguk

[새소식]

1.

기사 중 ‘이시하라 색각검사’ 4번째 항목과 관련해 말씀드립니다.

미국판 위키피디아의 설명에 따르면 적록색각이상자는 2로 본다고 설명하고 있습니다. “Red-Green deficiency sees 2”

그리고 Color oracle로 청황색각이상자 버전으로 돌려봤을 때 사방의 녹색점들이 파란색으로 보여 숫자 판별이 안 가는 상태여서 ‘적록색각이상자는 2로 읽으며, 청황색각이상자는 못 본다’라고 기록하였는데, 기사와 같이 ‘이 항목을 보지 못하면 청황색각이상자다’라고 단정짓기에는 무리가 있을 것 같습니다.

난이도 높은 항목이어서, 외국에서도 논란이 발생하는 모습입니다.
4번 항목은 테스트 결과에서 배제하시는 게 좋겠습니다.

감사합니다. (2015년 4월14일 오후 4시51분)

2.

영국 스코틀랜드 소재 글래스고캘러도니안대학교(GCU)에서 만든 이시하라 테스트 소개 영상에 따르면 정상인은 4번째 숫자판에서 숫자 2를 본다고 합니다.

이시하라 테스트는 원래 색을 엄선한 인쇄물로 하는 것이 원칙입니다. 5초만에 보이는 대로 답하고, 모두 25개 카드를 본 뒤 그 가운데 2개 이상 틀리면 색각이상이 있다고 진단합니다. 카드 개수는 책자마다 다를 수 있습니다.

컴퓨터 모니터나 스마트폰 화면은 기기마다 표현되는 색이 다르기 때문에 기사에 들어간 테스트는 간이로만 보시는 게 좋겠습니다. 화면마다 색온도와 밝기이 다르면 같은 색도 다르게 보입니다. 또 그림이 합축되며 흐릿해진 탓에 윤곽을 제대로 인지하기 어려워 헷갈릴 여지가 많아졌습니다.

참고로 아래 적록색각이상자와 청황색각이상자에게 보이는 4번째 숫자판을 덧붙입니다. 컬러오라클 시뮬레이션 결과입니다. (2015년 4월15일 오전 10시50분)

글쓴이

안상욱

nuribit@bloter.net

기술의 중심에서 사람을 봅니다. 쉽고 친절하게 쓰겠습니다. e메일 nuribit@bloter.net / 트위터 @nuri_bit / 페이스북 facebook.com/nuribit0

발행일2015.04.13

태그color blindness 공공디자인 네이버 색각이상 색맹 색약 지하철 노선도

블로터 뉴스레터

뉴스레터를 구독하시면 최신 IT 소식을 가장 빠르게 받아보실 수 있습니다.

이메일 주소구독하기

콘텐츠 문의 | ad@bloter.net