비밀번호 재설정 UX: 계정 복구부터 로그인까지 설계하기

비밀번호 재설정 화면은 요청이 접수됐는지, 어떤 링크를 열어야 하는지, 새 비밀번호를 저장한 뒤 무엇을 해야 하는지 분명하게 알려 줘야 합니다. 서비스 화면과 이메일 받은편지함을 오가는 하나의 짧은 여정으로 설계하고, 돌아오는 지점마다 다음 행동을 보여 주세요.

프로젝트 관리자가 납품 일정을 확인하려고 워크스페이스를 열었는데 비밀번호가 기억나지 않는 상황을 생각해 보겠습니다. 이 사람이 원하는 것은 계정 관리가 아니라 일정 확인입니다. 아래에서는 재설정 요청부터 일반 로그인까지 이어지는 흐름에 링크 만료와 재요청 상황을 함께 넣어 봅니다.

복구 경로는 로그인 페이지의 입력·인증·복귀 흐름과 함께 설계해야 합니다. 재설정 화면만 잘 만들어도 ‘비밀번호를 잊으셨나요?’ 링크를 찾기 어렵거나 로그인 뒤 원래 목적지로 돌아가지 못하면 작업은 계속 끊깁니다.

복구 경로를 쉽게 찾을 수 있게 하세요

‘비밀번호를 잊으셨나요?’ 링크는 로그인에 어려움을 겪는 사람이 찾기 쉬운 비밀번호 입력란 근처에 둡니다. 오류가 발생하기 전에도 보여 주세요. 도움말을 보기 위해 일부러 한 번 실패해야 한다면 불필요한 단계가 생깁니다. 기본 ‘로그인’ 버튼과 구분되는 텍스트 링크를 쓰되, 흐릿하거나 누르기 어렵게 만들지는 마세요.

재설정 페이지에는 구체적인 제목, 입력해도 사라지지 않는 이메일 레이블, 하나의 주요 행동이 필요합니다. 프로젝트 워크스페이스의 첫 화면은 다음처럼 구성할 수 있습니다.

비밀번호 재설정
이 워크스페이스에서 사용하는 이메일 주소를 입력해 주세요.
이메일 주소
재설정 링크 보내기
로그인으로 돌아가기

로그인 화면에서 이메일을 이미 입력했다면 그 값을 이어 받아 다시 입력하는 수고를 줄일 수 있습니다. 다만 수정할 수 있어야 합니다. 주소 오타 때문에 로그인이 안 됐을 수도 있기 때문입니다. 입력값이 비었거나 이메일 형식이 잘못됐다면 해당 필드 옆에서 문제를 설명하세요. 형식 오류를 ‘계정을 찾을 수 없습니다’로 안내해서는 안 됩니다.

워크스페이스 비밀번호 대신 회사의 인증 시스템을 쓰는 팀도 있습니다. 로그인 진입점에서 이 경로를 구분해 주세요. 실제로 지원한다면 ‘회사 계정으로 로그인’ 같은 링크가 이 서비스에서 관리하지 않는 비밀번호를 재설정하라고 안내하는 것보다 낫습니다. 지원되지 않는 경로를 추가해 또 다른 막다른 화면으로 보내지는 마세요.

계정의 존재가 아니라 요청 접수를 안내하세요

제출 뒤에는 방금 한 행동에 대한 응답이 필요합니다. 그러나 ‘회원님의 계정으로 링크를 보냈습니다’라는 문구는 서비스가 드러내면 안 되는 정보까지 확인해 줄 수 있습니다. OWASP의 비밀번호 재설정 지침(영문)은 계정 존재 여부와 관계없이 일관된 응답을 사용하고, 만료 시간이 있는 일회용 토큰을 발급하며, 재설정 뒤 자동 로그인 대신 일반 로그인 절차를 거치도록 권고합니다. 이런 조건을 지키면서도 다음 행동은 구체적으로 안내할 수 있습니다.

계정이 있는 경우와 없는 경우에 같은 확인 문구를 사용합니다.

받은편지함 확인
이 주소로 등록된 계정이 있다면 비밀번호 재설정 링크를 받을 수 있습니다.
이 페이지를 열어 둔 채 받은편지함을 확인해 주세요.
다른 이메일 사용하기
로그인으로 돌아가기

이 안내는 특정 계정이 존재한다고 확인해 주지 않으면서 다음 행동을 알려 줍니다. 사용자가 오타를 발견할 수 있도록 방금 입력한 주소를 보여 줄 수는 있지만, 등록된 계정과 일치했다는 인상을 주어서는 안 됩니다. 주소를 화면에 표시하는 방식도 서비스의 개인정보 노출 맥락에 맞춰 정하세요.

‘이메일 요청 완료’와 ‘비밀번호 변경 완료’는 다른 결과입니다. 요청 단계에서 완료 표시와 함께 ‘모든 준비가 끝났습니다’라고 쓰지 마세요. 아직 이메일을 열지도, 새 비밀번호를 정하지도 않았고 원래 하려던 작업 역시 막혀 있습니다.

