UDS(urban disaster solution)솔루션 UI/UX 구현 :부산광역시 데이터를 중심으로

1-1 연구 배경 및 목적

UDS솔루션은 도시의 지진, 침수, 미세먼지 피해 예방 분석을 위해 재난별 피해 예측 시뮬레이션을 수행하고 피해 정도를 빠르게 파악하고자 도시 전체를 3차원 GIS 기반 가시화 기술로 표출하여 데이터 기반의 의사결정을 지원하는 솔루션이다.[3]-[6]

그림 1의 기존 UDS 솔루션[7]의 UI는 사용자의 사용성을 고려하거나 사용자 분석을 거치지 않고, 기능 구현을 위주로 한 프로토타이핑 형태의 디자인에 그쳐 사용자가 필요한 정보나 사용하고자 하는 기능을 쉽게 찾을 수 없는 복잡한 인터페이스로 구성되어있었다.

Fig. 1.

The interface of existing UDS

본 논문에서는 기존 UDS 솔루션의 인터페이스 디자인의 문제점을 인식하고 개선함을 목적으로 한다. 가장 먼저 디자인 컨셉을 수립함에 앞서 사용자를 정의하여 사용자의 요구를 파악한다. 해당 솔루션의 주 사용자는 각 기관의 재난 관리 담당자로, 각 기관의 담당자는 수시로 교체되는 경우가 빈번하다. 이러한 특성에 따라 사용자의 성별이나 연령대를 특정할 수 없어 전반적인 디자인에 있어 편의성과 가독성, 통일성과 같은 보편성을 중심으로 구현한다.

1-2 연구 방법

본 논문에서는 기존 시스템을 개선하기 위한 과정으로 영국 디자인 협회에서 제시한 방법론인 더블 다이아몬드 모형(Double Diamond Model)을 활용한다.[8] 더블 다이아몬드는 서비스 디자인에서의 사고의 폭을 넓히고, 끌어낸 아이디어를 하나로 좁혀 나가는 과정을 정리한 모형으로, 대표적인 디자인 방법론으로 알려져 있다. 이는 어떤 분야의 디자인에서건 거치게 되는 디자인 과정의 단계들을 일반화하고 체계화한 모형이다. 두 개의 다이아몬드는 확장형 사고와 수렴형 사고를 두 번 반복하는 형태의 디자인 사고 방법을 시각적으로 표현한 형태로, 발견, 정의, 발전, 전달, 네 가지 단계로 나누어져 있다.

첫 번째는 더블 다이아몬드의 시작점이 되는 단계로, 발견 단계(Discover)이다. 이는 사용자 경험 조사 단계로, 데스크 리서치, 설문조사, 심층 면접 등을 통해 무엇이 문제인지를 발견하는 것이다. UX 디자인의 과정에서는 사용자의 입장에서 경험을 이해하는 것이 중요하기 때문에 사용자를 관찰하고 조사하는 것이 필요하다.

두 번째 단계는 사용자의 시선으로 발견한 문제를 명확히 정의를 내리기 위해 페르소나(persona)를 정의하고 경험 여정 지도를 만들어 시각화하여 서비스 방향성을 도출하는 정의(Define)단계이다. 페르소나는 사용자를 좀 더 구체적이고 현실적인 대상으로 이해하기 위해 다양한 사용자의 특성과 요구사항을 구체적 실체가 있는 인물로 의인화하는 것을 말한다. 경험 여정 지도는 사용자의 경험을 시간의 흐름에 따라 시각화한 것으로 감성적 심리 만족도를 기준으로 단계를 구분하고 좋고 나쁜 감정을 표시한 것이다. 이를 활용하여 수집된 데이터로부터 인사이트를 도출하고, 집중해야 하는 부분이 어디인지 정의를 내릴 수 있다.

세 번째는 발전(Develop) 단계로, 서비스 개선 아이디어 단계이다. 이 단계에서는 문제를 발견하고 규정한 이후에 다시 한번 구체적인 개선책에 대한 아이디어를 수집하는 단계를 거치고, 모든 아이디어들을 논의한다.

네 번째는 전달 단계(Deliver), 개선안을 제시하는 단계이다. 개선 아이디어 중 실현할 수 있는 것들만 골라 최종안으로 정리하는 단계인데 전문가들의 의견을 수렴해 개선안을 제시하게 된다. 개선 시나리오를 토대로 장단기 추진 전략을 도출하는 것으로 서비스 디자인 작업을 마무리한다.[9] 이 과정들을 통해 제품이나 서비스가 사용자의 실제적인 문제를 해결하고 있으며, 완성된 디자인이 사용자에게 효과적임을 증명할 수 있다.

3-1 통일성

