Micro-interactions이란 ?
Micro-interactions은 사용자와 디자인 요소 간의 짧고 구체적인 상호작용을 설명하는 용어입니다.
- 스마트폰의 볼륨 버튼을 눌렀을 때 나타나는 작은 볼륨 인디케이터
- '좋아요' 버튼을 눌렀을 때의 애니메이션
- 입력 폼에 잘못된 정보를 입력했을 때 나타나는 경고 메시지
위와 같은 같은 요소들이 모두 Micro-interaction입니다.
Micro-interactions는 짧고 빠르지만, 사용자의 전반적인 경험에 큰 영향을 미치게 됩니다. 시스템과의 상호작용에서 얻는 피드백을 구체화하며, 직관적이고 몰입감 있는 사용 경험을 얻을 수 있습니다.
Micro-interactions 도입
As-Is
Crown004 프로젝트를 진행하며 맡은 Production Queue는 사용자에게 특정 연산의 실시간 진행 상황을 progress bar를 통해 보여주는 기능을 포함하고 있습니다.
이 기능은 사용자에게 시스템이 어떤 상태에서 작동 중인지 알려주는 중요한 인터페이스 요소입니다. 디자인 시안대로 구현 후에 몇가지 문제점을 발견했습니다:
연산의 복잡성과 데이터 양에 따라 progress bar의 진행 속도가 다를 수 있습니다. 이로 인해 progress bar가 멈춘 것처럼 느껴지기도 합니다.
사용자는 시스템의 진행 상황을 명확하게 알고 싶어합니다. progress bar의 움직임이 불규칙하거나 중간에 멈춰있는 것처럼 보일 때, 사용자는 연산이 제대로 진행되고 있는지, 문제가 발생하지는 않았는지에 대한 불안감을 느낄 수 있습니다.
이러한 점들은 신뢰도를 저하시키며, 전반적인 사용자 경험(UX)에 부정적인 영향을 미치게 됩니다.
To-Be
기존의 progress bar의 문제점을 극복하고 사용자 경험을 개선하기 위해 애니메이션 효과를 떠올렸습니다.
간단하게 빛나는 레이어(가상요소)를 LinearProgress 위에 추가하고, keyframe을 사용하여 왼쪽에서 오른쪽으로 이동하는 애니메이션을 적용합니다.
@keyframes shimmering {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
...
<LinearProgress
value={progressUIValue}
variant="determinate"
sx={{
// ...other style props
position: 'relative',
'&::after': {
content: 연산_진행중 ? '""' : 'none',
position: 'absolute',
top: 0,
left: 0,
height: '100%',
width: '50%',
background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent)',
animation: 'shimmering 1.5s infinite'
}
}}
/>
애니메이션을 적용하여 progress bar의 현재 상태가 실시간으로 변화하고 있는 것을 더욱 뚜렷하게 보여줍니다. 이로 인해 사용자는 시스템이 활성화되어 있고 정상적으로 작동 중임을 명확하게 인지할 수 있습니다.
위와 같은 샘플을 만들어서 디자이너님께 컨펌을 부탁드렸고, 꽤 호평을 해주셔서 도입이 결정되었습니다.
결론
느린 엘리베이터에 거울을 설치하자 민원이 줄었다는 유명한 일화가 있습니다. 고객들이 엘리베이터 속도가 느리다고 느낀 이유는 사실 ‘지루함’ 때문이었습니다. 좁고 밀폐된 공간에서의 지루함이 ‘엘리베이터가 느리다’는 불만으로 이어졌던 것입니다.
이와 유사하게, 정적인 디자인에 작은 애니메이션을 추가하자 사용자 입장에서 심리적으로 더 빠르게 느끼는 효과를 얻을 수 있었습니다.
이 경험을 통해, 큰 변화나 눈에 띄는 혁신만이 사용자 경험을 개선할 수 있는 것은 아니라는 점을 깨달았습니다. Micro-Interactions와 같은 작은 디테일의 변화가 사용자 경험을 향상시킬 수 있습니다.
