온라인 랜덤 비밀번호 생성기

Last Updated: 2024년 10월 21일 2개 댓글

워드프레스로 온라인 랜덤 비밀번호 생성기를 만들어 보았습니다. 기본적으로 15자리 비밀번호가 생성하고, 패스워드 길이를 지정할 수 있고 대문자, 소문자, 숫자, 특수문자의 사용 여부를 선택할 수 있는 옵션을 추가했습니다.

온라인 랜덤 비밀번호 생성기

매번 비밀번호를 만드는 것이 번거로워서 개인적으로 사용하기 위해 랜덤 비밀번호 생성기를 만들었습니다.

비밀번호 생성기 페이지를 방문하면 기본적으로 15자리 비밀번호가 생성됩니다. 패스워드 길이는 2자리부터 50자리 길이까지 선택이 가능합니다.

대문자, 소문자, 숫자, 특수기호가 모두 기본적으로 포함되고, 원하는 경우 체크를 해제하여 포함되지 않도록 할 수 있습니다.

Redo 버튼을 누르면 다시 생성되며, 페이지를 다시 로드하거나 슬라이더를 왼쪽 또는 오른쪽으로 이동시켜 비밀번호 길이를 조정하는 경우에도 새로 생성됩니다.

참고로 온라인을 통해 무료로 이용할 수 있는 비밀번호 생성기를 이용할 경우 보안에 문제가 될 수 있다는 글을 본 적이 있습니다. 제가 만든 것은 생성된 비밀번호를 저장하는 기능이 없으므로 안심하고 사용하실 수 있습니다.😄

많은 사용자들이 각 사이트마다 비밀번호를 동일하게 만들 것이라 생각되는데요, 아시다시피 그런 경우 보안상 위험할 수 있습니다. 저는 AceText라는 프로그램을 약 20년 전부터 이용해오고 있습니다.😊

이와 같은 랜덤 패스워드 생성기를 만들고 싶은 경우 아래 코드를 참고할 수 있습니다.

랜덤 비밀번호 생성기 소스 코드

코드는 챗GPT를 사용하여 대부분 만들었지만, 일부 기능의 경우 챗GPT에서 제시하는 코드가 작동하지 않아서 직접 코드를 수정했습니다. 자바스크립트는 초보 수준이지만 서당개 삼년이면 풍월을 읊는다는 속담처럼 계속 접하게 되니 조금 실력이 느는 것 같습니다.😁

자바스크립트:

function generatePassword() {
    const length = parseInt(document.getElementById('passwordLength').value, 10);
    const includeUppercase = document.getElementById('includeUppercase').checked;
    const includeLowercase = document.getElementById('includeLowercase').checked;
    const includeNumbers = document.getElementById('includeNumbers').checked;
    const includeSymbols = document.getElementById('includeSymbols').checked;

    // 적어도 하나의 옵션이 선택되었는지 확인
    if (!includeUppercase && !includeLowercase && !includeNumbers && !includeSymbols) {
        alert("최소한 하나의 옵션을 선택해야 합니다.");
        return;
    }

    let charset = "";
    if (includeUppercase) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    if (includeLowercase) charset += "abcdefghijklmnopqrstuvwxyz";
    if (includeNumbers) charset += "0123456789";
    if (includeSymbols) charset += "!@#$%^&*()_+";

    let password = "";
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * charset.length);
        password += charset[randomIndex];
    }
    document.getElementById('passwordOutput').value = password;
}

function copyToClipboard() {
    const copyText = document.getElementById("passwordOutput");
    navigator.clipboard.writeText(copyText.value).then(function() {
        alert("비밀번호가 클립보드에 복사되었습니다!");
    }).catch(function() {
        alert("복사에 실패했습니다. 수동으로 복사해 주세요.");
    });
}

function updateSliderValue() {
    const slider = document.getElementById('passwordLength');
    const value = slider.value;
    document.getElementById('sliderValue').textContent = value;
    document.getElementById('passwordLengthInput').value = value; // 슬라이더와 입력 필드 동기화
    const percentage = (value - slider.min) / (slider.max - slider.min) * 100;
    slider.style.background = `linear-gradient(to right, red 0%, red ${percentage}%, grey ${percentage}%, grey 100%)`;
    generatePassword();
}

function updatePasswordLengthFromInput() {
    const inputField = document.getElementById('passwordLengthInput');
    const value = parseInt(inputField.value, 10);
    if (value >= 2 && value <= 50) { // 유효한 범위 내에서만 동작
        document.getElementById('passwordLength').value = value; // 입력 필드와 슬라이더 동기화
        document.getElementById('sliderValue').textContent = value;
        const slider = document.getElementById('passwordLength');
        const percentage = (value - slider.min) / (slider.max - slider.min) * 100;
        slider.style.background = `linear-gradient(to right, red 0%, red ${percentage}%, grey ${percentage}%, grey 100%)`;
        generatePassword(); // 비밀번호 생성
    } else {
        inputField.style.borderColor = "red"; // 유효하지 않은 경우 시각적 피드백 제공
    }
}

// 페이지 로드 시 초기 비밀번호 생성
generatePassword();

