모바일 재난 알림 비주얼 큐 적용하기
- hyeju park
- 3월 15일
- 3분 분량
최종 수정일: 3월 23일
Publish: 2025.08 Tool: Figma Member: Indivisual work Woking Type: GUI, MOTION
프로젝트 배경
왜 재난 알림에 추가적인 큐 디자인이 왜 필요한가?
재난 알림은 크게 사회적 재난과, 자연재난으로 나뉜다. 2021년 COVID-19 이후, 전염병 같은 사회적 재난도 재난으로 본격적으로, 인지하게 되었다. 국가들에서 모바일을 통해 재난 위험을 공지하게 되면서, 개인의 모바일은 재난알림을 받는 사회적 인프라로 작용하게 되었다. 그러나, 현재의 재난 알림은 자연적 재난, 사회적재난 모두 사용자가 '글'을 읽을수 있어야하며, 기초적인 과학 교육과 사회적 교육이 필요하다. 더불어, 국제 사용자 인터뷰 결과, 2개 이상의 문화권인 경우 모국어와 공용어가 다른 경우가 많았다. 대다수의 국가들이 다문화를 고려하려 2개 이상의 언어로 번역하여 재난 알림을 제공해준다, 또한 공용어와 모국어가 같다 하더라도, 국가에 따라서 글자가 길어지는 현상이 발생하여 모국어보다는 영어를 표시하는 인터뷰 대상자도 있었다. 이에, 모국어도, 공용어도 아닌 제 3의 언어를 사용하면서 모바일을 통해 재난 알림을 인지하는 속도는 더 느려진다.
이 프로젝트는
언어를 최소화하여, 사회적 재난과 자연적 재난을 설명하기 위해
모바일 재난 알림에 각 재난의 "힘"이 발생하는 방향과 비주얼 큐를 추가함으로
가시적으로 사용자들이 현상에 대해 이해하도록 돕고자 하였다 .
선행연구
재난의 종류
재난은 크게 자연적 재난과 사회적 재난으로 나뉜다. 각 재난의 종류는 국가별 재난 분류에서 공통적으로 사용하는 종류의 재난을 선정하였다.* 자연적재난 9종, 사회적 재난 5종을 대표로 총 14종의 재난을 중심으로 비주얼 큐를 만들었다.
재난을 살펴본 결과, 자연적 재난 사회적 재난의 공통점은
"에너지의 흐름"이다
자연적 재난은 에너지의 이동으로 인해 생기고,
사회적 재난은 에너지가 퍼져나가는 특징이 다르다.
자연적 재난 ( Natural Disaster) | 사회적 재난 (Social Disaster) | |
정의 Definition | 자연재난은 자연 현상에 의해 발생하며 인간의 생명, 재산, 환경에 피해를 초래하는 재난을 의미한다. Natural disasters are serious disruptions triggered by natural hazards that cause widespread human, material, economic, or environmental losses.(UNDRR) | 사회적 재난은 인간의 활동, 기술 시스템, 사회 구조적 문제 또는 관리 실패로 인해 발생하는 재난을 의미한다. Human-induced disasters result from human actions, technological failures, or social systems that cause widespread damage and disruption.(IFRC) |
종류 Type | 9 산사태, 폭우, 열대성 저기압, 홍수, 화산, 지진, 화재, 한파, 강풍 Tropical Cyclone / Flood / Landslide / Earthquake / Volcanic eruption / Wildfire / Cold wave / Severe wind / Heavy rainfall | 5 전염병, 테러, 위험물, 전쟁,유아유괴, 인프라 Epidemic / Terrorism/ Hazardous Material Incident/ War/ Child abduction / Infrastufture |
디자인 가이드라인
디자인 접근방법
사용자를 기준으로, 사용자 지면에 가까운 지역을 땅,
사용자와 먼곳을 하늘, 사용자의 양옆을
주변환경과 사람으로 상정하였다.

큐
자연적 재난
힘의 이동에 의해서 재난 발생함.
이동 위치를 파악하고, 대처하는 것이 중요


사회적 재난
영향력이 에너지 흐름뿐만 아니라, 퍼져나가거나 확산될 가능성이 있음 . 일반적인 권장 행동 사항 외에 다양한 주변 연관성을 주의해야 함


자연적 재난
모바일을 기준으로 사람과 가까운 쪽을 땅, 인디케이터 쪽으로 사람과 먼쪽을 하늘로 가정하고
에너지의 흐름 방향을 표현하기로 하였다. 에너지의 흐름이 하늘에서 오면 모바일 상단에서 비주얼 큐가 오도록,
에너지가 하단에서 오면 사용자와 가까운 하단에서 비주얼 큐가 오도록하였다.
자연 재난 에너지의 흐름방향 표현


