시작하며
나는 프론트엔드 개발자로서 사용자와 가장 직접적으로 맞닿는 웹과 앱을 만든다. 서버의 데이터와 디자인을 바탕으로 실제 화면을 구현하는 것이 내 주요 역할이다. 이러한 프론트엔드 개발자에게 가장 중요한 역량은 사용자 경험이라고 생각한다. 이전부터 사용자 경험의 중요성은 알고 있었지만, '개발하기도 바쁜데 사용자 경험까지 공부해야 하나?', '디자이너가 알아서 해주는 거 아닌가?'라는 안일한 생각으로 사용자 경험에 대한 공부를 미루어왔다.
그렇게 지금까지 기획서대로 기능을 만들고, 디자인대로 퍼블리싱하고, 서버 데이터를 표시하는 단순한 개발만 해왔다. 특히 최근 개인 프로젝트를 진행하면서 이러한 접근의 한계를 뼈저리게 느꼈다. '뭔가 2%, 아니 20%가 부족한데 뭘까?'라는 의문이 계속 들었고 모든 기능을 구현했음에도 무언가 아쉬웠다.
그제서야 깨달았다. 바로 사용자 경험을 고려하지 않았다는 것을. 여기서 사용자 경험이란 말 그대로 사용자가 서비스를 이용하며 느끼는 모든 '경험'을 의미한다.
이번 글에서는 웹 메모 프로젝트를 개발하며 신경 쓴 사용자 경험의 각 포인트에 대해 이야기하고자 한다.
실전으로 알아보는 사용자 경험
웹 메모는 내가 가장 애착하는 서비스임과 동시에 가장 애용하는 서비스이다. 서비스를 이용하면서 느끼는 불편함들을 꾸준히 기록하고 빠르게 개선하려 노력하고 있다. 이는 사용자들뿐 아니라 서비스의 주 사용자인 나를 위해서도 필요한 일이기 때문이다. 이제부터 서비스를 개발하며 개선했던 사용자 경험과 그 과정에서 얻은 인사이트를 이야기하고자 한다.
1) 필요한 기능을 적절한 곳에, 적절한 시기에 제공하자.
사용자 경험에서 가장 중요한 것은 필요한 기능을 적절한 위치에 배치하는 것이다. 사용자는 특정한 목적을 가지고 우리 서비스를 찾았을 것이며 서비스 이용에 대한 기대와 필요로 하는 기능이 있을 것이다. 그 기능을 사용자가 원하는 순간에, 원하는 자리에서 꺼내 쓸 수 있어야 한다.
- 컨텐츠를 제거한 뒤 다시 복구할 수 있다.
어느 날 열심히 작성한 메모를 실수로 제거한 적이 있다. 제거 버튼이 너무 쉽게 누를 수 있는 위치에 있었기 때문이다. 순간 눈앞이 하얘지면서 '메모가 뭐였더라', '어디 있던 메모였지...' 하고 아무리 생각해도 기억이 나지 않았다.
이를 복구할 수 없다는 점이 사용자에게 매우 큰 불편일 것이라고 느꼈다. 이런 불편함 때문에 서비스 이용을 중단할 수도 있겠다는 생각이 들었다. 그래서 메모 제거 직후 바로 복구할 수 있는 기능을 추가했다.
메모를 제거하면 토스트 창이 나타나고 그 안에 복구 버튼을 배치했다. 이 버튼을 누르면 제거된 메모를 POST 요청으로 다시 저장한다. 메모를 제거했거나 갑자기 다른 곳으로 이동했을 때 되돌릴 수 있는 기능은 사용자에게 필수적이라고 생각한다.
노션을 예시로 들면 Command + Z로 언제든 이전 상태로 되돌릴 수 있고, Command + Shift + P로 블록을 다른 곳으로 이동한 후에도 실행 취소 버튼이 있는 토스트를 제공한다.
- 단축키를 눌렀을 때 예상되는 반응을 한다.
창을 닫는 버튼이나 저장 버튼을 만들 수 있지만, ESC를 눌러 창을 닫거나 Command + S를 눌러서 내용을 저장할 수 있는 것처럼 사용자가 예상하는 단축키 동작을 구현하면 훨씬 더 편리한 경험을 제공할 수 있다. 이렇게 예상한 대로 반응해주면 사용자는 서비스를 훨씬 편하게 느낀다.
Javascript에서는 window에 이벤트 리스너를 등록함으로써 이를 수행할 수 있다.
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') callback();
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [key, callback]);2) 자연스러운 애니메이션을 제공하자
애니메이션이 부드러우면 서비스가 더 매력적으로 느껴지고, 다시 찾게 된다.
이를 구현하기 위해 CSS의 transition과 framer-motion 라이브러리를 주로 활용했다.
- 요소가 등장하는 애니메이션
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>- 요소가 이동하는 애니메이션
transition: all ease 0.2s요소가 이동할 때도 자연스러운 움직임을 주는 것이 중요하다. 예를 들어 메모 목록의 순서가 바뀌거나, 특정 메모가 제거되어 요소가 이동할 때 transition을 적용하면 더욱 부드러운 사용자 경험을 제공할 수 있다. 모든 요소의 변화에 ease 효과를 주어 자연스러운 움직임을 구현하였다.
- 변화가 생겼을 때 애니메이션
유튜브의 좋아요 버튼을 참고해서 만들었다. 영상의 좋아요 버튼을 누르면 따봉 아이콘이 통통 튀듯이 움직이며 활성화된다. 이 애니메이션이 너무 즐거워서 영상을 볼 때마다 좋아요 버튼을 반복해서 누르기도 한다. 이처럼 작은 애니메이션 하나가 주는 영향력이 정말 크다는 것을 몸소 느낄 수 있었다. 단순한 버튼 클릭이 즐거운 경험으로 바뀌는 것이다.
코드로 살펴보면 아래와 같다.
@keyframes heart-pop {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}
.heart-pop {
animation: heart-pop 0.3s ease-in-out;
}크기를 1에서 1.5배로 늘렸다가 다시 1로 돌아오는 keyframes를 만들고, ease-in-out 효과로 부드러운 애니메이션을 구현했다.
3) 풍부한 사용자 메시지를 제공하자
사용자에게 오류가 발생했을 때는 오류의 내용과 해결 방법을 명확히 알려주어야 한다. 또한 시스템의 상태가 변화할 때마다 이를 사용자에게 적절히 알리는 것이 중요하다.
- 저장 상태에 변화가 생겼을 때 이를 알린다.
메모를 저장했을 때 아무런 반응이 없으면 사용자는 "저장이 된 걸까, 안 된 걸까?" 하는 불안감을 느낄 수 있다. 이러한 답답함을 해소하고 싶었다.
위와 같이 저장을할 때마다 토스트 창이 뜨도록 구현하였다.
하지만 주기적으로 메모가 저장되는 경우는 어떨까? 익스텐션의 사이드 패널은 화면이 작고, 3초마다 스로틀 방식으로 메모가 저장된다. 이런 작은 화면에서 3초마다 토스트 창이 뜨면 오히려 사용자 경험을 해칠 수 있다. 메모를 작성하는 데 시각적 방해가 될 것이기 때문이다. 그래서 이런 경우에는 textarea의 테두리 굵기로 구분을 주었다. 메모가 저장된 상태에서는 테두리를 굵게, 저장되지 않은 상태에서는 얇게 표시하여 저장 상태를 알려준다.
이처럼 사용자에게 필요한 정보를 제공하되, 과하지 않게 전달하는 것이 중요하다.
- 페이지 요약을 실패한 경우에는 실패한 이유를 설명한다.
‘Error’메시지를 보면 사용자는 당황하고, 결국 서비스를 이탈하고 말 것이다.
에러를 개발자가 해결하는 것이 최고의 방법이겠지만 개발자 또한 해결이 불가능한 이슈가 있을 수 있다. 그러한 경우 위와 같이 왜 에러가 발생했으며, 혹은 에러를 어떻게하면 해결할 수 있는지 사용자에게 알려주는 것이 중요하다.
에러 메시지는 사용자 신뢰와 직결되니, 기술 용어 대신 이해하기 쉬운 말로 상황과 해결 방법을 알려주는 편이 낫다.
사용자 경험을 향상시키는 방법
1) 우수 사례 벤치마킹
나는 웹 메모 프로젝트를 만들며 주로 내가 주로 활용하는 당근마켓과 구글 킵스 사이트를 참고했다. 당근마켓은 세세한 부분까지 정말 공들여 신경 썼다는 것이 느껴졌고 구글 킵스는 내 서비스와 유사한 점이 많아 많은 참고서가 되었다. 이렇게 다른 서비스를 벤치마킹하고, 좋은 UX 경험의 포인트들을 내 서비스에 적용하는 것이 사용자 경험을 향상시키는 효과적인 방법이라고 생각한다. 특히 비슷한 분야의 서비스를 분석하면서 사용자들이 어떤 부분에서 만족하고 불편함을 느끼는지 명확히 파악할 수 있었다.
2) 책
사용자 경험 관련 책들을 읽으면서도 많은 인사이트를 얻을 수 있었다. 특히 UX/UI의 10가지 심리학 법칙과 같은 책은 웹 사용성의 근본적인 원칙들을 이해하는 데 도움이 되었다. 이런 책들은 사용자의 행동 패턴과 심리를 이해하는 데에 큰 도움이 되었다.
맺으며
이번 프로젝트를 통해 사용자 경험이 단순히 '있으면 좋은 것'이 아닌 '반드시 필요한 것'임을 깨달았다. 특히 실제 서비스를 운영하면서 작은 UX 개선으로도 사용자들의 반응이 크게 달라지는 것을 경험했다. 예를 들어, 메모 복구 기능을 추가한 후 "실수로 삭제한 메모를 되살릴 수 있어서 안심하고 사용할 수 있다"는 피드백을 받았고, 저장 상태 표시를 개선한 뒤로는 "메모가 잘 저장되었는지 확인하느라 불안해하지 않아도 된다"는 의견을 들었다.
이런 경험을 하면서 앞으로 어디에 더 신경 써야 할지 조금씩 보이기 시작했다. 우선 사용자 피드백을 모으는 창구부터 만들어보려 한다. 지금은 이메일로 간간이 받고 있는데, 서비스 안에서 바로 소통할 수 있는 채널을 두면 사용자 목소리를 더 빨리 들을 수 있을 것이다. 개선도 직관 대신 데이터로, 어떤 기능을 자주 쓰고 어디서 이탈하는지 뜯어보며 하고 싶다. 지금은 키보드 조작 정도만 지원하는 접근성도 스크린 리더나 고대비 모드까지 더 챙길 계획이다.
이번 프로젝트를 하면서, 화면을 찍어내는 게 프론트엔드 개발자의 전부가 아니라는 걸 다시 느꼈다. 사용자에게 어떤 경험을 주느냐가 결국 핵심이었다. 앞으로도 '사용자는 이걸 어떻게 느낄까'를 먼저 묻고 결정하려 한다.
참고
- https://namu.wiki/w/%EC%82%AC%EC%9A%A9%EC%9E%90%20%EA%B2%BD%ED%97%98
- https://brunch.co.kr/@dhlee702/30
- https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%ED%8A%B8%EB%9E%9C%EC%A7%80%EC%85%98-%ED%8A%B8%EB%9E%9C%EC%8A%A4%ED%8F%BC-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98
- https://tailwindcss.com/docs/transition-property