워드프레스 프런트엔드 비밀번호 재설정 플러그인

워드프레스 사이트에서 사용자가 비밀번호를 분실한 경우 비밀번호 재설정 페이지에서 비밀번호 재설정 링크를 이메일로 전송하도록 할 수 있습니다. 비밀번호 재설정 페이지의 레이아웃을 사용자 입맛에 맞게 디자인하고 싶은 경우 Frontend Reset Password 플러그인을 사용할 수 있습니다.

이 플러그인을 사용하여 비밀번호 리셋 페이지, 비밀번호 재설정 요청 후 페이지, 비밀번호 재설정 성공 후 페이지, 비밀번호 리셋 이메일 등을 커스텀할 수 있습니다. 또한, 커스텀 로그인 페이지도 지정할 수 있습니다.

워드프레스 프런트엔드 비밀번호 재설정 플러그인

워드프레스 사이트에서 회원 비밀번호가 기억나지 않는 경우 로그인 페이지(사이트주소/wp-login.php)에서 비밀번호를 잊으셨나요?를 클릭하여 비번 리셋 링크가 담긴 이메일을 받을 수 있습니다.

다음과 같은 화면이 표시되면 사용자명 또는 이메일 주소를 입력하여 새 비밀번호를 재설정할 수 있는 링크가 포함된 메시지가 이메일 주소로 받을 수 있습니다.

Frontend Reset Password 플러그인

비밀번호 재설정 페이지의 레이아웃을 커스텀하고 싶은 경우 Frontend Reset Password 플러그인을 사용할 수 있습니다.

워드프레스 관리자 페이지 » 플러그인 » 새 플러그인 추가에서 Frontend Reset Password를 검색하여 이 플러그인을 설치하여 활성화할 수 있습니다.

이 플러그인을 설치하고 활성화하였다면 설정 » Frontend Reset Password에서 플러그인을 세팅할 수 있습니다.

Page Settings 섹션에서 몇 가지 페이지를 지정할 수 있습니다.

Reset Password Page: 비밀번호를 잊으셨나요?를 클릭했을 때 표시되는 페이지. 적당한 페이지를 만들고 [reset_password] 숏코드를 입력하면 비밀번호 재설정 이메일 전송을 위한 양식이 표시됩니다.

엘리멘터 페이지 빌더나 아바다 테마, Divi 테마 등을 이용하는 경우 페이지 빌더를 이용하여 이 페이지를 커스텀할 수 있습니다. 예를 들어, Divi 테마의 경우 적절한 레이아웃 페이지를 로드한 후에 적당한 곳에 [reset_password] 숏코드를 입력할 수 있습니다.

위의 그림에서는 "비밀번호 재설정"이라는 페이지를 만들어서 Reset Password로 지정한 경우를 보여줍니다.

테스트로 임의의 레이아웃 디자인을 로드하여 조금 수정해보았습니다.

위의 그림에서 비밀번호 재설정 양식 부분은 CSS를 사용하여 텍스트 크기, 색상 등 스타일을 원하는 대로 수정할 수 있습니다. 그리고 비밀번호 재설정 폼 내의 텍스트는 이 플러그인의 설정 페이지에서 지정할 수 있고 Email Address or Username 텍스트는 Loco Translate와 같은 플러그인을 사용하여 번역할 수 있을 것입니다.

Reset Email Sent 페이지에는 패스워드 리셋 이메일이 전송된 경우에 이동할 페이지를 지정합니다.

New Password Saved 페이지에는 사용자가 비밀번호를 성공적으로 변경한 경우 이동할 커스텀 페이지를 지정할 수 있습니다.

Custom Login Page에는 커스텀 로그인 페이지를 선택할 수 있습니다. 지정하지 않으면 wp-login 페이지가 사용됩니다.

Form Title과 Form Text에서는 비밀번호 재설정 양식의 제목과 텍스트를 지정할 수 있습니다. 양식 텍스트는 비주얼 모드와 텍스트 모드에서 텍스트를 입력할 수 있습니다. 원하는 경우 텍스트 모드에서 HTML 태그를 사용하여 입력하는 것도 가능합니다.

Emails 부분에서는 사용자에게 전송되는 이메일 양식을 커스텀할 수 있습니다. 그대로 두면 영문으로 된 메시지가 전송됩니다.

이메일 양식에서 사용자 이름은 {username}, 재설정 링크는 {reset_link} 코드를 사용합니다. 마찬가지로 비주얼 모드와 텍스트 모드에서 입력이 가능하며, 텍스트 모드에서 HTML 태그로 추가할 수도 있습니다.

예시:

