기존 디자인 시스템을 과감히 개선해도 될까? YES!
(위 글은 2024년에 진행한 작업이며 이후에도 개선된 작업임을 참고해 주세요.)
배경
웹 서비스를 디자인할 때, 유저의 작업 상태를 안내하는 데 toast 컴포넌트*는 필수적이다.
당시 디자인 시스템에 정의된 toast 컴포넌트의 유형이 총 6가지였으며 사용 기준이 각 스쿼드마다 제각각이었다. (primary/secondary/success/warning/danger/dark)
*toast 컴포넌트란?
유저 작업의 상태를 제공하기 위해 일시적으로 표시되는 자동 닫힘 메시지 UI요소
시안 작업하다가 문득 의문이 들었다.
액션 성공이나 완료 상황에서는 어떤 toast를 사용해야 할까?
실패나 오류 상황에서는 또 어떤 toast를 써야 할까?
지금까지 문제없이 사용하던 디자인 시스템 기준을 바꿔도 괜찮을까?
다른 디자이너들도 나와 같은 고민을 하고 있을까?
....
이러한 궁금증은 자연스럽게 디자인팀 회고 시간으로 이어졌다. toast 유형별 활용 사례를 질문했고, 실제로도 제품 간 toast 사용성이 통일되지 않고 있다는 것을 확인할 수 있었다. 다행히 다른 디자이너분들도 이 문제에 공감하며 개선에 긍정적인 반응을 보여줬다.
상황 파악
곧바로 개선 작업에 착수했다. 먼저 현재 서비스에서 사용 중인 toast 케이스들을 모아 분석했다. 여러 제품에서 다양한 유형의 toast가 사용되고 있었고, 심지어는 기존 디자인 시스템에 정의된 6가지 유형 외에 제품 상황에 맞춰 색상이나 그라데이션을 적용한 경우도 있었다.
기존 컴포넌트 파악문제 정의
예상한대로 컴포넌트를 사용하는 기준이 모호했고, 디자이너마다 정의된 6가지 유형이 적용되는 상황에 대한 해석이 달랐다.
1. toast 사용 기준 모호
액션 성공과 상태를 안내하는 경우에 적합한 primary/secondary/success 3가지 유형간 차이가 불분명했고, 경고 시에도 warning/danger 사용 기준이 혼재되어 있었다.
2. ‘alert’과 'toast'의 사용 경우 재정의 필요
alert*과 toast 컴포넌트간 사용 용도를 명확히 구분할 필요가 있었다. 형태가 다른 두 컴포넌트가 같은 목적으로 중복 사용되는 경우가 많았다. 특히, 행동 결과에 대한 실패 안내(중요도 높은 정보)를 전달해 특정 상황에 대한 인식을 높여야 하는 경우에도 빠르게 닫히는 alert 컴포넌트가 아닌 toast로 전달하는 사례가 있었다.
*alert 컴포넌트란?
유저에게 중요한 정보를 전달하거나 주의를 요하는 상황에서 시각적인 알림을 제공하는 UI 요소
3. 상황별 주관성
성공, 실패, 안내 등 상황 판단 기준이 컴포넌트를 사용하는 디자이너마다 달랐다.
4. 아이콘 사용 여부 기준 불명확
같은 case라도 아이콘 사용하는 경우와 사용하지 않는 경우 혼재했다. 같은 케이스라도 아이콘을 사용하는 경우와 사용하지 않는 경우가 혼재되어 있었다.
아이디에이션
문제를 명확히 정의한 후, 해결 방안을 모색하기 위해 디자인 시스템을 적극적으로 활용하는 기업들의 toast 컴포넌트 유형을 리서치했다.
레퍼런스 리서치
성공/실패 2가지 경우로 크게 나뉘었고 그 외에는 에러, 경고, 정보 등으로 구성되어 있었다. 또, toast에 아이콘을 노출시키는 경우와 그렇지 않은 경우로 나뉘어 디자인 시스템마다 상이했다.
레퍼런스 서치인사이트 도출
toast 유형 정리
유형을 명시하는 요소인 색상과 아이콘 요소 중 1가지는 필수적으로 전달해야 한다고 생각했다. toast의 6가지 유형 모두 사용하는 경우는 드물었고, 자주 사용하는 유형을 기준으로 좁혀 toast 메시지 목적성을 더 강조할 필요가 있었다.
CTA 유형 기준
디자인 시스템에서 정의된 CTA 버튼 속성(props)은 버튼 없음, 텍스트 버튼, 채워진(fill) 버튼 총 3가지였다. 이에 대한 활용 가이드라인도 정하였다.
text 버튼 활용 시점
undo / 취소와 같이 실행한 액션을 취소할 경우에 사용한다.
fill 버튼 활용 시점
에러나 경고에 대한 명확한 대처 방안을 제시하는 경우에 사용한다.
최종 결론
toast 유형 2가지로 간소화
1. 알림·성공
primary/secondary/success → primary
유저의 액션 결과가 성공적이거나, 플랫폼에서 의도한 대로 액션이 성공적으로 수행된 경우(성공, 제출, 완료, 달성, 생성, 저장)에 노출한다. 또한, 중립적인 상태에 대한 알림 메시지나 상태 변경/안내에도 사용한다.
2. 경고
warning/danger → danger
유저 액션 결과가 실패했거나, 작업으로 인해 오류나 문제가 발생한 경우(실행 실패, 오류, 시스템 에러)에 노출한다. 기본적으로는 fill 버튼으로 대처 방안을 명확하게 제안한다.
그 외 규칙
toast 컴포넌트의 사용 목적 또한 유저 작업의 상태를 제공하기 위해 일시적으로 표시되는 자동 닫힘 메시지, 중요도가 낮은 메시지만 전달하는 것으로 재정의했다.
회고
디자인 시스템 UI를 전 제품의 사용성에 맞게 수정한 경험은 있었지만, 기저에 설계된 유형을 재정의한 경험은 이번이 처음이었다. 기존에 설계되고 구성된 컴포넌트가 비록 오랫동안 지켜온 규칙이자 약속일지라도, 제품이 많아지거나 고도화되면서 디자인 시스템의 흐름 또한 변화해야 한다는 것을 깨달았다.
이번 작업을 통해 얻은 가장 큰 레슨런은 기존의 약속을 깰까봐 두려워하지 말고, 일단 제안하고 부딪혀보려 한다. 나의 작은 문제 제기가 사실은 다른 사람들도 속으로는 불편하게 느끼고 있던 문제였을지도 모른다는 사실을 알게 되었다.
이번 작업기를 계기로 toast 컴포넌트가 간소화되어 디자이너분들께서도 혼란 없이 잘 사용하고 계신 것을 보니 뿌듯함이 말로 표현할 수 없을 정도다. 앞으로도 수면 위로 드러나지 않은 문제들을 찾아내고, 더 나은 유저 경험을 위해 끊임없이 고민하고 도전해보려한다.
