은행 웹/앱의 색맹 접근성 진단 사례

 

디지털 금융의 시대에 은행은 단순한 오프라인 점포 중심 기관을 넘어, 모바일 앱과 웹사이트를 중심으로 금융 서비스를 제공하는 IT 플랫폼 기업으로 변모했다. 대출 신청, 자산 조회, 외환 환전, 투자 관리 등 수많은 기능이 사용자 스마트폰 안에서 구현되는 지금, 사용자 경험(UX)은 곧 금융 서비스의 품질로 직결된다. 특히 그 UX가 모든 사용자에게 동등한 정보 해석 경험을 제공하는가의 여부는 서비스 신뢰성에 있어 핵심 요소로 평가된다.

이러한 맥락에서 색각 이상(색맹) 사용자에 대한 고려는 금융 UX에서 매우 중요한 과제가 된다. 적록색맹, 청황색맹, 완전 색맹 등 다양한 색각 이상 유형은 전 세계 인구의 약 8%에 영향을 미치며, 이는 결코 소수의 문제가 아니다. 특히 은행 앱이나 웹은 상승/하락, 입출금, 신청/승인 상태 등의 정보를 ‘색상’ 중심으로 표현하는 경우가 많은데, 색상만으로 정보를 구분할 경우 색맹 사용자에게는 의미 없는 시각 요소로 전락할 수 있다.

 

 

 

 

이번 글에서는 실제 국내외 주요 은행 웹사이트와 모바일 앱을 중심으로 색맹 UX 접근성 수준을 진단한 사례를 기반으로, 무엇이 부족했고 어떻게 개선되었는지, 그리고 실무적으로 적용 가능한 개선 전략은 무엇인지를 구체적으로 살펴본다.

 

사례 분석① – 국내 시중은행 앱의 색상 의존형 상태 표시 문제

 

국내 A은행은 대표적인 국민 생활금융 앱을 운영하고 있으며, 일일 사용자 수만 수백만 명에 달하는 대형 플랫폼이다. 그러나 2023년까지의 버전에서는 자산 현황, 투자 수익률, 결제 내역 등의 상태 표시가 전적으로 색상에 의존하는 구조였다. 예를 들어, 투자 수익은 붉은색, 손실은 파란색으로 표시되고, 자동이체 상태는 녹색이면 ‘정상’, 회색이면 ‘중지’ 상태로 나타났다.

문제는 이 모든 구분이 색상만으로 제공되었다는 점이다. 실제 색맹 시뮬레이터(예: Coblis, Sim Daltonism 등)를 통해 해당 앱을 테스트한 결과, 적록색맹 환경에서는 붉은색과 녹색의 차이가 전혀 인지되지 않았으며, 결과적으로 ‘수익인지 손실인지’, ‘이체 중지인지 정상인지’를 사용자 스스로 파악할 수 없었다. 이는 금융 거래에 있어 매우 치명적인 UX 결함이다.

2024년 이후 이 은행은 색맹 UX 개선을 선언하며, 텍스트 병기와 아이콘 보조 전략을 도입했다. 현재는 수익 표시 옆에 "수익 +5.6%"라는 텍스트와 함께 ‘↑’ 아이콘이 병기되고, 손실은 "손실 -2.3%"와 ‘↓’ 아이콘이 함께 표시된다. 이처럼 색상 외 시각 정보가 병기되자, 사용자 피드백 중 “정보를 헷갈리지 않게 받아들일 수 있어 안심된다”는 의견이 증가했다. 색상 병기 하나만으로도 사용자 신뢰와 정확도는 크게 향상될 수 있다.

 

사례 분석② – 해외 은행의 디자인 시스템 내 색맹 UX 반영 사례

 

영국의 대형 은행인 Barclays는 2019년부터 자사의 디지털 채널 전반에 접근성 중심 UX 가이드를 도입했으며, 이 가이드에는 색맹 사용자 대응 전략이 정식 포함되어 있다. Barclays는 자체 디자인 시스템에 색상 대비 기준, 색맹 안전 색상 팔레트, 색상 외 구분 수단의 사용을 명시했으며, 그 결과 모든 UI 요소는 해당 기준에 따라 디자인되도록 표준화되었다.