본 논문에서는 가장 먼저 각각 지진, 침수, 미세먼지 솔루션별 주색을 설정하고 이를 디자인 요소로 활용하였다. 이를 통해 사용자가 인터페이스에 사용된 색만으로 현재 사용자의 위치, 즉 사용하고자 하는 솔루션을 직관적으로 구분하여 인식할 수 있도록 하여 사용성을 높혔다. 색채 언어는 문자에 의한 전달보다 원초적이며, 전달에서도 즉시성을 갖기 때문에[13] 각 솔루션에 적합한 색채를 선정하여 디자인에 적용하였다. 다음 그림 5의 세 가지 색은 각각 순서대로 지진, 침수, 미세먼지 솔루션의 주색으로 사용된 색이다.

Fig. 5.

Colors used for each solution theme.

각 솔루션에 사용된 세 가지 색은 미국규격협회(ANSI; American National Standards Institute)에서 제정한 안전 색의 표시법(Safety Colors)인 빨강, 주황, 노랑, 녹색, 파랑, 보라, 검정과 흰색 7가지와 영국색채협회(BCC; British Color Council)에서 발표한 안전 색 7가지를 참고하여 선정하였다. 국내 기준으로는 아래 표 1에 있는 산업안전보건법 시행규칙에 의한 안전보건표지 색채 및 색도 기준을 참고하였다.

Table 1.

Colorimetric Standards and Applications of Safety and Health labels

