내가 뭘 쳤는지 볼 수 있게

KRDS SP-077 — 비밀번호를 표시할 수 있는 옵션을 제공하고 있다.

0. 들어가며 — 비밀번호가 점으로만 보여 틀렸나 확인 못 하면

이번 751편은 비밀번호를 표시할 수 있는 옵션을 제공하라는 규칙입니다.

비밀번호는 — 보통 점(●)으로 가려지죠. 그런데 — 사용자가 자기가 제대로 쳤는지 확인하고 싶을 때, 잠깐 볼 수 있는 옵션 (눈 아이콘)이 없으면 답답하죠. SP-077은 비밀번호 표시 옵션을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 비밀번호 표시 옵션

SP-077 (서비스 패턴 > 로그인 > 로그인 정보 입력) “비밀번호를 표시할 수 있는 옵션을 제공하고 있다.”

비밀번호를 표시할 수 있는 옵션을 제공하라는 뜻입니다.

정리: 비밀번호 표시 옵션(보기/숨기기)을 제공하라. 이게 SP-077입니다.

2. 왜 비밀번호 표시 옵션인가

비밀번호는 보안을 위해, 보통 점(●●●)으로 가려집니다. 어깨너머 훔쳐보기(shoulder surfing)를 막기 위해서죠. 그런데 가려져만 있으면, 사용자가 자기가 제대로 쳤는지 확인 못 합니다. SP-077은 표시 옵션을 요구합니다.

표시 옵션이 없을 때의 문제:

오타 확인 불가 비밀번호가 점으로만 보이면, 사용자는 자기가 제대로 쳤는지 모릅니다. 오타가 나도 확인 못 하죠. 특히 복잡한 비밀번호(대소문자·특수문자)는 더요.

반복 실패 오타를 못 봐서, 로그인 실패가 반복됩니다. 답답하고 시간이 걸리죠.

모바일 더 어려움 모바일 작은 키보드로는, 오타가 더 잦은데 확인도 어렵습니다.

그래서 SP-077은 — 표시 옵션을 요구합니다:

보기/숨기기 토글 비밀번호 입력 필드에, ‘표시’(눈 아이콘 👁) 옵션을 둡니다. 누르면 점(●)이 실제 글자로 보이고, 다시 누르면 가려지죠. 사용자가 원할 때 잠깐 확인하게요.

기본은 가림 기본 상태는 가림(점)으로요. 보안을 위해서요. 사용자가 능동적으로 ’표시’를 눌렀을 때만 보이게요.

명확한 토글 눈 아이콘(보기/숨기기)을, 명확히요. 현재 상태(보이는지 가렸는지)도 알게요. 접근성도 갖춰요 (aria-label ‘비밀번호 표시’, aria-pressed 상태).

보안 vs 사용성 균형. 비밀번호 가림은 보안, 표시 옵션은 사용성입니다. 표시 옵션은, 이 둘의 균형을 맞춥니다: 기본은 가려 보안을 지키되, 사용자가 원하면 잠깐 봐서 오타를 확인하게요. 사용자가 통제하죠.

WCAG·사용성 권장. 비밀번호 표시 옵션은, 사용성·접근성 측면에서 널리 권장됩니다. 인지·운동 장애 사용자, 복잡한 비밀번호 입력에 특히 도움이 되죠. 오타로 인한 좌절을 줄입니다.

입력 보존(BP-066·077)과 연계. 로그인 실패 후에도, 입력한 비밀번호를 함부로 지우지 않고(BP-066·077), 표시 옵션으로 확인·수정하게 하면 더 좋죠. 다만 보안상 비밀번호는 상황에 따라 재입력하기도 합니다.

이 규칙은 로그인(SP)의 ’비밀번호 입력 편의’를 담당합니다 — 비밀번호 표시 옵션을 제공해(077), 사용자가 오타를 확인해 로그인 실패를 줄이게 하죠. 보안과 사용성의 균형입니다.

정리하면 — 비밀번호가 가려져만 있으면 오타를 확인 못 해 로그인 실패가 반복되므로, 기본은 가리되 사용자가 원할 때 잠깐 볼 수 있는 표시 옵션(눈 아이콘 토글)을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

표시 옵션 — 비밀번호 보기/숨기기 토글(눈 아이콘)이 있는가.

기본 가림 — 기본 상태가 가림(점)인가(보안).

접근성 — 토글에 접근가능한 이름·상태가 있는가(aria-label/pressed).

개선 방향

비밀번호 필드에 보기/숨기기 토글(눈 아이콘). 기본은 가림.

명확한 토글·현재 상태. 접근성(aria-label ‘비밀번호 표시’, aria-pressed).

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	표시 토글 구현
디자이너	눈 아이콘 디자인

기관 유형	SP-077 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (비밀번호 로그인 제공 시)

비밀번호 입력 로그인을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 비밀번호 보기/숨기기 토글(눈 아이콘)이 있나요?

□ 기본 상태가 가림(점)인가요(보안)?

□ 토글에 접근가능한 이름·상태가 있나요(aria-label/pressed)?

❓ FAQ

Q1. 비밀번호를 보여주면 보안에 안 좋지 않나요? 기본은 가립니다(보안). 사용자가 원할 때만 잠깐 보게요. 기본 가림(보안) + 선택적 표시(사용성)의 균형이죠. 사용자가 통제합니다. Q2. 표시 옵션이 왜 필요한가요? 점으로만 보이면 오타를 확인 못 해 로그인 실패가 반복됩니다. 특히 복잡한 비밀번호· 모바일에서요. 잠깐 보면 오타를 확인하죠. Q3. 접근성은요? 눈 아이콘 토글에 접근가능한 이름(‘비밀번호 표시’)과 상태(aria-pressed)를 줍니다. 스크린 리더 사용자도 보기/숨기기를 인지·조작하게요.

6. 마무리

SP-077의 메시지:

내가 뭘 쳤는지 볼 수 있게 — 비밀번호 표시 옵션을 제공하라.

비밀번호가 가려져만 있으면 오타를 확인 못 해 실패가 반복됩니다. 기본은 가리되 원할 때 보는 옵션으로 오타를 확인하게 하는 게 핵심이죠. 다음 편은 복사/붙여넣기 제한 금지입니다.

다음 편 예고 ▶ 「752. (SP-078) 복사/붙여넣기를 제한하고 있지 않다.」

ViewCheck는 비밀번호 표시 옵션이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 로그인 가이드 — https://www.krds.go.kr/html/site/service/service_03.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준