인증 코드 UI 디자인: 입력·재전송·오류 복구 설계

인증 코드 화면은 네 가지를 분명히 알려 줘야 합니다. 코드를 어디로 보냈는지, 어떻게 입력하는지, 입력 뒤 무엇이 일어나는지, 코드가 도착하지 않거나 더 이상 유효하지 않을 때 어떻게 해결하는지입니다. 전체 코드를 한 번에 입력할 수 있는 하나의 논리적 입력란에서 출발하세요. 수신 주소 수정, 재전송, 오류 처리도 화면을 다 만든 뒤 작은 링크로 덧붙이지 말고 같은 흐름 안에서 설계해야 합니다.

예제로 새 구성원이 팀 공간에 들어가기 전에 이메일을 인증하는 프로젝트 작업 공간을 설계해 보겠습니다. 코드는 6자리이며 예제 값은 024681입니다. 맨 앞의 0도 중요합니다. 계산할 수량이 아니라 그대로 입력해야 하는 문자열이기 때문입니다. Pixso의 인터페이스 디자인 작업 공간에 관련 화면을 연결하면 발송 메시지, 입력란, 인증 후 이동할 곳을 함께 검토할 수 있습니다.

코드를 요구하기 전에 수신 주소 보여 주기

‘이메일 인증’처럼 목적이 분명한 제목과 ‘m***@studio.example로 보낸 6자리 코드를 입력하세요’라는 짧은 안내를 사용합니다. 제목은 지금 하는 일을, 주소는 열어야 할 받은편지함을 알려 줍니다. 가까운 곳에 ‘이메일 변경’ 동작도 보이게 두세요.

주소를 얼마나 공개할지는 상황에 따라 정합니다. 가입 중인 사람은 방금 입력한 주소에 오타가 있는지 확인해야 하므로 지나친 마스킹이 오히려 수정을 방해할 수 있습니다. 반대로 여러 사람이 보는 화면이나 계정 복구 과정에서는 더 많은 부분을 가릴 필요가 있을 수 있습니다. 두 작업에 반드시 같은 표시 규칙을 적용할 이유는 없습니다.

인증 메시지 자체도 알아보기 쉬워야 합니다. 어느 작업 공간에서 보냈으며 왜 코드를 받았는지 설명하세요. 사용자가 찾는 코드보다 홍보 문구가 더 눈에 띄어서는 안 됩니다. 화면에서 ‘6자리 인증 코드’라고 했다면 이메일에서는 같은 값을 ‘비밀번호’나 ‘초대 번호’라고 부르지 마세요.

수신 주소 변경은 별도의 경로입니다. 가입에 필요한 기존 정보를 유지한 채 주소를 수정할 수 있는 화면으로 돌아가고, 바뀐 주소에 대해 다시 인증을 요청해야 합니다. 이전 주소로 보낸 코드가 새 주소의 인증까지 완료하게 해서는 안 됩니다.

코드 전체를 하나의 입력값으로 다루기

하나의 입력란은 기본 선택으로 적합합니다. 전체 값을 입력하고 선택하고 붙여 넣고 수정하는 방식이 익숙하기 때문입니다. 화면을 여섯 칸으로 나눠 보여 줄 수는 있지만 사용자가 서로 다른 텍스트 여섯 개를 관리하게 만들어서는 안 됩니다.

web.dev의 일회용 코드 입력 가이드(영문)는 숫자로 된 코드도 텍스트로 처리하고, 알맞은 숫자 입력 모드와 일회용 코드 자동 완성 힌트를 제공하도록 권장합니다. 이는 개발자에게 전달할 구현 조건이지 사각형 여섯 개를 그리면 생기는 기능이 아닙니다. 브라우저 지원 방식은 다르며 SMS 전용 동작이 이메일 코드의 자동 입력까지 보장하지는 않습니다.

예제의 024681을 붙여 넣었을 때는 여섯 글자가 그대로 남아야 합니다. 숫자 컨트롤이 이를 24681로 바꾸면 코드를 바꾼 것입니다. 천 단위 구분 기호, 더하기·빼기 버튼, 계산용 서식은 적용하지 마세요.

칸이 나뉜 모양을 사용한다면 일상적인 편집 동작부터 확인합니다. 붙여 넣기로 전체 코드가 채워지고, Backspace 키가 예상대로 동작하며, 작은 칸을 일일이 클릭하지 않고도 숫자를 선택해 바꿀 수 있어야 합니다. 스크린 리더가 설명 없는 입력란 여섯 개를 읽게 하지 말고, 하나의 논리적 입력란에 접근 가능한 이름을 연결하세요.

