로그인 · 회원

매뉴얼 · docs/login.md

체크포인트

라벨 연결 · 비밀번호 보기(.btn-pw-view) · autocomplete · 오류는 필드/role="alert" · 캡차·약관·세션 만료까지 키보드로 조작

로그인 폼

autocomplete="username" / current-password · 제출 데모는 로딩 후 토스트

* 소셜이 새 창·외부 IdP면 title + .dn(새 창)을 붙이세요.

로그인 실패 · 필드 오류

전체 오류는 .alert--error · 필드는 aria-invalid + .field-msg

계정 잠금

비밀번호 오류가 반복되어 계정이 잠겼습니다. 비밀번호 찾기로 잠금을 해제해 주세요.

아이디 찾기

비밀번호 찾기 · 재설정

인증 후 새 비밀번호는 autocomplete="new-password" · 확인 필드 분리

회원가입 (약관 → 정보 → 완료)

단계 UI는 step.html 패턴 · 아래는 가입용 약관·입력 묶음

가입 완료

회원가입이 완료되었습니다. 로그인한 뒤 서비스를 이용해 주세요.

로그인 하러 가기

자동입력 방지 (캡차)

이미지 alt · 새로고침 · 상태 aria-live · 입력 라벨 필수

자동입력 방지 문자 이미지

* 데모 이미지: media/captcha-demo.svg · 실서비스는 서버 발급 이미지·토큰 사용

비밀번호 변경 (로그인 후)

로그인 필요 · 세션 만료 · 로그아웃

로그인이 필요합니다

이 페이지는 로그인 후 이용할 수 있습니다.

로그인 회원가입

* 모달: alertdialog · 상세는 popup.html

하지 말 것

  • placeholder만으로 아이디·비밀번호 라벨 대체
  • 비밀번호 보기 없이 입력만 제공(모바일·저시력에 불리)
  • 로그인 실패를 토스트만으로 알리고 폼에 오류 연결 없음
  • 캡차 이미지에 의미 있는 alt·대체 수단 없음
  • 약관 동의 체크만 두고 전문을 키보드로 볼 수 없음
  • 세션 만료를 자동 리다이렉트만 하고 고지 없음
TOP