autocomplete="new-password" vs "current-password"

 

🔑 로그인 => "current-password"

<input type="text" name="username" autocomplete="username">
<!-- 로그인 폼의 password input -->
<input type="password" name="password" autocomplete="current-password">

 

 

🆕 회원가입 또는 비밀번호 변경 => "new-password"

<!-- 회원가입 폼의 password input -->
<input type="password" name="new-password" autocomplete="new-password">
<input type="password" name="confirm-password" autocomplete="new-password">

 

 

⚠️ 두 속성을 사용하는 이유 

• new-password는 브라우저가 자동 입력을 하지 않도록 하면서도, '비밀번호 저장 제안'을 가능하게 한다.
• current-password는 브라우저가 기존에 저장된 비밀번호를 자동으로 채워줄 수 있도록 해준다.

 

 

👀 팁

• 로그인 폼의 비밀번호 필드에 autocomplete="new-password"를 넣으면 자동완성/자동입력이 안 돼서 UX가 나빠질 수 있다.
• autocomplete은 접근성과 UX 모두에 영향을 주기 때문에 정확하게 쓰는 게 중요하다.