상태 표시

상태

Senco의 거래 상태는 여섯 가지다.

각 상태는 색 점, 옅은 배경색, 텍스트 라벨로 이루어진 배지로 표시한다.

Sent는 completed가 아니다

시스템에서 가장 중요한 구분이다. Sent는 돈이 Senco에서 빠져나갔다는 뜻이고, Completed는 수취인이 돈을 받았다는 뜻이다. 해외 송금에서는 이 사이가 이틀까지 벌어질 수 있고, 이미 sent된 결제도 받는 은행에서 반려될 수 있다.

초록은 completed에만 쓴다. sent 상태의 송금을 초록으로 표시하면, 아직 실패할 수 있는데도 가족이 돈을 받았다고 알려 주는 셈이다. 그런 일이 한 번 생기면 어떤 메시지로도 되돌릴 수 없다.

최종 상태와 진행 중 상태

최종 상태는 세 개뿐이다. 나머지 셋은 시스템이 아직 결과를 내지 않은 상태이므로, 인터페이스는 섣불리 끝난 것처럼 보이지 말고 진행 중으로 계속 표시해야 한다.

모든 상태에는 시각을 붙인다

"Pending"만으로는 판단할 수 없다. 2분 전에 보낸 송금인지 이틀째 멈춰 있는 송금인지 사용자가 구분할 방법이 없다. 그래서 모든 상태에는 그 상태가 된 시각을 함께 보여 준다("Pending since 10:42"). 진행 중 상태가 예상 시간을 넘기면 말없이 계속 기다리게 두지 말고 다음에 할 수 있는 일을 보여 준다.

삼중 신호

모든 상태 표시는 같은 정보를 세 가지 신호로 겹쳐 전달한다.

1. 색 — 배경색과 텍스트 색으로 범주(성공, 경고, 에러)를 나타낸다
2. 점/아이콘 — 채운 원이나 아이콘이 색 신호를 보완한다
3. 텍스트 라벨 — 상태 이름을 언제나 읽을 수 있는 텍스트로 보여 준다

이렇게 하면 색각 이상이 있는 사용자도 상태를 알 수 있고, 누구나 한눈에 파악할 수 있다.

점만으로는 부족한 이유

남성 열두 명 중 한 명꼴로 색각 이상이 있다. 그중 제2색맹은 이 제품이 의존하는 초록/앰버/빨강 구분을 그대로 무너뜨린다. 시뮬레이션해 보면 green-600과 yellow-600이 거의 같은 탁한 색으로 보여서, pending과 completed 칩을 구분할 수 없다.

아이콘은 모양으로, 라벨은 글자로 구분해 준다. 색은 볼 수 있는 사람에게는 가장 빠른 신호지만, 볼 수 없는 사람에게는 아무 경고 없이 정보가 사라지는 유일한 신호다.

사용 맥락

알림은 최종 상태에서만 보낸다. 중간 단계가 바뀔 때마다 푸시를 보내면 사용자는 Senco 알림을 무시하는 데 익숙해지고, 정말 중요한 두 알림(도착했다, 실패했다)을 놓치게 된다.

화면 속 상태

거래 목록에서 상태 배지는 수취인 이름, 금액, 날짜와 함께 표시된다. 배지는 오른쪽에 정렬하고 점, 아이콘, 라벨을 모두 담은 compact 변형을 쓴다. 공간이 좁아도 아이콘은 빼지 않는다. 색각 이상이 있으면 Pending과 Completed를 아이콘으로 구분하기 때문이다.

상태는 행을 열지 않아도 보여야 한다. 목록의 목적은 "도착했나"를 한눈에 확인하게 하는 것이다. 눌러야만 상태가 보이면 목록은 답을 주지 못하고 항목만 나열한 색인이 된다.

권장 / 금지

• 상태가 나오는 곳에는 항상 전체 배지(색 + 점 + 아이콘 + 텍스트 라벨)를 쓴다
• 텍스트 없이 색 점만 쓰지 않는다. 색각 이상 사용자는 구분할 수 없고 스크린 리더에도 아무 정보가 전달되지 않는다
• 상태 변화는 라이브 영역으로 스크린 리더에 알린다
• pending과 processing을 색만으로 구분하지 않는다