재시도 안내도 구체적으로 만듭니다. ‘스팸함을 확인해 주세요’는 도움이 될 수 있지만 유일한 해결책이어서는 안 됩니다. 주소를 고치거나, 허용되는 시점에 다시 링크를 요청하거나, 적절한 로그인 방식으로 돌아갈 수 있어야 합니다. 재발송 대기 시간이 있다면 실제 남은 시간과 이유를 표시하세요. 다른 서비스에 있다는 이유만으로 임의의 타이머를 넣지는 마세요.

이메일과 도착 화면을 하나의 경로로 연결하세요

사용자는 이제 서비스 화면을 떠나 예전 복구 메일도 섞여 있는 받은편지함으로 이동합니다. 이메일도 복구 흐름의 일부로 설계하세요. 제목, 서비스 이름, 행동 버튼을 보고 긴 주소를 분석하지 않아도 필요한 메일을 알아볼 수 있어야 합니다.

예시 워크스페이스라면 메일 제목을 ‘워크스페이스 비밀번호 재설정’, 버튼을 ‘새 비밀번호 설정’으로 정할 수 있습니다. 어느 서비스에서 보낸 메일인지와 본인이 요청하지 않았을 때 어떻게 해야 하는지도 알려 주세요. 판촉 메시지는 넣지 않는 편이 좋습니다. 계정 복구에 집중해야 할 때 주의를 분산시키기 때문입니다.

유효 기간을 표시한다면 실제 정책과 일치해야 합니다. ‘곧 만료됩니다’보다 정확한 기간이나 시각이 유용하지만, 틀린 값을 정밀하게 보여 주는 것은 더 나쁩니다. 링크를 연 브라우저 화면도 이메일과 같은 서비스 이름과 시각적 정체성을 사용해 전혀 다른 서비스의 로그인 요청처럼 보이지 않게 합니다.

첫 번째 메일이 늦게 도착해 두 번째 메일을 요청하는 경우도 고려하세요. 실제 재설정 정책에 따라 어떤 링크가 계속 유효한지 정하고, 요청 확인 화면과 이메일의 설명을 맞춥니다. 새 링크를 요청해도 이전 링크가 무효화되지 않는다면 무조건 ‘가장 최근 이메일을 사용하세요’라고 쓰지 마세요.

만료되거나 이미 사용한 링크에도 다음 행동을 주세요

복구 링크를 한참 뒤에 열거나 비밀번호를 바꾼 후 다시 여는 일은 충분히 예상할 수 있습니다. 사용할 수 없는 링크를 모두 일반 오류 페이지로 보내면 사용자는 계정을 영영 못 쓰게 된 것인지 알 수 없습니다.

서비스가 확인한 상태	도움이 되는 안내	다음 행동
유효한 링크	‘새 비밀번호를 설정해 주세요.’	새 비밀번호 입력란으로 이동합니다.
만료된 링크	‘재설정 링크가 만료되었습니다. 계속하려면 새 링크를 요청해 주세요.’	재설정 링크를 다시 요청합니다.
이미 사용한 링크	‘이미 사용한 재설정 링크입니다.’	로그인하고, 필요하면 다시 재설정할 수 있게 합니다.
유효성을 확인하지 못한 링크	‘재설정 링크를 확인하지 못했습니다.’	상황에 따라 다시 시도하거나 새 링크를 요청합니다.

만료와 사용 완료는 서비스가 확실하게 구분할 수 있을 때만 별도로 안내하세요. 서버가 하나의 유효하지 않은 링크 상태만 반환한다면 ‘더 이상 사용할 수 없는 재설정 링크입니다’처럼 사실에 맞게 묶어 설명합니다. 중요한 것은 시스템도 모르는 원인을 자세히 추측하는 일이 아니라, 이해할 수 있는 다음 행동을 제공하는 일입니다.

주요 버튼은 구체적으로 이름 붙이세요. 같은 링크를 다시 여는 것이 아니라 이메일을 새로 요청하는 동작이라면 ‘다시 시도’보다 ‘새 링크 요청’이 명확합니다. 이미 사용한 링크에는 ‘로그인’이 유용할 수 있습니다. 다른 탭에서 비밀번호를 성공적으로 바꿨을 가능성이 있기 때문입니다.

새 비밀번호를 한 번에 설정할 수 있게 도우세요

새 비밀번호 화면은 제출 전에 실제 비밀번호 조건을 보여 줘야 합니다. 입력란 가까이에 두고 입력 중에도 유지하세요. 숫자, 대문자, 특수문자의 조합을 디자이너가 임의로 정하는 것이 아니라 서비스가 실제로 적용하는 정책을 설명해야 합니다.

레이블은 ‘새 비밀번호’로 씁니다. 확인 필드가 필요하다면 ‘새 비밀번호 확인’이라고 표시하고, 값이 다를 때 두 필드를 모두 지우지 않은 채 불일치를 설명합니다. 보기·숨기기 버튼은 입력을 확인하는 데 도움이 됩니다. 보조 기술에서 읽을 수 있는 명확한 이름을 주고 현재 상태도 구분되게 하세요. 실제 구현에서는 비밀번호 관리자 입력을 지원해 직접 옮겨 적어야만 하는 흐름을 피합니다.