사회적재난
사회적 재난은 에너지의 흐름이라기보다는 영향력에 의해서 발생하는 경우가 많다.
사회적 재난은 힘의 이동뿐만 아니라, 주변의 관계성과 상황등 복합적 요소가 많다.
따라서 주변으로 퍼져나가는 원형 메타포를 사용하였다.
사회적 재난 에너지 흐름 방향

큐의 에니메이션 속도, 방향
자연적재난

에너지 흐름을 보여주는데 집중함
흐름을 보여주는 일반적인 움직임
사회적 재난

사람의 심장박동에서
영감받은 움직임
위험등급에 따른 디자인 적용
국제 기준에서 가장 세분화 된 단계인 5단계 위험 수준 체계를 기준으로 디자인 작업을 진행하였다.
급도 5단계는 검정과 빨강 계열을 같이 사용하고, 위급도 4-2단계는 주황과 노랑계열을 사용한다
. 마지막으로 위급도 1단계 최하단계는 흰색 바탕을 기본으로 구성하였다.
색상은 호주의 재난 알림 가이드를 참조하였다
*녹색과 파란색은 국가별로 재난 등급이 달라, 적용하지 않았다.


위험 등급별 알람의 색상도 달라지지만,
알람이 화면을 덮는 높이도 달라지도록 설계함

실물적용을 위한 컴포넌트 체크
각 위급도에 따라서 기존 하던 행동을 얼마나 방해하는지 확인하기 위해,
기존 컴포넌트의 위치를 확인하여 위급도별 화면을 가리는 영역을 조절했다.

사용자조사
사용자조사는 7개국가 9명에게 인뎁스 인터뷰와 그룹인터뷰로 진행하였다.
테스트를 위해 픽토그램을 제외하고 재난에 대한 상세 내용은
문자 "W"로 표기하여 사용자들이 내용을 알지 못하도록 하고
자연적 재난과 사회적 재난의 비주얼 큐를 맞추는 역할을 하였다.
인터뷰 국가: 싱가폴/ 인도네시아/ 필리핀/ 태국 /일본/ 한국 /대만
비주얼 스타일 조사
비주얼 큐의 스타일을 다음과 같이 조사하였다. 사용자들에게 3가지 시안을 주고 세가지에 대한 경험을 각각 조사하였다.
7개국 9명의 사용자들에게 테스트를 주었으며, 국제 인터뷰를 진행하였다.
모바일을 사용하는 사용자 5인이다. 각 시안이 목적하는 바는 다음과 같다.

A
배경색: 위급도
강조 큐: 그라데이션 사용
재난알림 메시지의 가독성를 최대한 살리고자 하였다. 블루어 미사용
☑
B
배경색: 흰색
강조큐: 그라데이션 및 블루어
재난 알림 메시지보다는 큐를 더 집중하여 볼 수 있도록 하였다.
C
배경색: 위급도색
큐: 그라데이션 및 블루어
재난 알림의 위급도를 최대한 사용하면서, 배경에 강한 큐를 넣고자 하였다.
사용자 반응
"깔끔하다"
"위급도를 적절하게 인지가능하다"
"산뜻한 느낌이다 "
"안정적이고 따뜻한 느낌이다. "
"지나치게 이쁘다."
"안정적이고 따듯한 느낌이다."
"보기에 편안하다."
"위급도가 높은것 같으면서도 블루어 효과로 낮은거 같은 느낌이다. 위급도를 헷갈릴 수 있다."
결과적으로 사용자들은 따듯하고 편한 느낌보다는, 원래의 "위험인지"에 목적을 두고 있었다.
위험을 알리는 목적이라면 보기 좋고, 시각적으로 편한 것이 아니라,
위험을 느끼게 해주는 디자인인 A 안을 더 선호했다.
최종 결과물
자연적 재난 움직임(9종)
사회적재난
프로젝트를 마치며,
기존 작업스타일의 경우, 리서치에 리서치를 반복하여 결론을 얻는다.
이 프로젝트의 경우 주변 인터뷰와 질의 응답에서 리서치기반보다는
디자이너의 원칙과 휴리스틱에 기반하여 작업하였다.
너무 뻔하고, 당연한 내용의 큐와 모션이라고 처음에는 고민했다가,
사용자들과 대화하고, 비주얼을 보여주면서
"재난 알림" 은 그 뻔한 것, 당연한 것
바로 그렇게 느끼는게 만드는 것이 더중요하단 사실을 깨달았다.

댓글