지진 솔루션의 주색인 빨강 계열의 색(#FE7235) 는 대표적으로 주목성이 높아 경고 표시를 할 때 주로 사용되는 색상이며 안전 색채로서의 빨강은 정지, 금지와 같은 의미를 가진다. 또한 역동적이고 강렬한 이미지를 가지고 있어 지진의 이미지를 부각할 수 있는 강조색으로 사용하였다. 침수 솔루션의 주색인 파랑 계열의 색(#0077FF) 는 안전 색채 사례 외에도 물을 연상케 하는 대표적인 색채로, 침수 솔루션의 주색으로 지정하였다. 미세먼지 솔루션의 주색인 노랑 계열의 색(#FFDE55) 또한 위험이나 주의를 알리기에 적합한 색이다.

이외에도 빨강, 노랑, 파랑의 세가지 기본색은 표1과 같이 안전보건표지의 색에 활용되는 색으로서, 누구든지 빨리 쉽게 알아볼 수 있으며, 눈에 잘 띄는 대표적인 색으로, 이를 인터페이스에 적용한 모습은 아래 그림 6, 7, 8과 같다.

Fig. 6.

Seismic Solution Page with Theme Colors

Fig. 7.

Flood Solution Page with Theme Colors

Fig. 8.

Air Pollution Solution Page with Theme Colors.

다음 단계로 그림 9와 같이 주색과 함께 부가적인 디자인 요소로 활용할 수 있도록 유사 색으로 이루어진 보조 색의 스펙트럼을 정의하였다. 이와 같은 맥락으로 그림 10과 같이 콘텐츠의 계층적인 위치에 따라 적절한 타이포를 사용할 수 있도록 폰트의 사이즈, 두께 등의 속성을 설정하였다. 이처럼 콘텐츠의 계층에 따라 사용할 메인 컬러와 보조 색, 타이포의 레벨을 설정함으로써 콘텐츠를 구조화하고, 전체 디자인의 통일성을 유지하였다.

Fig. 9.

Dominant colors used with theme-specific colors.

Fig. 10.

Typo attributes according to content level.

3-2 편의성

UDS솔루션은 재난 상황을 모니터링하고 실시간으로 위급 상황을 감지하기 위해 24시간 동안 모니터링된다는 특징을 가지고 있다. 긴 시간 화면을 모니터링하며 사용자가 느낄 수 있는 피로감과 불편함을 해소하기 위하여 사용자가 원할 때 밝은 테마, 어두운 테마 중 하나를 선택할 수 있도록 했고, 이를 통해 사용 환경을 사용자가 직접 선택할 수 있는 자율성을 부여하여 편의성을 높이고자 했다. 아래의 그림 11, 그림 12는 각각 밝은 테마와 어두운 테마가 적용된 메인 페이지다.

Fig. 11.

Main page, Light theme

Fig. 12.

Main page, Dark theme

어두운 테마의 가장 큰 장점은 조도가 낮은 환경이나 야간 시간대에 가독성을 높인다는 점이다. 어두운 테마는 기기의 화면 밝기를 감소시키고 눈의 피로를 덜어준다. 이는 사용자와 인터페이스의 상호작용을 원활하게 하여 사용자가 긍정적인 경험을 하도록 했다.

UDS 솔루션의 어두운 테마 배경색으로는 구글 매터리얼 디자인(Google Material Design)가이드를 따라 순수한 검은색(#000000)이 아닌 어두운 회색(#242831)을 사용하여 심도가 더욱 깊어진 환경에서 디자인의 높낮이와 공간감을 표현하였다. [14]

기존의 인터페이스에서는 상단 내비게이션의 하위 메뉴를 통해서만 페이지 간의 이동이 가능했지만, 새로 디자인한 인터페이스에서는 사이드 탭을 추가하여 하위 페이지 간에 더 쉽고 빠르게 이동할 수 있는 직관적인 레이아웃을 구성하였다.

그림 13의 상단 이미지는 기존의 내비게이션 디자인, 하단 이미지는 사이드 탭이 추가된 새로운 디자인이다.

Fig. 13.

Changed side tab.

또한, 그림 14와 같이 팝업 창 형태로 표출되던 기존의 툴바를 세로 방향의 툴바로 변경하고, 주요 메뉴는 아이콘으로 표출하여 인터페이스 위에서 차지하는 면적을 축소했다. 이를 통해 사용자는 보다 더 직관적으로 메뉴의 기능을 파악할 수 있고, 동시에 툴바가 지도 위에서 차지하던 불필요한 면적을 줄여 지도 위의 콘텐츠에 더 주목할 수 있도록 하였다.

Fig. 14.

Changed toolbar form

또한, 기존의 ‘상시기능’은 명칭만으로 사용자가 어떤 기능인지 파악하기에 어려움이 있다. 해당 기능의 명칭을 ‘즐겨찾기’로 수정하고, 리스트로 나열하던 형태 대신 그림 15와 같이 즐겨찾기로 지정된 기능을 아이콘과 함께 툴바에 표출하였다.

Fig. 15.

Toolbar design with changed functionality

침수 솔루션에 표출되는 기상 특보 현황의 경우, 별도의 필터링 없이 기상청에서 제공하는 모든 정보를 텍스트 형태로 나열하고 있었다. 이 점을 개선하기 위하여 그림 16과 같이 사용자가 설정한 지역의 기상특보만을 확인할 수 있도록 특보의 종류, 지역 별로 필터링하여 카드 형태로 표출했다. 이를 통해 사용자는 사용자가 원하는 정보만을 식별하여 모니터링할 수 있다.

Fig. 16.

Changed function of presenting the current status of the special weather report

3-3 가독성

그림 17과 같이 기존의 지도 위 아이콘 표출 방식은 하나의 아이콘에 두 개 이상의 컬러가 사용되고, 지도 위에 아주 많은 양의 아이콘과 불필요한 정보까지 모두 표출되어 사용자가 원하는 정보를 식별하기 어렵고, 사용자가 피로감을 느끼게 하였다. 이 점을 개선하기 위하여 그림 18과 같이 기존 아이콘 형태에서 더 색과 형태를 보다 단순화하고, 단계에 따라 아이콘이 표출되는 형태를 구분하여 구성하였다. 그림 19는 순서대로 지도의 줌 단계 13, 15, 16에 따른 아이콘의 표출 방법을 구분하여 적용한 예시이다. 줌 레벨이 15 이하일 경우에는 텍스트 라벨링이 없는 단순화된 아이콘 형태만을 표출하고, 일정 영역 내에 여러 개의 아이콘이 겹치는 경우에는 우측 상단에 숫자 배지를 추가하여 개수를 나타내고, 일부 아이콘은 생략하여 표출하였다. 줌 단계 16 이상의 경우는 구, 동 단위의 영역이 표출되는 가장 하위 단계로, 아이콘, 이름, 전화번호 텍스트를 하나의 말풍선 형태로 라벨링하여 표출하였다. 이를 통해 사용자는 아이콘과 텍스트를 함께 인식하여 원하는 정보를 식별할 수 있다.

Fig. 17.

Existing way of displaying icons.

Fig. 18.

New way of dsplaying icons

Fig. 19.

Examples of icons applied to maps by zoom levels

라벨링 형태 외에도 아이콘 영역에 투명도를 주어 표출되는 아이콘 간에 겹치는 영역이 생기는 경우에도, 색이나 형태로 각 아이콘을 구분하였다.

또한, 그림 20과 같이 지진파, 내수 침수 시뮬레이션 등에서 활용되는 범례 색을 수정하였다. 내수 침수의 경우 부산재해정보지도에 정의되어있는 범례를 참고하였고, 이 외에도 기상청이나 네이버 날씨에서 사용되는 범례를 참고하여 사용자에게 널리 사용되는 일반적인 범례의 기준과, 앞서 정의한 각 솔루션별 주색과 보조 색의 스펙트럼 내에서 통일감을 잃지 않도록 하였다.

Fig. 20.

Legend Color