버튼을 누르면 비밀번호가 바뀐다면 ‘계속’보다 ‘새 비밀번호 저장’이라고 쓰세요. 처리 중에는 폼의 크기를 유지하고 저장 중임을 알리며 중복 제출을 막습니다. 서버가 명확하게 거부한 경우에는 모든 실패를 같은 일반 오류로 처리하지 말고 고칠 수 있는 문제를 알려 주세요.

결과를 확인하지 못한 상황은 다르게 안내해야 합니다. 제출 후 연결이 끊겼다고 해서 비밀번호가 바뀌지 않았다고 단정할 수는 없습니다. 확인되지 않았다면 ‘저장되지 않았습니다. 다시 시도하세요’라고 쓰지 마세요. ‘비밀번호 변경 여부를 확인하지 못했습니다’라고 안내하고, 서비스가 제공하는 상태 확인과 복구 방식에 따라 일반 로그인이나 다시 재설정하는 경로를 제공할 수 있습니다.

단계를 짧게 보이게 하려고 자동 로그인을 추가하지 마세요. 변경 완료를 명시한 뒤 평소의 로그인으로 이어 가면 ‘비밀번호가 바뀌었다’와 ‘계정에 접속한다’의 경계가 분명해집니다.

로그인 후 원래 하려던 작업으로 돌아가게 하세요

완료 화면은 간결하게 구성합니다.

비밀번호 변경 완료
새 비밀번호로 로그인해 워크스페이스로 돌아가세요.
로그인

다른 로그인 세션의 처리 방식도 이 안내와 일치해야 합니다. 다른 기기의 세션을 종료할지 선택하게 한다면 범위를 분명히 쓰세요. ‘다른 세션에서 로그아웃’과 ‘모든 세션에서 로그아웃’은 다른 결과입니다. 서비스가 항상 해당 세션들을 종료한다면 결과를 설명해야지, 실제 동작을 바꿀 수 없는 스위치를 보여 줘서는 안 됩니다.

일반 로그인 후에도 목적지가 존재하고 접근 권한이 있다면 프로젝트 관리자를 납품 일정 화면으로 돌려보내세요. 더 이상 접근할 수 없다면 목적지 문제를 따로 설명합니다. 사라진 프로젝트나 바뀐 권한을 성공한 비밀번호 복구의 오류처럼 안내하지 마세요.

다른 기기에서 이메일을 여는 경우도 넣어 봅니다. 그 기기에서는 재설정이 끝났어도 원래 브라우저에는 ‘받은편지함 확인’ 화면이 남아 있을 수 있습니다. 이 화면에는 계속 쓸 수 있는 ‘로그인으로 돌아가기’ 경로가 있어야 합니다. 타이머를 지켜보거나 다른 기기의 변화를 탭이 감지하기만을 기다리게 해서는 안 됩니다.

Pixso에서 전체 복구 경로를 검토하세요

Pixso 디자인 파일에 요청, 받은편지함 확인, 유효한 링크의 새 비밀번호 폼, 링크 만료, 사용한 링크, 변경 완료 화면을 함께 만듭니다. 요청 화면과 링크 도착 화면 사이에는 이메일도 프레임으로 추가하세요. 워크스페이스 이름과 버튼 문구를 일관되게 써야 하나의 서비스 흐름으로 검토할 수 있습니다.

이메일 필드, 비밀번호 필드, 버튼은 필요한 곳에서 재사용 가능한 컴포넌트로 만듭니다. Auto Layout으로 짧은 안내와 긴 번역 문구를 비교하세요. 버튼을 고정 좌표에 두어 글과 겹치게 하지 말고 설명 아래로 이어지게 합니다. 화면 키보드가 차지하는 영역을 고려한 좁은 화면도 함께 준비하세요.

의도한 경로를 프로토타입으로 연결합니다. 첫 검토에서는 팀원에게 계정 접속을 복구하고 일정으로 돌아가도록 요청하세요. 다음에는 만료된 링크를 건네고, 마지막에는 비밀번호 변경에 성공한 뒤 같은 링크를 다시 열었을 때 어떻게 할지 물어봅니다. 화면의 예쁨에 대한 의견보다 다음 행동을 확신하지 못하는 지점을 살펴보세요.

개발자에게 전달할 때는 어떤 서버 응답이 각 화면을 만들고, 버튼이 무엇을 실행하며, 로그인 뒤 어디로 가는지 설명합니다. 키보드 포커스와 보조 기술 안내도 관련 상태 옆에 기록하세요. 프로토타입은 이 요구사항을 전달하고, 실제 서비스는 복구 규칙을 적용해야 합니다.

좋은 비밀번호 재설정 흐름은 모든 단계를 축하할 필요가 없습니다. 요청을 정확히 확인해 주고, 사용할 수 없는 링크를 설명하고, 변경 완료를 알린 뒤 업무로 돌아가는 확실한 길을 주면 됩니다.

Pixso에서 계정 복구 흐름 설계하기