[7월 TIL #3] UI 리뉴얼 작업기: 의사결정은 혼자 존재하지 않는다

지난달에 "완벽한 체계를 선언하지 말고, 매일 하나씩 좋은 의사결정을 저장하자"는 7일 챌린지를 시작했다([6월 TIL #10] 디자인 시스템 앞에서 자꾸 멈추는 이유). 버튼 하나, 색 하나, 검색 결과 아이템 하나여도 된다는 규칙이었다. 색 토큰 정리부터 시작했는데, 며칠 만에 멈췄다.

 

그 멈춘 시점부터 제품의 핵심인 PDF Viewer UI를 전반전으로 리뉴얼하는 작업을 했고, 오늘 1차 작업을 끝냈다. 오늘은 그 2주 반의 작업과 그때 내린 결정들을 문서로 정리했다. 내가 봐도 급발진같아 보이긴 하는데(ㅋㅋ..) '하나씩'에서 '전체 리뉴얼'로 변경한 이유는, 어떤 의사결정도 혼자 존재하지 않는다는 걸 그 '하나씩'을 시도하다가 알게 됐기 때문이다. 하나의 결정이 컴포넌트와, 더 나아가 기능 그리고 경험에 연결돼 있었다.

 

 

하나를 정하려면 전체가 필요했다

챌린지 논리대로라면 "오늘은 이것 하나만 결정"하면 되는 날들이 있었다. 그런데 버튼이든 색이든 폰트든, 하나를 표준화하려고 들면 그게 어디에 왜 쓰이는지 전체를 알아야 기준이 정해졌다. 개별 요소 하나만 떼어서는 결정할 수 없었다. 예를 들어 타이포가 그랬다. 원본 제품엔 폰트 크기 체계가 없어서 몇 가지로 줄여 기준을 잡기로 했다. 그런데 몇 개로, 어떤 기준으로 줄일지 생각하다 보니, 어떤 크기를 남기고 버릴지는 그 크기가 상단바·사이드바·배지·본문 어디에 왜 쓰이는지 전체를 알아야 정해졌다. 타이포 하나의 기준이 제품 전체에 연결돼 있었다.

타이포 사이즈라는 결정 하나가 모든 것들과 엮여 있었다.

 

개별 최적화에서 근거와 목적으로

돌아보면 "매일 하나씩"은 멈춰 있던 작업을 시작하게 하려는 장치지 그 자체가 디자인 시스템을 만드는 방법은 아니었던 것 같다. 내가 목표로 적은 것도 "좋은 의사결정을 저장하는 경험을 만드는 것"이었다. 좋은 결정은 개별 요소가 아니라 그것을 관통하는 근거와 목적에서 나올 것 같다는 생각에 개별 결정을 멈추고 근거부터 정리했다.

 

근거는 두 곳에서 같은 지점을 가리켰다. 유저 구독 취소 설문 신호는 무엇이 불편한지를, Nielsen 사용성 휴리스틱 평가는 왜 불편한지를 짚었다. 17개월간 응답에서 "UI가 불편함"은 여섯 개 분기 내내 반복해서 상위 불편으로 꼽혔다. 휴리스틱으로 점검하니 시스템 상태의 가시성, 재인 > 기억, 일관성 위반이 반복 확인됐다. 두 근거가 같은 지점을 가리켰고, 며칠 전 공부한 지각된 가치와 인지된 비용 개념을 목적의 두 축으로 삼았다. 인지된 비용을 낮추고, 지각된 가치를 높인다.

 

 

새 기능이 아니라 규칙을 다시 세운 것

인지된 비용은 이걸 쓰는 데 드는 상호작용 비용(interaction cost), 곧 머리 쓰기(판단·기억)와 몸 쓰기(클릭·이동)다. 지각된 가치는 이걸 써서 얻는 이득, 첫인상과 이득의 가시성이다. 각 변경이 두 축 중 어디에 해당하는지 표시하고, 그 판단의 근거로 UX 원칙을 적었다. 몇 개만 보면 이렇다.

• 버튼 상태: 켜짐이 hover의 흐린 복제본이라 무엇이 활성인지 판별하기 어려웠다. 켜짐에만 전용 표시(칩 배경과 안쪽 테두리)를 줬다. → 비용↓ (시스템 상태의 가시성)
• 사이드바: 닫으면 안의 것이 통째로 사라져 기능이 있는지도 몰랐다. 접어도 아이콘 레일이 남고, 하이라이트·설명·주석 탭에 실시간 개수 배지를 달았다. → 가치↑·비용↓ (재인 > 기억)
• 설명 팝오버: PDF 확대 배율에 묶여 크기가 함께 커지고 작아졌다. 화면 좌표 기준 카드로 분리해 배율과 무관하게 일정한 크기로 뒀다. → 비용↓ (예측 가능성)

이런 식으로 공통 기반, 상단바, 사이드바, 설명 팝오버, 설정까지 다섯 개 영역에 걸쳐 열세 개 항목을 같은 형식으로 정리했다.

뒤늦게 이름을 알게 된 것

돌아보면 그땐 "매일 하나씩 저장하자"는 규칙으로 작업을 시작해보려 했다. 다시 생각해보니 그건 근본적으로 개별로는 정할 수 없는 일이었다. 하나의 결정이 전체에 연결돼 있어서, 하나씩 떼어 저장한다는 접근이 성립하기 어려웠다. 이 작업을 정리하다 인터페이스 인벤토리라는 방법을 알게 됐다. 제품의 UI 조각을 전부 모아 시스템으로 정리하는 작업인데, 애초에 개별 요소를 하나씩 떼어 판단할 수 없다는 전제에서 출발한다. 내가 부딪힌 게 이 전제였다. 개별로는 못 정하고 전체를 놓고 정해야 한다는 것. 이건 따로 더 공부해보려 한다.

오늘 1차 작업을 마무리하고 내일 팀원들에게 공유하기 위한 문서를 작성하며, 이 작업을 하게 된 생각의 흐름을 정리해보고 싶었다. 동료들과 유저들에게 받게 될 반응이 두렵기도 하면서 더 좋아지길 바라며 한 작업이기 때문에 듣게 될 좋은 피드백이 기대되기도 하는 그런 상태이다. 만드는 과정에서 동료 1명에게밖에 보여주지 않았다는 게 두려움이 더 크다는 증거 같은데, 그래도 이걸 깨고 솔직한 피드백을 받고 진짜 개선을 위한 개선 작업에 더 가까워져야겠지. 암튼 굿!