예를 들어, Barclays 모바일 앱에서는 송금 상태를 초록색으로만 표시하는 것이 아니라, 초록색 아이콘 옆에 "Completed", 회색 상태에는 "Pending" 등의 텍스트를 명확히 병기한다. 또한 대시보드 차트에서도 색상 외에 그래프 패턴(점선/실선)과 마커를 사용해 구간을 구분하며, 선 색상이 유사하게 인식되는 경우에도 정보 전달이 가능하도록 대비가 확보된다.

Barclays 사례의 특징은 '모든 UI 구성 요소에 색맹 대응이 자동으로 반영되도록 설계 단계에서부터 반영'되었다는 점이다. 이는 결과물만 수정하는 방식이 아닌, 디자인 시스템과 UI 라이브러리 차원에서 접근성을 구조화했다는 데 의미가 있다. 디자인 가이드가 곧 접근성의 기준이 될 수 있다는 점에서 모든 은행에 시사하는 바가 크다.

 

진단 기준 정리 – 색맹 접근성 평가를 위한 체크포인트

 

은행 웹과 앱에서 색맹 UX를 진단하기 위해서는 단순히 시뮬레이션만이 아니라, 명확한 체크리스트를 통해 기능별 평가가 가능해야 한다. 다음은 색맹 UX 측면에서 은행 앱의 주요 진단 항목이다.

① 정보 병기 여부 – 색상만으로 정보를 표현하지 않고, 반드시 텍스트나 아이콘을 병기했는가?
② 색상 대비 기준 준수 – 모든 상태 표시가 WCAG 2.1 기준의 명도 대비(4.5:1 이상)를 만족하는가?
③ 인터랙션 요소의 구분 가능성 – 버튼, 탭, 선택 항목 등에서 색상 외 피드백(움직임, 도형 등)이 있는가?
④ 데이터 시각화 보완 – 그래프나 차트에서 색상 외 구분 요소(패턴, 선 종류, 마커 등)가 존재하는가?
⑤ 사용자 테스트 반영 여부 – 실제 색맹 사용자 또는 시뮬레이션 테스트 결과가 설계 개선에 반영되었는가?

이러한 진단을 바탕으로 문제를 식별하고 우선순위를 지정하면, 은행의 UX는 단순한 '디자인 개선'을 넘어 정보 해석의 정확성을 보장하는 전략적 개편으로 이어질 수 있다.

 

접근성은 규정이 아니라 신뢰의 기준이다

 

은행 서비스는 단지 자금을 보관하는 기능이 아니라, 사용자의 재무적 판단을 돕는 정보 제공 도구이기도 하다. 따라서 정보가 전달되는 모든 순간, 누구에게나 명확하고 동일한 의미로 해석될 수 있어야만 진정한 사용자 중심 UX라고 할 수 있다. 색맹 사용자에게도 동일한 해석 환경을 제공하는 것은, 정보 전달의 평등뿐 아니라 브랜드에 대한 신뢰 형성의 시작점이 된다.

은행 앱의 색맹 UX는 단순한 시각적 문제 해결이 아니다. 정보의 생명력, 금융 데이터의 신뢰성, 사용자 행동 유도의 정확성까지 포괄하는 UX 설계의 핵심 요소다. 국내 은행들도 이제는 색맹 대응을 ‘보조적 고려사항’이 아닌, 기본적인 설계 기준으로 수용하고, 디자인 시스템과 사용자 피드백 체계를 통해 상시 개선 가능한 구조를 마련해야 한다.

색을 이해하지 못해 오해가 생기는 것이 아니라, 정보를 어떻게 구조화하고 표현하느냐에 따라 해석 가능성은 완전히 달라진다. 은행 UX는 누구에게나 신뢰할 수 있어야 한다. 그 신뢰는 ‘모두가 읽을 수 있는 정보 설계’로부터 출발한다.