#웹프론트엔드 #UX
이찬호 2022.12.26
만드는 사람이 수고로운 UX 개발기
“만드는 사람이 수고로우면 쓰는 사람이 편하고, 만드는 사람이 편하면 쓰는 사람이 수고롭다.” 우아한형제들 사무실에서 쉽게 발견할 수 있는 문구입니다. 이 문구를 볼 때마다 나의 게으름이 서비스 사용자를 수고롭게 하는 건 아닌지 생각해보게 되는데요, 제가 개발하는 공급망 관리 서비스인 SCM은 발주를 넣는 내부 직원과 공급사에서 사용하는 백오피스 서비스입니다. 백오피스 서비스의 특성상 디자이너 없이 개발되는 경우가 대부분이고, 서버 개발자가 기능만 동작하도록 개발해서 사용할 때도 많습니다. 따라서 사용성은 쉽게 우선순위에서 밀리곤 하죠.
일반 고객용 서비스와 다르게, 백오피스 서비스는 사용자들이 하루 종일 업무에 사용합니다. 사용성이 고려되지 않은 서비스의 불편함을 감수하면서 하루 종일 고통받으며 업무를 하게 되지요. 이 때문에 사용자들 사이에서는 불편한 기능을 잘 활용하는 방법을 공유하기도 합니다.
저는 백오피스 서비스에 더 나은 UX를 제공해 백오피스 사용자의 업무 경험이 좋아지길 바랍니다. UX를 개선해서 사용이 편해지고 휴먼 에러도 방지한다면 더 나아진 업무 환경에서 업무 생산성을 높일 수 있기 때문입니다.
탭 UI : 탭 기반의 멀티페이지 관리 시스템
여러분은 일상적으로 웹 브라우저를 사용할 때 탭 하나에서 모든 작업을 처리하나요? 아니면 필요한 정보와 작업마다 탭을 번갈아 열며 작업하나요? 탭 하나에서 다양한 작업을 처리하는 것은 불편합니다. 작업 중인 페이지와 관련된 정보를 보존하기 위해 탭을 사용하는 방식에 다들 익숙할 겁니다.
여러 페이지를 오가며 작업해야 하는 백오피스 서비스에서 한 번에 하나의 페이지만 볼 수 있다면 작업이 얼마나 불편할까요? 이러한 문제를 해결하기 위해 페이지 단위의 서비스가 아닌, 페이지를 탭으로 관리하며 여러 탭(페이지)을 동시에 열어두고 작업할 수 있는 탭 UI를 개발했습니다.
• SCM에 적용한 탭 예시 •
탭 UI의 핵심 기능을 살펴보면 다음과 같습니다.
- 왼쪽 메뉴를 클릭하면 페이지가 바뀌는 대신 새로운 탭이 열립니다.
- 각 탭은 독립적인 상태로, 다른 탭으로 이동한 후에도 작업 중이던 내용을 그대로 유지할 수 있습니다.
- 작업 중(사용자 입력 중)인 페이지를 탭에 표시합니다.
이러한 편의성은 매우 매력적이지만, 이를 구현하기 위해 개발자로서 극복해야 할 수고로움도 있었습니다.
- 성능 이슈 : 열려 있는 탭이 많아질수록 DOM에 추가되는 엘리먼트도 증가합니다. 이로 인해 성능 저하가 발생할 수 있습니다. 이 문제를 해결하기 위해 활성화된 탭 의 페이지만 렌더링하고, 나머지 탭의 엘리먼트는 DOM에서 제거하여 필요한 부분 만 유지하도록 설계했습니다.
- 상태 관리의 복잡도 : Form을 다룰 때는 일반적으로 비제어 컴포넌트Uncontrolled Component를 사용하지만, 탭이 활성화되거나 비활성화될 때 컴포넌트가 삭제되면 비제어 컴포넌트가 가지고 있던 값도 함께 사라집니다. 이를 해결하기 위해 실시간 으로 상태를 저장하고 관리하도록 제어 컴포넌트와 비슷한 방식을 도입했습니다.
- 탭 간 정보 동기화 : 예를 들어 상품 상세 페이지에서 수정 작업을 한 후 목록 페이 지로 돌아오면 수정된 내용이 목록 페이지에도 반영되어야 합니다. 페이지 단위의 UI에서는 두 페이지가 별개이므로 이런 동기화가 비교적 간단하지만, 탭 UI에서는 이미목록페이지가열려있기때문에탭사이별도의처리를통해수정작업후목 록 페이지로 탭을 이동했을 때 새로운 데이터를 받아올 수 있도록 설계했습니다.
프로젝트를 처음 구성할 때부터 이 탭 UI의 사용성을 최적화하기까지 정말 오랜 시간이 걸렸습니다. 그래서 새로운 프로젝트를 시작할 때도 탭 UI를 꼭 넣었으면 한다는 이야기를 듣곤 하는데요, 피드백을 들을 때마다 뿌듯함과 슬픔이 공존하곤 합니다.
입력 중인 상태 보호, 편집됨
다음으로 소개해드릴 UX는 ‘편집됨’입니다. 서비스를 사용하다가 실수로 [뒤로가기]를 누르거나, 여러 정보를 입력하던 모달을 닫아 입력 중인 정보가 날아간 경험이 있지 않으신가요? 우리가 자주 사용하는 프로그램에서는 기본적으로 편집 중인지를 체크하고 사용자가 창을 닫으려 할 때 수정 중인 내용에 대한 처리를 묻습니다.
• SCM에 반영한 편집됨 표기 •
SCM은 정보가 많은 데이터를 다루기 때문에 데이터를 입력하는 도중에 페이지를 새로 고침하거나, 모달에서 작업 중일 때 모달을 닫으면 데이터가 날아갈 수 있습니다. 이를 방지하기 위해 사용자 입력을 받는 모든 페이지와 모달에 ‘편집됨’ 상태를 넣었습니다.
• SCM에 반영한 닫기 방지 컨펌 •
편집 중인 탭 혹은 모달을 닫으려고 하면 변경 중인 내용이 있다는 것을 사용자에게 알리고, 정말로 닫겠냐고 묻습니다. [취소]를 누르면 작업 중이던 화면을 그대로 보여주고, [확인]을 누르면 작업 중인 탭 혹은 모달을 닫습니다.
편집됨 상태를 보여주려면 입력 중인 데이터와 같은 값인지 비교해야 합니다. 그리고 편집 중인지 확인하는 함수를 만들어서 모달 혹은 페이지를 닫는 함수의 맨 앞에 넣고 편집 중인지를 확인합니다. 편집 중이라면, 알림 창이 나타나 사용자에게 정말 닫을 것인지 확인합니다. 이 기능을 통해 실수로 화면을 새로고침하거나, 작업 중인 모달을 닫으려고 할 때에도 안전하게 입력 중이던 데이터를 보호할 수 있습니다.
유효성 검증 시각화
SCM은 서비스 특성상 많은 데이터를 다루다 보니 필수 입력 값에 대한 유효성 검사를 잘 보여줘야 합니다. 그래서 고안해낸 것이 ValidationItem입니다. ValidationItem은 필수로 입력해야 하는 값에 유효성 검사를 걸어두고, 사용자가 내용을 올바르게 채웠는지 피드백하는 컴포넌트입니다. ValidationItem으로 사용자에게 최대한 빠른 피드백을 주고, 또 어떤 내용을 더 입력해야 프로세스가 진행되는지를 직관적으로 보여주고 싶었습니다. 등록하는 페이지 혹은 등록하는 모달에서도 사용하고, 상태 변경을 해야 하는 상황에서 안내용으로 사용합니다. ValidtaionItem은 간단하게 label과 valid 여부만 전달받습니다.
• 페이지에서 사용 예시. 필수 값을 입력했을 때 실시간으로 입력 여부를 보여준다 •
파일 다운로드 아이콘
백오피스 서비스답게 파일을 올리고 다운로드할 일이 많습니다. 파일 다운로드를 [파일 다운로드] 버튼, 혹은 파일 이름으로 된 링크로 사용했는데, 일관성도 부족하고 직관적이지 않았습니다. 이를 해결하기 위해 파일 아이콘을 만들었습니다. 아이콘을 찾아보았으나, 마음에 드는 파일 아이콘을 찾을 수 없어서 피그마를 이용해 직접 그렸습니다. 직관적으로 파일임을 알 수 있는 디자인 위에 비슷한 유형의 확장자끼리 색을 구분해 표시했습니다.
또한 다운로드 요청을 기다리는 동안 파일 아이콘 위로 로딩을 노출시켜 여러 번 누르지 않도록 사용자 경험을 개선했습니다. FileButton 컴포넌트에 fileName만 전달하면 파일 확장자를 분석해 적절한 아이콘을 자동으로 표시합니다. 컴포넌트에 마우스 커서를 올리면 툴팁 UI에서 파일 이름도 확인할 수 있죠.
◆◆◆
‘어차피 사용하는 사람도 많지 않은 백오피스 서비스인데, 이렇게까지 해야 하나요?’라는 의문이 생길 수 있습니다. 편한 UI/UX는 사용자가 인지하지도 못 한 채 그냥 편하게 사용하지만, 불편함은 바로 알아차립니다. 이런 불편함을 사용자 몫으로 떠안게 하는 것이 아니라 어떻게 하면 사용자가 더 편하게 서비스를 사용할 수 있을지 고민하는 것이 프론트엔드 개발자에게 중요한 가치라고 믿습니다. 동일한 기능을 제공하더라도 ‘만드는 이의 수고로움을 더해 쓰는 사람이 편한’ 사용성을 제공하는 것이 배민다움이 아닐까 합니다.
저자 우아한 형제들
우아한형제들은 배달이 일상을 조금 더 행복하게 하도록 오늘도 달리고 있습니다. 평범한 사람들이 모여 비범한 성과를 만들어 내는 곳이될 수 있도록 건강한 조직문화를 만드는 일에 진심을 다합니다. 2016년부터 ‘우아한형제들 기술블로그’를 운영하며 개발 조직의 성장 과정을 기록하고 있습니다.