입력과 수정을 방해하지 않기

입력란 라벨은 ‘인증 코드’로 정할 수 있습니다. 필요한 자리 수는 계속 보이게 두되 오류와 구별하세요. 입력을 마치기 전의 ‘6자리를 모두 입력하세요’는 안내이지 코드가 틀렸다는 판정이 아닙니다.

세 자리만 입력한 상태에서 ‘잘못된 코드입니다’라고 표시하지 마세요. 아직 완성된 값을 서비스에 보내 확인하지 않았습니다. 사용자가 입력을 마치도록 두고, 미완성 값을 실제로 제출했을 때 입력란 가까이에 무엇이 부족한지 설명합니다.

전체 코드 붙여 넣기를 허용하세요. 복사한 값 앞뒤에 공백이 있다면 제거해 실수를 줄일 수 있지만, 실제 허용 문자와 길이 검증은 여전히 필요합니다. 빠진 숫자를 추측하거나 중간 문자를 몰래 삭제하거나 다른 코드를 맞는 것처럼 변환해서는 안 됩니다.

이 예제에서는 ‘이메일 인증’ 버튼으로 제출합니다. 정해진 길이를 채우면 자동 제출하는 서비스도 있지만, 이 방식에는 처리 중 상태와 확실한 수정 경로가 필요합니다. 명시적인 버튼은 입력값을 살펴볼 시간을 주고 갑작스러운 화면 이동을 줄여 줍니다.

인증 요청을 처리하는 동안에는 중복 제출을 막고 입력 내용을 안정적으로 유지하세요. 여섯 자리가 채워졌다는 이유만으로 작업 공간으로 이동해서는 안 됩니다. 다음 화면은 서비스에서 확인된 결과를 받은 뒤 보여 줘야 합니다.

잘못된 코드와 서비스 연결 실패 구별하기

모든 응답을 빨간 입력란으로 표현하면 서로 다른 실패가 똑같아 보입니다. 확인된 조건마다 도움이 되는 다음 행동을 제시하세요. 휴대전화에서도 코드와 해결 동작이 함께 보이도록 문구는 짧게 작성합니다.

확인된 상황	안내 문구 예시	다음 행동
제출한 값이 완성되지 않음	6자리 코드를 입력하세요.	입력 중인 코드를 마저 작성하기
서비스가 코드를 거부함	코드가 일치하지 않습니다. 확인 후 다시 시도하세요.	코드를 수정하거나 다시 입력하기
서비스에서 만료를 확인함	코드가 만료되었습니다. 새 코드를 요청하세요.	새 메시지 요청하기
인증 요청이 서비스에 도달하지 못함	코드를 확인하지 못했습니다. 연결 상태를 확인하고 다시 시도하세요.	코드가 틀렸다고 단정하지 않고 재시도하기

서비스가 실제로 구별해 주는 조건만 구분하세요. 만료와 다른 유효성 오류를 하나의 응답으로 돌려준다면, 더 정확한 진단을 지어내지 말고 두 경우를 포함하는 문구를 사용합니다. 사용자가 보지 못하는 서버 상태를 길게 분류하는 것이 아니라 문제를 해결할 경로를 제시하는 것이 목적입니다.

코드가 일치하지 않을 때는 쉽게 바꿀 수 있게 합니다. 메시지와 비교하기도 전에 입력값을 지우지 마세요. 보안 정책에 따라 값을 지우거나 단계를 다시 시작해야 한다면, 갑자기 초기화하는 대신 이어서 해야 할 일을 흐름 안에서 설명해야 합니다.

재전송 요청과 실제 도착을 구분하기

다른 메시지를 요청하는 행동이라면 ‘다시 시도’보다 ‘코드 다시 보내기’가 구체적입니다. 재전송 요청에도 처리 중 상태와 결과가 필요합니다. 요청이 성공했다고 해서 이메일을 이미 받았다는 뜻은 아닙니다.

전송에 실패했을 때는 실제 서비스 정책에 따라 다시 요청할 방법을 남겨 두세요. 시간 초과가 났는데 버튼을 ‘전송 완료!’로 바꾸거나, 요청되지 않았다는 사실을 알기까지 근거 없는 타이머를 기다리게 해서는 안 됩니다.

