극초보 바이브코딩 #12 · HTML 파일 하나

안전한 비밀번호 만들기

"내 생일 + 1234" 대신 클릭 한 번. 비밀번호 페이지에서 가장 중요한 건 무작위가 정말 무작위인가예요. 무작위에도 질이 있거든요.

바로 쓰기: 비밀번호 만들기

보안용 난수(crypto.getRandomValues)로, 한쪽으로 쏠리지 않게 뽑아요. 만든 비밀번호는 저장하지도, 보내지도 않아요. 새로고침하면 사라지니 바로 비밀번호 관리자에 저장하세요.

1AI에게 세 줄로 요청하기

HTML 파일 하나로, 비밀번호를 만들어 주는 페이지를 만들어줘.
버튼을 누르면 16자리 비밀번호가 크게 나오게 해줘.
인터넷 연결이나 설치 없이 파일 하나로 동작하게 해줘.

연습으로 만든 비밀번호는 실제 계정에 쓰지 마세요. 그리고 진짜 내 비밀번호를 AI 대화창에 쓰거나 붙여넣지 마세요.

2연습장에서 실행하기

연습장은 AI가 준 코드가 어떤 무작위를 쓰는지 몰래 세어 봐요. 자동 검사가 버튼을 수십 번 눌러 보며 규칙대로 나오는지도 확인해요.

3미션: 믿을 수 있는 무작위로

  1. 기본: 누를 때마다 다른 16자리

    버튼을 누르면 16자리 비밀번호가 나오고, 누를 때마다 바뀌어야 해요.

  2. 이 무작위는 믿을 수 있을까 ⭐

    AI에게 "무작위 글자를 어떤 방법으로 뽑고 있어? 코드 말고 말로 설명해줘. 보안이 중요한 용도에 맞는 방법이야?"라고 물어보세요. 일반 난수(Math.random)라면 "보안에 쓰는 무작위로 바꿔줘"라고 하면 돼요.

  3. 길이와 글자 종류 고르기

    8~40자 슬라이더와 소문자·대문자·숫자·특수문자 체크 상자. 힌트: "고른 종류마다 최소 한 글자는 꼭 들어가게 해줘"를 말해야 해요. 아무것도 안 골랐을 때도 정하세요.

  4. 복사 버튼

    한 번에 복사하고 "복사했습니다"라고 알려 주게. "실패하면 실패했다고 알려줘"도 말해 두면 좋아요.

  5. 헷갈리는 글자 빼기

    0과 O, 1과 l과 I. 빼는 글자를 직접 적어서 알려 주고, 켰을 때 정말 안 나오는지 여러 번 눌러 확인하세요.

  6. 자유

    강도 막대, 여러 개 한 번에, 외우기 쉬운 단어 조합… AI에게 직접 비밀번호를 만들어 달라고 해 보기도 (아래 실험을 보고 실제로 쓰지는 마세요)

안 될 때 확인할 것

증상원인과 해결
누를 때마다 똑같은 비밀번호"버튼을 누를 때마다 매번 다른 비밀번호가 나오게 해줘"
숫자나 특수문자가 없을 때가 있다"고른 종류마다 최소 한 글자는 꼭 들어가게 해줘"
사이트에서 "사용할 수 없는 문자"라고 한다특수문자를 끄거나 "특수문자는 ! @ # $만 쓰게 해줘"처럼 직접 지정
복사가 안 된다드래그해서 Ctrl+C, 또는 파일로 저장해서 열기
외워지지 않는다비밀번호 관리자(브라우저 저장 기능 등)에 맡기고, 외우는 건 관리자 비밀번호 하나만

실험 ①: 보안용 난수도 "쏠리게" 뽑을 수 있다

일반 난수는 보안용이 아니고, 비밀번호는 보안용 난수를 써야 한다는 그림

보안용 난수는 0~255 숫자(바이트)로 나와요. 글자 62개 중 하나를 뽑으려고 이 숫자를 62로 나눈 나머지를 쓰면, 256은 62로 나누어떨어지지 않아서(나머지 8) 앞 8글자만 조금 더 자주 뽑혀요. 직접 뽑아 볼까요?

블로그 원문에서는 620만 번 뽑아 앞 8글자가 1.211배, 나머지가 0.969배로 이론값 비율(5:4)과 일치했어요. 이 정도 쏠림이 실제로 비밀번호를 뚫는 데 얼마나 도움이 되는지는 따로 확인하지 않았어요.

실험 ②: 강도는 "길이"가 키운다

강도를 비트로 세면 길이 × log₂(글자 후보 수)예요. 비트가 1 늘면 경우의 수가 2배. 아래 표는 이 브라우저가 계산한 값이에요. "몇 년 걸려 뚫린다"는 뜻이 아니라 경우의 수의 크기를 비교하는 용도예요.

실험 ③: AI에게 "비밀번호 하나 만들어줘" 하면?

AI가 만든 비밀번호는 글자·글자·숫자·기호 리듬이 반복되고, 진짜 무작위는 불규칙하다는 그림

원문에서 같은 질문을 세 번 했더니 세 번 모두 "글자 글자 숫자 기호" 리듬이 보였어요. 셋째는 이 리듬을 정확히 네 번 반복한 모양이었는데, 85글자에서 정말 하나씩 무작위로 뽑았다면 이런 모양이 나올 확률은 약 5천만분의 1이에요. (세 번 해 본 결과일 뿐이고, 왜 그런지는 추정이에요.) 아래에 비밀번호를 넣으면 리듬을 보여 줘요. 진짜 쓰는 비밀번호는 넣지 마세요. (넣어도 이 브라우저 밖으로는 안 나가요)

파랑 = 글자, 주황 = 숫자, 청록 = 기호. 위 도구에서 만든 비밀번호를 넣어 비교해 보세요.

결론은 간단해요. 비밀번호는 AI에게 받는 게 아니라 보안용 난수로 만들어야 해요. 사이트마다 다르게 쓰고, 비밀번호 관리자에 맡기세요.

블로그 원문: 극초보 바이브코딩 #12는 블로그에 곧 올라와요

이전 실습: #11 집중 타이머 · 다음: #13 할 일 체크리스트 · 전체 실습 목록

자주 묻는 질문

Math.random은 왜 비밀번호에 쓰면 안 되나요?

개발자 문서(MDN)에 Math.random은 암호용으로 안전한 난수를 주지 않으니 보안 관련에는 crypto.getRandomValues를 쓰라고 적혀 있어요. 게임이나 추첨에는 충분해요.

특수문자를 꼭 넣어야 하나요?

강도는 글자 종류보다 길이가 더 크게 키워요. 사이트가 특수문자를 요구하지 않는다면 소문자+숫자로 길게 만드는 것도 방법이에요.

만든 비밀번호가 어딘가에 남나요?

아니요. 저장도 전송도 하지 않아요. 새로고침하면 사라져요.