모바일 로그인 및 회원가입 디자인: 계정 단계를 명확하게 만들기

계정이 유용해지는 순간 고르기

사용자가 하러 온 일에서 시작하세요. 핵심 경험을 계정 없이 이용할 수 있다면 먼저 둘러보게 하고, 저장된 설정, 여러 기기에서의 접근, 공동 작업 또는 거래에 필요한 기능에 도달했을 때 로그인을 요청하세요. Apple의 Human Interface Guidelines는 가능한 경우 로그인을 미루고 계정이 필요할 때 이점을 설명하도록 권장합니다.

상황에 맞는 안내는 앱 시작 시 나타나는 장벽보다 이해하기 쉽습니다. 예를 들어 독서 앱에서 제목을 둘러보게 한 뒤 독서 목록을 동기화하려 할 때 계정 생성을 요청할 수 있습니다. 처음부터 계정 생성이 필수라면 입력 필드를 보여 주기 전에 이유를 말하세요. 설명은 구체적이고 적절한 길이여야 합니다. “프로젝트를 저장하고 다른 기기에서 열려면 계정을 만드세요”가 “커뮤니티에 가입하세요”보다 유용합니다.

• 필수 정보와 선택적 프로필 정보를 구분하세요.
• 비회원 결제나 일회성 작업이라면 당장의 가치를 전달한 뒤 계정을 만들 수 있는지 고려하세요.
• 인증에 성공하면 사용자가 원래 완료하려던 행동으로 돌아가게 하세요.

로그인 선택지를 명확하고 알아보기 쉽게 만들기

사용자는 새 계정을 만드는지 기존 계정으로 돌아가는지 알 수 있어야 합니다. 두 경로에 다른 레이블을 붙이고 주요 행동을 시각적으로 명확히 하며, 다른 방법은 화면을 복잡하게 만들지 않으면서 비교할 수 있는 곳에 놓으세요. 필요한 경우 제공업체 이름과 플랫폼이 승인한 버튼 표현을 사용하세요. “계속”이라는 일반적인 레이블만으로는 다음 일을 설명할 수 없습니다.

제품에서 지원하고 유지할 수 있는 방법만 제공하세요. 이메일, 패스키 또는 플랫폼 계정 옵션은 대상 사용자에 따라 적합성이 다를 수 있습니다. 어느 한 방법이 모두에게 가장 쉽거나 안전하다고 주장하지 말고 선택지로 제시하세요. 추가로 필요한 정보가 있다면 설명하세요.

재방문 사용자는 어떤 방식으로 로그인했는지 기억하지 못할 수 있습니다. 복구 및 대체 로그인 방법을 찾기 쉽게 하고, 이메일이 다른 방식과 연결되어 있다면 어떻게 할지 설명하세요. 계정 연결 안내는 기존 계정의 접근 권한을 유지하는 데 도움이 됩니다.

사람들이 쓰는 도구와 호환되는 간결한 양식 만들기

계정을 만들거나 이용하는 데 필요한 필드만 요청하세요. 자리표시자 텍스트를 유일한 레이블로 쓰지 말고 항상 보이는 레이블을 사용하고, 적절한 입력 유형과 키보드를 선택하며, 다음 행동을 명확히 하세요. 회원가입에 여러 정보가 필요하다면 관련 필드를 묶고 선택적 설정은 제품에 들어간 뒤로 미루세요.

인증은 자동 완성과 암호 관리자에서 작동해야 합니다. 표준 필드 이름과 의미를 사용하고 자격 증명 자동 입력을 막는 맞춤 동작을 피하세요. 암호 붙여넣기를 막지 마세요. 사용자는 암호 관리자나 다른 도구를 사용할 수 있습니다. WCAG 지침은 브라우저와 제3자 암호 관리자가 로그인 필드를 채울 수 있게 해야 한다고 언급합니다.

기기와 암호 관리자에 따라 동작이 달라질 수 있으므로 지원 플랫폼에서 흐름을 확인하고 수동 수정을 허용하세요. 로그인에 실패한 뒤에도 가능하다면 이메일 주소처럼 유용하면서 민감하지 않은 값은 보존하세요.

• “이메일 주소”처럼 눈에 보이는 레이블과 명확한 암호 레이블을 사용하세요.
• 적절한 경우 암호를 표시하거나 확인할 수 있게 하되 그 컨트롤만이 입력 수정 방법이 되게 하지 마세요.
• 주요 버튼을 필드 가까이에 두고 “계정 만들기”나 “로그인”처럼 행동을 구체적으로 설명하는 레이블을 붙이세요.

실수, 복구, 다음 방문을 고려해 설계하기

유용한 오류 메시지는 영향을 받은 필드나 실패한 단계를 텍스트로 밝히고 계속하는 방법을 알려 줍니다. 이메일 형식이 잘못되었거나 필드가 비어 있는데 “문제가 발생했습니다”만으로는 부족합니다. WCAG 2.2 성공 기준 3.3.1은 감지된 입력 오류를 식별하고 텍스트로 설명하도록 요구합니다. 색이나 아이콘에만 메시지를 맡기지 마세요.

중립적인 말을 쓰고 필드별 안내를 해당 필드 가까이에 두세요. 예를 들어 형식이 잘못된 주소에는 “[email protected] 형식으로 이메일 주소를 입력하세요”라고 가상 문구를 쓸 수 있습니다. 로그인에 실패했다면 “입력한 정보로 로그인할 수 없습니다. 이메일과 암호를 확인하거나 암호를 재설정하세요”라고 안내할 수 있습니다. 오류 메시지에 민감한 계정 정보가 드러나지 않게 하세요. 제품의 개인정보 보호와 악용 방지 요구에 맞는 문구를 선택하세요.

재설정을 요청한 뒤 어떤 일이 일어나는지 설명하고 로그인으로 돌아가는 길을 제공하며 이전에 사용한 방법을 찾도록 도우세요. 다음 방문에서는 로그인 상태를 명확히 보여 주고 계정 설정, 로그아웃, 도움말로 가는 경로를 제공하세요. 앱에서 계정을 만들 수 있다면 계정 삭제 기능도 쉽게 찾게 하세요.

• 오류를 해당 필드와 연결하고 색 없이도 인지할 수 있게 하세요.
• 복구 행동을 로그인 양식 가까이에 두고 불필요하게 처음부터 다시 시작하지 않게 하세요.
• 변경된 이메일 주소와 사용할 수 없는 로그인 방법을 포함해 첫 사용 및 재방문 상태를 모두 검토하세요.

실용적인 계정 흐름 검토

새 사용자, 재방문 사용자, 접근 권한을 복구하는 사용자의 입장에서 흐름을 따라가 보세요. 화면을 맥락 속에서 확인하세요. 모바일 패턴 라이브러리는 팀이 양식의 입력, 레이블, 행동 구성을 비교하는 데 도움이 됩니다.

• 계정이 필수가 아니라면 로그인 전에 유용한 제품 가치를 경험할 수 있나요?
• 계정이 필요한 이유와 필수 정보를 화면에서 설명하나요?
• 회원가입, 로그인, 대체 방법, 계정 복구를 구분할 수 있나요?
• 필드 레이블이 계속 보이고 자동 완성과 붙여넣기로 자격 증명을 입력할 수 있나요?
• 오류가 문제를 텍스트로 밝히고 유용한 입력을 보존하며 다음 단계를 제안하나요?
• 성공 후 시작한 작업으로 돌아가나요?