핀테크 앱 UI 디자인: 금융 작업을 명확하고 차분하게 만들기

잔액을 맥락 속에서 읽기 쉽게 만들기

큰 숫자만으로는 의미가 분명하지 않습니다. 어느 계좌의 금액인지 밝히고 익숙한 기호나 코드로 통화를 표시하세요. 제품이 현재 잔액, 사용 가능 금액, 보류 중인 금액, 투자 금액을 구분한다면 그 개념에 직접 레이블을 붙이고 필요할 때 설명하세요. 서로 다른 잔액 유형을 거의 같은 스타일과 정의 없이 제시하지 마세요.

맥락에는 금액이 마지막으로 업데이트된 시점이나 아직 처리 중인 활동도 포함될 수 있습니다. 장식적인 숫자를 더하기보다 화면을 해석하는 데 도움이 되는 세부 정보를 고르세요. 숫자 형식을 일관되게 쓰고 숫자, 소수점 구분 기호, 음수 기호를 쉽게 구별할 만큼 간격을 두세요. 계좌 이름이 길다면 색이나 아이콘에만 의존하지 말고 계좌를 구별할 수 있는 텍스트를 충분히 남기세요.

• 금액 가까이에 명확한 계좌 레이블과 통화를 표시하세요.
• “사용 가능”이나 “보류 중” 같은 전문 용어를 쉬운 말로 설명하세요.
• 큰 글자와 보조 기술을 사용할 때도 같은 금액과 상태를 이해할 수 있게 하세요.

거래 상태를 변화하는 상태로 보여 주기

거래는 내역 목록의 한 행이 아니라 과정입니다. 적절한 경우 각 항목에 간결한 상태, 날짜, 금액, 상대방 또는 목적지를 표시하세요. 상태 레이블은 텍스트로 보여 주세요. 색이나 아이콘은 이를 보강할 수 있지만 그 자체로 의미를 전달해서는 안 됩니다. 제품의 실제 상태에 따라 대기 중, 완료, 거절, 확인 필요 활동을 구분하세요.

예를 들어 Alex에게 45.00 EUR를 보내는 가상의 송금은 처음에 “11월 4일 예약됨”, 그다음 “처리 중”, 나중에 “완료”로 표시될 수 있습니다. 제출 후 연결 시간이 초과되었다면 근거 없이 성공이나 실패를 확신해서 알리지 마세요. 아직 상태를 확인할 수 없다고 설명하고 다시 확인하는 방법과 재시도가 또 다른 요청을 만들 수 있는지 분명히 알려 주세요. 정확한 문구와 이용 가능한 행동은 제품의 실제 거래 동작에 달려 있습니다.

피할 수 있는 혼란을 줄이는 금융 양식 설계하기

작업에 필요할 때 정보를 요청하고, 관련 필드를 묶어 양식이 자연스러운 순서로 읽히게 하세요. “받는 사람”이나 “금액”처럼 항상 보이는 레이블을 사용하세요. 자리표시자는 예시이지 레이블의 대체물이 아닙니다. 필드에 특정 형식이 필요하다면 입력 전에 밝히세요. 예를 들어 금액에 센트를 입력할 수 있는지, 필드에 어떤 식별자를 넣어야 하는지 설명하세요. Apple의 데이터 입력 지침은 요청하는 정보를 명확히 하고, 불필요한 입력을 줄이며, 사용자가 값을 제공할 때 유효성을 검사하도록 권장합니다.

정보에 맞는 입력 컨트롤을 선택하고 사용자가 입력을 수정할 수 있게 하세요. 선택 필드는 선택 사항임을, 필수 필드는 필수임을 눈에 띄게 표시하세요. 선택에 결과가 따른다면 짧은 코드에서 의미를 추측하게 하지 말고 쉬운 말로 선택지를 설명하세요. 화면이 재배치되거나 확대되어도 이해할 수 있도록 필드 안내를 컨트롤 가까이에 두세요.

유용한 검토 및 확인 단계 제공하기