<body style="font-family: Arial, sans-serif; margin: 20px; color: #333; background-color: #f4f4f4; line-height: 1.6;">
    <div style="background-color: #ffffff; padding: 20px; border-radius: 5px;">
        <h1 style="color: #333;">안녕하세요!</h1>
        <p><strong>{username}</strong>님의 계정 비밀번호 재설정 요청이 접수되었습니다.</p>
        <p>본 요청이 본인이 아닌 경우, 이 이메일을 무시하셔도 되며, 계정에는 아무런 변경도 발생하지 않습니다.</p>
        <p>비밀번호 재설정 링크: {reset_link}</p>
        <p>감사합니다!<br>고객지원팀</p>
    </div>
</body>

위와 같은 코드를 사용하면 다음과 비슷하게 이메일이 전송됩니다.

하지만 네이버 메일에서는 잘 작동하지 않습니다. 이 이슈는 잘 알려진 것 같습니다. 네이버 메일에서 서식이 유지되도록 하려면 이메일 템플릿 HTML 코드를 더욱 보수적으로 코딩해야 할 것 같습니다. (👉 네이버 메일에서도 작동하는 이메일 템플릿은 아래의 "추가: 네이버 메일에서 작동하는 이메일 템플릿 부분"을 참고해보세요.)

나머지 부분도 살펴보고 적절히 설정하도록 합니다.

사용자가 비밀번호 재설정 페이지에서 사용자 이름이나 이메일 주소를 입력하면 이메일로 비밀번호 초기화 링크가 포함된 메일이 전송됩니다. 링크를 클릭하면 아래와 같은 비밀번호를 새로 지정할 수 있는 양식이 표시됩니다.

Security 탭을 클릭하여 보안을 위해 비밀번호의 최소 길이를 설정할 수 있습니다. 기본값은 0이며 권장값은 8입니다.

추가: 네이버 메일에서도 작동하는 이메일 템플릿

상기에서 제시한 이메일 템플릿 HTML 태그를 사용할 경우 지메일에서는 잘 작동하지만 네이버 메일에서는 일부 서식이 작동하지 않습니다.

네이버 메일에서 스타일이 깨지는 문제는 주로 이메일 클라이언트의 CSS 지원 제한 때문에 발생합니다. 특히 네이버 웹메일은 Gmail과 달리 내부의 스타일시트를 모두 제거하고, 바디에 적용된 스타일도 무시하는 경향이 있습니다. 따라서 인라인 CSS만 사용하고, 신뢰성이 낮은 요소 대신 테이블 기반 레이아웃을 활용하는 것이 좋습니다.

예시:

<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; color: #333333; background-color: #f4f4f4; line-height: 1.6;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4" style="border-collapse: collapse; background-color: #f4f4f4;">
        <tr>
            <td align="center" style="padding: 40px;">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" style="border-collapse: collapse; background-color: #ffffff; border-radius: 5px;">
                    <tr>
                        <td style="padding: 20px; font-family: Arial, sans-serif; color: #333333; line-height: 1.6;">
                            <h1 style="margin: 0 0 10px 0; color: #333333;">안녕하세요!</h1>
                            <p style="margin: 0 0 10px 0;"><strong>{username}</strong>님의 계정 비밀번호 재설정 요청이 접수되었습니다.</p>
                            <p style="margin: 0 0 10px 0;">본 요청이 본인이 아닌 경우, 이 이메일을 무시하셔도 되며, 계정에는 아무런 변경도 발생하지 않습니다.</p>
                            <p style="margin: 0 0 10px 0;">비밀번호 재설정 링크: {reset_link}</p>
                            <p style="margin: 0; margin-top: 20px;">감사합니다!<br>고객지원팀</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

테스트를 해보니 네이버 메일과 지메일 모두에서 잘 작동하네요.

이메일이 전송되지 않는 경우

비밀번호 재설정 페이지에서 이메일 주소나 사용자 이름을 입력해도 이메일이 전송되지 않는 경우가 있습니다.

이 문제는 웹호스팅과 관련이 있으며 먼저는 웹호스팅 업체와 상의하시기 바랍니다. 클라우드웨이즈를 이용하는 경우 Elastic Email 애드온을 활성화하면 월 0.1달러에 1000통의 이메일 발송이 가능합니다.

경우에 따라 다른 메일 주소로는 문제 없이 들어가지만 지메일이나 한메일(다음 메일) 등 특정 메일 주소로는 전송이 안되는 경우도 있습니다.

이메일이 전송되지 않는 경우 다음 글을 참고하여 적절한 조치를 취하시기 바랍니다.

발송되는 이메일 수량이 많지 않은 경우 WP Mail SMTP 플러그인을 사용하면 지메일 서버를 통해 이메일을 전송할 수 있습니다. 하지만 이 플러그인은 설정이 까다롭고, 무엇보다 사이트 속도에 영향을 미칠 수 있으므로 사용 여부를 신중히 결정하시기 바랍니다. (WP Mail SMTP 무료 버전은 멀티사이트에서는 작동하지 않습니다.)