상태 타임라인

송금이 각 단계를 거쳐 가는 과정을 보여 주는 세로 타임라인이다. 거래 상세 화면에서 송금 시작부터 완료까지의 이력을 보여 줄 때 쓴다.

• 완료한 단계는 흰 체크 아이콘이 들어간 24px 초록 원으로 표시한다
• 진행 중인 단계는 깜빡이는 애니메이션이 있는 12px Primary 색 점으로 표시한다
• 남은 단계는 12px 회색 점으로 표시한다
• 단계를 잇는 선은 완료한 구간만 초록이고 나머지는 회색이다
• 각 단계에 시각과 설명을 붙여 맥락을 더할 수 있다
• 진행 중인 항목에는 스크린 리더용으로 aria-current="step"을 쓴다

사용

실패한 타임라인은 실패한 지점에서 멈춘다

송금이 실패해도 타임라인을 흐리게 바꾸거나 처음으로 되돌리지 않는다. 완료한 단계는 모두 그대로 두고, 실패한 단계는 경고 아이콘과 함께 --ds-red-600으로 표시하고, 실패 이유를 그 자리에 보여 준다. 사용자는 돈이 어디까지 갔는지 알아야 다음에 무엇을 할지, 고객 지원에 무엇을 말할지 정할 수 있다.

토큰

--ds-timeline-completed-dot · --ds-timeline-completed-icon · --ds-timeline-active-dot · --ds-timeline-future-dot · --ds-timeline-line-completed · --ds-timeline-line-default · --ds-timeline-pulse-color

의미 기반 배지 변형

디자인 시스템은 Senco 토큰 색에 연결된 의미 기반 배지 변형(success, warning, info, destructive)을 제공한다. 일반적인 피드백에는 이 배지를 쓰고, 거래 상태에는 위의 상태 배지를 쓴다.

두 배지 묶음은 일부러 나눠 두었다. 의미 기반 success 배지는 "작업이 성공했다"는 뜻이고, 거래 Completed 배지는 "수취인이 돈을 받았다"는 뜻이다. 둘을 하나로 합치면 접수에 성공한 것이 송금에 성공한 것처럼 표시된다.

디자인과 접근성

• 상태 변화는 polite 라이브 영역으로 알린다. Failed로 바뀔 때만 assertive로 알린다
• 색 대비는 두 테마 모두 WCAG AA를 충족한다. 측정값은 Transfer components의 기준 표에 있다
• 의미는 텍스트 라벨이 전달하므로 점에는 aria-hidden="true"를 붙인다
• 상태 텍스트는 문장형 대소문자로 쓴다 (예: "COMPLETED"가 아니라 "Completed")
• 상태 타임라인은 순서가 있는 진행이므로 role="list"를 붙인 시맨틱 <ol>을 쓴다
• 진행 중인 타임라인 단계에는 aria-current="step"을 쓴다
• 깜빡이는 애니메이션은 prefers-reduced-motion 설정을 따른다

변화 알리기

사용자가 보고 있는 동안 상태가 바뀌면 polite로 알린다. 이때 새 상태만 말하지 말고 어떤 송금인지 함께 말한다("Transfer to Maria Santos is now completed"). 송금 여섯 건이 있는 목록에서 "Completed"만 들으면 어느 송금 이야기인지 알 수 없다.

실패는 assertive로 알린다. 사용자가 다음에 할 일을 바꿔야 하는 상태 변화는 실패뿐이다.

오프라인 상태

앱이 오프라인이면 캐시에 저장된 상태를 경과 시간과 함께 보여 준다: "Completed · as of 3 min ago". 시각 없이 캐시된 상태를 보여 주는 것이 가장 나쁜 경우다. 오래된 "Pending"과 지금의 "Pending"은 똑같아 보이지만 뜻이 다르다.

알려진 공백

• 상태별 예상 소요 시간을 언급은 하지만, 송금 경로(corridor)별로 정의하지는 않았다.
• 사용자가 이전 상태를 이미 본 뒤에 상태가 뒤로 바뀌는 경우(Sent → Failed)의 패턴이 문서화되지 않았다.
• 최종 상태 알림의 카피가 정해지지 않았다.