워드프레스로 사이트를 제작할 경우 사이트에 회원제 기능을 추가할 필요가 종종 생깁니다. 멤버십 사이트를 만들거나 혹은 회원들이 직접 로그인하여 글이나 콘텐츠를 올릴 수 있게 하는 사이트를 만드는 경우 등 종류는 다양하겠죠.
이럴 때는 워드프레스에 회원가입 기능과 로그인 기능 등 회원(또는 사용자) 관리와 관련된 기능을 추가해 줄 수 있습니다.
워드프레스는 기본적으로 회원 관리와 관련된 기능을 제공합니다. 예를 들면 관리자 대시보드 “설정 > 일반” 메뉴에 들어가면 “멤버쉽” 이라는 이름으로 “누구나 가입할 수 있습니다.” 항목을 체크할 수 있는 체크박스가 제공되는데, 이 체크박스를 활성화 시킬 경우 워드프레스의 로그인 화면 하단에 “회원가입”이라는 메뉴가 활성화됩니다.
그리고 이 “회원가입” 링크를 클릭했을 때는 별도의 회원가입 양식이 표시되어 새 사용자를 가입하게끔 만들 수 있습니다.
하지만 워드프레스가 기본으로 제공하는 기능만으로는 무언가 아쉬운 경우가 생깁니다. 무엇보다 워드프레스의 기본 로그인/회원가입 UI가 일반적인 다른 웹사이트들의 로그인 UI와 달라서 사용자들에게 익숙하게 다가오지 못합니다. 게다가 회원가입 절차 또한 통상적으로 익숙한 프로세스가 아니라서 조금 생뚱맞게 느껴지기도 하죠.
해서 워드프레스 생태계에는 이런 워드프레스의 기본 사용자 관리 기능을 보완해주는 많은 솔루션들이 나와 있습니다. 일전에 저희 가이드에서도 몇몇 솔루션을 소개해 드린 적이 있구요.
위 솔루션들은 각각 Theme My Login 플러그인과 WP-Members 플러그인을 사용해서 구현했었는데요.
이번엔 또 다른 인기있는 플러그인인 얼티밋 멤버(Ultimate Member)를 사용하여 워드프레스에 회원가입과 로그인 처리를 할 수 있는 방법을 소개합니다.
Ultimate Member 설치하기
우선 Ultimate Member 플러그인(이하 줄여서 ‘UM’으로 표기)을 설치해야 겠죠. UM은 워드프레스 플러그인 디렉터리에 등록된 플러그인이기 때문에 워드프레스 관리자 대시보드의 “플러그인 추가”메뉴에서 바로 설치 가능합니다.
플러그인을 설치하고 활성화시키면 아래와 같은 알림창이 대시보드 상단에 표시됩니다.
첫 번째 알림창은 UM의 프리미엄 기능들을 소개하는 마케팅 알림이니 그냥 무시하고, 두 번째 알림의 “Create Pages” 버튼을 클릭합니다.
이 버튼을 누르면 UM이 사용자 관리에 필요한 여러 페이지들을 자동으로 생성하고 UM과 맵핑 시켜 줍니다. 이렇게 맵핑된 페이지는 한번 맵핑되고 나면 별다른 일이 없는 한 손댈 일은 거의 없습니다.
실제로 생성된 페이지들은 관리자 대시보드 “페이지” 메뉴에서 확인할 수 있습니다.
여기까지 잘 되었나요? 혹시라도 무심코 페이지 생성하는 것을 놓쳤다면? 걱정 마세요! 플러그인을 삭제했다가 재설치하면 되니까요. (안된다구요? 그럼 댓글로!! ㅎㅎ)
이제 브라우저의 URL 창에서 /login 화면에 한번 접속해 보세요. 방금 UM이 생성한 로그인 창(페이지)이 아래와 같이 표시될 것입니다.
회원가입도 마찬가지입니다. “회원가입” 버튼을 눌러 보면 알 수 있겠죠?
여기까지가 끝입니다. 단순히 플러그인 설치하고 “Create Pages” 버튼 한번 누르기만 했는데 로그인과 회원가입에 관련된 모든 것들이 셋팅 완료 되었네요! 짝짝!!
회원가입 폼 수정하기
앗! 그런데 회원가입 폼이 조금 거추장스럽죠? 굳이 사용자 이름을 입력받고 싶지 않을 수도 있고 이름 따로 성 따로 받을 필요가 없을 수도 있습니다. 이럴 땐 관리자 대시보드 “얼티밋 멤버 > 폼” 메뉴로 가서 “Default Registration” 폼을 수정하면 됩니다.
여기서는 간단하게 “Last Name”만 삭제. 그리고 “업데이트”한 다음 다시 회원가입 폼을 보면 이번엔 “성” 부분이 없어진 것을 확인할 수 있을 것입니다.
자, 그럼 이제 회원 가입을 한번 해 볼까요? 아무 사용자나 하나 만들어 회원 가입을 해 보죠.
이렇게 회원 가입을 하게 되면 새로 추가된 회원은 워드프레스 사이트의 사용자로 추가 됩니다. 워드프레스 대시보드 “사용자” 메뉴에서 보면 새 사용자가 추가된 것을 확인할 수가 있겠죠.
그런데 여기서 잠깐! 새로 추가된 사용자의 “역할(roles)”이 “구독자”로 되어 있을 것입니다. 이건 워드프레스의 “새 사용자 기본 역할” 디폴트값에 따른 것입니다.
실제로 UM에서는 워드프레스가 기본으로 제공하는 사용자 역할 대신, 자체적으로 역할을 만들어 사용할 수 있고 또 그렇게 사용하길 권장하고 있습니다. 예를 들어, 사용자의 역할을 “일반 사용자”, “슈퍼 유저” 이런 식으로 나눠 각각 권한을 다르게 가져갈 수도 있겠죠.
이 부분은 관리자 대시보드 “얼티밋 멤버 > 사용자 역할” 메뉴에서 처리할 수 있으며, 자세한 설명은 지면 관계상 생략합니다.
개인 프로필 페이지 수정하기
자, 여기까지 잘 되나요? 성공적으로 로그인이 되었다면 아마도 다음과 같이 사용자 로그인을 거쳐 바로 사용자(여기서는 “데이브”)의 개인 프로필 페이지가 표시될 것입니다.
개인 프로필 페이지는 사용자 개인이 자신의 프로필을 관리할 수 있는 공간이며, 이 역시 UM 설정을 통해 어느 정도 조정이 가능합니다. “얼티밋 멤버 > 설정” 메뉴에서 보면 “일반” 탭 아래 각각 “사용자”, “내 정보”, “업로드” 등을 조정할 수 있는 항목이 나와 있고,
또한 “외모” 탭에도 프로필 관련 조정할 수 있는 항목들이 나와 있습니다.
이들 항목들의 값을 적절하게 조정하면 좀 더 자신의 사이트에 맞는 프로필 페이지를 구성할 수 있을 것입니다.
프로필 페이지 설정과 관련된 더 자세한 내용은 UM 공식 문서 Ultimate Member Profile Page – Documentation를 참조하세요.
메뉴 추가하기
프로필 페이지 셋팅이 끝났으면 이제 메뉴를 구성할 차례입니다. 내 사이트 메뉴에 “로그인”과 “회원가입” 메뉴를 추가하여 사용자들이 행동할 수 있도록 해야겠죠?
메뉴를 추가하는 방법은 일반적으로 워드프레스에서 메뉴를 추가하는 방법 대로 하면 됩니다. 관리자 대시보드 “테마 디자인 > 메뉴”로 가서 필요한 메뉴들을 추가합니다. 여기서는 “회원가입”, “로그인”, “로그아웃”, “사용자”, “내정보” 메뉴를 다음과 같이 추가했습니다.
이제 메뉴를 저장하고 사이트로 돌아와 보면 다음과 같이 사이트 네비게이션에 메뉴가 반영된 것을 확인할 수 있습니다. (참고로 이 글에서 사용한 테마는 Astra 테마입니다)
앗, 그런데 뭔가 이상하죠? 이미 로그인한 상태인데 “회원가입”과 “로그인” 메뉴가 또 나와 있다는 건 어딘지 좀 생뚱맞죠?
다시 대시보드로 와서 메뉴를 약간 조정하겠습니다. UM은 이미 이런 경우에 대비, 조건부 메뉴 기능을 제공하고 있기 때문에 간단하게 문제를 해결할 수 있습니다.
예를 들어, “로그인” 메뉴는 로그아웃 상태인 경우만 표시되어야 겠죠? “Ultimate Members Menu Settings”에서 “메뉴 링크 보기 권한”을 “Logged Out Users”로 맞추면 됩니다.
나머지 메뉴들도 마찬가지입니다. 각각 상황에 맞게 조정해 주고 메뉴를 저장하면 이제 다음과 같이 제대로 표시될 것입니다.
(로그인 이전)
(로그인 후)
잘 되었나요?
몇 가지 후처리
얼추 다 된 것 같네요. 간단한 기능인데 설명이 좀 길어 졌군요. 마지막으로 두어 가지 자주 필요한 기능만 간단히 언급하고 글을 마치도록 하겠습니다.
개인정보 보호와 서비스 이용약관 처리
우선, 약관 동의 부분. 회원가입 폼에서는 “약관 동의” 체크 박스를 두어 회원 가입 시에 약관에 대한 사용자 동의를 받는 게 일반적이죠.
UM에서도 이 기능을 제공합니다.
앞서 소개한 회원가입 폼 수정하기 부분에서 보면, 가입 폼 수정화면 좌측에 “Privacy Policy” 박스가 나와 있습니다.
이 값을 활성화시키면 회원 가입 폼에 약관 동의하기 체크박스가 추가됩니다.
이 때 표시 문구는 자신의 사이트에 맞게끔 조정하면 되겠죠.
만약 “개인정보 보호정책(Privacy Policy)” 외에 “서비스 이용 약관(Terms & Conditions)”에 대한 체크박스 또한 필요로 한다면, UM이 제공하는 무료 플러그인 확장인 Ultimate Member – Terms & Conditions를 추가해 주면 됩니다. 사용법은 앞서와 똑같기에 생략합니다.
참고로, 회원가입 폼에서 “Show privacy policy” 링크를 클릭 했을 때 약관 내용이 화면 전체에 걸쳐 표시되어 보기에 불편할 수 있습니다. 이 때는 CSS 스타일링으로 약관 표시 부분을 약간만 조정해 주면 다음과 같이 ‘예쁘게’(?) 표시할 수 있습니다.
워드프레스 기본 로그인 방지
UM을 설치하여 로그인 창을 만들었다고 하더라도 워드프레스의 기본 로그인 화면이 사라지지는 않으며 사용자는 여전히 /wp-login.php 또는 /wp-admin/ 등의 URL로 바로 접속하여 워드프레스 기본 로그인 창을 볼 수 있습니다.
UM은 이 부분에 대해서는 별도의 방지 조치를 취하고 있지 않은데, 그 이유는 아마도 이 부분이 워드프레스의 보안(security)과 관련된 부분이며, 따라서 UM이 일률적으로 제어하기 보단 사용자가 직접 판단하여 처리하게끔 하려는 의도인 듯 보입니다.
아무튼 만약 이런 방식의 사용자 액세스가 불편하다면 간단하게 막을 수 있습니다. 워드프레스 플러그인 중에 이 기능을 지원하는 플러그인들이 여럿 나와 있으며, 여기서는 그 중 유명한 WPS Hide Login 플러그인을 사용해 보겠습니다.
이 플러그인을 설치하면 관리자 대시보드 상에 다음과 같이 로그인 URL을 제어할 수 있는 항목이 만들어 집니다.
이 부분에서 “Login url” 값과 “Redirection url” 값을 조정하면 사용자가 워드프레스 기본 로그인 URL로 액세스했을 때도 UM의 로그인 화면이 표시되게 만들 수 있습니다. 굳이 그럴 필요까지 있을까 싶습니다만, 암튼! 필요한 분들은 참고하세요!! 🙂
0 thoughts on “Ultimate Member로 사용자 로그인 처리하기”