재전송 대기 시간은 실제 제한에 맞아야 합니다. 남은 시간을 분명히 보여 주고 시간이 지나면 다시 사용할 수 있게 하세요. 재전송 대기 시간과 코드 유효 시간은 서로 다릅니다. 하나는 메시지를 다시 요청할 수 있는 시점을, 다른 하나는 코드를 받아들일 수 있는 기간을 정합니다. 둘 다 모호하게 ‘남은 시간’이라고 부르지 마세요.

새 코드를 요청하면 이전 코드가 어떻게 되는지도 정해야 합니다. 가장 최근 코드만 유효하다면 재전송 확인 메시지 가까이에 알립니다. 이전 코드가 만료 전까지 유효하다면 버리라고 안내하지 마세요. 화면과 이메일, 서비스의 규칙이 일치해야 합니다.

대체 경로도 계속 보여 주세요. 주소를 잘못 입력한 사람에게 필요한 것은 반복적인 재전송이 아니라 ‘이메일 변경’입니다. 해당 받은편지함에 접근할 수 없는 사람에게는 서비스가 지원하는 계정 도움 경로가 필요할 수 있습니다. 실제로 지원하지 않는 인증 수단을 제공하는 것처럼 표시해서는 안 됩니다.

확인된 결과를 알리고 원래 작업으로 연결하기

이메일 인증에 성공하면 결과를 분명히 알리고 팀 작업 공간으로 이어 줍니다. 이 예제에서는 ‘이메일 인증 완료’와 ‘작업 공간으로 계속하기’면 충분합니다. 이메일 인증만으로 신원의 모든 측면을 확인했다거나 계정이 안전해졌다고 주장하지 마세요.

다른 기기에서 인증 메시지를 열어도 원래 화면은 사용할 수 있어야 합니다. 특정 받은편지함 탭이 계속 열려 있거나 특정 크기의 두 창 사이에서 복사해야만 작동하는 흐름은 피하세요. 사용자가 돌아왔을 때 수신 주소와 해결 동작이 남아 있어야 합니다.

서비스가 지원한다면 이미 완료된 인증도 이해할 수 있는 결과로 처리합니다. 이유를 알 수 없는 코드 오류 대신 ‘이미 인증된 이메일입니다’라고 알리고 다음 단계로 이어 줄 수 있습니다. 반대로 확인되지 않은 네트워크 응답을 성공처럼 보여 줘서는 안 됩니다.

비밀번호 복구는 다른 작업입니다. 가입 중 이메일을 확인하는 것이 아니라 잊어버린 비밀번호를 바꾸려는 경우에는 비밀번호 재설정 UX 가이드에서 요청과 링크를 통한 별도 흐름을 살펴볼 수 있습니다. 인증 메일이 늦게 온다는 이유만으로 사용자를 비밀번호 재설정 경로로 보내지 마세요.

Pixso에서 전체 인증 흐름 프로토타이핑하기

주소 입력 화면, 코드 입력 화면, 발송 이메일을 하나의 디자인 파일에 배치합니다. 입력 미완성, 코드 불일치, 만료, 재전송 실패, 인증 완료 상태를 각각 별도 프레임으로 만드세요. 예제 작업 공간 이름과 이메일 주소는 모든 화면에서 일치시킵니다.

기본 상태와 오류 상태에 같은 입력 컴포넌트를 사용하고, 메시지 영역은 번역에 따라 늘어날 수 있게 구성합니다. 좁은 화면에서도 주요 버튼과 재전송 경로가 키보드에 가려지지 않고 쉽게 누를 수 있어야 합니다. 짧은 영어 문구에 맞춘 고정 높이 카드가 다른 언어의 설명을 잘라 버릴 수 있습니다.

코드를 붙여 넣어 인증하기, 잘못 입력한 주소 수정하기, 만료된 코드로부터 복구하기라는 세 흐름을 검토하세요. 검토자가 ‘코드 다시 보내기’를 사용하기 전에 무엇이 일어날 것으로 생각하는지 물어봅니다. 그 예상이 서비스 규칙과 다르면 문구나 동작을 수정합니다.

개발자에게 입력 목적, 코드 길이, 붙여 넣기 동작, 서비스별 결과를 함께 전달하세요. 프로토타입은 의도한 흐름을 설명하지만 실제 코드를 검증하거나 인증 규칙을 집행하지는 않습니다. 어느 메시지와 값, 동작이 아직 유효한지 추측하지 않고 필요한 단계를 끝낼 수 있도록 만드는 것이 핵심입니다.