중요한 행동 전에 사용자가 제출하려는 내용을 요약하세요. 출처, 목적지, 금액, 날짜, 그리고 흐름과 관련해 표시되는 수수료나 처리 시점을 포함하세요. 결정에 가장 중요한 정보를 함께 놓고 수정 경로를 쉽게 찾게 하세요. 주요 행동에는 모호한 “계속” 대신 “송금 예약”처럼 행동을 설명하는 문구를 사용하세요.

확인 화면은 “무슨 일이 일어났나요?”와 “이제 무엇을 할 수 있나요?”에 답해야 합니다. 참조 번호나 영수증 화면은 나중에 조회할 때 도움이 됩니다. 버튼을 눌렀다는 사실만으로 실제 작업이 성공했다고 취급하지 마세요. 인터페이스는 제품이 반환한 실제 결과를 반영해야 합니다.

• 요약 내용이 입력한 값과 선택한 옵션과 일치하게 하세요.
• 가능한 경우 뒤로 가기와 수정 동작에서 사용자의 작업을 보존하세요.
• 제출 후 요청이 접수되었는지, 처리 중인지, 결과가 확정되었는지 알리세요.
• 응답이 불확실하다면 다시 제출하도록 안내하기 전에 현재 상태를 확인하는 방법을 설명하세요.

접근성 있는 오류 및 업데이트 만들기

입력 오류가 감지되면 해당 필드를 밝히고 문제를 텍스트로 설명하세요. “잘못된 금액”보다 허용되는 형식이나 빠진 값을 설명하는 메시지가 유용합니다. 유효한 입력을 보존해 한 가지 문제를 고치려고 처음부터 다시 시작하지 않게 하세요. W3C의 WCAG 2.2 지침은 감지된 입력 오류를 식별하고 설명하며, 입력이 필요할 때 레이블이나 안내를 제공하도록 요구합니다.

상태 업데이트도 중요합니다. 포커스를 이동하지 않고 페이지가 “처리 중”에서 “완료”로 바뀐다면 보조 기술이 그 변경을 알아낼 수 있게 하세요. WCAG 2.2는 맥락 변경 없이 결과, 대기, 진행 또는 오류를 전달하는 변화를 상태 메시지로 설명합니다. 경고는 중요도에 맞게 사용하세요. 시각적으로 새로고침될 때마다 방해하지 말고 의미 있는 변경을 알리세요.

실제 구현된 인터페이스에서 대비, 글자 크기 조절, 키보드 또는 스위치 접근, 화면 읽기 프로그램의 이름을 확인하세요. 명확한 제목과 컨트롤 레이블을 사용하고, 성공, 오류 또는 거래 방향을 색만으로 나타내지 마세요. Apple의 디자인 원칙은 명확한 피드백과 실수 복구를 강조합니다. 이는 유용한 목표이지만 실제 접근성은 완전한 제품을 평가해야 확인할 수 있습니다.

핀테크 인터페이스 검토 목록

시작 잔액부터 최종 상태까지 일반적인 작업을 따라가 보세요. 평범한 경로, 수정 과정, 느린 연결 같은 중단 상황을 확인하세요. 라이브러리의 관련 모바일 화면을 비교해 여러 인터페이스가 정보와 행동을 어떻게 배치하는지 살펴본 다음, 자체 흐름을 제품의 실제 동작에 비추어 평가하세요.

• 잔액이 어느 계좌와 통화를 나타내는지 알 수 있나요?
• 보류 중과 완료 상태를 명확한 이름과 텍스트로 제시하나요?
• 모든 필드에 눈에 보이는 레이블과 필요한 형식 안내가 있나요?
• 제출하기 전에 목적지, 금액, 처리 시점을 검토할 수 있나요?
• 오류가 문제를 밝히고 실용적인 수정 방법을 제시하나요?
• 색, 정확한 시력, 포커스 이동에 의존하지 않고도 업데이트를 알 수 있나요?
• 결과가 불확실할 때 재시도 전에 확인하는 방법을 설명하나요?