HTML 코드:

               <input type="text" id="passwordOutput" class="password-input" readonly>
                <button onclick="copyToClipboard()" class="copy-button">복사</button>
                <button onclick="generatePassword()" class="copy-button">Redo</button>
                <div style="clear:both;"></div>
                <div class="slider-container">
                    <input type="number" min="2" max="50" value="15" id="passwordLengthInput" oninput="updatePasswordLengthFromInput()" class="password-input" style="width: 80px; margin-right: 10px;">
                    <input type="range" min="2" max="50" value="15" class="slider" id="passwordLength" oninput="updateSliderValue()">
                    <span id="sliderValue" class="slider-value">15</span>
                </div>
                <div class="checkbox-option"><input type="checkbox" id="includeUppercase" checked onclick="generatePassword()"> <label>대문자</label></div>
                <div class="checkbox-option"><input type="checkbox" id="includeLowercase" checked onclick="generatePassword()"> <label>소문자</label></div>
                <div class="checkbox-option"><input type="checkbox" id="includeNumbers" checked onclick="generatePassword()"> <label>숫자</label></div>
                <div class="checkbox-option"><input type="checkbox" id="includeSymbols" checked onclick="generatePassword()"> <label>특수기호</label></div>

CSS 코드:


.password-input {
    width: calc(100% - 230px); /* 버튼 위치 변경으로 너비 수정 */
    height: 50px;
    padding: 10px 20px;
    font-size: 18px;
    border: 2px solid #ccc;
    border-radius: 30px;
    margin-right: 10px;
    float: left;
}

#passwordOutput {
    border-radius: 30px;
}

.copy-button {
    width: 100px;
    height: 50px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    float: left;
    margin-right: 10px;
}

.copy-button:hover {
    background-color: #0056b3;
}

.slider-container {
    position: relative;
    margin: 45px 0;
    display: flex; /* 숫자 필드와 슬라이더를 같은 라인에 표시 */
    align-items: center;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, red 0%, red 30%, grey 30%, grey 100%);
    outline: none;
    margin-left: 10px; /* 숫자 입력 필드와 간격 */
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider-value {
    position: absolute;
    bottom: -25px; /* 더 아래로 내리기 */
    left: 50%;
    transform: translateX(calc(-50% + 40px));
    color: #ffffff;
    font-size: 14px;
    pointer-events: none;
    background: #343a40; /* 다크 그레이 배경으로 modern한 느낌 */
    padding: 5px 10px; /* 적당한 패딩 추가 */
    border-radius: 12px; /* 부드러운 모서리 */
    border: 1px solid #495057; /* 약간 더 밝은 그레이로 테두리 */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* 가벼운 그림자 */
    font-weight: 500; /* 글자 두께 살짝 굵게 */
}



.checkbox-option {
    margin: 10px 0;
}

.checkbox-option input[type='checkbox'] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-color: #f8f8f8;
    border: 2px solid #d22;
    border-radius: 4px;
    position: relative;
}

.checkbox-option input[type='checkbox']:checked::before {
    content: '✔';
    position: absolute;
    left: 1px;
    top: -7px;
    color: #d22;
    font-size: 20px;
}

상황에 따라 적절히 응용하여 적용할 수 있을 것입니다. 기능적인 면을 변경하려면 자바스크립트 코드를 수정하시기 바랍니다.

저처럼 코딩을 어설프게 아는 사용자들은 챗GPT를 유용하게 활용할 수 있을 것 같습니다. 엉터리 답변이 종종 있지만, 잘 활용하면 시간과 노력을 단축하는 데 큰 도움이 됩니다.

챗GPT의 OpenAI는 자금 문제는 3년 내 MS에 인수될 것이라는 전망도 나오고 있네요. 엄청난 자금이 투입되기 때문에 챗GPT로 수익을 내는 것이 쉽지 않은 것으로 보입니다. 수익 악화 때문에 현재 월 20달러이 챗GPT 유료 요금제를 올 연말까지 22달러로 올리고, 2029년까지 순차적으로 44달러까지 올릴 예정이라고 합니다.

개인의 경우 10% 부가세(VAT)가 추가되기 때문에 조금 부담스러울 것 같지만, 이미 챗GPT에 의존하는 사용자들은 가격이 올라도 어쩔 수 없이 계속 사용하지 않을까 생각됩니다.

코딩이 목적인 경우 Claude AI도 성능이 괜찮은 것 같습니다. 챗GPT와 클로드 AI는 각각 장단점이 있지만, 코딩 성능만을 따졌을 때 클로드 AI가 미세하지만 앞서나지 않나 생각됩니다(참고).

둘 모두 사용하면 좋겠지만, 저는 챗GPT를 초기부터 이용해오고 있고 클로드 AI는 꼭 필요할 때에만 한 달씩 구독하여 사용하는 편입니다.

참고


2 개 댓글

Leave a Comment

    • 여러 가지 방법이 있을 것 같습니다. 챗GPT에 위의 코드를 입력하고 워드프레스 플러그인으로 만들어 달라고 하면 알아서 만들어주지 않을까 생각됩니다.😄 다른 워드프레스 페이지 템플릿을 사용했습니다.

      응답